versewise navigation with arrow keys.

bible-technology · Jan 12, 2024 · b184a1f · b184a1f
1 parent 6df8d23
commit b184a1f
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 35 deletions.
diff --git a/renderer/src/components/EditorPage/TextEditor/Editor.jsx b/renderer/src/components/EditorPage/TextEditor/Editor.jsx
@@ -1,5 +1,5 @@
 import React, {
- useContext, useEffect, useLayoutEffect, useRef,
+  useContext, useEffect, useLayoutEffect, useRef,
 } from 'react';
 import { HtmlPerfEditor } from '@xelah/type-perf-html';
 
@@ -123,7 +123,7 @@ export default function Editor(props) {
   function onReferenceSelected({ chapter, verse }) {
     chapter && setChapterNumber(chapter);
     verse && setVerseNumber(verse);
-    scrollReference(chapter);
+    scrollReference(chapter, verse);
   }
 
   const observer = new IntersectionObserver((entries) => onIntersection({

diff --git a/renderer/src/components/EditorPage/TextEditor/RecursiveBlock.jsx b/renderer/src/components/EditorPage/TextEditor/RecursiveBlock.jsx
@@ -40,27 +40,6 @@ export default function RecursiveBlock({
     setCaretPosition(cursorPosition);
   };
 
-  const checkReturnKeyPress = (event) => {
-    const activeTextArea = document.activeElement;
-    if (event.key === 'Enter') {
-      if (activeTextArea.children.length > 1) {
-        const lineBreak = activeTextArea.children[1]?.outerHTML;
-        activeTextArea.children[1].outerHTML = lineBreak.replace(/<br\s*\/?>/gi, '&nbsp');
-      }
-    }
-    // BACKSPACE DISABLE
-    if (event.keyCode === 8) {
-      const range = document.getSelection().getRangeAt(0);
-      const selectedNode = range.startContainer;
-      const prevNode = selectedNode.previousSibling;
-      if (prevNode && prevNode.dataset.attsNumber !== currentVerse) {
-        event.preventDefault();
-      }
-      prevNode ? setCurrentVerse(prevNode.dataset.attsNumber) : {};
-    }
-    updateCursorPosition();
-  };
-
   function handleSelection() {
     let selectedText = '';
     if (window.getSelection) {
@@ -85,6 +64,29 @@ export default function RecursiveBlock({
     handleSelection();
   };
 
+  const keyStrokeHandler = (event) => {
+    const activeTextArea = document.activeElement;
+    // Replace line break with space
+    if (event.key === 'Enter') {
+      if (activeTextArea.children.length > 1) {
+        const lineBreak = activeTextArea.children[1]?.outerHTML;
+        activeTextArea.children[1].outerHTML = lineBreak.replace(/<br\s*\/?>/gi, '&nbsp');
+      }
+    }
+    // Disable backspace if the previous node is not the same verse
+    if (event.keyCode === 8) {
+      const range = document.getSelection().getRangeAt(0);
+      const selectedNode = range.startContainer;
+      const prevNode = selectedNode.previousSibling;
+      if (prevNode && prevNode.dataset.attsNumber !== currentVerse) {
+        event.preventDefault();
+      }
+      prevNode ? setCurrentVerse(prevNode.dataset.attsNumber) : {};
+    }
+    checkCurrentVerse();
+    updateCursorPosition();
+  };
+
   function onPasteHandler(event) {
     const cursorPosition = getCurrentCursorPosition('editor');
     const paste = (event.clipboardData || window.clipboardData).getData('text');
@@ -101,11 +103,11 @@ export default function RecursiveBlock({
       <div
         className="editor-paragraph"
         contentEditable={contentEditable}
-        onKeyDown={checkReturnKeyPress}
+        onKeyDown={keyStrokeHandler}
         onMouseUp={checkCurrentVerse}
         onMouseDown={updateCursorPosition}
-        {...props}
         onPaste={(event) => { event.preventDefault(); onPasteHandler(event); }}
+        {...props}
       />
     );
   }

diff --git a/renderer/src/components/EditorPage/TextEditor/utils/IntersectionObserver.js b/renderer/src/components/EditorPage/TextEditor/utils/IntersectionObserver.js
@@ -1,13 +1,25 @@
-export const scrollReference = (chapterNumber) => {
-  const refEditors = document.getElementsByClassName('ref-editor');
-  refEditors.length > 0 && Array.prototype.filter.call(refEditors, (refEditor) => {
-    const editorInView = refEditor.querySelector(`#ch-${chapterNumber}`);
-    if (editorInView) {
-      editorInView.scrollIntoView();
-      editorInView.classList.add('scroll-mt-10');
-    }
-  });
-};
+export const scrollReference = (() => {
+  let prevCV;
+  return (c, v) => {
+    const refEditors = document.getElementsByClassName('ref-editor');
+    refEditors.length > 0 && Array.prototype.filter.call(refEditors, (refEditor) => {
+      if (!prevCV || prevCV.c !== c) {
+        const chapterInView = refEditor.querySelector(`#ch-${c}`);
+        if (chapterInView) {
+          chapterInView.scrollIntoView();
+          chapterInView.classList.add('scroll-mt-10');
+        }
+      } else if (prevCV && (prevCV.c === c && prevCV.v !== v)) {
+        const verseInView = refEditor.querySelector(`#ch${c}v${v}`);
+        if (verseInView) {
+          verseInView.scrollIntoView();
+          verseInView.classList.add('scroll-mt-30');
+        }
+      }
+    });
+    prevCV = { c, v };
+  };
+})();
 
 export const onIntersection = ({
  scroll, entries, setChapterNumber, scrollLock, setVerseNumber,