lexical editor integrated.

bible-technology · Sep 10, 2024 · fd1c56f · fd1c56f
1 parent b046173
commit fd1c56f
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 102 deletions.
diff --git a/renderer/src/components/EditorPage/Navigation/reference/SelectBook.js b/renderer/src/components/EditorPage/Navigation/reference/SelectBook.js
@@ -14,6 +14,7 @@ export default function SelectBook({
   selectedBooks,
   setSelectedBooks,
   scope,
+  setBook,
   existingScope = [],
   disableScope = {},
   call = '',
@@ -39,6 +40,7 @@ export default function SelectBook({
   function bookSelect(e, bookId) {
     e.preventDefault();
     onChangeBook(bookId, selectedBooks[0]);
+    setBook(bookId);
     if (multiSelectBook === false) { selectBook(); }
   }
 

diff --git a/renderer/src/components/EditorPage/Navigation/reference/SelectVerse.js b/renderer/src/components/EditorPage/Navigation/reference/SelectVerse.js
@@ -35,11 +35,16 @@ export default function SelectVerse({
   const onChapterSelect = (e, chapterNum) => {
     e.preventDefault();
     onChangeChapter(chapterNum, chapter);
+    onChangeVerse(1, 1);
     setOpenChapter(false);
-    setOpenVerse(true);
-    window.location.href = `#ch-${chapterNum}`;
+    // setOpenVerse(true);
+    closeBooks();
+    closeVerses();
+
+    // window.location.href = `#ch-${chapterNum}`;
     if (chapterNum && setChapterNumber) {
       setChapterNumber(chapterNum);
+      setVerseNumber(1);
       // document.getElementById('editor').querySelector(`#ch-${chapterNum}`)?.scrollIntoView();
     }
   };
@@ -88,13 +93,13 @@ export default function SelectVerse({
             : &nbsp;
             {chapter}
           </div>
-          <div className={`px-2 pt-2 ${openVerse ? 'bg-primary border-primary' : 'hover:bg-gray-600 border-gray-600'} border-b-4 cursor-pointer`}>
+          {/* <div className={`px-2 pt-2 ${openVerse ? 'bg-primary border-primary' : 'hover:bg-gray-600 border-gray-600'} border-b-4 cursor-pointer`}>
             {t('label-verse')}
             : &nbsp;
             {multiSelectVerse
               ? controlVerseSelect.join()
               : verse}
-          </div>
+          </div> */}
         </div>
         <div className="flex justify-end">
           {children}

diff --git a/renderer/src/components/EditorPage/TextEditor/BibleNavigationX.jsx b/renderer/src/components/EditorPage/TextEditor/BibleNavigationX.jsx
@@ -12,7 +12,7 @@ import { ReferenceContext } from '@/components/context/ReferenceContext';
 
 export default function BibleNavigationX(props) {
   const {
-    showVerse, chapterNumber, setChapterNumber, verseNumber, setVerseNumber,
+    showVerse, chapterNumber, setChapterNumber, verseNumber, setVerseNumber, setBook,
   } = props;
   const supportedBooks = null; // if empty array or null then all books available
 
@@ -169,6 +169,7 @@ export default function BibleNavigationX(props) {
                 multiSelectBook={multiSelectBook}
                 selectedBooks={selectedBooks}
                 setSelectedBooks={setSelectedBooks}
+                setBook={setBook}
                 // The SelectBook is also been used to set the Canon-Scope for the projects and
                 // "scope" is added to disable the click on the book list. scope="Other" will only
                 // allow to click/select the book.

diff --git a/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx b/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx
@@ -6,8 +6,6 @@ import { LockClosedIcon, BookmarkIcon, LockOpenIcon } from '@heroicons/react/24/
 // import BibleNavigationX from '@/components/EditorPage/TextEditor/BibleNavigationX';
 import { useTranslation } from 'react-i18next';
 import BibleNavigationX from './BibleNavigationX';
-import Buttons from './Buttons';
-import InsertMenu from './InsertMenu';
 
 export default function EditorMenuBar(props) {
   const {
@@ -17,9 +15,10 @@ export default function EditorMenuBar(props) {
     verseNumber,
     setVerseNumber,
     handleSelectedFont,
-    setTriggerVerseInsert,
     handleEditorFontSize,
     editorFontSize,
+    book,
+    setBook,
   } = props;
 
   const { t } = useTranslation();
@@ -46,6 +45,8 @@ export default function EditorMenuBar(props) {
           setChapterNumber={setChapterNumber}
           verseNumber={verseNumber}
           setVerseNumber={setVerseNumber}
+          book={book}
+          setBook={setBook}
         />
         <div
           aria-label="editor-pane"
@@ -118,15 +119,6 @@ export default function EditorMenuBar(props) {
           <MenuDropdown selectedFont={selectedFont || 'sans-serif'} setSelectedFont={handleSelectedFont} buttonStyle="button text-gray-200 bg-primary-500 hover:bg-primary-500/90 text-highlight-300 gap-1" />
         </div>
       </div>
-      <div className="mx-2.5 min-h-[33px] flex items-center justify-center">
-        <div className="flex items-center">
-          <Buttons {...props} />
-        </div>
-        <div className="flex ml-auto">
-
-          <InsertMenu setTriggerVerseInsert={setTriggerVerseInsert} />
-        </div>
-      </div>
     </div>
   );
 }
diff --git a/renderer/src/components/EditorPage/TextEditor/Lexical.jsx b/renderer/src/components/EditorPage/TextEditor/Lexical.jsx
@@ -1,36 +1,20 @@
 import {
-  useEffect, useState, useRef, useMemo, useContext,
+  useEffect, useState, useRef, useMemo,
 } from 'react';
 
 import {
-  Editor, getViewOptions, DEFAULT_VIEW_MODE, immutableNoteCallerNodeName, NoteEditor,
+  Editor, getViewOptions, DEFAULT_VIEW_MODE, immutableNoteCallerNodeName,
 } from '@biblionexus-foundation/scribe-editor';
-import { ProjectContext } from '@/components/context/ProjectContext';
-import EditorSideBar from '@/modules/editorsidebar/EditorSideBar';
+// import { ProjectContext } from '@/components/context/ProjectContext';
+// import EditorSideBar from '@/modules/editorsidebar/EditorSideBar';
 // import '@biblionexus-foundation/scribe-editor/dist/style.css';
 
-const defaultScrRef = {
-  /* PSA */ bookCode: 'PSA',
-  chapterNum: 1,
-  verseNum: 1,
-};
-
-export default function LexicalEditor({ usjInput, onUsjChange, setNavRef }) {
+export default function LexicalEditor({
+  usjInput, onUsjChange, setNavRef, selectedFont, fontSize, projectScriptureDir, scrRef, setScrRef,
+}) {
   const [usj, setUsj] = useState();
-  // const [initialRender, setInitialRender] = useState(true);
-  const [scrRef, setScrRef] = useState(defaultScrRef);
-  const editorRef = useRef(null);
-  const [stateX, setStateX] = useState(false);
-  const [text, setText] = useState('');
-  const {
-    states: { openSideBar, scrollLock },
-    actions: { setOpenSideBar, setSideBarTab },
-  } = useContext(ProjectContext);
-  function closeSideBar(status) {
-    setOpenSideBar(status);
-  }
 
-  const previousUsjRef = useRef(null);
+  const editorRef = useRef(null);
 
   useEffect(() => {
     const timeoutId = setTimeout(() => {
@@ -49,9 +33,9 @@ export default function LexicalEditor({ usjInput, onUsjChange, setNavRef }) {
   const nodeOptions = {
     [immutableNoteCallerNodeName]: {
       onClick: (e) => {
-        setStateX(true);
-        setText(e.currentTarget.getAttribute('data-caller-id'));
-        setOpenSideBar(!openSideBar);
+        // const callerId = e.currentTarget.getAttribute('data-caller-id');
+        // setText(callerId);
+        console.log({ e });
       },
     },
   };
@@ -70,10 +54,17 @@ export default function LexicalEditor({ usjInput, onUsjChange, setNavRef }) {
   }, [scrRef]);
 
   return (
-    <div>
+    <div
+      style={{
+        fontFamily: selectedFont || 'sans-serif',
+        fontSize: `${fontSize}rem`,
+        lineHeight: (fontSize > 1.3) ? 1.5 : '',
+        direction: `${projectScriptureDir === 'RTL' ? 'rtl' : 'auto'}`,
+      }}
+    >
 
       <div>
-        <div className=" h-editor overflow-y-auto p-2">
+        <div className=" h-editor overflow-y-auto">
           <Editor
             usjInput={usjInput}
             ref={editorRef}
@@ -85,7 +76,7 @@ export default function LexicalEditor({ usjInput, onUsjChange, setNavRef }) {
           />
         </div>
       </div>
-
+      {/*
       {
         stateX && (
           <div
@@ -113,7 +104,7 @@ export default function LexicalEditor({ usjInput, onUsjChange, setNavRef }) {
             </div>
           </div>
         )
-      }
+      } */}
     </div>
 
   );

diff --git a/renderer/src/components/EditorPage/TextEditor/index.jsx b/renderer/src/components/EditorPage/TextEditor/index.jsx
@@ -1,69 +1,84 @@
 import React, {
   useEffect, useState, useContext, Fragment, useMemo,
 } from 'react';
-import { ScribexContext } from '@/components/context/ScribexContext';
 import { ReferenceContext } from '@/components/context/ReferenceContext';
 import { ProjectContext } from '@/components/context/ProjectContext';
 import EditorSideBar from '@/modules/editorsidebar/EditorSideBar';
 import { debounce } from 'lodash';
+import {
+  getViewOptions, DEFAULT_VIEW_MODE, immutableNoteCallerNodeName,
+} from '@biblionexus-foundation/scribe-editor';
+import { LoadingSpinner } from '@/components/LoadingSpinner';
 import { useReadUsfmFile } from './hooks/useReadUsfmFile';
 import EditorMenuBar from './EditorMenuBar';
 import LexicalEditor from './Lexical';
 import { updateCacheNSaveFile } from '../LexicalEditor/updateAndSave';
 
+const defaultScrRef = {
+  bookCode: 'PSA',
+  chapterNum: 1,
+  verseNum: 1,
+};
+
 export default function TextEditor() {
-  const { state, actions } = useContext(ScribexContext);
-  const [bookChange, setBookChange] = useState(false);
   const [chapterNumber, setChapterNumber] = useState(1);
   const [verseNumber, setVerseNumber] = useState(1);
-  const [triggerVerseInsert, setTriggerVerseInsert] = useState(false);
+  const [book, setBook] = useState();
   const [usjInput, setUsjInput] = useState();
-  // const [parser, setParser] = useState();
+  const [text, setText] = useState();
+  const [scrRef, setScrRef] = useState(defaultScrRef);
   const [navRef, setNavRef] = useState();
+  const {
+    states: { openSideBar },
+    actions: { setOpenSideBar, setSideBarTab },
+  } = useContext(ProjectContext);
+  function closeSideBar(status) {
+    setOpenSideBar(status);
+  }
+  const [viewMode] = useState(DEFAULT_VIEW_MODE);
 
-  // const initializeParser = async () => {
-  //   await USFMParser.init();
-  //   usfmParser = new USFMParser();
-  //   setParser(usfmParser);
-  // };
-  // useEffect(() => {
-  //   initializeParser();
-  // }, []);
+  const nodeOptions = {
+    [immutableNoteCallerNodeName]: {
+      onClick: (e) => {
+        const callerId = e.currentTarget.getAttribute('data-caller-id');
+        setText(callerId);
+        setOpenSideBar(true);
+        setSideBarTab('footnotes');
+      },
+    },
+  };
+  const viewOptions = useMemo(() => getViewOptions(viewMode), [viewMode]);
 
   const {
-    bookAvailable, bookId, cachedData,
+    bookId, cachedData,
   } = useReadUsfmFile();
+
   useEffect(() => {
     if (cachedData.error) {
       console.error('Error parsing USFM', cachedData.error);
-
       return;
     }
     const { usj } = cachedData;
-    if (!usj && usj === {}) { return; }
-    console.log({ usj });
+    if (!usj && usj?.entries(usj).length === 0) { return; }
+    console.log(usj);
     setUsjInput(usj);
   }, [bookId, cachedData]);
 
   const {
-    state: { selectedFont },
+    state: { selectedFont, fontSize, projectScriptureDir },
     actions: { handleSelectedFont, onChangeChapter, onChangeVerse },
   } = useContext(ReferenceContext);
 
-  const {
-    states: { openSideBar },
-    actions: { setOpenSideBar },
-  } = useContext(ProjectContext);
-
-  function closeSideBar(status) {
-    setOpenSideBar(status);
-  }
-
   useEffect(() => {
+    setScrRef({
+      bookCode: book,
+      chapterNum: chapterNumber,
+      verseNum: verseNumber,
+    });
     onChangeChapter(chapterNumber, 1);
     onChangeVerse(verseNumber, 1);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chapterNumber, verseNumber]);
+  }, [chapterNumber, verseNumber, book]);
 
   useEffect(() => {
     if (navRef) {
@@ -82,35 +97,47 @@ export default function TextEditor() {
   );
 
   const _props = {
-    ...state,
-    // ...perfState,
-    ...actions,
-    // ...perfActions,
     selectedFont,
     chapterNumber,
-    verseNumber,
-    // isLoading,
-    // bookName,
-    bookChange,
-    bookAvailable,
-    handleEditorFontSize,
-    setBookChange,
     setChapterNumber,
+    verseNumber,
     setVerseNumber,
+    book,
+    setBook,
     handleSelectedFont,
-    triggerVerseInsert,
-    setTriggerVerseInsert,
+    scrRef,
+    setScrRef,
+  };
+
+  const notesProps = {
+    usj: usjInput,
+    onChange: handleUsjChange,
+    viewOptions,
+    nodeOptions,
+    text,
+  };
+  const props = {
+    selectedFont,
+    fontSize,
+    projectScriptureDir,
+    usjInput,
+    onUsjChange: handleUsjChange,
+    setNavRef,
+    scrRef,
+    setScrRef,
+    book,
+    setBook,
   };
   return (
     <>
       <EditorSideBar
         isOpen={openSideBar}
         closeSideBar={closeSideBar}
-        graftProps={_props}
+        notesProps={notesProps}
       />
       <div className="flex flex-col bg-white border-b-2 border-secondary h-editor rounded-md shadow scrollbar-width">
         <EditorMenuBar {..._props} />
-        {usjInput && <LexicalEditor usjInput={usjInput} onUsjChange={handleUsjChange} setNavRef={setNavRef} />}
+        {!usjInput ? <LoadingSpinner /> : <LexicalEditor {...props} />}
       </div>
     </>
   );