Text editor sync with Navigation panel and Reference Translation helps (

#288) * Connected navigation and editor panel * Connected the translation helps resources with Editor panel
bible-technology · Jan 5, 2024 · 3048b88 · 3048b88
1 parent d29c0e6
commit 3048b88
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 10 deletions.
diff --git a/renderer/src/components/EditorPage/TextEditor/Editor.jsx b/renderer/src/components/EditorPage/TextEditor/Editor.jsx
@@ -1,4 +1,6 @@
-import React, { useContext, useEffect } from 'react';
+import React, {
+ useContext, useEffect, useLayoutEffect, useRef,
+} from 'react';
 import { HtmlPerfEditor } from '@xelah/type-perf-html';
 
 import LoadingScreen from '@/components/Loading/LoadingScreen';
@@ -12,7 +14,7 @@ import { functionMapping } from './utils/insertFunctionMap';
 import RecursiveBlock from './RecursiveBlock';
 // eslint-disable-next-line import/no-unresolved, import/extensions
 import { useAutoSaveIndication } from '@/hooks2/useAutoSaveIndication';
-import { onIntersection } from './utils/IntersectionObserver';
+import { onIntersection, scrollReference } from './utils/IntersectionObserver';
 
 export default function Editor(props) {
   const {
@@ -98,14 +100,35 @@ export default function Editor(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [triggerVerseInsert]);
 
+  const isScrolling = useRef(false);
+  useLayoutEffect(() => {
+    const handleScroll = () => {
+      isScrolling.current = true;
+    };
+    const handleScrollEnd = () => {
+      isScrolling.current = false;
+    };
+    const editorDiv = document.getElementById('fulleditor');
+    // Adding scroll and click event listeners
+    editorDiv.addEventListener('scroll', handleScroll);
+    editorDiv.addEventListener('click', handleScrollEnd);
+    return () => {
+      editorDiv.removeEventListener('scroll', handleScroll);
+      editorDiv.removeEventListener('click', handleScrollEnd);
+    };
+  }, []);
+
   useAutoSaveIndication(isSaving);
 
   function onReferenceSelected({ chapter, verse }) {
     chapter && setChapterNumber(chapter);
     verse && setVerseNumber(verse);
+    scrollReference(chapter);
   }
 
-  const observer = new IntersectionObserver((entries) => onIntersection({ setChapterNumber, scrollLock, entries }), {
+  const observer = new IntersectionObserver((entries) => onIntersection({
+    scroll: isScrolling.current, setChapterNumber, scrollLock, entries, setVerseNumber,
+  }), {
     root: document.querySelector('editor'),
     threshold: 0,
     rootMargin: '0% 0% -60% 0%',
@@ -140,6 +163,7 @@ export default function Editor(props) {
 
   return (
     <div
+      id="fulleditor"
       style={{
         fontFamily: selectedFont || 'sans-serif',
         fontSize: `${fontSize}rem`,

diff --git a/renderer/src/components/EditorPage/TextEditor/index.jsx b/renderer/src/components/EditorPage/TextEditor/index.jsx
@@ -29,7 +29,7 @@ export default function TextEditor() {
 
   const {
     state: { bookId, selectedFont },
-    actions: { handleSelectedFont },
+    actions: { handleSelectedFont, onChangeChapter, onChangeVerse },
   } = useContext(ReferenceContext);
 
   const {
@@ -56,6 +56,12 @@ export default function TextEditor() {
     setBookChange(true);
   }, [bookId]);
 
+  useEffect(() => {
+    onChangeChapter(chapterNumber, 1);
+    onChangeVerse(verseNumber, 1);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chapterNumber, verseNumber]);
+
   const { catalog } = useCatalog({ proskomma, stateId, verbose });
   const { id: docSetId, documents } = (done && catalog.docSets[0]) || {};
   if (done) {

diff --git a/renderer/src/components/EditorPage/TextEditor/utils/IntersectionObserver.js b/renderer/src/components/EditorPage/TextEditor/utils/IntersectionObserver.js
@@ -9,12 +9,17 @@ export const scrollReference = (chapterNumber) => {
   });
 };
 
-export const onIntersection = ({ entries, setChapterNumber, scrollLock }) => {
-  // eslint-disable-next-line no-restricted-syntax
-  for (const entry of entries) {
-    if (entry.isIntersecting) {
-      setChapterNumber(entry.target.dataset.attsNumber);
-      scrollLock === false ? scrollReference(entry.target.dataset.attsNumber) : {};
+export const onIntersection = ({
+ scroll, entries, setChapterNumber, scrollLock, setVerseNumber,
+}) => {
+  if (scroll) {
+    // eslint-disable-next-line no-restricted-syntax
+    for (const entry of entries) {
+      if (entry.isIntersecting) {
+        setChapterNumber(entry.target.dataset.attsNumber);
+        setVerseNumber(1);
+        scrollLock === false ? scrollReference(entry.target.dataset.attsNumber) : {};
+      }
     }
   }
 };