fixed insert issues

bible-technology · Nov 14, 2023 · 106b74a · 106b74a
1 parent 5c1baf5
commit 106b74a
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 33 deletions.
diff --git a/renderer/src/components/EditorPage/TextEditor/Editor.jsx b/renderer/src/components/EditorPage/TextEditor/Editor.jsx
@@ -7,9 +7,11 @@ import { ProjectContext } from '@/components/context/ProjectContext';
 import { ScribexContext } from '@/components/context/ScribexContext';
 import EmptyScreen from '@/components/Loading/EmptySrceen';
 // eslint-disable-next-line import/no-unresolved, import/extensions
-import { useAutoSaveIndication } from '@/hooks2/useAutoSaveIndication';
+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';
 
 export default function Editor(props) {
@@ -30,6 +32,7 @@ export default function Editor(props) {
     bookAvailable,
     setChapterNumber,
     setVerseNumber,
+    triggerVerseInsert,
   } = props;
 
   const {
@@ -44,8 +47,12 @@ export default function Editor(props) {
   } = useContext(ProjectContext);
 
   const {
-    state: { caretPosition },
-    actions: { setCaretPosition, setSelectedText },
+    state: {
+      caretPosition, insertType, selectedText, numberToInsert, textToInsert,
+    },
+    actions: {
+      setCaretPosition, setSelectedText, setNumberToInsert, setTextToInsert, setInsertType,
+    },
   } = useContext(ScribexContext);
 
   console.log({ caretPosition });
@@ -78,6 +85,22 @@ export default function Editor(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [htmlPerf]);
 
+  useEffect(() => { // temp fix to trigger rerender to cause onblcok trigger to save to file. Need to find a better way.
+    if (insertType !== '') {
+      console.log({
+        caretPosition, numberToInsert, textToInsert, selectedText, insertType,
+      });
+      insertType === 'insertVerseNumber' || insertType === 'insertChapterNumber'
+        ? functionMapping[insertType].function({ caretPosition, numberToInsert })
+        : functionMapping[insertType].function({ caretPosition, textToInsert, selectedText });
+      setNumberToInsert('');
+      setTextToInsert('');
+      setInsertType('');
+      setSelectedText(null);
+      setCaretPosition(0);
+    }
+  }, [triggerVerseInsert]);
+
   useAutoSaveIndication(isSaving);
 
   function onReferenceSelected({ chapter, verse }) {

diff --git a/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx b/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx
@@ -15,8 +15,8 @@ export default function EditorMenuBar(props) {
     setChapterNumber,
     verseNumber,
     setVerseNumber,
-    selectedText,
     setSelectedFont,
+    setTriggerVerseInsert,
   } = props;
 
   const {
@@ -79,7 +79,7 @@ export default function EditorMenuBar(props) {
         </div>
         <div className="flex ml-auto">
           <MenuDropdown selectedFont={selectedFont} setSelectedFont={setSelectedFont} buttonStyle="h-6 mr-2 w-6 text-white cursor-pointer" />
-          <InsertMenu />
+          <InsertMenu setTriggerVerseInsert={setTriggerVerseInsert} />
         </div>
       </div>
     </div>

diff --git a/renderer/src/components/EditorPage/TextEditor/InsertMenu.jsx b/renderer/src/components/EditorPage/TextEditor/InsertMenu.jsx
@@ -2,27 +2,32 @@ import React from 'react';
 import { PopupContextProvider } from '../../Popup/PopupContext';
 import Popup from './Popup';
 
-export default function InsertMenu() {
+export default function InsertMenu({ setTriggerVerseInsert }) {
   return (
     <div className="flex items-center">
       <PopupContextProvider>
         <Popup
           action="insertVerseNumber"
+          setTriggerVerseInsert={setTriggerVerseInsert}
+
         />
       </PopupContextProvider>
       <PopupContextProvider>
         <Popup
           action="insertChapterNumber"
+          setTriggerVerseInsert={setTriggerVerseInsert}
         />
       </PopupContextProvider>
       <PopupContextProvider>
         <Popup
           action="insertFootnote"
+          setTriggerVerseInsert={setTriggerVerseInsert}
         />
       </PopupContextProvider>
       <PopupContextProvider>
         <Popup
           action="insertXRef"
+          setTriggerVerseInsert={setTriggerVerseInsert}
         />
       </PopupContextProvider>
     </div>

diff --git a/renderer/src/components/EditorPage/TextEditor/Popup.jsx b/renderer/src/components/EditorPage/TextEditor/Popup.jsx
@@ -1,36 +1,20 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { ScribexContext } from '@/components/context/ScribexContext';
-import {
-  insertVerseNumber, insertChapterNumber, insertFootnote, insertXRef,
-} from '@/util/cursorUtils';
+
 import { usePopup } from '../../Popup/PopupContext';
 import PopUpTemplate from '../../Popup';
+import { functionMapping } from './utils/insertFunctionMap';
 
-export const functionMapping = {
-  insertVerseNumber: {
-    title: 'Insert Verse', function: insertVerseNumber, icon: 'V', pholder: 'Verse number',
-  },
-  insertChapterNumber: {
-    title: 'Insert Chapter', function: insertChapterNumber, icon: 'C', placeholder: 'Chapter number',
-  },
-  insertFootnote: {
-    title: 'Insert Footnote', function: insertFootnote, icon: 'FN', placeholder: 'Footnote',
-  },
-  insertXRef: {
-    title: 'Insert Cross Reference', function: insertXRef, icon: 'XR', placeholder: 'Cross Reference',
-  },
-};
-
-const Popup = ({ action }) => {
+const Popup = ({ action, setTriggerVerseInsert }) => {
   const {
     state: {
-      textToInsert, numberToInsert, caretPosition, selectedText,
+      textToInsert, numberToInsert, selectedText,
     },
     actions: {
       setTextToInsert,
       setNumberToInsert,
-      setSelectedText,
+      setInsertType,
     },
   } = useContext(ScribexContext);
   const { setIsOpen } = usePopup();
@@ -43,9 +27,13 @@ const Popup = ({ action }) => {
     setNumberToInsert(e.target.value.replace(/[^0-9]/g, ''));
   };
   const handleSubmit = () => {
-    action === 'insertVerseNumber' || action === 'insertChapterNumber'
-      ? functionMapping[action].function({ caretPosition, numberToInsert })
-      : functionMapping[action].function({ caretPosition, textToInsert, selectedText });
+    setInsertType(action);
+    setTriggerVerseInsert((prev) => !prev);
+
+    // calling funciton here does not trigger the perf check to safe. Hence the trigger to re-render.
+    // action === 'insertVerseNumber' || action === 'insertChapterNumber'
+    //   ? functionMapping[action].function({ caretPosition, numberToInsert })
+    //   : functionMapping[action].function({ caretPosition, textToInsert, selectedText });
     setIsOpen(false);
   };
 

diff --git a/renderer/src/components/EditorPage/TextEditor/utils/insertFunctionMap.js b/renderer/src/components/EditorPage/TextEditor/utils/insertFunctionMap.js
@@ -0,0 +1,18 @@
+import {
+  insertVerseNumber, insertChapterNumber, insertFootnote, insertXRef,
+} from '@/util/cursorUtils';
+
+export const functionMapping = {
+  insertVerseNumber: {
+    title: 'Insert Verse', function: insertVerseNumber, icon: 'V', pholder: 'Verse number',
+  },
+  insertChapterNumber: {
+    title: 'Insert Chapter', function: insertChapterNumber, icon: 'C', placeholder: 'Chapter number',
+  },
+  insertFootnote: {
+    title: 'Insert Footnote', function: insertFootnote, icon: 'FN', placeholder: 'Footnote',
+  },
+  insertXRef: {
+    title: 'Insert Cross Reference', function: insertXRef, icon: 'XR', placeholder: 'Cross Reference',
+  },
+};
diff --git a/renderer/src/components/context/ScribexContext.js b/renderer/src/components/context/ScribexContext.js
@@ -21,6 +21,7 @@ const ScribexContextProvider = ({
     textToInsert: '',
     numberToInsert: '',
     selectedText: null,
+    insertType: '',
   };
 
   const [state, setState] = useState(initialState);
@@ -66,7 +67,6 @@ const ScribexContextProvider = ({
   }, []);
 
   const setNumberToInsert = useCallback((numberToInsert) => {
-    console.log('setstaqte', { numberToInsert });
     setState((prev) => ({ ...prev, numberToInsert }));
   }, []);
 
@@ -80,6 +80,10 @@ const ScribexContextProvider = ({
     },
     [state.sequenceIds, setSequenceIds],
   );
+
+  const setInsertType = useCallback((insertType) => {
+       setState((prev) => ({ ...prev, insertType }));
+}, []);
   const actions = {
     setFont,
     setSectionable,
@@ -94,6 +98,7 @@ const ScribexContextProvider = ({
     setTextToInsert,
     setNumberToInsert,
     setSelectedText,
+    setInsertType,
   };
 
   const context = {

diff --git a/renderer/src/util/cursorUtils.js b/renderer/src/util/cursorUtils.js
@@ -141,15 +141,15 @@ export function insertChapterNumber({ caretPosition, numberToInsert }) {
 export function insertFootnote({ caretPosition, textToInsert, selectedText }) {
   if (textToInsert && caretPosition) {
     const footnoteTag = `<span class="graft footnote" data-type="graft" data-subtype="footnote" data-new="true"><span class="paragraph usfm f" data-type="paragraph" data-subtype-ns="usfm" data-subtype="f"><span class="graft note_caller" data-type="graft" data-subtype="note_caller" data-new="true" data-previewtext="+"><span class="paragraph usfm f" data-type="paragraph" data-subtype-ns="usfm" data-subtype="f">+</span></span><span class="wrapper usfm span" data-type="wrapper" data-subtype-ns="usfm" data-subtype="ft">${textToInsert}</span></span></span>`;
-    const footnoteTagWithSelection = `<span class="graft footnote" data-type="graft" data-subtype="footnote" data-new="true"><span class="paragraph usfm f" data-type="paragraph" data-subtype-ns="usfm" data-subtype="f"><span class="graft note_caller" data-type="graft" data-subtype="note_caller" data-new="true" data-previewtext="+"><span class="paragraph usfm f" data-type="paragraph" data-subtype-ns="usfm" data-subtype="f">+</span></span><span class="wrapper usfm span" data-type="wrapper" data-subtype-ns="usfm" data-subtype="fq">${selectedText}</span><span class="wrapper usfm span" data-type="wrapper" data-subtype-ns="usfm" data-subtype="ft">${textToInsert}</span></span></span>`;
+    const footnoteTagWithSelection = `<span class="graft footnote" data-type="graft" data-subtype="footnote" data-new="true"><span class="paragraph usfm f" data-type="paragraph" data-subtype-ns="usfm" data-subtype="f"><span class="graft note_caller" data-type="graft" data-subtype="note_caller" data-new="true" data-previewtext="+"><span class="paragraph usfm f" data-type="paragraph" data-subtype-ns="usfm" data-subtype="f">+</span></span><span class="wrapper usfm span" data-type="wrapper" data-subtype-ns="usfm" data-subtype="fq">${selectedText} </span><span class="wrapper usfm span" data-type="wrapper" data-subtype-ns="usfm" data-subtype="ft">${textToInsert}</span></span></span>`;
     selectedText && selectedText.length !== 0 ? pasteHtmlAtCaret(footnoteTagWithSelection, false, caretPosition) : pasteHtmlAtCaret(footnoteTag, false, caretPosition);
   }
 }
 
 export function insertXRef({ caretPosition, textToInsert, selectedText }) {
   if (textToInsert && caretPosition) {
     const xRefTag = `<span class="graft xref" data-type="graft" data-subtype="xref" data-new="true"><span class="paragraph usfm x" data-type="paragraph" data-subtype-ns="usfm" data-subtype="x"><span class="graft note_caller" data-type="graft" data-subtype="note_caller" data-new="true" data-previewtext="+"><span class="paragraph usfm x" data-type="paragraph" data-subtype-ns="usfm" data-subtype="x">+</span></span><span class="wrapper usfm span" data-type="wrapper" data-subtype-ns="usfm" data-subtype="xt">${textToInsert}</span></span></span>`;
-    const xRefTagWithSelection = `<span class="graft xref" data-type="graft" data-subtype="xref" data-new="true"><span class="paragraph usfm x" data-type="paragraph" data-subtype-ns="usfm" data-subtype="x"><span class="graft note_caller" data-type="graft" data-subtype="note_caller" data-new="true" data-previewtext="+"><span class="paragraph usfm x" data-type="paragraph" data-subtype-ns="usfm" data-subtype="x">+</span></span><span class="wrapper usfm span" data-type="wrapper" data-subtype-ns="usfm" data-subtype="xq">${selectedText}</span><span class="wrapper usfm span" data-type="wrapper" data-subtype-ns="usfm" data-subtype="xt">${textToInsert}</span></span></span>`;
+    const xRefTagWithSelection = `<span class="graft xref" data-type="graft" data-subtype="xref" data-new="true"><span class="paragraph usfm x" data-type="paragraph" data-subtype-ns="usfm" data-subtype="x"><span class="graft note_caller" data-type="graft" data-subtype="note_caller" data-new="true" data-previewtext="+"><span class="paragraph usfm x" data-type="paragraph" data-subtype-ns="usfm" data-subtype="x">+</span></span><span class="wrapper usfm span" data-type="wrapper" data-subtype-ns="usfm" data-subtype="xq">${selectedText} </span><span class="wrapper usfm span" data-type="wrapper" data-subtype-ns="usfm" data-subtype="xt">${textToInsert}</span></span></span>`;
     selectedText && selectedText.length !== 0
       ? pasteHtmlAtCaret(xRefTagWithSelection, false, caretPosition)
       : pasteHtmlAtCaret(xRefTag, false, caretPosition);