friendsofagape · samueljd · May 26, 2023
diff --git a/package.json b/package.json
@@ -141,7 +141,8 @@
     "electron-log": "4.4.7",
     "electron-next": "^3.1.5",
     "electron-updater": "^5.0.1",
-    "epitelete-html": "0.2.19-beta.1",
+    "epitelete": "0.2.20-beta.1",
+    "epitelete-html": "0.2.20-beta.2",
     "eslint-import-resolver-alias": "^1.1.2",
     "font-list": "^1.4.5",
     "fs-extra": "^10.1.0",
@@ -168,6 +169,7 @@
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hotkeys-hook": "^4.4.0",
     "react-i18next": "^11.17.1",
     "react-media-recorder": "^1.6.6",
     "react-scripts": "5.0.1",
@@ -198,4 +200,4 @@
     "word-aligner": "$word-aligner",
     "@mui/lab": "$@mui/lab"
   }
-}
+}
diff --git a/renderer/public/icons/Xelah/Copy.svg b/renderer/public/icons/Xelah/Copy.svg
diff --git a/renderer/public/icons/Xelah/Paste.svg b/renderer/public/icons/Xelah/Paste.svg
diff --git a/renderer/src/components/EditorPage/Scribex/Buttons.jsx b/renderer/src/components/EditorPage/Scribex/Buttons.jsx
@@ -8,6 +8,9 @@ import Bars4Icon from '@/icons/Xelah/Bars4.svg';
 import ArrowUturnLeftIcon from '@/icons/Xelah/ArrowUturnLeft.svg';
 import ArrowUturnRightIcon from '@/icons/Xelah/ArrowUturnRight.svg';
 import PencilIcon from '@/icons/Common/Pencil.svg';
+import Copy from '@/icons/Xelah/Copy.svg';
+import Paste from '@/icons/Xelah/Paste.svg';
+import { copyText, pasteText } from '@/util/cursorUtils';
 
 export const classNames = (...classes) => classes.filter(Boolean).join(' ');
 
@@ -53,7 +56,7 @@ export default function Buttons(props) {
           sectionable ? 'fill-current' : '',
           'h-5 mr-2 w-5 text-white cursor-pointer',
         )}
-        aria-hidden="true"
+        // aria-hidden="true"
         onClick={onSectionable}
         title={
           sectionable ? 'Expand all Chapters' : 'Collapse Chapters'
@@ -66,15 +69,15 @@ export default function Buttons(props) {
           editable ? 'fill-current' : '',
           'h-5 mr-2 w-5 text-white cursor-pointer',
         )}
-        aria-hidden="true"
+        // aria-hidden="true"
         onClick={onEditable}
         title={editable ? 'Disable Edit' : 'Enable Edit'}
       />
       {blockable ? (
         <Bars2Icon
           aria-label="Article-Icon"
           className="h-5 mr-2 w-5 text-white cursor-pointer"
-          aria-hidden="true"
+          // aria-hidden="true"
           onClick={onBlockable}
           title="Collapse blocks"
         />
@@ -83,7 +86,7 @@ export default function Buttons(props) {
           <Bars4Icon
             aria-label="List-Icon"
             className="h-5 mr-2 w-5 text-white cursor-pointer"
-            aria-hidden="true"
+            // aria-hidden="true"
             onClick={onBlockable}
             title="Split into blocks"
           />
@@ -92,24 +95,39 @@ export default function Buttons(props) {
       <ArrowUturnLeftIcon
         aria-label="Undo-Icon"
         className="h-5 mr-2 w-5 text-white cursor-pointer"
-        aria-hidden="true"
+        // aria-hidden="true"
         onClick={() => undo()}
         title="Undo"
       />
       <ArrowUturnRightIcon
         aria-label="Redo-Icon"
         className="h-5 mr-2 w-5 text-white cursor-pointer"
-        aria-hidden="true"
+        // aria-hidden="true"
         onClick={() => redo()}
         title="Redo"
       />
       <ArrowDownOnSquareIcon
         aria-label="Save-Icon"
         className="h-5 mr-2 w-5 text-white cursor-pointer"
-        aria-hidden="true"
+        // aria-hidden="true"
         onClick={() => exportUsfm(bookCode)}
         title="Save"
       />
+      <span>| </span>
+      <Copy
+        aria-label="Save-Icon"
+        className="h-5 mr-2 w-5 text-white cursor-pointer"
+        aria-hidden="true"
+        onClick={() => copyText()}
+        title="Save"
+      />
+      <Paste
+        aria-label="Paste-Icon"
+        className="h-5 mr-2 w-5 text-white cursor-pointer"
+        aria-hidden="true"
+        onClick={() => pasteText(true)}
+        title="Save"
+      />
     </>
   );
 }
diff --git a/renderer/src/components/EditorPage/Scribex/Editor.jsx b/renderer/src/components/EditorPage/Scribex/Editor.jsx
@@ -8,9 +8,11 @@ import SaveIndicator from '@/components/Loading/SaveIndicator';
 import { ReferenceContext } from '@/components/context/ReferenceContext';
 import { ProjectContext } from '@/components/context/ProjectContext';
 import EmptyScreen from '@/components/Loading/EmptySrceen';
-import { insertVerseNumber, insertChapterNumber, insertFootnote } from '@/util/cursorUtils';
+import { insertVerseNumber, insertChapterNumber, insertFootnote, insertXRef } from '@/util/cursorUtils';
 import RecursiveBlock from './RecursiveBlock';
-// import ContextWrapper from './ContextWrapper';
+import { copyText, pasteText } from '@/util/cursorUtils';
+import { useHotkeys } from 'react-hotkeys-hook';
+
 
 export default function Editor(props) {
   const {
@@ -37,9 +39,11 @@ export default function Editor(props) {
     newVerChapNumber,
     insertVerseRChapter,
     reference,
+    insertNewGraft,
   } = props;
 
   const [caretPosition, setCaretPosition] = useState();
+  const [graftInsert, setGraftInsert] = useState(false);
   const {
     state: { chapter },
   } = useContext(ReferenceContext);
@@ -51,16 +55,24 @@ export default function Editor(props) {
   } = useContext(ProjectContext);
 
   const [chapters, setChapters] = useState();
+  const [selectedText, setSelectedText] = useState();
   const sequenceId = sequenceIds.at(-1);
   const style = isSaving ? { cursor: 'progress' } : {};
   const handlers = {
     onBlockClick: ({ content: _content, element }) => {
       const _sequenceId = element.dataset.target;
       const { tagName } = element;
       if (_sequenceId) {
-        setGraftSequenceId(_sequenceId);
-        setOpenSideBar(!openSideBar);
-        setSideBarTab('footnotes');
+        if (tagName === 'SPAN' && element.dataset.subtype === 'footnote') {
+          setGraftSequenceId(_sequenceId);
+          setOpenSideBar(!openSideBar);
+          setSideBarTab('footnotes');
+        }
+        if (tagName === 'SPAN' && element.dataset.subtype === 'xref') {
+          setGraftSequenceId(_sequenceId);
+          setOpenSideBar(!openSideBar);
+          setSideBarTab('xref');
+        }
       } else {
         setSideBarTab('');
         setGraftSequenceId(null);
@@ -94,6 +106,20 @@ export default function Editor(props) {
     verse && setVerseNumber(verse);
   }
 
+  function getSelectedText() {
+    let selectedText = '';
+    if (window.getSelection) {
+      let selection = window.getSelection();
+
+      selectedText = selection.toString();
+      setSelectedText(selectedText);
+    } else if (document.selection && document.selection.type != 'Control') {
+      selectedText = document.selection.createRange().text;
+      setSelectedText(selectedText);
+    }
+    console.log(selectedText);
+  }
+
   useEffect(() => {
     if (insertVerseRChapter === 'Verse') {
       insertVerseNumber(caretPosition, newVerChapNumber);
@@ -102,10 +128,50 @@ export default function Editor(props) {
       insertChapterNumber(caretPosition, newVerChapNumber);
     }
     if (insertVerseRChapter === 'Footnote') {
+      setGraftInsert(true);
       insertFootnote(caretPosition, newVerChapNumber);
     }
+    if (insertVerseRChapter === 'Cross Reference') {
+      insertXRef(caretPosition, newVerChapNumber);
+    }
   }, [triggerVerseInsert]);
 
+  useEffect(() => {
+    let pressedKeys = [];
+    const handleKeyDown = (e) => {
+      const copyKeys = ['Control', 'c'];
+      const pasteKeys = ['Control', 'v'];
+      pressedKeys.push(e.key);
+      if (pressedKeys.join('+') === copyKeys.join('+')) {
+        e.preventDefault();
+        copyText();
+        pressedKeys = [];
+      }
+      if (pressedKeys.join('+') === pasteKeys.join('+')) {
+        e.preventDefault();
+        pasteText();
+        pressedKeys = [];
+      }
+      // if (e.key === 's') { console.log("savingssssssssss") }
+      // if (e.key === 'Control' && e.key === 'c') {
+      //   console.log("copying")
+      //   e.preventDefault();
+      //   // Call your custom copy function
+      //   copyText();
+      // } else if (e.metaKey && e.key === 'v') {
+      //   console.log("pasting")
+      //   e.preventDefault();
+      //   // Call your custom paste function
+      //   pasteText();
+      // }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
   const scrollReference = (chapterNumber) => {
     const refEditors = document.getElementsByClassName('ref-editor');
     refEditors.length > 0 && Array.prototype.filter.call(refEditors, (refEditor) => {
@@ -120,7 +186,6 @@ export default function Editor(props) {
   const onIntersection = (entries) => {
     for (const entry of entries) {
       if (entry.isIntersecting) {
-        console.log({ entry })
         setChapterNumber(entry.target.dataset.attsNumber);
         scrollLock === false ? scrollReference(entry.target.dataset.attsNumber) : {};
       }
@@ -141,6 +206,7 @@ export default function Editor(props) {
 
   const _props = {
     htmlPerf,
+    // onHtmlPerf: graftInsert ? insertNewGraft : saveHtmlPerf,
     onHtmlPerf: saveHtmlPerf,
     chapterIndex: chapter,
     sequenceIds,

diff --git a/...nts/EditorPage/Scribex/FootNoteEditor.jsx → ...onents/EditorPage/Scribex/GraftEditor.jsx b/...nts/EditorPage/Scribex/FootNoteEditor.jsx → ...onents/EditorPage/Scribex/GraftEditor.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-vars */
 import { HtmlPerfEditor } from '@xelah/type-perf-html';
 
-export default function FootNoteEditor(props) {
+export default function GraftEditor(props) {
   const {
     sequenceIds,
     isLoading,

diff --git a/renderer/src/components/EditorPage/Scribex/InsertMenu.jsx b/renderer/src/components/EditorPage/Scribex/InsertMenu.jsx
@@ -0,0 +1,57 @@
+import { Fragment, useState } from 'react'
+import { Menu, Transition } from '@headlessui/react'
+import PopupButton from './PopupButton';
+import PlusIcon from '@/icons/Xelah/Plus.svg';
+
+export default function InsertMenu({ handleClick: handleButtonClick }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const handleClick = () => {
+    handleButtonClick();
+    setIsOpen(false);
+  }
+  return (
+    <div>
+      <Menu as="div" className="relative inline-block text-left">
+        <Menu.Button
+          onClick={() => setIsOpen(!isOpen)}
+        // className="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+        >
+          <PlusIcon
+            aria-label="Insert-Icon"
+            className="h-6 mr-2 w-6 text-white cursor-pointer"
+            aria-hidden="true"
+            title="Insert"
+          />
+        </Menu.Button>
+        <Transition
+          show={isOpen}
+          as={Fragment}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <Menu.Items
+            static
+            className="fixed top-[193px] right-5 min-w-[183px] z-50 bg-white shadow-lg rounded-md"
+          >
+            <Menu.Item>
+              <PopupButton handleClick={handleClick} title="Verse" roundedHover="hover:rounded-t-md" />
+            </Menu.Item>
+            <Menu.Item>
+              <PopupButton handleClick={handleClick} title="Chapter" />
+            </Menu.Item>
+            <Menu.Item>
+              <PopupButton handleClick={handleClick} title="Footnote" />
+            </Menu.Item>
+            <Menu.Item>
+              <PopupButton handleClick={handleClick} title="Cross Reference" roundedHover="hover:rounded-b-md" />
+            </Menu.Item>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    </div>
+  )
+}
diff --git a/renderer/src/components/EditorPage/Scribex/Popup.jsx b/renderer/src/components/EditorPage/Scribex/Popup.jsx
@@ -6,12 +6,14 @@ const Popup = ({
   handleClose, handleButtonClick, title, isPopupOpen,
 }) => {
   const [number, setNumber] = useState('');
-  console.log({ title });
+  // console.log({ title }, "title");
   const handleInputChange = (event) => {
+    // console.log("changing")
     setNumber(event.target.value);
   };
 
   const handleSubmit = () => {
+    // console.log("submitting")
     handleButtonClick(number, title);
     handleClose();
   };
@@ -72,7 +74,7 @@ const Popup = ({
                   ) : (
                     <input
                       type="text"
-                      placeholder={`${title} Number...`}
+                      placeholder={`${title}`}
                       className="block w-full border-gray-300 rounded-md shadow-sm appearance-none"
                       value={number}
                       onChange={handleInputChange}

diff --git a/renderer/src/components/EditorPage/Scribex/RecursiveBlock.jsx b/renderer/src/components/EditorPage/Scribex/RecursiveBlock.jsx
@@ -56,16 +56,16 @@ export default function RecursiveBlock({
       const range = document.getSelection().getRangeAt(0)
       // console.log({ range })
       const selectedNode = range.startContainer
-      console.log({ selectedNode })
+      // console.log({ selectedNode })
       const prevNode = selectedNode.previousSibling;
-      console.log({ prevNode })
+      // console.log({ prevNode })
       if (prevNode && prevNode.dataset.attsNumber !== currentVerse) {
-        console.log("crossing a verse")
+        // console.log("crossing a verse")
         // setCurrentVerse(0)
         event.preventDefault();
       }
       prevNode ? setCurrentVerse(prevNode.dataset.attsNumber) : {};
-      console.log({ currentVerse })
+      // console.log({ currentVerse })
       const verse = getCurrentVerse(selectedNode)
       const chapter = getCurrentChapter(selectedNode)
     }
@@ -75,9 +75,9 @@ export default function RecursiveBlock({
   const checkCurrentVerse = () => {
     if (document.getSelection().rangeCount >= 1 && onReferenceSelected) {
       const range = document.getSelection().getRangeAt(0)
-      console.log({ range })
+      // console.log({ range })
       const selectedNode = range.startContainer
-      console.log({ selectedNode })
+      // console.log({ selectedNode })
       const verse = getCurrentVerse(selectedNode)
       const chapter = getCurrentChapter(selectedNode)
       // if (onReferenceSelected) {