fixed scroll lock issue

bible-technology · Jan 18, 2024 · 83b771e · 83b771e
1 parent 3ae86ee
commit 83b771e
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 22 deletions.
diff --git a/renderer/src/components/EditorPage/TextEditor/Editor.jsx b/renderer/src/components/EditorPage/TextEditor/Editor.jsx
@@ -123,7 +123,7 @@ export default function Editor(props) {
   function onReferenceSelected({ chapter, verse }) {
     chapter && setChapterNumber(chapter);
     verse && setVerseNumber(verse);
-    scrollReference(chapter, verse);
+    !scrollLock && scrollReference(chapter, verse);
   }
 
   const observer = new IntersectionObserver((entries) => onIntersection({
@@ -147,7 +147,7 @@ export default function Editor(props) {
     addSequenceId,
     components: {
       block: (__props) => RecursiveBlock({
-        htmlPerf, onHtmlPerf: saveHtmlPerf, sequenceIds, addSequenceId, onReferenceSelected, setCaretPosition, setSelectedText, ...__props,
+        htmlPerf, onHtmlPerf: saveHtmlPerf, sequenceIds, addSequenceId, onReferenceSelected, setCaretPosition, setSelectedText, scrollLock, ...__props,
       }),
     },
     options: {

diff --git a/renderer/src/components/EditorPage/TextEditor/RecursiveBlock.jsx b/renderer/src/components/EditorPage/TextEditor/RecursiveBlock.jsx
@@ -33,6 +33,7 @@ export default function RecursiveBlock({
   onReferenceSelected,
   setCaretPosition,
   setSelectedText,
+  scrollLock,
   ...props
 }) {
   const [currentVerse, setCurrentVerse] = useState(null);
@@ -53,15 +54,14 @@ export default function RecursiveBlock({
       setSelectedText(selectedText);
     }
   }
-
   const checkCurrentVerse = () => {
     if (document.getSelection().rangeCount >= 1 && onReferenceSelected) {
       const range = document.getSelection().getRangeAt(0);
       const selectedNode = range.startContainer;
       const { verse } = getCurrentVerse(selectedNode);
       const chapter = getCurrentChapter(selectedNode);
       onReferenceSelected({ bookId, chapter, verse });
-      hightlightRefVerse(chapter, verse);
+      !scrollLock && hightlightRefVerse(chapter, verse);
     }
     updateCursorPosition();
     handleSelection();
@@ -86,8 +86,10 @@ export default function RecursiveBlock({
       }
       prevNode ? setCurrentVerse(prevNode.dataset.attsNumber) : {};
     }
-    checkCurrentVerse();
-    updateCursorPosition();
+    if ([37, 38, 39, 40].includes(event.keyCode)) {
+      checkCurrentVerse();
+      updateCursorPosition();
+    }
   };
 
   function onPasteHandler(event) {

diff --git a/renderer/src/components/EditorPage/TextEditor/utils/getReferences.js b/renderer/src/components/EditorPage/TextEditor/utils/getReferences.js
@@ -12,18 +12,14 @@ export const getCurrentVerse = (currentNode) => {
   return { verse, verseText };
 };
 
-// export const hightlightRefVerse = (chapter, verse) => {
-//   const refEditor = document.getElementById('ref-editor');
-//   const verseInView = refEditor.querySelector(`#ch${chapter}v${verse}`);
-//   const { verseText } = getCurrentVerse(verseInView);
-
-//   const range = document.createRange();
-//   range.setStart(verseInView, 0);
-//   range.setEnd(verseText, verseText.textContent.length);
-//   const selection = document.getSelection();
-//   selection.removeAllRanges();
-//   selection.addRange(range);
-// };
+export const removeHighlightFromRefVerse = ({ c, v }) => {
+  const refEditors = document.getElementsByClassName('ref-editor');
+  refEditors.length > 0 && Array.prototype.filter.call(refEditors, (refEditor) => {
+    const prevHighlight = refEditor.querySelector(`#ch${c}v${v}`).nextElementSibling;
+    const hightlightText = prevHighlight && prevHighlight.innerHTML;
+    prevHighlight && prevHighlight.replaceWith(hightlightText);
+  });
+};
 
 export const hightlightRefVerse = (() => {
   let prevCV;
@@ -33,12 +29,15 @@ export const hightlightRefVerse = (() => {
       if (!(prevCV && prevCV.c !== c)) {
         const verseInView = refEditor.querySelector(`#ch${c}v${v}`);
         const { verseText } = getCurrentVerse(verseInView);
+        // highlight verse
         const range = document.createRange();
-        range.setStart(verseInView, 0);
+        range.setStart(verseText, 0);
         range.setEnd(verseText, verseText.textContent.length);
-        const selection = document.getSelection();
-        selection.removeAllRanges();
-        selection.addRange(range);
+        const newSpan = document.createElement('span');
+        newSpan.classList.add('bg-primary-50');
+        range.surroundContents(newSpan);
+        // remove highlight from previous verse
+        prevCV && removeHighlightFromRefVerse({ ...prevCV });
       }
     });
     prevCV = { c, v };