From 7d3ee9a6b7630819a50c7d0f9b97c75e46c34182 Mon Sep 17 00:00:00 2001
From: samueljd <samuelj.ernest@gmail.com>
Date: Mon, 23 Oct 2023 17:22:22 +0530
Subject: [PATCH 1/7] directory change for editor

---
 .../TextEditor/BibleNavigationX.jsx           | 251 ++++++++++++++++++
 .../EditorPage/TextEditor/Buttons.jsx         | 107 ++++++++
 .../EditorPage/TextEditor/Editor.jsx          | 153 +++++++++++
 .../EditorPage/TextEditor/EditorMenuBar.jsx   |  96 +++++++
 .../EditorPage/TextEditor/InsertMenu.jsx      |  39 +++
 .../EditorPage/TextEditor/Popup.jsx           | 120 +++++++++
 .../EditorPage/TextEditor/PopupButton.jsx     |  44 +++
 .../EditorPage/TextEditor/RecursiveBlock.jsx  | 123 +++++++++
 .../EditorPage/TextEditor/ReferenceEditor.jsx | 115 ++++++++
 .../TextEditor/ReferenceRecursiveBlock.jsx    |  74 ++++++
 .../TextEditor/ReferenceScribex.jsx           |  94 +++++++
 .../hooks/useIntersectionObserver.js          |  46 ++++
 .../EditorPage/TextEditor/index.jsx           | 123 +++++++++
 .../TextEditor/utils/IntersectionObserver.js  |  20 ++
 .../TextEditor/utils/getReferences.js         |  32 +++
 15 files changed, 1437 insertions(+)
 create mode 100644 renderer/src/components/EditorPage/TextEditor/BibleNavigationX.jsx
 create mode 100644 renderer/src/components/EditorPage/TextEditor/Buttons.jsx
 create mode 100644 renderer/src/components/EditorPage/TextEditor/Editor.jsx
 create mode 100644 renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx
 create mode 100644 renderer/src/components/EditorPage/TextEditor/InsertMenu.jsx
 create mode 100644 renderer/src/components/EditorPage/TextEditor/Popup.jsx
 create mode 100644 renderer/src/components/EditorPage/TextEditor/PopupButton.jsx
 create mode 100644 renderer/src/components/EditorPage/TextEditor/RecursiveBlock.jsx
 create mode 100644 renderer/src/components/EditorPage/TextEditor/ReferenceEditor.jsx
 create mode 100644 renderer/src/components/EditorPage/TextEditor/ReferenceRecursiveBlock.jsx
 create mode 100644 renderer/src/components/EditorPage/TextEditor/ReferenceScribex.jsx
 create mode 100644 renderer/src/components/EditorPage/TextEditor/hooks/useIntersectionObserver.js
 create mode 100644 renderer/src/components/EditorPage/TextEditor/index.jsx
 create mode 100644 renderer/src/components/EditorPage/TextEditor/utils/IntersectionObserver.js
 create mode 100644 renderer/src/components/EditorPage/TextEditor/utils/getReferences.js

diff --git a/renderer/src/components/EditorPage/TextEditor/BibleNavigationX.jsx b/renderer/src/components/EditorPage/TextEditor/BibleNavigationX.jsx
new file mode 100644
index 000000000..4be5cb2b0
--- /dev/null
+++ b/renderer/src/components/EditorPage/TextEditor/BibleNavigationX.jsx
@@ -0,0 +1,251 @@
+import PropTypes from 'prop-types';
+import { Dialog, Transition } from '@headlessui/react';
+import React, {
+  Fragment, useContext, useEffect, useRef, useState,
+} from 'react';
+import { XMarkIcon, ChevronDownIcon } from '@heroicons/react/24/solid';
+import * as localforage from 'localforage';
+import SelectBook from '@/components/EditorPage/Navigation/reference/SelectBook';
+import SelectVerse from '@/components/EditorPage/Navigation/reference/SelectVerse';
+
+import { ReferenceContext } from '@/components/context/ReferenceContext';
+
+export default function BibleNavigationX(props) {
+  const {
+    showVerse, chapterNumber, setChapterNumber, verseNumber, setVerseNumber,
+  } = props;
+  const supportedBooks = null; // if empty array or null then all books available
+
+  const {
+    state: {
+      bookId,
+      bookList,
+      bookName,
+      chapter,
+      verse,
+      chapterList,
+      verseList,
+      languageId,
+      //  closeNavigation,
+    }, actions: {
+      onChangeBook,
+      onChangeChapter,
+      onChangeVerse,
+      applyBooksFilter,
+      setCloseNavigation,
+    },
+  } = useContext(ReferenceContext);
+
+  useEffect(() => {
+    applyBooksFilter(supportedBooks);
+  }, [applyBooksFilter, supportedBooks]);
+
+  const [openBook, setOpenBook] = useState(false);
+  const [openVerse, setOpenVerse] = useState(false);
+  const cancelButtonRef = useRef(null);
+
+  const [multiSelectVerse] = useState(false);
+  const [multiSelectBook] = useState(false);
+  const [selectedVerses, setSelectedVerses] = useState([]);
+  const [selectedBooks, setSelectedBooks] = useState([]);
+  const [verselectActive, setVerseSelectActive] = useState(false);
+
+  function closeBooks() {
+    setOpenBook(false);
+  }
+
+  function openBooks() {
+    setSelectedBooks([(bookId.toUpperCase())]);
+    setOpenBook(true);
+  }
+
+  function closeVerses() {
+    setOpenVerse(false);
+    if (multiSelectVerse) { setVerseSelectActive(true); }
+  }
+
+  function selectBook() {
+    setOpenBook(false);
+    setOpenVerse(true);
+    if (multiSelectVerse) { setSelectedVerses([]); }
+  }
+
+  useEffect(() => {
+    const getSupportedBooks = async () => {
+      const refs = await localforage.getItem('refBibleBurrito');
+      refs?.forEach((ref) => {
+        if (languageId !== null) {
+          if (ref.value.languages[0].tag === languageId) {
+            const supportedBooks = [];
+            Object.entries((ref.value.type.flavorType.currentScope)).forEach(
+              ([key]) => {
+                supportedBooks.push(key.toLowerCase());
+              },
+            );
+            applyBooksFilter(supportedBooks);
+          }
+        }
+      });
+    };
+    getSupportedBooks();
+  }, [languageId, applyBooksFilter]);
+
+  useEffect(() => {
+    async function setReference() {
+      await localforage.setItem('navigationHistory', [bookId, chapter, verse]);
+    }
+    setReference();
+  }, [bookId, chapter, verse]);
+
+  useEffect(() => {
+    if (openBook === false && openVerse === false) {
+      setCloseNavigation(true);
+    }
+    if (openBook || openVerse) {
+      setCloseNavigation(false);
+    }
+  }, [openVerse, openBook, setCloseNavigation]);
+
+  return (
+    <>
+      <div className="flex flex-nowrap">
+        <div className="bg-primary max-h-[40px] flex items-center justify-center text-white uppercase tracking-wider text-xs font-semibold">
+          <span aria-label="editor-bookname" className="px-3">{bookName}</span>
+          <span
+            aria-label="open-book"
+            className="focus:outline-none min-h-full bg-white py-2 bg-opacity-10"
+            onClick={openBooks}
+            role="button"
+            tabIndex="-2"
+          >
+            <ChevronDownIcon className=" h-4 w-4 mx-1 text-white" aria-hidden="true" />
+          </span>
+          <span className="px-3">{chapterNumber}</span>
+          <span
+            aria-label="open-chapter"
+            className="focus:outline-none bg-white py-2 bg-opacity-10"
+            onClick={selectBook}
+            role="button"
+            tabIndex="-1"
+          >
+            <ChevronDownIcon className="\ h-4 w-4 mx-1 text-white" aria-hidden="true" />
+          </span>
+          <span className="px-3">{verseNumber}</span>
+          {showVerse
+            && (
+              <span className="px-3">
+                {multiSelectVerse
+                  ? selectedVerses.join()
+                  : verse}
+              </span>
+            )}
+        </div>
+      </div>
+      <Transition
+        show={openBook}
+        as={Fragment}
+        enter="transition duration-100 ease-out"
+        enterFrom="transform scale-95 opacity-0"
+        enterTo="transform scale-100 opacity-100"
+        leave="transition duration-75 ease-out"
+        leaveFrom="transform scale-100 opacity-100"
+        leaveTo="transform scale-95 opacity-0"
+      >
+        <Dialog
+          as="div"
+          className="fixed inset-0 z-10 overflow-y-auto"
+          initialFocus={cancelButtonRef}
+          static
+          open={openBook}
+          onClose={closeBooks}
+        >
+          <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
+          <div className="flex items-center justify-center h-screen ">
+            <div className="w-9/12 m-auto z-50 shadow overflow-hidden sm:rounded-lg">
+              <SelectBook
+                selectBook={selectBook}
+                bookList={bookList}
+                onChangeBook={onChangeBook}
+                multiSelectBook={multiSelectBook}
+                selectedBooks={selectedBooks}
+                setSelectedBooks={setSelectedBooks}
+                // 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.
+                scope="Other"
+              >
+                <button
+                  type="button"
+                  className="focus:outline-none w-9 h-9 bg-black p-2"
+                  onClick={closeBooks}
+                >
+                  <XMarkIcon />
+                </button>
+              </SelectBook>
+            </div>
+          </div>
+
+        </Dialog>
+      </Transition>
+
+      <Transition
+        show={openVerse}
+        as={Fragment}
+        enter="transition duration-100 ease-out"
+        enterFrom="transform scale-95 opacity-0"
+        enterTo="transform scale-100 opacity-100"
+        leave="transition duration-75 ease-out"
+        leaveFrom="transform scale-100 opacity-100"
+        leaveTo="transform scale-95 opacity-0"
+      >
+        <Dialog
+          as="div"
+          className="fixed inset-0 z-10 overflow-y-auto"
+          initialFocus={cancelButtonRef}
+          static
+          open={openVerse}
+          onClose={closeVerses}
+        >
+
+          <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
+          <div className="flex items-center justify-center h-screen">
+
+            <div className=" w-6/12 max-w-md m-auto z-50 bg-black text-white shadow overflow-hidden sm:rounded-lg">
+              <SelectVerse
+                chapter={chapter}
+                verse={verse}
+                chapterList={chapterList}
+                verseList={verseList}
+                bookName={bookName}
+                onChangeChapter={onChangeChapter}
+                onChangeVerse={onChangeVerse}
+                closeBooks={closeBooks}
+                closeVerses={closeVerses}
+                multiSelectVerse={multiSelectVerse}
+                selectedVerses={selectedVerses}
+                setSelectedVerses={setSelectedVerses}
+                verselectActive={verselectActive}
+                setVerseSelectActive={setVerseSelectActive}
+                setChapterNumber={setChapterNumber}
+                setVerseNumber={setVerseNumber}
+              >
+                <button
+                  type="button"
+                  className="focus:outline-none w-9 h-9 bg-black p-2"
+                  onClick={closeVerses}
+                >
+                  <XMarkIcon />
+                </button>
+              </SelectVerse>
+            </div>
+          </div>
+
+        </Dialog>
+      </Transition>
+    </>
+  );
+}
+
+BibleNavigationX.propTypes = {
+  showVerse: PropTypes.bool,
+};
diff --git a/renderer/src/components/EditorPage/TextEditor/Buttons.jsx b/renderer/src/components/EditorPage/TextEditor/Buttons.jsx
new file mode 100644
index 000000000..758a16b69
--- /dev/null
+++ b/renderer/src/components/EditorPage/TextEditor/Buttons.jsx
@@ -0,0 +1,107 @@
+/* eslint-disable no-unused-vars */
+import React, { useState } from 'react';
+
+import RectangleStackIcon from '@/icons/Xelah/RectangleStack.svg';
+import ArrowDownOnSquareIcon from '@/icons/Xelah/ArrowDownOnSquare.svg';
+import Bars2Icon from '@/icons/Xelah/Bars2.svg';
+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';
+
+export const classNames = (...classes) => classes.filter(Boolean).join(' ');
+
+export default function Buttons(props) {
+  const [sectionable, setSectionableState] = useState(false);
+  const [blockable, setBlockableState] = useState(true);
+  const [editable, setEditableState] = useState(true);
+  const [preview, setPreviewState] = useState(false);
+  const {
+    bookCode,
+    undo,
+    redo,
+    setSectionable,
+    setBlockable,
+    setEditable,
+    setPreview,
+    exportUsfm,
+  } = props;
+
+  const onSectionable = () => {
+    setSectionableState(!sectionable);
+    setSectionable(!sectionable);
+  };
+  const onBlockable = () => {
+    setBlockableState(!blockable);
+    setBlockable(!blockable);
+  };
+  const onEditable = () => {
+    setEditableState(!editable);
+    setEditable(!editable);
+  };
+  const onPreview = () => {
+    setPreviewState(!preview);
+    setPreview(!preview);
+  };
+
+  return (
+    <>
+      <RectangleStackIcon
+        aria-label="Collection-Icon"
+        className={classNames(
+          sectionable ? 'fill-current' : '',
+          'h-5 mr-2 w-5 text-white cursor-pointer',
+        )}
+        onClick={onSectionable}
+        title={sectionable ? 'Expand all Chapters' : 'Collapse Chapters'}
+      />
+
+      <PencilIcon
+        aria-label="Pencil-Icon"
+        className={classNames(
+          editable ? 'fill-current' : '',
+          'h-5 mr-2 w-5 text-white cursor-pointer',
+        )}
+        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"
+          onClick={onBlockable}
+          title="Collapse blocks"
+        />
+      )
+        : (
+          <Bars4Icon
+            aria-label="List-Icon"
+            className="h-5 mr-2 w-5 text-white cursor-pointer"
+            onClick={onBlockable}
+            title="Split into blocks"
+          />
+        )}
+
+      <ArrowUturnLeftIcon
+        aria-label="Undo-Icon"
+        className="h-5 mr-2 w-5 text-white cursor-pointer"
+        onClick={() => undo()}
+        title="Undo"
+      />
+      <ArrowUturnRightIcon
+        aria-label="Redo-Icon"
+        className="h-5 mr-2 w-5 text-white cursor-pointer"
+        onClick={() => redo()}
+        title="Redo"
+      />
+      <ArrowDownOnSquareIcon
+        aria-label="Save-Icon"
+        className="h-5 mr-2 w-5 text-white cursor-pointer"
+        onClick={() => exportUsfm(bookCode)}
+        title="Save"
+      />
+    </>
+  );
+}
diff --git a/renderer/src/components/EditorPage/TextEditor/Editor.jsx b/renderer/src/components/EditorPage/TextEditor/Editor.jsx
new file mode 100644
index 000000000..c53aa4c09
--- /dev/null
+++ b/renderer/src/components/EditorPage/TextEditor/Editor.jsx
@@ -0,0 +1,153 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { HtmlPerfEditor } from '@xelah/type-perf-html';
+
+import LoadingScreen from '@/components/Loading/LoadingScreen';
+import { ReferenceContext } from '@/components/context/ReferenceContext';
+import { ProjectContext } from '@/components/context/ProjectContext';
+import EmptyScreen from '@/components/Loading/EmptySrceen';
+import {
+  insertVerseNumber, insertChapterNumber, insertFootnote, insertXRef, insertHeading,
+} from '@/util/cursorUtils';
+// eslint-disable-next-line import/no-unresolved, import/extensions
+import { useAutoSaveIndication } from '@/hooks2/useAutoSaveIndication';
+import RecursiveBlock from './RecursiveBlock';
+// eslint-disable-next-line import/no-unresolved, import/extensions
+import { useIntersectionObserver } from './hooks/useIntersectionObserver';
+
+export default function Editor(props) {
+  const {
+    sequenceIds,
+    isSaving,
+    htmlPerf,
+    sectionable,
+    blockable,
+    editable,
+    preview,
+    verbose,
+    bookChange,
+    setBookChange,
+    addSequenceId,
+    saveHtmlPerf,
+    setGraftSequenceId,
+    bookAvailable,
+    setChapterNumber,
+    setVerseNumber,
+    triggerVerseInsert,
+    newVerChapNumber,
+    insertVerseRChapter,
+    selectedText,
+    setSelectedText,
+  } = props;
+
+  const [caretPosition, setCaretPosition] = useState();
+  const {
+    state: {
+      chapter, selectedFont, fontSize, projectScriptureDir,
+    },
+  } = useContext(ReferenceContext);
+
+  const {
+    states: { openSideBar, scrollLock },
+    actions: { setOpenSideBar, setSideBarTab },
+  } = useContext(ProjectContext);
+
+  const sequenceId = sequenceIds.at(-1);
+  const style = isSaving ? { cursor: 'progress' } : {};
+
+  const handlers = {
+    onBlockClick: ({ element }) => {
+      const _sequenceId = element.dataset.target;
+      const { tagName } = element;
+      if (_sequenceId) {
+        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);
+      }
+    },
+  };
+  useEffect(() => {
+    setBookChange(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [htmlPerf]);
+
+  useAutoSaveIndication(isSaving);
+
+  function onReferenceSelected({ chapter, verse }) {
+    chapter && setChapterNumber(chapter);
+    verse && setVerseNumber(verse);
+  }
+
+  useEffect(() => {
+    if (insertVerseRChapter === 'Verse') {
+      insertVerseNumber(caretPosition, newVerChapNumber);
+    }
+    if (insertVerseRChapter === 'Chapter') {
+      insertChapterNumber(caretPosition, newVerChapNumber);
+    }
+    if (insertVerseRChapter === 'Footnote') {
+      insertFootnote(caretPosition, newVerChapNumber, selectedText);
+    }
+    if (insertVerseRChapter === 'Cross Reference') {
+      insertXRef(caretPosition, newVerChapNumber, selectedText);
+    }
+    if (insertVerseRChapter === 'Section Heading') {
+      insertHeading(caretPosition, newVerChapNumber, selectedText);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [triggerVerseInsert]);
+
+  // hook for autoscrolling to the current chapter
+  useIntersectionObserver(scrollLock, setChapterNumber);
+
+  const _props = {
+    htmlPerf,
+    onHtmlPerf: saveHtmlPerf,
+    chapterIndex: chapter,
+    sequenceIds,
+    addSequenceId,
+    components: {
+      block: (__props) => RecursiveBlock({
+        htmlPerf, onHtmlPerf: saveHtmlPerf, sequenceIds, addSequenceId, onReferenceSelected, setCaretPosition, setSelectedText, ...__props,
+      }),
+    },
+    options: {
+      sectionable,
+      blockable,
+      editable,
+      preview,
+    },
+    decorators: {},
+    verbose,
+    handlers,
+  };
+
+  return (
+    <div
+      style={{
+        fontFamily: selectedFont || 'sans-serif',
+        fontSize: `${fontSize}rem`,
+        lineHeight: (fontSize > 1.3) ? 1.5 : '',
+        direction: `${projectScriptureDir === 'RTL' ? 'rtl' : 'auto'}`,
+      }}
+      className="border-l-2 border-r-2 border-secondary pb-16 overflow-auto h-full scrollbars-width leading-8"
+    >
+      <div className="editor" id="editor" style={style}>
+        {!bookAvailable && <EmptyScreen />}
+        {bookAvailable && (!sequenceId || bookChange) && <LoadingScreen />}
+        {bookAvailable && sequenceId && !bookChange && (
+          <HtmlPerfEditor {..._props} />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx b/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx
new file mode 100644
index 000000000..20f1463dc
--- /dev/null
+++ b/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx
@@ -0,0 +1,96 @@
+import React, { useContext } from 'react';
+
+import { ProjectContext } from '@/components/context/ProjectContext';
+import MenuDropdown from '@/components/MenuDropdown/MenuDropdown';
+import { LockClosedIcon, BookmarkIcon, LockOpenIcon } from '@heroicons/react/24/outline';
+// import BibleNavigationX from '@/components/EditorPage/TextEditor/BibleNavigationX';
+import BibleNavigationX from './BibleNavigationX';
+import Buttons from './Buttons';
+import InsertMenu from './InsertMenu';
+
+export default function EditorMenuBar(props) {
+  const {
+    selectedFont,
+    setInsertNumber,
+    setInsertVerseRChapter,
+    setTriggerVerseInsert,
+    triggerVerseInsert,
+    chapterNumber,
+    setChapterNumber,
+    verseNumber,
+    setVerseNumber,
+    selectedText,
+    setSelectedFont,
+  } = props;
+
+  const {
+    states: { scrollLock },
+    actions: { setScrollLock },
+  } = useContext(ProjectContext);
+
+  const handleClick = (number, title) => {
+    setInsertNumber(number);
+    setInsertVerseRChapter(title);
+    setTriggerVerseInsert(!triggerVerseInsert);
+  };
+  return (
+    <div className="relative min-h-[66px] flex flex-col bg-secondary rounded-t-md overflow-hidden">
+      <div className="flex min-h-[33px] items-center justify-between ">
+        <BibleNavigationX
+          chapterNumber={chapterNumber}
+          setChapterNumber={setChapterNumber}
+          verseNumber={verseNumber}
+          setVerseNumber={setVerseNumber}
+        />
+        <div
+          aria-label="editor-pane"
+          className="flex flex-1 justify-center text-white text-xxs uppercase tracking-wider font-bold leading-3 truncate"
+        >
+          Editor
+        </div>
+        <div
+          title="navigation lock/unlock"
+          className="flex items-center mr-auto"
+        >
+          <div>
+            {scrollLock === true ? (
+              <LockOpenIcon
+                aria-label="open-lock"
+                className="h-6 mr-2 w-6 text-white cursor-pointer"
+                aria-hidden="true"
+                onClick={() => setScrollLock(!scrollLock)}
+              />
+            ) : (
+              <LockClosedIcon
+                aria-label="close-lock"
+                className="h-5 mr-3 w-5 text-white cursor-pointer"
+                aria-hidden="true"
+                onClick={() => setScrollLock(!scrollLock)}
+              />
+            )}
+          </div>
+          <div
+            role="button"
+            tabIndex="0"
+            title="bookmark"
+            className="focus:outline-none border-r-2 border-l-2 border-white border-opacity-10"
+          >
+            <BookmarkIcon
+              className="h-5 mr-4 w-5 text-white cursor-pointer"
+              aria-hidden="true"
+            />
+          </div>
+        </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">
+          <MenuDropdown selectedFont={selectedFont} setSelectedFont={setSelectedFont} buttonStyle="h-6 mr-2 w-6 text-white cursor-pointer" />
+          <InsertMenu handleClick={handleClick} selectedText={selectedText} />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/renderer/src/components/EditorPage/TextEditor/InsertMenu.jsx b/renderer/src/components/EditorPage/TextEditor/InsertMenu.jsx
new file mode 100644
index 000000000..081b93086
--- /dev/null
+++ b/renderer/src/components/EditorPage/TextEditor/InsertMenu.jsx
@@ -0,0 +1,39 @@
+import PopupButton from './PopupButton';
+
+export default function InsertMenu({ handleClick: handleButtonClick, selectedText }) {
+  const handleClick = (number, title) => {
+    handleButtonClick(number, title);
+  };
+  return (
+    <div className="flex items-center">
+      <PopupButton
+        handleClick={handleClick}
+        title="Insert Verse"
+        icon="V"
+      />
+      <PopupButton
+        handleClick={handleClick}
+        title="Insert Chapter"
+        icon="C"
+      />
+      <PopupButton
+        handleClick={handleClick}
+        title="Footnote"
+        selectedText={selectedText}
+        icon="FN"
+      />
+      <PopupButton
+        handleClick={handleClick}
+        title="Cross Reference"
+        selectedText={selectedText}
+        icon="XR"
+      />
+      <PopupButton
+        handleClick={handleClick}
+        title="Section Heading"
+        selectedText={selectedText}
+        icon="SH"
+      />
+    </div>
+  );
+}
diff --git a/renderer/src/components/EditorPage/TextEditor/Popup.jsx b/renderer/src/components/EditorPage/TextEditor/Popup.jsx
new file mode 100644
index 000000000..498401eee
--- /dev/null
+++ b/renderer/src/components/EditorPage/TextEditor/Popup.jsx
@@ -0,0 +1,120 @@
+import React, { useState, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Dialog, Transition } from '@headlessui/react';
+
+const Popup = ({
+  handleClose, handleButtonClick, title, isPopupOpen, selectedText,
+}) => {
+  const [number, setNumber] = useState('');
+  // console.log({ title }, "title");
+  const handleInputChange = (event) => {
+    setNumber(event.target.value);
+  };
+
+  const handleNumberInputChange = (e) => {
+    setNumber(e.target.value.replace(/[^0-9]/g, ''));
+  };
+  const handleSubmit = () => {
+    handleButtonClick(number, title);
+    handleClose();
+  };
+
+  return (
+    <Transition show as={Fragment}>
+      <Dialog
+        open={isPopupOpen}
+        as="div"
+        className="fixed inset-0 z-10 overflow-y-auto"
+        onClose={handleClose}
+      >
+        <div className="min-h-screen px-4 text-center">
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out "
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in "
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
+          </Transition.Child>
+
+          <span
+            className="inline-block h-screen align-middle"
+            aria-hidden="true"
+          />
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out "
+            enterFrom="opacity-0 scale-95"
+            enterTo="opacity-100 scale-100"
+            leave="ease-in "
+            leaveFrom="opacity-100 scale-100"
+            leaveTo="opacity-0 scale-95"
+          >
+            <div className="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-md">
+              <Dialog.Title
+                as="h3"
+                className="text-lg font-medium leading-6 text-gray-900"
+              >
+                {title}
+                {' '}
+                {title === 'Verse' || title === 'Chapter' ? Number : ''}
+              </Dialog.Title>
+              <div className="mt-2">
+                {selectedText && selectedText.length > 0
+                  && (
+                    <div>
+                      <span className="font-medium text-gray-600">Selected Text :</span>
+                      {' '}
+                      <span className="text-primary">{selectedText}</span>
+                      {' '}
+                    </div>
+                  )}
+
+              </div>
+              <div className="mt-2">
+                {title === 'Verse' || title === 'Chapter'
+                  ? (
+                    <input
+                      type="text"
+                      placeholder={`${title} Number...`}
+                      className="block w-full border-gray-300 rounded-md shadow-sm appearance-none"
+                      value={number}
+                      onChange={handleNumberInputChange}
+                    />
+                  ) : (
+                    <input
+                      type="text"
+                      placeholder={`${title}`}
+                      className="block w-full border-gray-300 rounded-md shadow-sm appearance-none"
+                      value={number}
+                      onChange={handleInputChange}
+                    />
+                  )}
+
+              </div>
+              <div className="mt-4 flex justify-end">
+                <button
+                  type="button"
+                  className="px-4 py-2 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-secondary"
+                  onClick={handleSubmit}
+                >
+                  Submit
+                </button>
+              </div>
+            </div>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition>
+  );
+};
+
+Popup.propTypes = {
+  handleClose: PropTypes.func.isRequired,
+  handleButtonClick: PropTypes.func.isRequired,
+};
+
+export default Popup;
diff --git a/renderer/src/components/EditorPage/TextEditor/PopupButton.jsx b/renderer/src/components/EditorPage/TextEditor/PopupButton.jsx
new file mode 100644
index 000000000..49615bed8
--- /dev/null
+++ b/renderer/src/components/EditorPage/TextEditor/PopupButton.jsx
@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import Popup from './Popup';
+
+const PopupButton = ({
+  handleClick, title, selectedText, icon,
+}) => {
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+
+  const handlePopupOpen = () => {
+    setIsPopupOpen(true);
+  };
+
+  const handlePopupClose = () => {
+    setIsPopupOpen(false);
+  };
+
+  const handleButtonClick = (number, title) => {
+    handleClick(number, title);
+  };
+
+  return (
+    <div
+      role="button"
+      tabIndex={-1}
+      onKeyDown={(e) => e.stopPropagation()}
+      onClick={(e) => e.stopPropagation()}
+      onFocus={(e) => e.stopPropagation()}
+      onMouseOver={(e) => e.stopPropagation()}
+    >
+      <button
+        title={title}
+        type="button"
+        onClick={handlePopupOpen}
+      >
+        <span className="h-5 mr-2 w-5 text-white cursor-pointer">{icon}</span>
+      </button>
+      {isPopupOpen && (
+        <Popup handleClose={handlePopupClose} handleButtonClick={handleButtonClick} title={title} isPopupOpen={isPopupOpen} selectedText={selectedText} />
+      )}
+    </div>
+  );
+};
+
+export default PopupButton;
diff --git a/renderer/src/components/EditorPage/TextEditor/RecursiveBlock.jsx b/renderer/src/components/EditorPage/TextEditor/RecursiveBlock.jsx
new file mode 100644
index 000000000..5561aeef9
--- /dev/null
+++ b/renderer/src/components/EditorPage/TextEditor/RecursiveBlock.jsx
@@ -0,0 +1,123 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable no-unused-vars */
+import React, { useEffect, useState } from 'react';
+import { HtmlPerfEditor } from '@xelah/type-perf-html';
+import { getCurrentCursorPosition } from '@/util/cursorUtils';
+import { getCurrentVerse, getCurrentChapter } from '@/components/EditorPage/TextEditor/utils/getReferences';
+
+const getTarget = ({ content }) => {
+  const div = document.createElement('div');
+  div.innerHTML = content;
+
+  const { target } = div.firstChild?.dataset || {};
+
+  return target;
+};
+
+export default function RecursiveBlock({
+  htmlPerf,
+  onHtmlPerf,
+  sequenceIds,
+  addSequenceId,
+  options,
+  content,
+  style,
+  contentEditable,
+  index,
+  verbose,
+  setFootNote,
+  bookId,
+  onReferenceSelected,
+  setCaretPosition,
+  setSelectedText,
+  ...props
+}) {
+  const [currentVerse, setCurrentVerse] = useState(null);
+
+  const updateCursorPosition = () => {
+    const cursorPosition = getCurrentCursorPosition('editor');
+    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) {
+      selectedText = window.getSelection().toString();
+    } else if (document.selection && document.selection.type !== 'Control') {
+      selectedText = document.selection.createRange().text;
+    }
+    if (selectedText) {
+      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 });
+    }
+    updateCursorPosition();
+    handleSelection();
+  };
+
+  let component;
+
+  const editable = !!content.match(/data-type="paragraph"/);
+
+  if (editable) {
+    component = (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      <div
+        className="editor-paragraph"
+        contentEditable={contentEditable}
+        onKeyDown={checkReturnKeyPress}
+        onMouseUp={checkCurrentVerse}
+        onMouseDown={updateCursorPosition}
+        {...props}
+      />
+    );
+  }
+  if (!editable) {
+    const sequenceId = getTarget({ content });
+
+    if (sequenceId && !options.preview) {
+      const _props = {
+        sequenceIds: [...sequenceIds, sequenceId],
+        addSequenceId,
+        htmlPerf,
+        onHtmlPerf,
+        onInput: props?.onInput,
+        options,
+      };
+      component = <HtmlPerfEditor {..._props} />;
+    }
+    component ||= <div {...props} contentEditable={false} />;
+  }
+
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{component}</>;
+}
diff --git a/renderer/src/components/EditorPage/TextEditor/ReferenceEditor.jsx b/renderer/src/components/EditorPage/TextEditor/ReferenceEditor.jsx
new file mode 100644
index 000000000..f1ef0fcc8
--- /dev/null
+++ b/renderer/src/components/EditorPage/TextEditor/ReferenceEditor.jsx
@@ -0,0 +1,115 @@
+/* eslint-disable no-unused-vars */
+import React, { useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { HtmlPerfEditor } from '@xelah/type-perf-html';
+import LoadingScreen from '@/components/Loading/LoadingScreen';
+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 ReferenceRecursiveBlock from './ReferenceRecursiveBlock';
+
+export default function ReferenceEditor(props) {
+  const {
+    sequenceIds,
+    isSaving,
+    isLoading,
+    htmlPerf,
+    sectionable,
+    blockable,
+    editable,
+    preview,
+    verbose,
+    bookName,
+    bookChange,
+    setBookChange,
+    addSequenceId,
+    saveHtmlPerf,
+    setGraftSequenceId,
+    bookAvailable,
+  } = props;
+
+  const {
+    state: { chapter },
+  } = useContext(ReferenceContext);
+
+  const { t } = useTranslation();
+
+  const {
+    states: { openSideBar },
+    actions: { setOpenSideBar, setSideBarTab },
+  } = useContext(ProjectContext);
+  const sequenceId = sequenceIds.at(-1);
+  const style = isSaving ? { cursor: 'progress' } : {};
+  // const bookChanged = sequenceId === htmlPerf?.mainSequenceId;
+  const handlers = {
+    onBlockClick: ({ content: _content, element }) => {
+      const _sequenceId = element.dataset.target;
+      const { tagName } = element;
+      const isInline = tagName === 'SPAN';
+      if (_sequenceId) {
+        setGraftSequenceId(_sequenceId);
+        setOpenSideBar(!openSideBar);
+        setSideBarTab('footnotes');
+      } else {
+        setSideBarTab('');
+        setGraftSequenceId(null);
+      }
+    },
+  };
+  useEffect(() => {
+    setBookChange(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [htmlPerf]);
+
+  const {
+    actions: { setEditorSave },
+  } = useContext(ProjectContext);
+
+  const autoSaveIndication = () => {
+    setEditorSave(<SaveIndicator />);
+    setTimeout(() => {
+      setEditorSave(t('label-saved'));
+    }, 1000);
+  };
+  useEffect(() => {
+    if (isSaving) {
+      autoSaveIndication();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSaving]);
+
+  const _props = {
+    htmlPerf,
+    onHtmlPerf: saveHtmlPerf,
+    chapterIndex: chapter,
+    sequenceIds,
+    addSequenceId,
+    options: {
+      sectionable,
+      blockable,
+      editable,
+      preview,
+    },
+    components: {
+      block: (__props) => ReferenceRecursiveBlock({
+        htmlPerf,
+        sequenceIds,
+        ...__props,
+      }),
+    },
+    decorators: {},
+    verbose,
+    handlers,
+    autoSaveIndication,
+  };
+  return (
+    <div className="ref-editor" id="ref-editor" style={style}>
+      {!bookAvailable && <EmptyScreen />}
+      {bookAvailable && (!sequenceId || bookChange) && <LoadingScreen />}
+      {bookAvailable && sequenceId && !bookChange && (
+        <HtmlPerfEditor {..._props} />
+      )}
+    </div>
+  );
+}
diff --git a/renderer/src/components/EditorPage/TextEditor/ReferenceRecursiveBlock.jsx b/renderer/src/components/EditorPage/TextEditor/ReferenceRecursiveBlock.jsx
new file mode 100644
index 000000000..20225b684
--- /dev/null
+++ b/renderer/src/components/EditorPage/TextEditor/ReferenceRecursiveBlock.jsx
@@ -0,0 +1,74 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable no-unused-vars */
+import React, { useEffect, useState } from 'react';
+import { HtmlPerfEditor } from '@xelah/type-perf-html';
+
+const getTarget = ({ content }) => {
+  const div = document.createElement('div');
+  div.innerHTML = content;
+
+  const { target } = div.firstChild?.dataset || {};
+
+  return target;
+};
+
+export default function ReferenceRecursiveBlock({
+  htmlPerf,
+  onHtmlPerf,
+  sequenceIds,
+  addSequenceId,
+  options,
+  content,
+  style,
+  contentEditable,
+  index,
+  verbose,
+  setFootNote,
+  ...props
+}) {
+  const checkReturnKeyPress = (event) => {
+    if (event.key === 'Enter') {
+      const activeTextArea = document.activeElement;
+      if (activeTextArea.children.length > 1) {
+        const lineBreak = activeTextArea.children[1]?.outerHTML;
+        const newLine = lineBreak.replace(/<br\s*\/?>/gi, '&nbsp');
+        activeTextArea.children[1].outerHTML = newLine;
+      }
+    }
+  };
+
+  let component;
+
+  const editable = !!content.match(/data-type="paragraph"/);
+
+  if (editable) {
+    component = (
+      <div
+        role="textbox"
+        contentEditable={contentEditable}
+        onKeyUp={checkReturnKeyPress}
+        {...props}
+        tabIndex={0}
+      />
+    );
+  }
+
+  if (!editable) {
+    const sequenceId = getTarget({ content });
+
+    if (sequenceId && !options.preview) {
+      const _props = {
+        sequenceIds: [...sequenceIds, sequenceId],
+        addSequenceId,
+        htmlPerf,
+        onHtmlPerf,
+        onInput: props?.onInput,
+        options,
+      };
+      component = <HtmlPerfEditor {..._props} />;
+    }
+    component ||= <div {...props} contentEditable={false} />;
+  }
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{component}</>;
+}
diff --git a/renderer/src/components/EditorPage/TextEditor/ReferenceScribex.jsx b/renderer/src/components/EditorPage/TextEditor/ReferenceScribex.jsx
new file mode 100644
index 000000000..e667abf02
--- /dev/null
+++ b/renderer/src/components/EditorPage/TextEditor/ReferenceScribex.jsx
@@ -0,0 +1,94 @@
+import { useEffect, useState, useContext } from 'react';
+import { useProskomma, useImport, useCatalog } from 'proskomma-react-hooks';
+import { useDeepCompareEffect } from 'use-deep-compare';
+import usePerf from '@/components/hooks/scribex/usePerf';
+import htmlMap from '@/components/hooks/scribex/htmlmap';
+import { ReferenceContext } from '@/components/context/ReferenceContext';
+import { ScribexContext } from '@/components/context/ScribexContext';
+import ReferenceEditor from './ReferenceEditor';
+
+export default function ReferenceScribex(props) {
+  const { state, actions } = useContext(ScribexContext);
+  const { verbose } = state;
+  const {
+    usfmData, bookAvailable, refName, bookId, scrollLock, font,
+  } = props;
+  const [selectedBook, setSelectedBook] = useState();
+  const [bookChange, setBookChange] = useState(false);
+  let selectedDocument;
+
+  const { proskomma, stateId, newStateId } = useProskomma({ verbose });
+  const { done } = useImport({
+    proskomma,
+    stateId,
+    newStateId,
+    documents: usfmData,
+  });
+  const {
+    state: {
+      fontSize,
+      projectScriptureDir,
+    },
+  } = useContext(ReferenceContext);
+
+  useEffect(() => {
+    setSelectedBook(bookId.toUpperCase());
+    setBookChange(true);
+  }, [bookId]);
+
+  const { catalog } = useCatalog({ proskomma, stateId, verbose });
+  const { id: docSetId, documents } = (done && catalog.docSets[0]) || {};
+  if (done) {
+    selectedDocument = documents?.find(
+      (doc) => doc.bookCode === selectedBook,
+    );
+  }
+
+  const { bookCode, h: bookName } = selectedDocument || {};
+  const ready = (docSetId && bookCode) || false;
+  const isLoading = !done || !ready;
+  const { state: perfState, actions: perfActions } = usePerf({
+    proskomma,
+    ready,
+    docSetId,
+    bookCode,
+    verbose,
+    htmlMap,
+    refName,
+  });
+
+  useEffect(() => {
+    actions.setSequenceIds([]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [refName, bookId, scrollLock]);
+
+  const { htmlPerf } = perfState;
+  useDeepCompareEffect(() => {
+    if (htmlPerf && htmlPerf.mainSequenceId !== state.sequenceIds[0]) {
+      actions.setSequenceIds([htmlPerf?.mainSequenceId]);
+    }
+  }, [htmlPerf, state.sequenceIds, perfState, refName]);
+  const _props = {
+    ...state,
+    ...perfState,
+    ...actions,
+    ...perfActions,
+    isLoading,
+    bookName,
+    bookChange,
+    bookAvailable,
+    setBookChange,
+  };
+  return (
+    <div
+      style={{
+          fontFamily: font || 'sans-serif',
+          fontSize: `${fontSize}rem`,
+          lineHeight: (fontSize > 1.3) ? 1.5 : '',
+          direction: `${projectScriptureDir === 'RTL' ? 'rtl' : 'auto'}`,
+        }}
+    >
+      <ReferenceEditor {..._props} />
+    </div>
+  );
+}
diff --git a/renderer/src/components/EditorPage/TextEditor/hooks/useIntersectionObserver.js b/renderer/src/components/EditorPage/TextEditor/hooks/useIntersectionObserver.js
new file mode 100644
index 000000000..b366f5ec2
--- /dev/null
+++ b/renderer/src/components/EditorPage/TextEditor/hooks/useIntersectionObserver.js
@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+
+export const useIntersectionObserver = (scrollLock, setChapterNumber) => {
+ useEffect(() => {
+  console.log('scroll ');
+    const options = {
+      root: document.querySelector('editor'),
+      threshold: 0,
+      rootMargin: '0% 0% -60% 0%',
+    };
+    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');
+        }
+      });
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      // eslint-disable-next-line no-restricted-syntax
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          setChapterNumber(entry.target.dataset.attsNumber);
+          if (!scrollLock) {
+            scrollReference(entry.target.dataset.attsNumber);
+          }
+        }
+      }
+    }, options);
+
+    const watchNodes = document.querySelectorAll('.editor .chapter');
+    const watchArr = Array.from(watchNodes);
+    const reverseArray = watchArr.length > 0 ? watchArr.slice().reverse() : [];
+    reverseArray.forEach((chapter) => {
+      observer.observe(chapter);
+    });
+
+    return () => {
+      // Cleanup: Disconnect the observer when the component unmounts
+      observer.disconnect();
+    };
+  }, []);
+};
diff --git a/renderer/src/components/EditorPage/TextEditor/index.jsx b/renderer/src/components/EditorPage/TextEditor/index.jsx
new file mode 100644
index 000000000..570f2c81d
--- /dev/null
+++ b/renderer/src/components/EditorPage/TextEditor/index.jsx
@@ -0,0 +1,123 @@
+import {
+  useEffect, useState, useContext, Fragment,
+} from 'react';
+import { useProskomma, useImport, useCatalog } from 'proskomma-react-hooks';
+import { useDeepCompareEffect } from 'use-deep-compare';
+import usePerf from '@/components/hooks/scribex/usePerf';
+import htmlMap from '@/components/hooks/scribex/htmlmap';
+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 EditorMenuBar from './EditorMenuBar';
+import Editor from './Editor';
+
+export default function TextEditor(props) {
+  const { state, actions } = useContext(ScribexContext);
+  const { verbose } = state;
+  const { usfmData, bookAvailable } = props;
+  const [selectedBook, setSelectedBook] = useState();
+  const [bookChange, setBookChange] = useState(false);
+  const [chapterNumber, setChapterNumber] = useState(1);
+  const [verseNumber, setVerseNumber] = useState(1);
+  const [triggerVerseInsert, setTriggerVerseInsert] = useState(false);
+  const [newVerChapNumber, setInsertNumber] = useState('');
+  const [insertVerseRChapter, setInsertVerseRChapter] = useState('');
+  const [selectedText, setSelectedText] = useState();
+
+  const {
+    state: {
+      bookId,
+    },
+    actions: { setSelectedFont },
+  } = useContext(ReferenceContext);
+
+  const {
+    states: { openSideBar },
+    actions: { setOpenSideBar },
+  } = useContext(ProjectContext);
+
+  let selectedDocument;
+
+  const { proskomma, stateId, newStateId } = useProskomma({ verbose });
+  const { done } = useImport({
+    proskomma,
+    stateId,
+    newStateId,
+    documents: usfmData,
+  });
+
+  function closeSideBar(status) {
+    setOpenSideBar(status);
+  }
+
+  useEffect(() => {
+    setSelectedBook(bookId.toUpperCase());
+    setBookChange(true);
+  }, [bookId]);
+
+  const { catalog } = useCatalog({ proskomma, stateId, verbose });
+  const { id: docSetId, documents } = (done && catalog.docSets[0]) || {};
+  if (done) {
+    selectedDocument = documents?.find(
+      (doc) => doc.bookCode === selectedBook,
+    );
+  }
+
+  const { bookCode, h: bookName } = selectedDocument || {};
+  const ready = (docSetId && bookCode) || false;
+  const isLoading = !done || !ready;
+  const { state: perfState, actions: perfActions } = usePerf({
+    proskomma,
+    ready,
+    docSetId,
+    bookCode,
+    verbose,
+    htmlMap,
+  });
+  const { htmlPerf } = perfState;
+
+  useDeepCompareEffect(() => {
+    if (htmlPerf && htmlPerf.mainSequenceId !== state.sequenceIds[0]) {
+      actions.setSequenceIds([htmlPerf?.mainSequenceId]);
+    }
+  }, [htmlPerf, state.sequenceIds, perfState]);
+
+  const _props = {
+    ...state,
+    ...perfState,
+    ...actions,
+    ...perfActions,
+    triggerVerseInsert,
+    chapterNumber,
+    verseNumber,
+    isLoading,
+    bookName,
+    bookChange,
+    bookAvailable,
+    setBookChange,
+    setChapterNumber,
+    setVerseNumber,
+    newVerChapNumber,
+    insertVerseRChapter,
+    selectedText,
+    setSelectedText,
+    setTriggerVerseInsert,
+    setSelectedFont,
+    setInsertNumber,
+    setInsertVerseRChapter,
+  };
+  return (
+    <>
+      <EditorSideBar
+        isOpen={openSideBar}
+        closeSideBar={closeSideBar}
+        graftProps={_props}
+      />
+      <div className="flex flex-col bg-white border-b-2 border-secondary h-editor rounded-md shadow scrollbar-width">
+        <EditorMenuBar {..._props} />
+        <Editor {..._props} />
+      </div>
+    </>
+  );
+}
diff --git a/renderer/src/components/EditorPage/TextEditor/utils/IntersectionObserver.js b/renderer/src/components/EditorPage/TextEditor/utils/IntersectionObserver.js
new file mode 100644
index 000000000..caafdf193
--- /dev/null
+++ b/renderer/src/components/EditorPage/TextEditor/utils/IntersectionObserver.js
@@ -0,0 +1,20 @@
+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 onIntersection = (entries, setChapterNumber, scrollLock) => {
+  // eslint-disable-next-line no-restricted-syntax
+  for (const entry of entries) {
+    if (entry.isIntersecting) {
+      setChapterNumber(entry.target.dataset.attsNumber);
+      scrollLock === false ? scrollReference(entry.target.dataset.attsNumber) : {};
+    }
+  }
+};
diff --git a/renderer/src/components/EditorPage/TextEditor/utils/getReferences.js b/renderer/src/components/EditorPage/TextEditor/utils/getReferences.js
new file mode 100644
index 000000000..fe6cb92f2
--- /dev/null
+++ b/renderer/src/components/EditorPage/TextEditor/utils/getReferences.js
@@ -0,0 +1,32 @@
+export const getCurrentVerse = (currentNode) => {
+  let currentVerse;
+  let prev = currentNode.previousElementSibling;
+  while (prev) {
+    if (prev.dataset.type === 'mark' && prev.dataset.subtype === 'verses') {
+      currentVerse = prev.dataset.attsNumber;
+      break;
+    }
+    // Get the previous sibling
+    prev = prev.previousElementSibling;
+  }
+  return currentVerse;
+};
+
+export const getCurrentChapter = (currentNode) => {
+  let currentChapter;
+  const closestParaDiv = currentNode.parentNode.parentNode;
+  if (closestParaDiv.firstElementChild?.firstElementChild?.classList.contains('chapter')) {
+    currentChapter = closestParaDiv.firstElementChild.firstElementChild.dataset.attsNumber;
+    return currentChapter;
+  }
+
+    let prevParaDiv = closestParaDiv.previousElementSibling;
+    while (prevParaDiv) {
+      if (prevParaDiv.firstElementChild?.firstElementChild?.classList.contains('chapter')) {
+        currentChapter = prevParaDiv.firstElementChild.firstElementChild.dataset.attsNumber;
+        break;
+      }
+      prevParaDiv = prevParaDiv.previousElementSibling;
+    }
+    return currentChapter;
+};

From 201ac740b5a8e82442f645d62ff3b576f88d7c53 Mon Sep 17 00:00:00 2001
From: samueljd <samuelj.ernest@gmail.com>
Date: Mon, 23 Oct 2023 18:02:22 +0530
Subject: [PATCH 2/7] editor-refactor

---
 .eslintrc.json                                |   3 +-
 .vscode/settings.json                         |  10 +-
 jsconfig.json                                 |   6 +-
 renderer/jsconfig.json                        |  11 +-
 .../Navigation/reference/SelectVerse.js       |   2 -
 .../ReferenceBible/ReferenceBibleX.js         |   2 +-
 .../components/EditorPage/Scribex/Buttons.jsx | 130 -----------
 .../components/EditorPage/Scribex/Editor.jsx  | 206 ------------------
 .../EditorPage/Scribex/GraftEditor.jsx        |  65 ------
 .../EditorPage/Scribex/InsertMenu.jsx         |  57 -----
 .../components/EditorPage/Scribex/Popup.jsx   | 119 ----------
 .../EditorPage/Scribex/PopupButton.jsx        |  46 ----
 .../EditorPage/Scribex/RecursiveBlock.jsx     | 126 -----------
 .../EditorPage/Scribex/ReferenceEditor.jsx    | 115 ----------
 .../Scribex/ReferenceRecursiveBlock.jsx       |  74 -------
 .../EditorPage/Scribex/ReferenceScribex.jsx   |  92 --------
 .../components/EditorPage/Scribex/Scribex.jsx | 201 -----------------
 .../EditorPage/Scribex/getReferences.js       |  32 ---
 .../EditorPage/TextEditor/Editor.jsx          |  22 +-
 .../EditorPage/TextEditor/InsertMenu.jsx      |   4 +-
 .../TextEditor/ReferenceScribex.jsx           |  16 +-
 .../EditorPage/TextEditor/hooks/htmlmap.js    |  55 +++++
 .../EditorPage/TextEditor/hooks/saveToFile.js |  36 +++
 .../hooks/useIntersectionObserver.js          |  46 ----
 .../EditorPage/TextEditor/hooks/usePerf.js    | 123 +++++++++++
 .../TextEditor/hooks/useReadUsfmFile.js       |  57 +++++
 .../EditorPage/TextEditor/index.jsx           |  11 +-
 .../TextEditor/utils/IntersectionObserver.js  |   2 +-
 renderer/src/hooks/useAutoSaveIndication.js   |  24 ++
 .../src/layouts/editor/SectionContainer.js    |  16 +-
 .../src/layouts/editor/WebSectionContainer.js |  19 +-
 renderer/src/util/cursorUtils.js              |   8 +
 supabase.js                                   |   5 +-
 yarn.lock                                     |  82 +++++++
 34 files changed, 451 insertions(+), 1372 deletions(-)
 delete mode 100644 renderer/src/components/EditorPage/Scribex/Buttons.jsx
 delete mode 100644 renderer/src/components/EditorPage/Scribex/Editor.jsx
 delete mode 100644 renderer/src/components/EditorPage/Scribex/GraftEditor.jsx
 delete mode 100644 renderer/src/components/EditorPage/Scribex/InsertMenu.jsx
 delete mode 100644 renderer/src/components/EditorPage/Scribex/Popup.jsx
 delete mode 100644 renderer/src/components/EditorPage/Scribex/PopupButton.jsx
 delete mode 100644 renderer/src/components/EditorPage/Scribex/RecursiveBlock.jsx
 delete mode 100644 renderer/src/components/EditorPage/Scribex/ReferenceEditor.jsx
 delete mode 100644 renderer/src/components/EditorPage/Scribex/ReferenceRecursiveBlock.jsx
 delete mode 100644 renderer/src/components/EditorPage/Scribex/ReferenceScribex.jsx
 delete mode 100644 renderer/src/components/EditorPage/Scribex/Scribex.jsx
 delete mode 100644 renderer/src/components/EditorPage/Scribex/getReferences.js
 create mode 100644 renderer/src/components/EditorPage/TextEditor/hooks/htmlmap.js
 create mode 100644 renderer/src/components/EditorPage/TextEditor/hooks/saveToFile.js
 delete mode 100644 renderer/src/components/EditorPage/TextEditor/hooks/useIntersectionObserver.js
 create mode 100644 renderer/src/components/EditorPage/TextEditor/hooks/usePerf.js
 create mode 100644 renderer/src/components/EditorPage/TextEditor/hooks/useReadUsfmFile.js
 create mode 100644 renderer/src/hooks/useAutoSaveIndication.js

diff --git a/.eslintrc.json b/.eslintrc.json
index ce263e66f..673289bed 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -96,7 +96,8 @@
 					["@/layouts", "./renderer/src/layouts/"],
 					["@/modules", "./renderer/src/modules/"],
 					["@/util", "./renderer/src/util/"],
-					["@/core", "./renderer/src/core/"]
+					["@/core", "./renderer/src/core/"],
+					["@/hooks", "./renderer/src/hooks/"]
 				],
 				"node": {
 					"extensions": [".js", ".jsx", ".ts", ".tsx"]
diff --git a/.vscode/settings.json b/.vscode/settings.json
index e59d78323..0ecec27ec 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,11 +2,15 @@
 	"[javascript]": {
 		"editor.formatOnSave": false
 	},
-	"editor.rulers": [100],
+	"editor.rulers": [
+		100
+	],
 	"editor.fontLigatures": true,
 	"prettier.tabWidth": 4,
 	"eslint.alwaysShowStatus": true,
-	"prettier.disableLanguages": ["js"],
+	"prettier.disableLanguages": [
+		"js"
+	],
 	"prettier.useTabs": true,
 	"editor.formatOnSave": true,
 	"editor.multiCursorModifier": "alt",
@@ -27,4 +31,4 @@
 	},
 	"eslint.workingDirectories": [],
 	"editor.tabSize": 2
-}
+}
\ No newline at end of file
diff --git a/jsconfig.json b/jsconfig.json
index 4138fa416..cf2e97bcf 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -28,5 +28,9 @@
         "app/*"
       ],
     }
-  }
+  },
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
 }
\ No newline at end of file
diff --git a/renderer/jsconfig.json b/renderer/jsconfig.json
index 4f315116b..fb5f8086f 100644
--- a/renderer/jsconfig.json
+++ b/renderer/jsconfig.json
@@ -23,9 +23,16 @@
       "@/illustrations/*": [
         "public/illustrations/*"
       ],
-      "@/hooks/*":[
+      "@/hooks/*": [
         "src/components/hooks/*"
+      ],
+      "@/hooks2/*": [
+        "src/hooks/*"
       ]
     }
-  }
+  },
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
 }
\ No newline at end of file
diff --git a/renderer/src/components/EditorPage/Navigation/reference/SelectVerse.js b/renderer/src/components/EditorPage/Navigation/reference/SelectVerse.js
index 09646b4e0..40fa0165a 100644
--- a/renderer/src/components/EditorPage/Navigation/reference/SelectVerse.js
+++ b/renderer/src/components/EditorPage/Navigation/reference/SelectVerse.js
@@ -50,8 +50,6 @@ export default function SelectVerse({
       document.getElementById('editor').querySelector(`#ch${chapter}v${verseNum}`)?.scrollIntoView();
       setVerseNumber(verseNum);
     }
-     // window.location.href = `#ch${chapter}v${verseNum}`;
-    // document.getElementById(`ch${chapter}v${verseNum}`).scrollIntoView();
   };
 
   const onMultiSelectVerse = async (e, verses) => {
diff --git a/renderer/src/components/EditorPage/Reference/ReferenceBible/ReferenceBibleX.js b/renderer/src/components/EditorPage/Reference/ReferenceBible/ReferenceBibleX.js
index afc4519f3..472e791c1 100644
--- a/renderer/src/components/EditorPage/Reference/ReferenceBible/ReferenceBibleX.js
+++ b/renderer/src/components/EditorPage/Reference/ReferenceBible/ReferenceBibleX.js
@@ -6,7 +6,7 @@ import LoadingScreen from '@/components/Loading/LoadingScreen';
 import { SnackBar } from '@/components/SnackBar';
 import EmptyScreen from '@/components/Loading/EmptySrceen';
 import { useReadReferenceUsfmFile } from '@/components/EditorPage/Reference/ReferenceBible/useReadReferenceUsfmFile';
-import ReferenceScribex from '../../Scribex/ReferenceScribex';
+import ReferenceScribex from '../../TextEditor/ReferenceScribex';
 
 const ReferenceBibleX = ({
   languageId,
diff --git a/renderer/src/components/EditorPage/Scribex/Buttons.jsx b/renderer/src/components/EditorPage/Scribex/Buttons.jsx
deleted file mode 100644
index 057559e40..000000000
--- a/renderer/src/components/EditorPage/Scribex/Buttons.jsx
+++ /dev/null
@@ -1,130 +0,0 @@
-/* eslint-disable no-unused-vars */
-import React, { useState } from 'react';
-
-import RectangleStackIcon from '@/icons/Xelah/RectangleStack.svg';
-import ArrowDownOnSquareIcon from '@/icons/Xelah/ArrowDownOnSquare.svg';
-import Bars2Icon from '@/icons/Xelah/Bars2.svg';
-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';
-
-export const classNames = (...classes) => classes.filter(Boolean).join(' ');
-
-export default function Buttons(props) {
-  const [sectionable, setSectionableState] = useState(false);
-  const [blockable, setBlockableState] = useState(true);
-  const [editable, setEditableState] = useState(true);
-  const [preview, setPreviewState] = useState(false);
-  const {
-    bookCode,
-    undo,
-    redo,
-    setSectionable,
-    setBlockable,
-    setEditable,
-    setPreview,
-    exportUsfm,
-    setTriggerVerseInsert,
-  } = props;
-
-  const onSectionable = () => {
-    setSectionableState(!sectionable);
-    setSectionable(!sectionable);
-  };
-  const onBlockable = () => {
-    setBlockableState(!blockable);
-    setBlockable(!blockable);
-  };
-  const onEditable = () => {
-    setEditableState(!editable);
-    setEditable(!editable);
-  };
-  const onPreview = () => {
-    setPreviewState(!preview);
-    setPreview(!preview);
-  };
-
-  return (
-    <>
-      <RectangleStackIcon
-        aria-label="Collection-Icon"
-        className={classNames(
-          sectionable ? 'fill-current' : '',
-          'h-5 mr-2 w-5 text-white cursor-pointer',
-        )}
-        // aria-hidden="true"
-        onClick={onSectionable}
-        title={sectionable ? 'Expand all Chapters' : 'Collapse Chapters'}
-      />
-
-      <PencilIcon
-        aria-label="Pencil-Icon"
-        className={classNames(
-          editable ? 'fill-current' : '',
-          'h-5 mr-2 w-5 text-white cursor-pointer',
-        )}
-        // 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"
-          onClick={onBlockable}
-          title="Collapse blocks"
-        />
-      )
-        : (
-          <Bars4Icon
-            aria-label="List-Icon"
-            className="h-5 mr-2 w-5 text-white cursor-pointer"
-            // aria-hidden="true"
-            onClick={onBlockable}
-            title="Split into blocks"
-          />
-        )}
-
-      <ArrowUturnLeftIcon
-        aria-label="Undo-Icon"
-        className="h-5 mr-2 w-5 text-white cursor-pointer"
-        // 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"
-        onClick={() => redo()}
-        title="Redo"
-      />
-      <ArrowDownOnSquareIcon
-        aria-label="Save-Icon"
-        className="h-5 mr-2 w-5 text-white cursor-pointer"
-        // 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
deleted file mode 100644
index 5686132b6..000000000
--- a/renderer/src/components/EditorPage/Scribex/Editor.jsx
+++ /dev/null
@@ -1,206 +0,0 @@
-/* eslint-disable no-unused-vars */
-import { useContext, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { HtmlPerfEditor } from '@xelah/type-perf-html';
-
-import LoadingScreen from '@/components/Loading/LoadingScreen';
-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, insertXRef,
-} from '@/util/cursorUtils';
-import RecursiveBlock from './RecursiveBlock';
-
-export default function Editor(props) {
-  const {
-    chapterNumber,
-    sequenceIds,
-    isSaving,
-    isLoading,
-    htmlPerf,
-    sectionable,
-    blockable,
-    editable,
-    preview,
-    verbose,
-    bookName,
-    bookChange,
-    setBookChange,
-    addSequenceId,
-    saveHtmlPerf,
-    setGraftSequenceId,
-    bookAvailable,
-    setChapterNumber,
-    setVerseNumber,
-    triggerVerseInsert,
-    newVerChapNumber,
-    insertVerseRChapter,
-    reference,
-    insertNewGraft,
-    selectedText,
-    setSelectedText,
-  } = props;
-
-  const [caretPosition, setCaretPosition] = useState();
-  const [graftInsert, setGraftInsert] = useState(false);
-  const {
-    state: { chapter },
-  } = useContext(ReferenceContext);
-  const { t } = useTranslation();
-
-  const {
-    states: { openSideBar, scrollLock },
-    actions: { setOpenSideBar, setSideBarTab },
-  } = 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) {
-        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);
-      }
-    },
-  };
-  useEffect(() => {
-    setBookChange(false);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [htmlPerf]);
-
-  const {
-    actions: { setEditorSave },
-  } = useContext(ProjectContext);
-
-  const autoSaveIndication = () => {
-    setEditorSave(<SaveIndicator />);
-    setTimeout(() => {
-      setEditorSave(t('label-saved'));
-    }, 1000);
-  };
-  useEffect(() => {
-    if (isSaving) {
-      autoSaveIndication();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isSaving]);
-
-  function onReferenceSelected({ bookId, chapter, verse }) {
-    chapter && setChapterNumber(chapter);
-    verse && setVerseNumber(verse);
-  }
-
-  function getSelectedText() {
-    let selectedText = '';
-    if (window.getSelection) {
-      const selection = window.getSelection();
-
-      selectedText = selection.toString();
-      setSelectedText(selectedText);
-    } else if (document.selection && document.selection.type !== 'Control') {
-      selectedText = document.selection.createRange().text;
-      setSelectedText(selectedText);
-    }
-  }
-
-  useEffect(() => {
-    if (insertVerseRChapter === 'Verse') {
-      insertVerseNumber(caretPosition, newVerChapNumber);
-    }
-    if (insertVerseRChapter === 'Chapter') {
-      insertChapterNumber(caretPosition, newVerChapNumber);
-    }
-    if (insertVerseRChapter === 'Footnote') {
-      // setGraftInsert(true);
-      insertFootnote(caretPosition, newVerChapNumber, selectedText);
-    }
-    if (insertVerseRChapter === 'Cross Reference') {
-      insertXRef(caretPosition, newVerChapNumber, selectedText);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [triggerVerseInsert]);
-
-  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');
-      }
-    });
-  };
-
-  const onIntersection = (entries) => {
-    // eslint-disable-next-line no-restricted-syntax
-    for (const entry of entries) {
-      if (entry.isIntersecting) {
-        setChapterNumber(entry.target.dataset.attsNumber);
-        scrollLock === false ? scrollReference(entry.target.dataset.attsNumber) : {};
-      }
-    }
-  };
-
-  const options = {
-    root: document.querySelector('editor'),
-    threshold: 0,
-    rootMargin: '0% 0% -60% 0%',
-  };
-  const observer = new IntersectionObserver(onIntersection, options);
-
-  const watchNodes = document.querySelectorAll('.editor .chapter');
-  const watchArr = Array.from(watchNodes);
-  const reverseArray = watchArr.length > 0 ? watchArr.slice().reverse() : [];
-  reverseArray.forEach((chapter) => { observer.observe(chapter); });
-
-  const _props = {
-    htmlPerf,
-    // onHtmlPerf: graftInsert ? insertNewGraft : saveHtmlPerf,
-    onHtmlPerf: saveHtmlPerf,
-    chapterIndex: chapter,
-    sequenceIds,
-    addSequenceId,
-    components: {
-      block: (__props) => RecursiveBlock({
-        htmlPerf, onHtmlPerf: saveHtmlPerf, sequenceIds, addSequenceId, onReferenceSelected, setCaretPosition, setSelectedText, ...__props,
-      }),
-    },
-    options: {
-      sectionable,
-      blockable,
-      editable,
-      preview,
-    },
-    decorators: {},
-    verbose,
-    handlers,
-    autoSaveIndication,
-  };
-
-  return (
-    <div className="editor" id="editor" style={style}>
-      {!bookAvailable && <EmptyScreen />}
-      {bookAvailable && (!sequenceId || bookChange) && <LoadingScreen />}
-      {bookAvailable && sequenceId && !bookChange && (
-        <HtmlPerfEditor {..._props} />
-      )}
-    </div>
-  );
-}
diff --git a/renderer/src/components/EditorPage/Scribex/GraftEditor.jsx b/renderer/src/components/EditorPage/Scribex/GraftEditor.jsx
deleted file mode 100644
index 385f5a58d..000000000
--- a/renderer/src/components/EditorPage/Scribex/GraftEditor.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-/* eslint-disable no-unused-vars */
-import { HtmlPerfEditor } from '@xelah/type-perf-html';
-
-export default function GraftEditor(props) {
-  const {
-    sequenceIds,
-    isLoading,
-    htmlPerf,
-    sectionable,
-    blockable,
-    editable,
-    preview,
-    verbose,
-    graftSequenceId,
-    addSequenceId,
-    saveHtmlPerf,
-    setGraftSequenceId,
-  } = props;
-
-  const sequenceId = sequenceIds.at(-1);
-
-  const style = isLoading || !sequenceId ? { cursor: 'progress' } : {};
-
-  const handlers = {
-    onBlockClick: ({ content: _content, element }) => {
-      const _sequenceId = element.dataset.target;
-      const { tagName } = element;
-      const isInline = tagName === 'SPAN';
-      // if (_sequenceId && !isInline) addSequenceId(_sequenceId);
-      if (_sequenceId) { setGraftSequenceId(_sequenceId); }
-    },
-  };
-
-  const _props = {
-    htmlPerf,
-    onHtmlPerf: saveHtmlPerf,
-    sequenceIds,
-    sequenceId,
-    addSequenceId,
-    options: {
-      sectionable,
-      blockable,
-      editable,
-      preview,
-    },
-    decorators: {},
-    verbose,
-    handlers,
-  };
-
-  const graftProps = {
-    ..._props,
-    sequenceIds: [graftSequenceId],
-  };
-
-  const graftSequenceEditor = htmlPerf && (
-    <HtmlPerfEditor {...graftProps} />
-  );
-
-  return (
-    <div className="editor" style={style}>
-      {graftSequenceId ? graftSequenceEditor : ''}
-    </div>
-  );
-}
diff --git a/renderer/src/components/EditorPage/Scribex/InsertMenu.jsx b/renderer/src/components/EditorPage/Scribex/InsertMenu.jsx
deleted file mode 100644
index aa7f518cd..000000000
--- a/renderer/src/components/EditorPage/Scribex/InsertMenu.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-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, selectedText }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const handleClick = (number, title) => {
-    handleButtonClick(number, title);
-    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" selectedText={selectedText} />
-            </Menu.Item>
-            <Menu.Item>
-              <PopupButton handleClick={handleClick} title="Cross Reference" selectedText={selectedText} 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
deleted file mode 100644
index 7533e8466..000000000
--- a/renderer/src/components/EditorPage/Scribex/Popup.jsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import React, { useState, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { Dialog, Transition } from '@headlessui/react';
-
-const Popup = ({
-  handleClose, handleButtonClick, title, isPopupOpen, selectedText,
-}) => {
-  const [number, setNumber] = useState('');
-  const handleInputChange = (event) => {
-    setNumber(event.target.value);
-  };
-
-  const handleNumberInputChange = (e) => {
-    setNumber(e.target.value.replace(/[^0-9]/g, ''));
-  };
-  const handleSubmit = () => {
-    handleButtonClick(number, title);
-    handleClose();
-  };
-
-  return (
-    <Transition show as={Fragment}>
-      <Dialog
-        open={isPopupOpen}
-        as="div"
-        className="fixed inset-0 z-10 overflow-y-auto"
-        onClose={handleClose}
-      >
-        <div className="min-h-screen px-4 text-center">
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out "
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in "
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
-          </Transition.Child>
-
-          <span
-            className="inline-block h-screen align-middle"
-            aria-hidden="true"
-          />
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out "
-            enterFrom="opacity-0 scale-95"
-            enterTo="opacity-100 scale-100"
-            leave="ease-in "
-            leaveFrom="opacity-100 scale-100"
-            leaveTo="opacity-0 scale-95"
-          >
-            <div className="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-md">
-              <Dialog.Title
-                as="h3"
-                className="text-lg font-medium leading-6 text-gray-900"
-              >
-                {title}
-                {' '}
-                {title === 'Verse' || title === 'Chapter' ? Number : ''}
-              </Dialog.Title>
-              <div className="mt-2">
-                {selectedText && selectedText.length > 0
-                  && (
-                    <div>
-                      <span className="font-medium text-gray-600">Selected Text :</span>
-                      {' '}
-                      <span className="text-primary">{selectedText}</span>
-                      {' '}
-                    </div>
-                  )}
-
-              </div>
-              <div className="mt-2">
-                {title === 'Verse' || title === 'Chapter'
-                  ? (
-                    <input
-                      type="text"
-                      placeholder={`${title} Number...`}
-                      className="block w-full border-gray-300 rounded-md shadow-sm appearance-none"
-                      value={number}
-                      onChange={handleNumberInputChange}
-                    />
-                  ) : (
-                    <input
-                      type="text"
-                      placeholder={`${title}`}
-                      className="block w-full border-gray-300 rounded-md shadow-sm appearance-none"
-                      value={number}
-                      onChange={handleInputChange}
-                    />
-                  )}
-
-              </div>
-              <div className="mt-4 flex justify-end">
-                <button
-                  type="button"
-                  className="px-4 py-2 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-secondary"
-                  onClick={handleSubmit}
-                >
-                  Submit
-                </button>
-              </div>
-            </div>
-          </Transition.Child>
-        </div>
-      </Dialog>
-    </Transition>
-  );
-};
-
-Popup.propTypes = {
-  handleClose: PropTypes.func.isRequired,
-  handleButtonClick: PropTypes.func.isRequired,
-};
-
-export default Popup;
diff --git a/renderer/src/components/EditorPage/Scribex/PopupButton.jsx b/renderer/src/components/EditorPage/Scribex/PopupButton.jsx
deleted file mode 100644
index c0a6e24e5..000000000
--- a/renderer/src/components/EditorPage/Scribex/PopupButton.jsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React, { useState } from 'react';
-import Popup from './Popup';
-
-const PopupButton = ({
- handleClick, title, roundedHover, selectedText,
-}) => {
-  const [isPopupOpen, setIsPopupOpen] = useState(false);
-
-  const handlePopupOpen = () => {
-    setIsPopupOpen(true);
-  };
-
-  const handlePopupClose = () => {
-    setIsPopupOpen(false);
-  };
-
-  const handleButtonClick = (number, title) => {
-    handleClick(number, title);
-  };
-
-  return (
-    <div
-      role="button"
-      tabIndex={-1}
-      onKeyDown={(e) => e.stopPropagation()}
-      onClick={(e) => e.stopPropagation()}
-      onFocus={(e) => e.stopPropagation()}
-      onMouseOver={(e) => e.stopPropagation()}
-    >
-      <button
-        type="button"
-        className={`flex w-full border py-2 px-3 border-transparent text-sm font-medium text-black hover:bg-primary hover:text-white ${roundedHover}`}
-        onClick={handlePopupOpen}
-      >
-        Insert
-        {' '}
-        {title}
-      </button>
-      {isPopupOpen && (
-        <Popup handleClose={handlePopupClose} handleButtonClick={handleButtonClick} title={title} isPopupOpen={isPopupOpen} selectedText={selectedText} />
-      )}
-    </div>
-  );
-};
-
-export default PopupButton;
diff --git a/renderer/src/components/EditorPage/Scribex/RecursiveBlock.jsx b/renderer/src/components/EditorPage/Scribex/RecursiveBlock.jsx
deleted file mode 100644
index 9a670a79b..000000000
--- a/renderer/src/components/EditorPage/Scribex/RecursiveBlock.jsx
+++ /dev/null
@@ -1,126 +0,0 @@
-/* eslint-disable react/prop-types */
-/* eslint-disable no-unused-vars */
-import React, { useEffect, useState } from 'react';
-import { HtmlPerfEditor } from '@xelah/type-perf-html';
-import { getCurrentCursorPosition } from '@/util/cursorUtils';
-import { getCurrentVerse, getCurrentChapter } from './getReferences';
-
-const getTarget = ({ content }) => {
-  const div = document.createElement('div');
-  div.innerHTML = content;
-
-  const { target } = div.firstChild?.dataset || {};
-
-  return target;
-};
-
-export default function RecursiveBlock({
-  htmlPerf,
-  onHtmlPerf,
-  sequenceIds,
-  addSequenceId,
-  options,
-  content,
-  style,
-  contentEditable,
-  index,
-  verbose,
-  setFootNote,
-  bookId,
-  onReferenceSelected,
-  setCaretPosition,
-  setSelectedText,
-  ...props
-}) {
-  const [currentVerse, setCurrentVerse] = useState(null);
-
-  const updateCursorPosition = () => {
-    const cursorPosition = getCurrentCursorPosition('editor');
-    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) {
-      selectedText = window.getSelection().toString();
-    } else if (document.selection && document.selection.type !== 'Control') {
-      selectedText = document.selection.createRange().text;
-    }
-    if (selectedText) {
-      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);
-      // if (onReferenceSelected) {
-      onReferenceSelected({ bookId, chapter, verse });
-      // }
-    }
-    updateCursorPosition();
-    handleSelection();
-  };
-
-  let component;
-
-  const editable = !!content.match(/data-type="paragraph"/);
-
-  if (editable) {
-    component = (
-      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-      <div
-        className="editor-paragraph"
-        contentEditable={contentEditable}
-        onKeyDown={checkReturnKeyPress}
-        onMouseUp={checkCurrentVerse}
-        onMouseDown={updateCursorPosition}
-        {...props}
-      />
-    );
-  }
-
-  if (!editable) {
-    const sequenceId = getTarget({ content });
-
-    if (sequenceId && !options.preview) {
-      const _props = {
-        sequenceIds: [...sequenceIds, sequenceId],
-        addSequenceId,
-        htmlPerf,
-        onHtmlPerf,
-        onInput: props?.onInput,
-        options,
-      };
-      component = <HtmlPerfEditor {..._props} />;
-    }
-    component ||= <div {...props} contentEditable={false} />;
-  }
-
-  // eslint-disable-next-line react/jsx-no-useless-fragment
-  return <>{component}</>;
-}
diff --git a/renderer/src/components/EditorPage/Scribex/ReferenceEditor.jsx b/renderer/src/components/EditorPage/Scribex/ReferenceEditor.jsx
deleted file mode 100644
index ba07cf85b..000000000
--- a/renderer/src/components/EditorPage/Scribex/ReferenceEditor.jsx
+++ /dev/null
@@ -1,115 +0,0 @@
-/* eslint-disable no-unused-vars */
-import { useContext, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { HtmlPerfEditor } from '@xelah/type-perf-html';
-import LoadingScreen from '@/components/Loading/LoadingScreen';
-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 ReferenceRecursiveBlock from './ReferenceRecursiveBlock';
-
-export default function ReferenceEditor(props) {
-  const {
-    sequenceIds,
-    isSaving,
-    isLoading,
-    htmlPerf,
-    sectionable,
-    blockable,
-    editable,
-    preview,
-    verbose,
-    bookName,
-    bookChange,
-    setBookChange,
-    addSequenceId,
-    saveHtmlPerf,
-    setGraftSequenceId,
-    bookAvailable,
-  } = props;
-
-  const {
-    state: { chapter },
-  } = useContext(ReferenceContext);
-
-  const { t } = useTranslation();
-
-  const {
-    states: { openSideBar },
-    actions: { setOpenSideBar, setSideBarTab },
-  } = useContext(ProjectContext);
-  const sequenceId = sequenceIds.at(-1);
-  const style = isSaving ? { cursor: 'progress' } : {};
-  // const bookChanged = sequenceId === htmlPerf?.mainSequenceId;
-  const handlers = {
-    onBlockClick: ({ content: _content, element }) => {
-      const _sequenceId = element.dataset.target;
-      const { tagName } = element;
-      const isInline = tagName === 'SPAN';
-      if (_sequenceId) {
-        setGraftSequenceId(_sequenceId);
-        setOpenSideBar(!openSideBar);
-        setSideBarTab('footnotes');
-      } else {
-        setSideBarTab('');
-        setGraftSequenceId(null);
-      }
-    },
-  };
-  useEffect(() => {
-    setBookChange(false);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [htmlPerf]);
-
-  const {
-    actions: { setEditorSave },
-  } = useContext(ProjectContext);
-
-  const autoSaveIndication = () => {
-    setEditorSave(<SaveIndicator />);
-    setTimeout(() => {
-      setEditorSave(t('label-saved'));
-    }, 1000);
-  };
-  useEffect(() => {
-    if (isSaving) {
-      autoSaveIndication();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isSaving]);
-
-  const _props = {
-    htmlPerf,
-    onHtmlPerf: saveHtmlPerf,
-    chapterIndex: chapter,
-    sequenceIds,
-    addSequenceId,
-    options: {
-      sectionable,
-      blockable,
-      editable,
-      preview,
-    },
-    components: {
-      block: (__props) => ReferenceRecursiveBlock({
-          htmlPerf,
-          sequenceIds,
-          ...__props,
-        }),
-    },
-    decorators: {},
-    verbose,
-    handlers,
-    autoSaveIndication,
-  };
-  return (
-    <div className="ref-editor" id="ref-editor" style={style}>
-      {!bookAvailable && <EmptyScreen />}
-      {bookAvailable && (!sequenceId || bookChange) && <LoadingScreen />}
-      {bookAvailable && sequenceId && !bookChange && (
-        <HtmlPerfEditor {..._props} />
-      )}
-    </div>
-  );
-}
diff --git a/renderer/src/components/EditorPage/Scribex/ReferenceRecursiveBlock.jsx b/renderer/src/components/EditorPage/Scribex/ReferenceRecursiveBlock.jsx
deleted file mode 100644
index 20225b684..000000000
--- a/renderer/src/components/EditorPage/Scribex/ReferenceRecursiveBlock.jsx
+++ /dev/null
@@ -1,74 +0,0 @@
-/* eslint-disable react/prop-types */
-/* eslint-disable no-unused-vars */
-import React, { useEffect, useState } from 'react';
-import { HtmlPerfEditor } from '@xelah/type-perf-html';
-
-const getTarget = ({ content }) => {
-  const div = document.createElement('div');
-  div.innerHTML = content;
-
-  const { target } = div.firstChild?.dataset || {};
-
-  return target;
-};
-
-export default function ReferenceRecursiveBlock({
-  htmlPerf,
-  onHtmlPerf,
-  sequenceIds,
-  addSequenceId,
-  options,
-  content,
-  style,
-  contentEditable,
-  index,
-  verbose,
-  setFootNote,
-  ...props
-}) {
-  const checkReturnKeyPress = (event) => {
-    if (event.key === 'Enter') {
-      const activeTextArea = document.activeElement;
-      if (activeTextArea.children.length > 1) {
-        const lineBreak = activeTextArea.children[1]?.outerHTML;
-        const newLine = lineBreak.replace(/<br\s*\/?>/gi, '&nbsp');
-        activeTextArea.children[1].outerHTML = newLine;
-      }
-    }
-  };
-
-  let component;
-
-  const editable = !!content.match(/data-type="paragraph"/);
-
-  if (editable) {
-    component = (
-      <div
-        role="textbox"
-        contentEditable={contentEditable}
-        onKeyUp={checkReturnKeyPress}
-        {...props}
-        tabIndex={0}
-      />
-    );
-  }
-
-  if (!editable) {
-    const sequenceId = getTarget({ content });
-
-    if (sequenceId && !options.preview) {
-      const _props = {
-        sequenceIds: [...sequenceIds, sequenceId],
-        addSequenceId,
-        htmlPerf,
-        onHtmlPerf,
-        onInput: props?.onInput,
-        options,
-      };
-      component = <HtmlPerfEditor {..._props} />;
-    }
-    component ||= <div {...props} contentEditable={false} />;
-  }
-  // eslint-disable-next-line react/jsx-no-useless-fragment
-  return <>{component}</>;
-}
diff --git a/renderer/src/components/EditorPage/Scribex/ReferenceScribex.jsx b/renderer/src/components/EditorPage/Scribex/ReferenceScribex.jsx
deleted file mode 100644
index 3cdbe3656..000000000
--- a/renderer/src/components/EditorPage/Scribex/ReferenceScribex.jsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { useEffect, useState, useContext } from 'react';
-import { useProskomma, useImport, useCatalog } from 'proskomma-react-hooks';
-import { useDeepCompareEffect } from 'use-deep-compare';
-import usePerf from '@/components/hooks/scribex/usePerf';
-import htmlMap from '@/components/hooks/scribex/htmlmap';
-import { ReferenceContext } from '@/components/context/ReferenceContext';
-import { ScribexContext } from '@/components/context/ScribexContext';
-import ReferenceEditor from './ReferenceEditor';
-
-export default function ReferenceScribex(props) {
-  const { state, actions } = useContext(ScribexContext);
-  const { verbose } = state;
-  const {
-    usfmData, bookAvailable, refName, bookId, scrollLock, font,
-  } = props;
-  const [selectedBook, setSelectedBook] = useState();
-  const [bookChange, setBookChange] = useState(false);
-  let selectedDocument;
-
-  const { proskomma, stateId, newStateId } = useProskomma({ verbose });
-  const { done } = useImport({
-    proskomma,
-    stateId,
-    newStateId,
-    documents: usfmData,
-  });
-  const {
-    state: {
-      fontSize,
-    },
-  } = useContext(ReferenceContext);
-
-  useEffect(() => {
-    setSelectedBook(bookId.toUpperCase());
-    setBookChange(true);
-  }, [bookId]);
-
-  const { catalog } = useCatalog({ proskomma, stateId, verbose });
-  const { id: docSetId, documents } = (done && catalog.docSets[0]) || {};
-  if (done) {
-    selectedDocument = documents?.find(
-      (doc) => doc.bookCode === selectedBook,
-    );
-  }
-
-  const { bookCode, h: bookName } = selectedDocument || {};
-  const ready = (docSetId && bookCode) || false;
-  const isLoading = !done || !ready;
-  const { state: perfState, actions: perfActions } = usePerf({
-    proskomma,
-    ready,
-    docSetId,
-    bookCode,
-    verbose,
-    htmlMap,
-    refName,
-  });
-
-  useEffect(() => {
-    actions.setSequenceIds([]);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [refName, bookId, scrollLock]);
-
-  const { htmlPerf } = perfState;
-  useDeepCompareEffect(() => {
-    if (htmlPerf && htmlPerf.mainSequenceId !== state.sequenceIds[0]) {
-      actions.setSequenceIds([htmlPerf?.mainSequenceId]);
-    }
-  }, [htmlPerf, state.sequenceIds, perfState, refName]);
-  const _props = {
-    ...state,
-    ...perfState,
-    ...actions,
-    ...perfActions,
-    isLoading,
-    bookName,
-    bookChange,
-    bookAvailable,
-    setBookChange,
-  };
-  return (
-    <div
-      style={{
-          fontFamily: font || 'sans-serif',
-          fontSize: `${fontSize}rem`,
-          lineHeight: (fontSize > 1.3) ? 1.5 : '',
-        }}
-    >
-      <ReferenceEditor {..._props} />
-    </div>
-  );
-}
diff --git a/renderer/src/components/EditorPage/Scribex/Scribex.jsx b/renderer/src/components/EditorPage/Scribex/Scribex.jsx
deleted file mode 100644
index e50fd5ee5..000000000
--- a/renderer/src/components/EditorPage/Scribex/Scribex.jsx
+++ /dev/null
@@ -1,201 +0,0 @@
-import {
-  useEffect, useState, useContext, Fragment,
-} from 'react';
-import { useProskomma, useImport, useCatalog } from 'proskomma-react-hooks';
-import { useDeepCompareEffect } from 'use-deep-compare';
-import { LockClosedIcon, BookmarkIcon, LockOpenIcon } from '@heroicons/react/24/outline';
-import BibleNavigationX from '@/modules/biblenavigation/BibleNavigationX';
-import usePerf from '@/components/hooks/scribex/usePerf';
-import htmlMap from '@/components/hooks/scribex/htmlmap';
-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 MenuDropdown from '@/components/MenuDropdown/MenuDropdown';
-import Buttons from './Buttons';
-import Editor from './Editor';
-import InsertMenu from './InsertMenu';
-
-export default function Scribex(props) {
-  const { state, actions } = useContext(ScribexContext);
-  const { verbose } = state;
-  const { usfmData, bookAvailable } = props;
-  const [selectedBook, setSelectedBook] = useState();
-  const [bookChange, setBookChange] = useState(false);
-  const [chapterNumber, setChapterNumber] = useState(1);
-  const [verseNumber, setVerseNumber] = useState(1);
-  const [triggerVerseInsert, setTriggerVerseInsert] = useState(false);
-  const [newVerChapNumber, setInsertNumber] = useState('');
-  const [insertVerseRChapter, setInsertVerseRChapter] = useState('');
-  const [selectedText, setSelectedText] = useState();
-
-  const handleClick = (number, title) => {
-    setInsertNumber(number);
-    setInsertVerseRChapter(title);
-    setTriggerVerseInsert(!triggerVerseInsert);
-  };
-
-  let selectedDocument;
-
-  const { proskomma, stateId, newStateId } = useProskomma({ verbose });
-  const { done } = useImport({
-    proskomma,
-    stateId,
-    newStateId,
-    documents: usfmData,
-  });
-
-  const {
-    state: {
-      bookId, selectedFont, fontSize, projectScriptureDir,
-    },
-    actions: { setSelectedFont },
-  } = useContext(ReferenceContext);
-
-  const {
-    states: { scrollLock },
-    actions: { setScrollLock },
-  } = useContext(ProjectContext);
-
-  const {
-    states: { openSideBar },
-    actions: { setOpenSideBar },
-  } = useContext(ProjectContext);
-
-  function closeSideBar(open) {
-    setOpenSideBar(open);
-  }
-
-  useEffect(() => {
-    setSelectedBook(bookId.toUpperCase());
-    setBookChange(true);
-  }, [bookId]);
-
-  const { catalog } = useCatalog({ proskomma, stateId, verbose });
-  const { id: docSetId, documents } = (done && catalog.docSets[0]) || {};
-  if (done) {
-    selectedDocument = documents?.find(
-      (doc) => doc.bookCode === selectedBook,
-    );
-  }
-
-  const { bookCode, h: bookName } = selectedDocument || {};
-  const ready = (docSetId && bookCode) || false;
-  const isLoading = !done || !ready;
-  const { state: perfState, actions: perfActions } = usePerf({
-    proskomma,
-    ready,
-    docSetId,
-    bookCode,
-    verbose,
-    htmlMap,
-  });
-  const { htmlPerf } = perfState;
-
-  useDeepCompareEffect(() => {
-    if (htmlPerf && htmlPerf.mainSequenceId !== state.sequenceIds[0]) {
-      actions.setSequenceIds([htmlPerf?.mainSequenceId]);
-    }
-  }, [htmlPerf, state.sequenceIds, perfState]);
-  const _props = {
-    ...state,
-    ...perfState,
-    ...actions,
-    ...perfActions,
-    triggerVerseInsert,
-    chapterNumber,
-    verseNumber,
-    isLoading,
-    bookName,
-    bookChange,
-    bookAvailable,
-    setBookChange,
-    setChapterNumber,
-    setVerseNumber,
-    newVerChapNumber,
-    insertVerseRChapter,
-    selectedText,
-    setSelectedText,
-  };
-  return (
-    <>
-      <EditorSideBar
-        isOpen={openSideBar}
-        closeSideBar={closeSideBar}
-        graftProps={_props}
-      />
-      <div className="flex flex-col bg-white border-b-2 border-secondary h-editor rounded-md shadow scrollbar-width">
-        <div className="relative min-h-[66px] flex flex-col bg-secondary rounded-t-md overflow-hidden">
-          <div className="flex min-h-[33px] items-center justify-between ">
-            <BibleNavigationX
-              chapterNumber={chapterNumber}
-              setChapterNumber={setChapterNumber}
-              verseNumber={verseNumber}
-              setVerseNumber={setVerseNumber}
-            />
-            <div
-              aria-label="editor-pane"
-              className="flex flex-1 justify-center text-white text-xxs uppercase tracking-wider font-bold leading-3 truncate"
-            >
-              Editor
-            </div>
-            <div
-              title="navigation lock/unlock"
-              className="flex items-center mr-auto"
-            >
-              <div>
-                {scrollLock === true ? (
-                  <LockOpenIcon
-                    aria-label="open-lock"
-                    className="h-6 mr-2 w-6 text-white cursor-pointer"
-                    aria-hidden="true"
-                    onClick={() => setScrollLock(!scrollLock)}
-                  />
-                ) : (
-                  <LockClosedIcon
-                    aria-label="close-lock"
-                    className="h-5 mr-3 w-5 text-white cursor-pointer"
-                    aria-hidden="true"
-                    onClick={() => setScrollLock(!scrollLock)}
-                  />
-                )}
-              </div>
-              <div
-                role="button"
-                tabIndex="0"
-                title="bookmark"
-                className="focus:outline-none border-r-2 border-l-2 border-white border-opacity-10"
-              >
-                <BookmarkIcon
-                  className="h-5 mr-4 w-5 text-white cursor-pointer"
-                  aria-hidden="true"
-                />
-              </div>
-            </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">
-              <MenuDropdown selectedFont={selectedFont} setSelectedFont={setSelectedFont} buttonStyle="h-6 mr-2 w-6 text-white cursor-pointer" />
-              <InsertMenu handleClick={handleClick} selectedText={selectedText} />
-            </div>
-          </div>
-        </div>
-
-        <div
-          style={{
-            fontFamily: selectedFont || 'sans-serif',
-            fontSize: `${fontSize}rem`,
-            lineHeight: (fontSize > 1.3) ? 1.5 : '',
-            direction: `${projectScriptureDir === 'RTL' ? 'rtl' : 'auto'}`,
-          }}
-          className="border-l-2 border-r-2 border-secondary pb-16 overflow-auto h-full scrollbars-width leading-8"
-        >
-          <Editor {..._props} />
-        </div>
-      </div>
-    </>
-  );
-}
diff --git a/renderer/src/components/EditorPage/Scribex/getReferences.js b/renderer/src/components/EditorPage/Scribex/getReferences.js
deleted file mode 100644
index fe6cb92f2..000000000
--- a/renderer/src/components/EditorPage/Scribex/getReferences.js
+++ /dev/null
@@ -1,32 +0,0 @@
-export const getCurrentVerse = (currentNode) => {
-  let currentVerse;
-  let prev = currentNode.previousElementSibling;
-  while (prev) {
-    if (prev.dataset.type === 'mark' && prev.dataset.subtype === 'verses') {
-      currentVerse = prev.dataset.attsNumber;
-      break;
-    }
-    // Get the previous sibling
-    prev = prev.previousElementSibling;
-  }
-  return currentVerse;
-};
-
-export const getCurrentChapter = (currentNode) => {
-  let currentChapter;
-  const closestParaDiv = currentNode.parentNode.parentNode;
-  if (closestParaDiv.firstElementChild?.firstElementChild?.classList.contains('chapter')) {
-    currentChapter = closestParaDiv.firstElementChild.firstElementChild.dataset.attsNumber;
-    return currentChapter;
-  }
-
-    let prevParaDiv = closestParaDiv.previousElementSibling;
-    while (prevParaDiv) {
-      if (prevParaDiv.firstElementChild?.firstElementChild?.classList.contains('chapter')) {
-        currentChapter = prevParaDiv.firstElementChild.firstElementChild.dataset.attsNumber;
-        break;
-      }
-      prevParaDiv = prevParaDiv.previousElementSibling;
-    }
-    return currentChapter;
-};
diff --git a/renderer/src/components/EditorPage/TextEditor/Editor.jsx b/renderer/src/components/EditorPage/TextEditor/Editor.jsx
index c53aa4c09..529eb2f2d 100644
--- a/renderer/src/components/EditorPage/TextEditor/Editor.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/Editor.jsx
@@ -6,13 +6,13 @@ import { ReferenceContext } from '@/components/context/ReferenceContext';
 import { ProjectContext } from '@/components/context/ProjectContext';
 import EmptyScreen from '@/components/Loading/EmptySrceen';
 import {
-  insertVerseNumber, insertChapterNumber, insertFootnote, insertXRef, insertHeading,
+  insertVerseNumber, insertChapterNumber, insertFootnote, insertXRef,
 } from '@/util/cursorUtils';
 // eslint-disable-next-line import/no-unresolved, import/extensions
 import { useAutoSaveIndication } from '@/hooks2/useAutoSaveIndication';
 import RecursiveBlock from './RecursiveBlock';
 // eslint-disable-next-line import/no-unresolved, import/extensions
-import { useIntersectionObserver } from './hooks/useIntersectionObserver';
+import { onIntersection } from './utils/IntersectionObserver';
 
 export default function Editor(props) {
   const {
@@ -100,14 +100,22 @@ export default function Editor(props) {
     if (insertVerseRChapter === 'Cross Reference') {
       insertXRef(caretPosition, newVerChapNumber, selectedText);
     }
-    if (insertVerseRChapter === 'Section Heading') {
-      insertHeading(caretPosition, newVerChapNumber, selectedText);
-    }
+    // if (insertVerseRChapter === 'Section Heading') {
+    //   insertHeading(caretPosition, newVerChapNumber, selectedText);
+    // }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [triggerVerseInsert]);
 
-  // hook for autoscrolling to the current chapter
-  useIntersectionObserver(scrollLock, setChapterNumber);
+  const observer = new IntersectionObserver((entries) => onIntersection({ setChapterNumber, scrollLock, entries }), {
+    root: document.querySelector('editor'),
+    threshold: 0,
+    rootMargin: '0% 0% -60% 0%',
+  });
+
+  const watchNodes = document.querySelectorAll('.editor .chapter');
+  const watchArr = Array.from(watchNodes);
+  const reverseArray = watchArr.length > 0 ? watchArr.slice().reverse() : [];
+  reverseArray.forEach((chapter) => { observer.observe(chapter); });
 
   const _props = {
     htmlPerf,
diff --git a/renderer/src/components/EditorPage/TextEditor/InsertMenu.jsx b/renderer/src/components/EditorPage/TextEditor/InsertMenu.jsx
index 081b93086..8edce3a9b 100644
--- a/renderer/src/components/EditorPage/TextEditor/InsertMenu.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/InsertMenu.jsx
@@ -28,12 +28,12 @@ export default function InsertMenu({ handleClick: handleButtonClick, selectedTex
         selectedText={selectedText}
         icon="XR"
       />
-      <PopupButton
+      {/* <PopupButton
         handleClick={handleClick}
         title="Section Heading"
         selectedText={selectedText}
         icon="SH"
-      />
+      /> */}
     </div>
   );
 }
diff --git a/renderer/src/components/EditorPage/TextEditor/ReferenceScribex.jsx b/renderer/src/components/EditorPage/TextEditor/ReferenceScribex.jsx
index e667abf02..9d128a8f9 100644
--- a/renderer/src/components/EditorPage/TextEditor/ReferenceScribex.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/ReferenceScribex.jsx
@@ -1,10 +1,10 @@
 import { useEffect, useState, useContext } from 'react';
 import { useProskomma, useImport, useCatalog } from 'proskomma-react-hooks';
 import { useDeepCompareEffect } from 'use-deep-compare';
-import usePerf from '@/components/hooks/scribex/usePerf';
-import htmlMap from '@/components/hooks/scribex/htmlmap';
 import { ReferenceContext } from '@/components/context/ReferenceContext';
 import { ScribexContext } from '@/components/context/ScribexContext';
+import usePerf from './hooks/usePerf';
+import htmlMap from './hooks/htmlmap';
 import ReferenceEditor from './ReferenceEditor';
 
 export default function ReferenceScribex(props) {
@@ -59,7 +59,7 @@ export default function ReferenceScribex(props) {
 
   useEffect(() => {
     actions.setSequenceIds([]);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [refName, bookId, scrollLock]);
 
   const { htmlPerf } = perfState;
@@ -82,11 +82,11 @@ export default function ReferenceScribex(props) {
   return (
     <div
       style={{
-          fontFamily: font || 'sans-serif',
-          fontSize: `${fontSize}rem`,
-          lineHeight: (fontSize > 1.3) ? 1.5 : '',
-          direction: `${projectScriptureDir === 'RTL' ? 'rtl' : 'auto'}`,
-        }}
+        fontFamily: font || 'sans-serif',
+        fontSize: `${fontSize}rem`,
+        lineHeight: (fontSize > 1.3) ? 1.5 : '',
+        direction: `${projectScriptureDir === 'RTL' ? 'rtl' : 'auto'}`,
+      }}
     >
       <ReferenceEditor {..._props} />
     </div>
diff --git a/renderer/src/components/EditorPage/TextEditor/hooks/htmlmap.js b/renderer/src/components/EditorPage/TextEditor/hooks/htmlmap.js
new file mode 100644
index 000000000..e9b9d9729
--- /dev/null
+++ b/renderer/src/components/EditorPage/TextEditor/hooks/htmlmap.js
@@ -0,0 +1,55 @@
+const htmlMap = (context) => ({
+  '*': {
+    '*': {
+      tagName: 'span',
+    },
+    sequence: {
+      tagName: 'section',
+    },
+  },
+  wrapper: {
+    '*': {
+      tagName: 'wrapper',
+    },
+    sequence: {
+      tagName: 'section',
+    },
+  },
+  paragraph: {
+    '*': {
+      tagName: 'p',
+    },
+  },
+  mark: {
+    '*': {
+      tagName: 'span',
+    },
+    chapter: ({ atts }) => {
+      context.lastChapter = atts.number;
+      return ({
+        classList: ['mark', 'chapter', `chapter-${atts.number}`],
+        id: `ch-${atts.number}`,
+        tagName: 'span',
+      });
+    },
+    verses: ({ atts }) => ({
+      classList: ['mark', 'verse', `verse-${atts.number}`],
+      id: `ch${context.lastChapter}v${atts.number}`,
+      tagName: 'span',
+      attributes: { contenteditable: false },
+    }),
+  },
+  graft: {
+    heading: {
+      tagName: 'div',
+    },
+    title: {
+      tagName: 'div',
+    },
+    introduction: {
+      tagName: 'div',
+    },
+  },
+});
+
+export default htmlMap({});
diff --git a/renderer/src/components/EditorPage/TextEditor/hooks/saveToFile.js b/renderer/src/components/EditorPage/TextEditor/hooks/saveToFile.js
new file mode 100644
index 000000000..b5ef6c340
--- /dev/null
+++ b/renderer/src/components/EditorPage/TextEditor/hooks/saveToFile.js
@@ -0,0 +1,36 @@
+import localforage from 'localforage';
+// import { readRefMeta } from '../../../core/reference/readRefMeta';
+import { isElectron } from '@/core/handleElectron';
+import writeToFile from '@/core/editor/writeToFile';
+import { readRefBurrito } from '@/core/reference/readRefBurrito';
+import packageInfo from '../../../../../../package.json';
+import { newPath } from '../../../../../../supabase';
+
+// function to save to file.
+export const saveToFile = async (usfmText, bookCode) => {
+  try {
+    const userProfile = await localforage.getItem('userProfile');
+    const userName = isElectron() ? userProfile?.username : userProfile?.user?.email;
+    const projectName = await localforage.getItem('currentProject');
+    const path = require('path');
+    const newpath = localStorage.getItem('userPath');
+    const metaPath = isElectron() ? path.join(newpath, packageInfo.name, 'users', userName, 'projects', projectName, 'metadata.json') : `${newPath}/${userName}/projects/${projectName}/metadata.json`;
+    const metaData = JSON.parse(await readRefBurrito({ metaPath }));
+    Object.entries(metaData.ingredients).forEach(async ([key, _ingredients]) => {
+      if (_ingredients.scope) {
+        const _bookID = Object.entries(_ingredients.scope)[0][0];
+        if (_bookID === bookCode) {
+          await writeToFile({
+            username: userName,
+            projectname: projectName,
+            filename: key,
+            data: usfmText,
+          });
+        }
+      }
+    });
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    return console.log(err);
+  }
+};
diff --git a/renderer/src/components/EditorPage/TextEditor/hooks/useIntersectionObserver.js b/renderer/src/components/EditorPage/TextEditor/hooks/useIntersectionObserver.js
deleted file mode 100644
index b366f5ec2..000000000
--- a/renderer/src/components/EditorPage/TextEditor/hooks/useIntersectionObserver.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { useEffect } from 'react';
-
-export const useIntersectionObserver = (scrollLock, setChapterNumber) => {
- useEffect(() => {
-  console.log('scroll ');
-    const options = {
-      root: document.querySelector('editor'),
-      threshold: 0,
-      rootMargin: '0% 0% -60% 0%',
-    };
-    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');
-        }
-      });
-    };
-
-    const observer = new IntersectionObserver((entries) => {
-      // eslint-disable-next-line no-restricted-syntax
-      for (const entry of entries) {
-        if (entry.isIntersecting) {
-          setChapterNumber(entry.target.dataset.attsNumber);
-          if (!scrollLock) {
-            scrollReference(entry.target.dataset.attsNumber);
-          }
-        }
-      }
-    }, options);
-
-    const watchNodes = document.querySelectorAll('.editor .chapter');
-    const watchArr = Array.from(watchNodes);
-    const reverseArray = watchArr.length > 0 ? watchArr.slice().reverse() : [];
-    reverseArray.forEach((chapter) => {
-      observer.observe(chapter);
-    });
-
-    return () => {
-      // Cleanup: Disconnect the observer when the component unmounts
-      observer.disconnect();
-    };
-  }, []);
-};
diff --git a/renderer/src/components/EditorPage/TextEditor/hooks/usePerf.js b/renderer/src/components/EditorPage/TextEditor/hooks/usePerf.js
new file mode 100644
index 000000000..18bdcccf8
--- /dev/null
+++ b/renderer/src/components/EditorPage/TextEditor/hooks/usePerf.js
@@ -0,0 +1,123 @@
+/* eslint-disable no-unused-vars */
+import { useState, useTransition } from 'react';
+import {
+  useDeepCompareCallback,
+  useDeepCompareEffect,
+  useDeepCompareMemo,
+} from 'use-deep-compare';
+import isEqual from 'lodash.isequal';
+import EpiteleteHtml from 'epitelete-html';
+import { saveToFile } from './saveToFile';
+
+export default function usePerf({
+  proskomma,
+  ready,
+  docSetId,
+  bookCode,
+  verbose,
+  htmlMap,
+  refName,
+}) {
+  const [isSaving, startSaving] = useTransition();
+  const [htmlPerf, setHtmlPerf] = useState();
+  const [usfmText, setUsfmText] = useState();
+
+  const epiteleteHtml = useDeepCompareMemo(
+    () => ready
+      && new EpiteleteHtml({
+        proskomma,
+        docSetId,
+        htmlMap,
+        options: { historySize: 100 },
+      }),
+    [proskomma, ready, docSetId, refName],
+  );
+
+  useDeepCompareEffect(() => {
+    if (epiteleteHtml) {
+      epiteleteHtml.readHtml(bookCode, { cloning: false }, htmlMap).then((_htmlPerf) => {
+        // remove htmlMap for default classes
+        setHtmlPerf(_htmlPerf);
+      });
+    }
+  }, [epiteleteHtml, bookCode]);
+
+  // exports perf to usfm and writes to file.
+  const exportUsfm = async (bookCode) => {
+    const usfmString = await epiteleteHtml?.readUsfm(bookCode);
+    setUsfmText(usfmString);
+    saveToFile(usfmString, bookCode);
+    epiteleteHtml?.readHtml(bookCode, { cloning: false }, htmlMap).then((_htmlPerf) => { // remove htmlMap for default classes
+      setHtmlPerf(_htmlPerf);
+    });
+  };
+
+  const saveHtmlPerf = useDeepCompareCallback(
+    (_htmlPerf, { sequenceId }) => {
+      if (!isEqual(htmlPerf, _htmlPerf)) { setHtmlPerf(_htmlPerf); }
+
+      startSaving(async () => {
+        const newHtmlPerf = await epiteleteHtml?.writeHtml(
+          bookCode,
+          sequenceId,
+          _htmlPerf,
+          { insertSequences: true },
+        );
+        if (!isEqual(htmlPerf, newHtmlPerf)) { setHtmlPerf(newHtmlPerf); }
+        exportUsfm(bookCode);
+      });
+    },
+    [htmlPerf, bookCode],
+  );
+
+  const insertNewGraft = useDeepCompareCallback(
+    (_htmlPerf, { sequenceId }) => {
+      if (!isEqual(htmlPerf, _htmlPerf)) { setHtmlPerf(_htmlPerf); }
+
+      startSaving(async () => {
+        const newHtmlPerf = await epiteleteHtml?.writeHtml(
+          bookCode,
+          sequenceId,
+          _htmlPerf,
+          { insertSequences: true },
+        );
+
+        if (!isEqual(htmlPerf, newHtmlPerf)) { setHtmlPerf(newHtmlPerf); }
+        exportUsfm(bookCode);
+      });
+    },
+    [htmlPerf, bookCode],
+  );
+
+  const undo = async () => {
+    const newPerfHtml = await epiteleteHtml?.undoHtml(bookCode);
+    setHtmlPerf(newPerfHtml);
+  };
+
+  const redo = async () => {
+    const newPerfHtml = await epiteleteHtml?.redoHtml(bookCode);
+    setHtmlPerf(newPerfHtml);
+  };
+
+  const canUndo = (epiteleteHtml?.canUndo && epiteleteHtml?.canUndo(bookCode)) || false;
+  const canRedo = (epiteleteHtml?.canRedo && epiteleteHtml?.canRedo(bookCode)) || false;
+
+  const state = {
+    bookCode,
+    htmlPerf,
+    canUndo,
+    canRedo,
+    isSaving,
+    usfmText,
+  };
+
+  const actions = {
+    insertNewGraft,
+    saveHtmlPerf,
+    exportUsfm,
+    undo,
+    redo,
+  };
+
+  return { state, actions };
+}
diff --git a/renderer/src/components/EditorPage/TextEditor/hooks/useReadUsfmFile.js b/renderer/src/components/EditorPage/TextEditor/hooks/useReadUsfmFile.js
new file mode 100644
index 000000000..193486311
--- /dev/null
+++ b/renderer/src/components/EditorPage/TextEditor/hooks/useReadUsfmFile.js
@@ -0,0 +1,57 @@
+import { useEffect, useState, useContext } from 'react';
+import localforage from 'localforage';
+import { ReferenceContext } from '@/components/context/ReferenceContext';
+import { readRefBurrito } from '../../../../core/reference/readRefBurrito';
+import { readFile } from '../../../../core/editor/readFile';
+import packageInfo from '../../../../../../package.json';
+//  hook to fetch usfmfile from system drive
+export const useReadUsfmFile = () => {
+  const [usfmData, setUsfmData] = useState([]);
+  const [bookAvailable, setbookAvailable] = useState(false);
+  const {
+    state: {
+      bookId,
+    },
+  } = useContext(ReferenceContext);
+  useEffect(() => {
+    async function readLocalFile() {
+      try {
+        const userProfile = await localforage.getItem('userProfile');
+        const userName = userProfile?.username;
+        const projectName = await localforage.getItem('currentProject');
+        const path = require('path');
+        const newpath = localStorage.getItem('userPath');
+        const metaPath = path.join(newpath, packageInfo.name, 'users', userName, 'projects', projectName, 'metadata.json');
+        const metaData = JSON.parse(await readRefBurrito({ metaPath }));
+        const _books = [];
+        Object.entries(metaData.ingredients).forEach(async ([key, _ingredients]) => {
+          if (_ingredients.scope) {
+            const _bookID = Object.entries(_ingredients.scope)[0][0];
+            const bookObj = { bookId: _bookID, fileName: key };
+            _books.push(bookObj);
+          }
+        });
+        const [currentBook] = _books.filter((bookObj) => bookObj.bookId === bookId?.toUpperCase());
+        if (currentBook) {
+          const fileData = await readFile({ projectname: projectName, filename: currentBook.fileName, username: userName });
+          const books = [{
+            selectors: { org: 'unfoldingWord', lang: 'en', abbr: 'ult' },
+            bookCode: currentBook.bookId.toLowerCase(),
+            data: fileData,
+          }];
+          setUsfmData(books);
+          setbookAvailable(true);
+        } else {
+          setUsfmData([]);
+          setbookAvailable(false);
+        }
+        // setUsfmData(fileData);
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        return console.log(err);
+      }
+    }
+    readLocalFile();
+  }, [bookId]);
+  return { usfmData, bookAvailable };
+};
diff --git a/renderer/src/components/EditorPage/TextEditor/index.jsx b/renderer/src/components/EditorPage/TextEditor/index.jsx
index 570f2c81d..8e509d5f3 100644
--- a/renderer/src/components/EditorPage/TextEditor/index.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/index.jsx
@@ -3,19 +3,20 @@ import {
 } from 'react';
 import { useProskomma, useImport, useCatalog } from 'proskomma-react-hooks';
 import { useDeepCompareEffect } from 'use-deep-compare';
-import usePerf from '@/components/hooks/scribex/usePerf';
-import htmlMap from '@/components/hooks/scribex/htmlmap';
 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 { useReadUsfmFile } from './hooks/useReadUsfmFile';
+import htmlMap from './hooks/htmlmap';
+import usePerf from './hooks/usePerf';
 import EditorMenuBar from './EditorMenuBar';
 import Editor from './Editor';
 
-export default function TextEditor(props) {
+export default function TextEditor() {
   const { state, actions } = useContext(ScribexContext);
   const { verbose } = state;
-  const { usfmData, bookAvailable } = props;
+  // const { usfmData, bookAvailable } = props;
   const [selectedBook, setSelectedBook] = useState();
   const [bookChange, setBookChange] = useState(false);
   const [chapterNumber, setChapterNumber] = useState(1);
@@ -25,6 +26,8 @@ export default function TextEditor(props) {
   const [insertVerseRChapter, setInsertVerseRChapter] = useState('');
   const [selectedText, setSelectedText] = useState();
 
+  const { usfmData, bookAvailable } = useReadUsfmFile();
+
   const {
     state: {
       bookId,
diff --git a/renderer/src/components/EditorPage/TextEditor/utils/IntersectionObserver.js b/renderer/src/components/EditorPage/TextEditor/utils/IntersectionObserver.js
index caafdf193..b6f806ad2 100644
--- a/renderer/src/components/EditorPage/TextEditor/utils/IntersectionObserver.js
+++ b/renderer/src/components/EditorPage/TextEditor/utils/IntersectionObserver.js
@@ -9,7 +9,7 @@ export const scrollReference = (chapterNumber) => {
   });
 };
 
-export const onIntersection = (entries, setChapterNumber, scrollLock) => {
+export const onIntersection = ({ entries, setChapterNumber, scrollLock }) => {
   // eslint-disable-next-line no-restricted-syntax
   for (const entry of entries) {
     if (entry.isIntersecting) {
diff --git a/renderer/src/hooks/useAutoSaveIndication.js b/renderer/src/hooks/useAutoSaveIndication.js
new file mode 100644
index 000000000..4b6530599
--- /dev/null
+++ b/renderer/src/hooks/useAutoSaveIndication.js
@@ -0,0 +1,24 @@
+import React, { useContext, useEffect } from 'react';
+import { ProjectContext } from '@/components/context/ProjectContext';
+import SaveIndicator from '@/components/Loading/SaveIndicator';
+import { useTranslation } from 'react-i18next';
+
+export const useAutoSaveIndication = (isSaving) => {
+const {
+  actions: { setEditorSave },
+} = useContext(ProjectContext);
+const { t } = useTranslation();
+
+const autoSaveIndication = () => {
+  setEditorSave(<SaveIndicator />);
+  setTimeout(() => {
+    setEditorSave(t('label-saved'));
+  }, 1000);
+};
+useEffect(() => {
+  if (isSaving) {
+    autoSaveIndication();
+  }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+}, [isSaving]);
+};
diff --git a/renderer/src/layouts/editor/SectionContainer.js b/renderer/src/layouts/editor/SectionContainer.js
index 5b2208cb6..72e5d0bb7 100644
--- a/renderer/src/layouts/editor/SectionContainer.js
+++ b/renderer/src/layouts/editor/SectionContainer.js
@@ -1,14 +1,12 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect } from 'react';
 import dynamic from 'next/dynamic';
 import localforage from 'localforage';
 import ObsEditor from '@/components/EditorPage/ObsEditor/ObsEditor';
 import AudioEditor from '@/components/EditorPage/AudioEditor/AudioEditor';
-import { ScribexContext } from '@/components/context/ScribexContext';
-import { useReadUsfmFile } from '@/components/hooks/scribex/useReadUsfmFile';
 import packageInfo from '../../../../package.json';
 import SectionPlaceholder1 from './SectionPlaceholder1';
 import SectionPlaceholder2 from './SectionPlaceholder2';
-import Scribex from '@/components/EditorPage/Scribex/Scribex'; // eslint-disable-line 
+import TextEditor from '@/components/EditorPage/TextEditor'; // eslint-disable-line 
 
 const MainPlayer = dynamic(
   () => import('@/components/EditorPage/AudioEditor/MainPlayer'),
@@ -32,20 +30,12 @@ const SectionContainer = () => {
     });
   }, [editor]);
 
-  const { usfmData, bookAvailable } = useReadUsfmFile();
-  const { state, actions } = useContext(ScribexContext);
-  const props = {
-    usfmData,
-    bookAvailable,
-    state,
-    actions,
-  };
   return (
     <>
       <div className="grid grid-flow-col auto-cols-fr m-3 gap-2">
         <SectionPlaceholder1 editor={editor} />
         <SectionPlaceholder2 editor={editor} />
-        {(editor === 'textTranslation' && <Scribex {...props} />)
+        {(editor === 'textTranslation' && <TextEditor />)
           || (editor === 'textStories' && <ObsEditor />)
           || (editor === 'audioTranslation' && <AudioEditor editor={editor} />)}
       </div>
diff --git a/renderer/src/layouts/editor/WebSectionContainer.js b/renderer/src/layouts/editor/WebSectionContainer.js
index 438b89738..14642663e 100644
--- a/renderer/src/layouts/editor/WebSectionContainer.js
+++ b/renderer/src/layouts/editor/WebSectionContainer.js
@@ -5,16 +5,10 @@ import dynamic from 'next/dynamic';
 import localforage from 'localforage';
 import ObsEditor from '@/components/EditorPage/ObsEditor/ObsEditor';
 import AudioEditor from '@/components/EditorPage/AudioEditor/AudioEditor';
-import { ScribexContext } from '@/components/context/ScribexContext';
-import { useReadUsfmFile } from '@/components/hooks/scribex/useReadUsfmFile';
-import Scribex from '@/components/EditorPage/Scribex/Scribex'; // eslint-disable-line
+import TextEditor from '@/components/EditorPage/TextEditor'; // eslint-disable-line
 import SectionPlaceholder1 from './WebSectionPlaceholder1';
 import SectionPlaceholder2 from './WebSectionPlaceholder2';
 import { newPath, sbStorageDownload } from '../../../../supabase';
-// if (!process.env.NEXT_PUBLIC_IS_ELECTRON) {
-//   const supabaseStorage = require('../../../../../supabase').supabaseStorage
-//   const newPath = require('../../../../supabase').newPath
-// }
 
 const MainPlayer = dynamic(
   () => import('@/components/EditorPage/AudioEditor/MainPlayer'),
@@ -36,21 +30,12 @@ const SectionContainer = () => {
     setSupabaseEditor();
   }, [editor]);
 
-  const { usfmData, bookAvailable } = useReadUsfmFile();
-  const { state, actions } = useContext(ScribexContext);
-  const props = {
-    usfmData,
-    bookAvailable,
-    state,
-    actions,
-  };
-
   return (
     <>
       <div className="grid grid-flow-col auto-cols-fr m-3 gap-2">
         <SectionPlaceholder1 editor={editor} />
         <SectionPlaceholder2 editor={editor} />
-        {(editor === 'textTranslation' && <Scribex {...props} />)
+        {(editor === 'textTranslation' && <TextEditor />)
           || (editor === 'textStories' && <ObsEditor />)
           || (editor === 'audioTranslation' && <AudioEditor editor={editor} />)}
       </div>
diff --git a/renderer/src/util/cursorUtils.js b/renderer/src/util/cursorUtils.js
index 496983388..2b2f25d5d 100644
--- a/renderer/src/util/cursorUtils.js
+++ b/renderer/src/util/cursorUtils.js
@@ -153,6 +153,14 @@ export function insertXRef(caretPosition, references, selectedText) {
       : pasteHtmlAtCaret(xRefTag, false, caretPosition);
   }
 }
+// export function insertHeading(caretPosition, heading) {
+//   // if (heading && caretPosition) {
+//     const headingTag = `<span data-type="heading" data-subtype="sfie" data-new="true">${'test heading'}</span>`;
+//     // const headingTag = `<span data-type='heading'><span class="graft heading" data-type="graft" data-subtype="heading" data-new="true><span class="paragraph usfm s" data-type="paragraph" data-subtype-ns="usfm" data-subtype="s">${'subheading'}</span></span></span>`;
+//     console.log('inserting section heading');
+//      pasteHtmlAtCaret(headingTag, false, caretPosition);
+//   // }
+// }
 
 // Helper function to get selected text within the editor
 export function getSelectedText() {
diff --git a/supabase.js b/supabase.js
index 181f6b234..6a2a87768 100644
--- a/supabase.js
+++ b/supabase.js
@@ -97,7 +97,10 @@ const sbStorageDownload = async (path) => {
 const sbStorageUpdate = async ({ path, payload, options = {} }) => {
   await supabaseStorage().update(path, payload, options);
 };
-const sbStorageRemove = async (path, payload, options) => {
+const sbStorageRemove = async (path, options) => {
+  if (options) {
+    await supabaseStorage().remove(path, options);
+  }
   await supabaseStorage().remove(path);
 };
 
diff --git a/yarn.lock b/yarn.lock
index 8a64f5a80..856aacd62 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3481,6 +3481,18 @@
     "@radix-ui/react-use-callback-ref" "1.0.1"
     "@radix-ui/react-use-escape-keydown" "1.0.3"
 
+"@radix-ui/react-dismissable-layer@1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz#3f98425b82b9068dfbab5db5fff3df6ebf48b9d4"
+  integrity sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-escape-keydown" "1.0.3"
+
 "@radix-ui/react-dropdown-menu@^2.0.4":
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.5.tgz#19bf4de8ffa348b4eb6a86842f14eff93d741170"
@@ -3562,6 +3574,23 @@
     "@radix-ui/react-use-size" "1.0.1"
     "@radix-ui/rect" "1.0.1"
 
+"@radix-ui/react-popper@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.1.3.tgz#24c03f527e7ac348fabf18c89795d85d21b00b42"
+  integrity sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@floating-ui/react-dom" "^2.0.0"
+    "@radix-ui/react-arrow" "1.0.3"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+    "@radix-ui/react-use-rect" "1.0.1"
+    "@radix-ui/react-use-size" "1.0.1"
+    "@radix-ui/rect" "1.0.1"
+
 "@radix-ui/react-portal@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.3.tgz#ffb961244c8ed1b46f039e6c215a6c4d9989bda1"
@@ -3570,6 +3599,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-portal@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.4.tgz#df4bfd353db3b1e84e639e9c63a5f2565fb00e15"
+  integrity sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
 "@radix-ui/react-presence@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.1.tgz#491990ba913b8e2a5db1b06b203cb24b5cdef9ba"
@@ -3611,6 +3648,25 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "1.0.1"
 
+"@radix-ui/react-tooltip@^1.0.7":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz#8f55070f852e7e7450cc1d9210b793d2e5a7686e"
+  integrity sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-popper" "1.1.3"
+    "@radix-ui/react-portal" "1.0.4"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-visually-hidden" "1.0.3"
+
 "@radix-ui/react-use-callback-ref@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz#f4bb1f27f2023c984e6534317ebc411fc181107a"
@@ -3657,6 +3713,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "1.0.1"
 
+"@radix-ui/react-visually-hidden@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz#51aed9dd0fe5abcad7dee2a234ad36106a6984ac"
+  integrity sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
 "@radix-ui/rect@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.0.1.tgz#bf8e7d947671996da2e30f4904ece343bc4a883f"
@@ -13508,6 +13572,14 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+<<<<<<< Updated upstream
+lucide-react@^0.284.0:
+  version "0.284.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.284.0.tgz#91df00fb62f9de498a4fcc3fbad2d58813bdd23b"
+  integrity sha512-dVSMHYAya/TeY3+vsk+VQJEKNQN2AhIo0+Dp09B2qpzvcBuu93H98YZykFcjIAfmanFiDd8nqfXFR38L757cyQ==
+
+=======
+>>>>>>> Stashed changes
 lz-string@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
@@ -18638,6 +18710,16 @@ symbol-tree@^3.2.2, symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
+tailwind-merge@^1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-1.14.0.tgz#e677f55d864edc6794562c63f5001f45093cdb8b"
+  integrity sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==
+
+tailwindcss-animate@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz#318b692c4c42676cc9e67b19b78775742388bef4"
+  integrity sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==
+
 tailwindcss@^3.0.2, tailwindcss@^3.2.4:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf"

From 5c1baf5d73cc08dcc26e695dc04d80910901152f Mon Sep 17 00:00:00 2001
From: samueljd <samuelj.ernest@gmail.com>
Date: Tue, 7 Nov 2023 21:19:48 +0530
Subject: [PATCH 3/7] popup-rework

---
 .../EditorPage/TextEditor/Editor.jsx          |  37 +---
 .../EditorPage/TextEditor/EditorMenuBar.jsx   |  11 +-
 .../EditorPage/TextEditor/InsertMenu.jsx      |  57 +++--
 .../EditorPage/TextEditor/Popup.jsx           | 194 +++++++++---------
 .../EditorPage/TextEditor/PopupButton.jsx     |  39 ++--
 .../EditorPage/TextEditor/RecursiveBlock.jsx  |   5 +
 .../EditorPage/TextEditor/index.jsx           |  21 +-
 renderer/src/components/Popup/Dialog.jsx      | 132 ++++++++++++
 .../src/components/Popup/PopupContext.jsx     |  28 +++
 renderer/src/components/Popup/index.jsx       |  43 ++++
 .../src/components/context/ScribexContext.js  |  25 +++
 renderer/src/util/cursorUtils.js              |  38 ++--
 styles/globals.css                            |   3 +
 13 files changed, 418 insertions(+), 215 deletions(-)
 create mode 100644 renderer/src/components/Popup/Dialog.jsx
 create mode 100644 renderer/src/components/Popup/PopupContext.jsx
 create mode 100644 renderer/src/components/Popup/index.jsx

diff --git a/renderer/src/components/EditorPage/TextEditor/Editor.jsx b/renderer/src/components/EditorPage/TextEditor/Editor.jsx
index 529eb2f2d..38b1e5512 100644
--- a/renderer/src/components/EditorPage/TextEditor/Editor.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/Editor.jsx
@@ -1,13 +1,11 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { HtmlPerfEditor } from '@xelah/type-perf-html';
 
 import LoadingScreen from '@/components/Loading/LoadingScreen';
 import { ReferenceContext } from '@/components/context/ReferenceContext';
 import { ProjectContext } from '@/components/context/ProjectContext';
+import { ScribexContext } from '@/components/context/ScribexContext';
 import EmptyScreen from '@/components/Loading/EmptySrceen';
-import {
-  insertVerseNumber, insertChapterNumber, insertFootnote, insertXRef,
-} from '@/util/cursorUtils';
 // eslint-disable-next-line import/no-unresolved, import/extensions
 import { useAutoSaveIndication } from '@/hooks2/useAutoSaveIndication';
 import RecursiveBlock from './RecursiveBlock';
@@ -32,14 +30,8 @@ export default function Editor(props) {
     bookAvailable,
     setChapterNumber,
     setVerseNumber,
-    triggerVerseInsert,
-    newVerChapNumber,
-    insertVerseRChapter,
-    selectedText,
-    setSelectedText,
   } = props;
 
-  const [caretPosition, setCaretPosition] = useState();
   const {
     state: {
       chapter, selectedFont, fontSize, projectScriptureDir,
@@ -51,6 +43,12 @@ export default function Editor(props) {
     actions: { setOpenSideBar, setSideBarTab },
   } = useContext(ProjectContext);
 
+  const {
+    state: { caretPosition },
+    actions: { setCaretPosition, setSelectedText },
+  } = useContext(ScribexContext);
+
+  console.log({ caretPosition });
   const sequenceId = sequenceIds.at(-1);
   const style = isSaving ? { cursor: 'progress' } : {};
 
@@ -87,25 +85,6 @@ export default function Editor(props) {
     verse && setVerseNumber(verse);
   }
 
-  useEffect(() => {
-    if (insertVerseRChapter === 'Verse') {
-      insertVerseNumber(caretPosition, newVerChapNumber);
-    }
-    if (insertVerseRChapter === 'Chapter') {
-      insertChapterNumber(caretPosition, newVerChapNumber);
-    }
-    if (insertVerseRChapter === 'Footnote') {
-      insertFootnote(caretPosition, newVerChapNumber, selectedText);
-    }
-    if (insertVerseRChapter === 'Cross Reference') {
-      insertXRef(caretPosition, newVerChapNumber, selectedText);
-    }
-    // if (insertVerseRChapter === 'Section Heading') {
-    //   insertHeading(caretPosition, newVerChapNumber, selectedText);
-    // }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [triggerVerseInsert]);
-
   const observer = new IntersectionObserver((entries) => onIntersection({ setChapterNumber, scrollLock, entries }), {
     root: document.querySelector('editor'),
     threshold: 0,
diff --git a/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx b/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx
index 20f1463dc..b79687f79 100644
--- a/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx
@@ -11,10 +11,6 @@ import InsertMenu from './InsertMenu';
 export default function EditorMenuBar(props) {
   const {
     selectedFont,
-    setInsertNumber,
-    setInsertVerseRChapter,
-    setTriggerVerseInsert,
-    triggerVerseInsert,
     chapterNumber,
     setChapterNumber,
     verseNumber,
@@ -28,11 +24,6 @@ export default function EditorMenuBar(props) {
     actions: { setScrollLock },
   } = useContext(ProjectContext);
 
-  const handleClick = (number, title) => {
-    setInsertNumber(number);
-    setInsertVerseRChapter(title);
-    setTriggerVerseInsert(!triggerVerseInsert);
-  };
   return (
     <div className="relative min-h-[66px] flex flex-col bg-secondary rounded-t-md overflow-hidden">
       <div className="flex min-h-[33px] items-center justify-between ">
@@ -88,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 handleClick={handleClick} selectedText={selectedText} />
+          <InsertMenu />
         </div>
       </div>
     </div>
diff --git a/renderer/src/components/EditorPage/TextEditor/InsertMenu.jsx b/renderer/src/components/EditorPage/TextEditor/InsertMenu.jsx
index 8edce3a9b..63249c344 100644
--- a/renderer/src/components/EditorPage/TextEditor/InsertMenu.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/InsertMenu.jsx
@@ -1,39 +1,30 @@
-import PopupButton from './PopupButton';
+import React from 'react';
+import { PopupContextProvider } from '../../Popup/PopupContext';
+import Popup from './Popup';
 
-export default function InsertMenu({ handleClick: handleButtonClick, selectedText }) {
-  const handleClick = (number, title) => {
-    handleButtonClick(number, title);
-  };
+export default function InsertMenu() {
   return (
     <div className="flex items-center">
-      <PopupButton
-        handleClick={handleClick}
-        title="Insert Verse"
-        icon="V"
-      />
-      <PopupButton
-        handleClick={handleClick}
-        title="Insert Chapter"
-        icon="C"
-      />
-      <PopupButton
-        handleClick={handleClick}
-        title="Footnote"
-        selectedText={selectedText}
-        icon="FN"
-      />
-      <PopupButton
-        handleClick={handleClick}
-        title="Cross Reference"
-        selectedText={selectedText}
-        icon="XR"
-      />
-      {/* <PopupButton
-        handleClick={handleClick}
-        title="Section Heading"
-        selectedText={selectedText}
-        icon="SH"
-      /> */}
+      <PopupContextProvider>
+        <Popup
+          action="insertVerseNumber"
+        />
+      </PopupContextProvider>
+      <PopupContextProvider>
+        <Popup
+          action="insertChapterNumber"
+        />
+      </PopupContextProvider>
+      <PopupContextProvider>
+        <Popup
+          action="insertFootnote"
+        />
+      </PopupContextProvider>
+      <PopupContextProvider>
+        <Popup
+          action="insertXRef"
+        />
+      </PopupContextProvider>
     </div>
   );
 }
diff --git a/renderer/src/components/EditorPage/TextEditor/Popup.jsx b/renderer/src/components/EditorPage/TextEditor/Popup.jsx
index 498401eee..69baf3c69 100644
--- a/renderer/src/components/EditorPage/TextEditor/Popup.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/Popup.jsx
@@ -1,120 +1,120 @@
-import React, { useState, Fragment } from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { Dialog, Transition } from '@headlessui/react';
+import { ScribexContext } from '@/components/context/ScribexContext';
+import {
+  insertVerseNumber, insertChapterNumber, insertFootnote, insertXRef,
+} from '@/util/cursorUtils';
+import { usePopup } from '../../Popup/PopupContext';
+import PopUpTemplate from '../../Popup';
+
+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 {
+    state: {
+      textToInsert, numberToInsert, caretPosition, selectedText,
+    },
+    actions: {
+      setTextToInsert,
+      setNumberToInsert,
+      setSelectedText,
+    },
+  } = useContext(ScribexContext);
+  const { setIsOpen } = usePopup();
 
-const Popup = ({
-  handleClose, handleButtonClick, title, isPopupOpen, selectedText,
-}) => {
-  const [number, setNumber] = useState('');
-  // console.log({ title }, "title");
   const handleInputChange = (event) => {
-    setNumber(event.target.value);
+    setTextToInsert(event.target.value);
   };
 
   const handleNumberInputChange = (e) => {
-    setNumber(e.target.value.replace(/[^0-9]/g, ''));
+    setNumberToInsert(e.target.value.replace(/[^0-9]/g, ''));
   };
   const handleSubmit = () => {
-    handleButtonClick(number, title);
-    handleClose();
+    action === 'insertVerseNumber' || action === 'insertChapterNumber'
+      ? functionMapping[action].function({ caretPosition, numberToInsert })
+      : functionMapping[action].function({ caretPosition, textToInsert, selectedText });
+    setIsOpen(false);
   };
 
   return (
-    <Transition show as={Fragment}>
-      <Dialog
-        open={isPopupOpen}
-        as="div"
-        className="fixed inset-0 z-10 overflow-y-auto"
-        onClose={handleClose}
-      >
-        <div className="min-h-screen px-4 text-center">
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out "
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in "
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
+    <PopUpTemplate
+      buttonStyle="button gap-2  dark:hover:bg-hc-darkgray-300 dark:bg-hc-darkgray-200 dark:text-gray-200 bg-primary-500 hover:bg-primary-500/90 text-highlight-300 gap-1 "
+      buttonText={functionMapping[action].icon}
+      isLarge
+      maxWidth="max-w-xl"
+    >
+      <div className="inline-block w-full max-w-md p-6 ">
+        <div className="mt-2">
+          <div
+            as="h3"
+            className="text-lg font-medium leading-6 text-gray-900"
           >
-            <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
-          </Transition.Child>
-
-          <span
-            className="inline-block h-screen align-middle"
-            aria-hidden="true"
-          />
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out "
-            enterFrom="opacity-0 scale-95"
-            enterTo="opacity-100 scale-100"
-            leave="ease-in "
-            leaveFrom="opacity-100 scale-100"
-            leaveTo="opacity-0 scale-95"
-          >
-            <div className="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-md">
-              <Dialog.Title
-                as="h3"
-                className="text-lg font-medium leading-6 text-gray-900"
-              >
-                {title}
+            {functionMapping[action].title}
+          </div>
+          {selectedText && selectedText.length > 0
+            && (
+              <div>
+                <span className="font-medium text-gray-600">Selected Text :</span>
+                {' '}
+                <span className="text-primary px-2">{selectedText}</span>
                 {' '}
-                {title === 'Verse' || title === 'Chapter' ? Number : ''}
-              </Dialog.Title>
-              <div className="mt-2">
-                {selectedText && selectedText.length > 0
-                  && (
-                    <div>
-                      <span className="font-medium text-gray-600">Selected Text :</span>
-                      {' '}
-                      <span className="text-primary">{selectedText}</span>
-                      {' '}
-                    </div>
-                  )}
-
               </div>
-              <div className="mt-2">
-                {title === 'Verse' || title === 'Chapter'
-                  ? (
-                    <input
-                      type="text"
-                      placeholder={`${title} Number...`}
-                      className="block w-full border-gray-300 rounded-md shadow-sm appearance-none"
-                      value={number}
-                      onChange={handleNumberInputChange}
-                    />
-                  ) : (
-                    <input
-                      type="text"
-                      placeholder={`${title}`}
-                      className="block w-full border-gray-300 rounded-md shadow-sm appearance-none"
-                      value={number}
-                      onChange={handleInputChange}
-                    />
-                  )}
+            )}
 
-              </div>
-              <div className="mt-4 flex justify-end">
-                <button
-                  type="button"
-                  className="px-4 py-2 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-secondary"
-                  onClick={handleSubmit}
-                >
-                  Submit
-                </button>
-              </div>
-            </div>
-          </Transition.Child>
         </div>
-      </Dialog>
-    </Transition>
+        <div className="mt-2">
+          {action === 'insertVerseNumber' || action === 'insertChapterNumber'
+            ? (
+              <input
+                type="text"
+                placeholder={functionMapping[action].placeholder}
+                className="block w-full border-gray-300 rounded-md shadow-sm appearance-none"
+                value={numberToInsert}
+                onChange={handleNumberInputChange}
+                onFocus={(e) => e.stopPropagation()}
+              />
+            ) : (
+              <input
+                type="text"
+                placeholder={functionMapping[action].placeholder}
+                className="block w-full border-gray-300 rounded-md shadow-sm appearance-none"
+                value={textToInsert}
+                onChange={handleInputChange}
+                onFocus={(e) => e.stopPropagation()}
+              />
+            )}
+
+        </div>
+        <div className="mt-4 flex justify-end">
+          <button
+            type="button"
+            className="px-4 py-2 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-secondary"
+            onClick={handleSubmit}
+          >
+            Submit
+          </button>
+        </div>
+      </div>
+    </PopUpTemplate>
   );
 };
 
 Popup.propTypes = {
-  handleClose: PropTypes.func.isRequired,
-  handleButtonClick: PropTypes.func.isRequired,
+  action: PropTypes.string.isRequired,
+  // handleButtonClick: PropTypes.func.isRequired,
 };
 
 export default Popup;
diff --git a/renderer/src/components/EditorPage/TextEditor/PopupButton.jsx b/renderer/src/components/EditorPage/TextEditor/PopupButton.jsx
index 49615bed8..66ca1e208 100644
--- a/renderer/src/components/EditorPage/TextEditor/PopupButton.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/PopupButton.jsx
@@ -1,23 +1,29 @@
 import React, { useState } from 'react';
+import {
+  insertVerseNumber, insertChapterNumber, insertFootnote, insertXRef,
+} from '@/util/cursorUtils';
 import Popup from './Popup';
 
+export const functionMapping = {
+  insertVerseNumber: { title: 'Insert Verse', function: insertVerseNumber },
+  insertChapterNumber: { title: 'Insert Chapter', function: insertChapterNumber },
+  insertFootnote: { title: 'Insert Footnote', function: insertFootnote },
+  insertXRef: { title: 'Insert Cross Reference', function: insertXRef },
+};
 const PopupButton = ({
-  handleClick, title, selectedText, icon,
+  icon, action, isPopupOpen, setIsPopupOpen,
 }) => {
-  const [isPopupOpen, setIsPopupOpen] = useState(false);
-
-  const handlePopupOpen = () => {
+  const handlePopupOpen = (e) => {
+    e.stopPropagation();
     setIsPopupOpen(true);
   };
+  console.log({ isPopupOpen });
 
   const handlePopupClose = () => {
+    console.log('handlePopupClose sdf');
     setIsPopupOpen(false);
   };
-
-  const handleButtonClick = (number, title) => {
-    handleClick(number, title);
-  };
-
+  console.log({ isPopupOpen });
   return (
     <div
       role="button"
@@ -28,15 +34,22 @@ const PopupButton = ({
       onMouseOver={(e) => e.stopPropagation()}
     >
       <button
-        title={title}
+        title={functionMapping[action].title}
         type="button"
         onClick={handlePopupOpen}
       >
         <span className="h-5 mr-2 w-5 text-white cursor-pointer">{icon}</span>
       </button>
-      {isPopupOpen && (
-        <Popup handleClose={handlePopupClose} handleButtonClick={handleButtonClick} title={title} isPopupOpen={isPopupOpen} selectedText={selectedText} />
-      )}
+      {/* {isPopupOpen && ( */}
+      <Popup
+        handleClose={handlePopupClose}
+        // handleButtonClick={handleButtonClick}
+        title={functionMapping[action].title}
+        isPopupOpen={isPopupOpen}
+        action={action}
+        setIsPopupOpen={setIsPopupOpen}
+      />
+      {/* )} */}
     </div>
   );
 };
diff --git a/renderer/src/components/EditorPage/TextEditor/RecursiveBlock.jsx b/renderer/src/components/EditorPage/TextEditor/RecursiveBlock.jsx
index 5561aeef9..2942b1594 100644
--- a/renderer/src/components/EditorPage/TextEditor/RecursiveBlock.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/RecursiveBlock.jsx
@@ -35,11 +35,13 @@ export default function RecursiveBlock({
   const [currentVerse, setCurrentVerse] = useState(null);
 
   const updateCursorPosition = () => {
+    console.log('updateCursorPosition');
     const cursorPosition = getCurrentCursorPosition('editor');
     setCaretPosition(cursorPosition);
   };
 
   const checkReturnKeyPress = (event) => {
+    console.log('checkReturnKeyPress');
     const activeTextArea = document.activeElement;
     if (event.key === 'Enter') {
       if (activeTextArea.children.length > 1) {
@@ -61,6 +63,7 @@ export default function RecursiveBlock({
   };
 
   function handleSelection() {
+    console.log('selectin');
     let selectedText = '';
     if (window.getSelection) {
       selectedText = window.getSelection().toString();
@@ -68,11 +71,13 @@ export default function RecursiveBlock({
       selectedText = document.selection.createRange().text;
     }
     if (selectedText) {
+      console.log('selectin', selectedText);
       setSelectedText(selectedText);
     }
   }
 
   const checkCurrentVerse = () => {
+    console.log('checkCurrentVerse');
     if (document.getSelection().rangeCount >= 1 && onReferenceSelected) {
       const range = document.getSelection().getRangeAt(0);
       const selectedNode = range.startContainer;
diff --git a/renderer/src/components/EditorPage/TextEditor/index.jsx b/renderer/src/components/EditorPage/TextEditor/index.jsx
index 8e509d5f3..797c9d875 100644
--- a/renderer/src/components/EditorPage/TextEditor/index.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/index.jsx
@@ -1,4 +1,4 @@
-import {
+import React, {
   useEffect, useState, useContext, Fragment,
 } from 'react';
 import { useProskomma, useImport, useCatalog } from 'proskomma-react-hooks';
@@ -22,16 +22,13 @@ export default function TextEditor() {
   const [chapterNumber, setChapterNumber] = useState(1);
   const [verseNumber, setVerseNumber] = useState(1);
   const [triggerVerseInsert, setTriggerVerseInsert] = useState(false);
-  const [newVerChapNumber, setInsertNumber] = useState('');
-  const [insertVerseRChapter, setInsertVerseRChapter] = useState('');
-  const [selectedText, setSelectedText] = useState();
+  // const [newVerChapNumber, setInsertNumber] = useState('');
+  // const [insertVerseRChapter, setInsertVerseRChapter] = useState('');
 
   const { usfmData, bookAvailable } = useReadUsfmFile();
 
   const {
-    state: {
-      bookId,
-    },
+    state: { bookId },
     actions: { setSelectedFont },
   } = useContext(ReferenceContext);
 
@@ -91,7 +88,6 @@ export default function TextEditor() {
     ...perfState,
     ...actions,
     ...perfActions,
-    triggerVerseInsert,
     chapterNumber,
     verseNumber,
     isLoading,
@@ -101,14 +97,9 @@ export default function TextEditor() {
     setBookChange,
     setChapterNumber,
     setVerseNumber,
-    newVerChapNumber,
-    insertVerseRChapter,
-    selectedText,
-    setSelectedText,
-    setTriggerVerseInsert,
     setSelectedFont,
-    setInsertNumber,
-    setInsertVerseRChapter,
+    triggerVerseInsert,
+    setTriggerVerseInsert,
   };
   return (
     <>
diff --git a/renderer/src/components/Popup/Dialog.jsx b/renderer/src/components/Popup/Dialog.jsx
new file mode 100644
index 000000000..a78820008
--- /dev/null
+++ b/renderer/src/components/Popup/Dialog.jsx
@@ -0,0 +1,132 @@
+import * as React from 'react';
+
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+// import { IconX } from '@tabler/icons';
+
+import { classNames } from '@/util/classNames';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = ({
+  className,
+  children,
+  ...props
+}) => (
+  <DialogPrimitive.Portal className={classNames(className)} {...props}>
+    <div className="fixed inset-0 z-50 flex items-start justify-center sm:items-center">
+      {children}
+    </div>
+  </DialogPrimitive.Portal>
+);
+DialogPortal.displayName = DialogPrimitive.Portal.displayName;
+
+const DialogOverlay = React.forwardRef(
+  ({
+    className,
+    ...props
+  }, ref) => (
+    <DialogPrimitive.Overlay
+      ref={ref}
+      className={classNames(
+        'data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef(
+  ({
+    className,
+    children,
+    ...props
+  }, ref) => (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={classNames(
+          'animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-50 grid gap-4 rounded-b-lg border bg-background shadow-lg focus:outline-none dark:border-none sm:rounded-lg',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  ),
+);
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={classNames(
+      'flex flex-col space-y-1.5 text-center sm:text-left',
+      className,
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={classNames(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef(
+  ({
+    className,
+    ...props
+  }, ref) => (
+    <DialogPrimitive.Title
+      ref={ref}
+      className={classNames(
+        'text-lg font-semibold leading-none tracking-tight',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef(
+  ({
+    className,
+    ...props
+  }, ref) => (
+    <DialogPrimitive.Description
+      ref={ref}
+      className={classNames('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  ),
+);
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
diff --git a/renderer/src/components/Popup/PopupContext.jsx b/renderer/src/components/Popup/PopupContext.jsx
new file mode 100644
index 000000000..dfb6b4f28
--- /dev/null
+++ b/renderer/src/components/Popup/PopupContext.jsx
@@ -0,0 +1,28 @@
+/* eslint-disable react/jsx-no-constructed-context-values */
+import { createContext, useState, useContext } from 'react';
+import PropTypes from 'prop-types';
+
+export const PopupContext = createContext();
+
+export function usePopup() {
+  return useContext(PopupContext);
+}
+
+export const PopupContextProvider = ({ children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const context = {
+    isOpen,
+    setIsOpen,
+  };
+
+  return (
+    <PopupContext.Provider value={context}>
+      {children}
+    </PopupContext.Provider>
+  );
+};
+
+PopupContextProvider.propTypes = {
+  children: PropTypes.node,
+};
diff --git a/renderer/src/components/Popup/index.jsx b/renderer/src/components/Popup/index.jsx
new file mode 100644
index 000000000..eb26e3fe8
--- /dev/null
+++ b/renderer/src/components/Popup/index.jsx
@@ -0,0 +1,43 @@
+import { classNames } from '@/util/classNames';
+import { usePopup } from './PopupContext';
+import {
+  Dialog,
+  DialogContent,
+  DialogTrigger,
+} from './Dialog';
+
+export default function PopUp({
+  buttonStyle,
+  buttonText,
+  buttonIcon,
+  isLarge,
+  isSmall,
+  children,
+  maxWidth,
+}) {
+  const { isOpen, setIsOpen } = usePopup();
+  const openModal = (e) => {
+    e.stopPropagation();
+    setIsOpen(true);
+  };
+  return (
+    <div className="flex items-center justify-center">
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogTrigger onClick={openModal} className={buttonStyle}>
+          {buttonIcon}
+          <span>{buttonText}</span>
+        </DialogTrigger>
+        <DialogContent
+          className={classNames(
+            maxWidth || '',
+            isLarge ? 'overflow-y-auto' : '',
+            isSmall ? 'min-w-[30%] ' : 'min-w-[50%] ',
+            'scrollbar-h-1/2 relative max-h-[96vh] rounded-xl bg-white px-5 text-left align-middle text-hc-blue-900 shadow-xl transition-all scrollbar-thin scrollbar-track-hc-gray-100 scrollbar-thumb-hc-gray-200  dark:bg-hc-darkgray-50  dark:text-hc-darkgray-400  dark:scrollbar-track-hc-darkgray-50 dark:scrollbar-thumb-hc-darkgray-200',
+          )}
+        >
+          {children}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/renderer/src/components/context/ScribexContext.js b/renderer/src/components/context/ScribexContext.js
index d03fc39cd..1cffc17df 100644
--- a/renderer/src/components/context/ScribexContext.js
+++ b/renderer/src/components/context/ScribexContext.js
@@ -17,6 +17,10 @@ const ScribexContextProvider = ({
     graftSequenceId: null,
     reference,
     font,
+    caretPosition: 0,
+    textToInsert: '',
+    numberToInsert: '',
+    selectedText: null,
   };
 
   const [state, setState] = useState(initialState);
@@ -53,6 +57,23 @@ const ScribexContextProvider = ({
     setState((prev) => ({ ...prev, graftSequenceId }));
   }, []);
 
+  const setCaretPosition = useCallback((caretPosition) => {
+    setState((prev) => ({ ...prev, caretPosition }));
+  }, []);
+
+  const setTextToInsert = useCallback((textToInsert) => {
+    setState((prev) => ({ ...prev, textToInsert }));
+  }, []);
+
+  const setNumberToInsert = useCallback((numberToInsert) => {
+    console.log('setstaqte', { numberToInsert });
+    setState((prev) => ({ ...prev, numberToInsert }));
+  }, []);
+
+  const setSelectedText = useCallback((selectedText) => {
+    setState((prev) => ({ ...prev, selectedText }));
+  }, []);
+
   const addSequenceId = useCallback(
     (_sequenceId) => {
       setSequenceIds([...state.sequenceIds, _sequenceId]);
@@ -69,6 +90,10 @@ const ScribexContextProvider = ({
     setSequenceIds,
     addSequenceId,
     setGraftSequenceId,
+    setCaretPosition,
+    setTextToInsert,
+    setNumberToInsert,
+    setSelectedText,
   };
 
   const context = {
diff --git a/renderer/src/util/cursorUtils.js b/renderer/src/util/cursorUtils.js
index 2b2f25d5d..18145de03 100644
--- a/renderer/src/util/cursorUtils.js
+++ b/renderer/src/util/cursorUtils.js
@@ -119,35 +119,37 @@ export function pasteHtmlAtCaret(html, selectPastedContent, cursorPosition) {
   }
 }
 
-export function insertVerseNumber(caretPosition, verseNumber) {
-  if (verseNumber && caretPosition) {
-    const verseTag = `<span class="mark verse verse-${verseNumber}" 
-      id="ch1v${verseNumber}" data-type="mark" data-subtype="verses" data-atts-number="${verseNumber}" 
-      contenteditable="false">${verseNumber}</span>`;
+export function insertVerseNumber({ caretPosition, numberToInsert }) {
+  console.log({ caretPosition, numberToInsert });
+  if (numberToInsert && caretPosition) {
+    const verseTag = `<span class="mark verse verse-${numberToInsert}" 
+      id="ch1v${numberToInsert}" data-type="mark" data-subtype="verses" data-atts-number="${numberToInsert}" 
+      contenteditable="false">${numberToInsert}</span>`;
     pasteHtmlAtCaret(verseTag, false, caretPosition);
   }
 }
-export function insertChapterNumber(caretPosition, chapterNumber) {
-  if (chapterNumber && caretPosition) {
-    const chapterTag = `<span class="mark chapter chapter-${chapterNumber}"
-      id="ch-${chapterNumber}" data-type="mark" data-subtype="chapter"
-      data-atts-number="${chapterNumber}">"${chapterNumber}"</span>`;
+export function insertChapterNumber({ caretPosition, numberToInsert }) {
+  console.log({ caretPosition, numberToInsert });
+  if (numberToInsert && caretPosition) {
+    const chapterTag = `<span class="mark chapter chapter-${numberToInsert}"
+      id="ch-${numberToInsert}" data-type="mark" data-subtype="chapter"
+      data-atts-number="${numberToInsert}">${numberToInsert}</span>`;
     pasteHtmlAtCaret(chapterTag, false, caretPosition);
   }
 }
 
-export function insertFootnote(caretPosition, footNote, selectedText) {
-  if (footNote && 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">${footNote}</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">${footNote}</span></span></span>`;
+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>`;
     selectedText && selectedText.length !== 0 ? pasteHtmlAtCaret(footnoteTagWithSelection, false, caretPosition) : pasteHtmlAtCaret(footnoteTag, false, caretPosition);
   }
 }
 
-export function insertXRef(caretPosition, references, selectedText) {
-  if (insertXRef && 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">${references}</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">${references}</span></span></span>`;
+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>`;
     selectedText && selectedText.length !== 0
       ? pasteHtmlAtCaret(xRefTagWithSelection, false, caretPosition)
       : pasteHtmlAtCaret(xRefTag, false, caretPosition);
diff --git a/styles/globals.css b/styles/globals.css
index 83d9cdb90..ed769257c 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -261,3 +261,6 @@ p.paragraph:has(.chapter) {
 .perf .PerfEditorWrapper {
   margin: 0.1em;
 } */
+.button {
+  @apply flex h-8 cursor-pointer  items-center justify-center rounded-lg p-2 text-xs font-bold tracking-wider outline-none duration-[300ms] ease-in-out hover:-translate-y-[.15rem] hover:shadow-lg xl:px-4;
+}
\ No newline at end of file

From 106b74abdd748f776d00790fded7926d64dee534 Mon Sep 17 00:00:00 2001
From: samueljd <samuelj.ernest@gmail.com>
Date: Fri, 10 Nov 2023 19:25:27 +0530
Subject: [PATCH 4/7] fixed insert issues

---
 .../EditorPage/TextEditor/Editor.jsx          | 29 +++++++++++++--
 .../EditorPage/TextEditor/EditorMenuBar.jsx   |  4 +--
 .../EditorPage/TextEditor/InsertMenu.jsx      |  7 +++-
 .../EditorPage/TextEditor/Popup.jsx           | 36 +++++++------------
 .../TextEditor/utils/insertFunctionMap.js     | 18 ++++++++++
 .../src/components/context/ScribexContext.js  |  7 +++-
 renderer/src/util/cursorUtils.js              |  4 +--
 7 files changed, 72 insertions(+), 33 deletions(-)
 create mode 100644 renderer/src/components/EditorPage/TextEditor/utils/insertFunctionMap.js

diff --git a/renderer/src/components/EditorPage/TextEditor/Editor.jsx b/renderer/src/components/EditorPage/TextEditor/Editor.jsx
index 38b1e5512..61180ef17 100644
--- 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
index b79687f79..c3a4131e2 100644
--- 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
index 63249c344..d19c9ae03 100644
--- 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
index 69baf3c69..7440a69ea 100644
--- 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
new file mode 100644
index 000000000..a4fedbc64
--- /dev/null
+++ 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
index 1cffc17df..b608eec56 100644
--- 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
index 18145de03..ec505cf79 100644
--- a/renderer/src/util/cursorUtils.js
+++ b/renderer/src/util/cursorUtils.js
@@ -141,7 +141,7 @@ 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);
   }
 }
@@ -149,7 +149,7 @@ export function insertFootnote({ caretPosition, textToInsert, selectedText }) {
 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);

From 3b675ee0cf2aa58f536d308193c7c044efc782f6 Mon Sep 17 00:00:00 2001
From: samueljd <samuelj.ernest@gmail.com>
Date: Tue, 14 Nov 2023 12:16:42 +0200
Subject: [PATCH 5/7] custom paste function

---
 .../EditorPage/TextEditor/RecursiveBlock.jsx  | 12 +++-
 renderer/src/util/cursorUtils.js              | 71 ++++---------------
 2 files changed, 24 insertions(+), 59 deletions(-)

diff --git a/renderer/src/components/EditorPage/TextEditor/RecursiveBlock.jsx b/renderer/src/components/EditorPage/TextEditor/RecursiveBlock.jsx
index 2942b1594..d7eccde1e 100644
--- a/renderer/src/components/EditorPage/TextEditor/RecursiveBlock.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/RecursiveBlock.jsx
@@ -2,8 +2,9 @@
 /* eslint-disable no-unused-vars */
 import React, { useEffect, useState } from 'react';
 import { HtmlPerfEditor } from '@xelah/type-perf-html';
-import { getCurrentCursorPosition } from '@/util/cursorUtils';
+import { getCurrentCursorPosition, pasteTextAtCursorPosition } from '@/util/cursorUtils';
 import { getCurrentVerse, getCurrentChapter } from '@/components/EditorPage/TextEditor/utils/getReferences';
+import { on } from 'ws';
 
 const getTarget = ({ content }) => {
   const div = document.createElement('div');
@@ -89,6 +90,14 @@ export default function RecursiveBlock({
     handleSelection();
   };
 
+  function onPasteHandler(event) {
+    console.log('onPasteHandler');
+    const cursorPosition = getCurrentCursorPosition('editor');
+    const paste = (event.clipboardData || window.clipboardData).getData('text');
+    console.log({ paste, event });
+    pasteTextAtCursorPosition({ cursorPosition, textToInsert: paste });
+  }
+
   let component;
 
   const editable = !!content.match(/data-type="paragraph"/);
@@ -103,6 +112,7 @@ export default function RecursiveBlock({
         onMouseUp={checkCurrentVerse}
         onMouseDown={updateCursorPosition}
         {...props}
+        onPaste={(event) => { event.preventDefault(); onPasteHandler(event); }}
       />
     );
   }
diff --git a/renderer/src/util/cursorUtils.js b/renderer/src/util/cursorUtils.js
index ec505cf79..1194a9a20 100644
--- a/renderer/src/util/cursorUtils.js
+++ b/renderer/src/util/cursorUtils.js
@@ -119,6 +119,19 @@ export function pasteHtmlAtCaret(html, selectPastedContent, cursorPosition) {
   }
 }
 
+// paste copied text from external source. This will paste the sanitized text.
+export function pasteTextAtCursorPosition({ cursorPosition, textToInsert }) {
+  setCurrentCursorPosition(cursorPosition);
+  const sel = window.getSelection();
+  let range;
+  if (sel.getRangeAt && sel.rangeCount) {
+    range = sel.getRangeAt(0);
+    range.deleteContents();
+    range.insertNode(document.createTextNode(textToInsert));
+    sel.collapseToEnd();
+  }
+}
+
 export function insertVerseNumber({ caretPosition, numberToInsert }) {
   console.log({ caretPosition, numberToInsert });
   if (numberToInsert && caretPosition) {
@@ -175,61 +188,3 @@ export function getSelectedText() {
   }
   return selectedText;
 }
-
-// Paste text from clipboard
-export function pasteText() {
-  const editor = document.getElementById('editor');
-
-  navigator.clipboard.readText()
-    .then((text) => {
-      editor.focus();
-      document.execCommand('insertText', false, text);
-    })
-    .catch((error) => {
-      console.error(`Unable to paste text: ${error}`);
-    });
-}
-export class Clipboard {
-  static copyText(text) {
-    navigator.clipboard
-      .writeText(text)
-      .then(() => {
-        // console.log('Text copied to clipboard');
-      })
-      .catch((error) => {
-        console.error('Failed to copy text:', error);
-      });
-  }
-
-  static pasteText(element) {
-    navigator.clipboard
-      .readText()
-      .then((pastedText) => {
-        element.focus();
-        document.execCommand('insertText', false, pastedText);
-        // console.log('Text pasted from clipboard');
-      })
-      .catch((error) => {
-        console.error('Failed to paste text:', error);
-      });
-  }
-}
-
-// export function getWordAtCursor(parentElement) {
-//   const cursorPosition = Cursor.getCurrentCursorPosition(parentElement);
-//   const textContent = parentElement.textContent;
-//   const words = textContent.trim().split(/\s+/);
-//   let charCount = 0;
-
-//   for (let i = 0; i < words.length; i++) {
-//     const word = words[i];
-//     const wordLength = word.length;
-//     charCount += wordLength + 1; // +1 for the space after the word
-
-//     if (charCount > cursorPosition) {
-//       return word;
-//     }
-//   }
-
-//   return null;
-// }

From 8f4dc8ac7f05d128379cd56fd86b69eeb7816fe1 Mon Sep 17 00:00:00 2001
From: samueljd <samuelj.ernest@gmail.com>
Date: Tue, 14 Nov 2023 15:15:11 +0200
Subject: [PATCH 6/7] fixed-ui-bugs

---
 .../EditorPage/TextEditor/Popup.jsx           |  4 +-
 .../EditorPage/TextEditor/PopupButton.jsx     | 57 -------------------
 renderer/src/components/Popup/Dialog.jsx      |  2 +-
 renderer/src/components/Popup/index.jsx       |  4 +-
 .../src/components/Projects/CustomList.js     |  4 +-
 .../src/components/Projects/NewProject.js     | 38 +++++++------
 .../CreateProject/AdvancedSettingsDropdown.js |  2 +-
 renderer/src/modules/projects/CustomList.js   |  4 +-
 8 files changed, 30 insertions(+), 85 deletions(-)
 delete mode 100644 renderer/src/components/EditorPage/TextEditor/PopupButton.jsx

diff --git a/renderer/src/components/EditorPage/TextEditor/Popup.jsx b/renderer/src/components/EditorPage/TextEditor/Popup.jsx
index 7440a69ea..76421b07d 100644
--- a/renderer/src/components/EditorPage/TextEditor/Popup.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/Popup.jsx
@@ -39,9 +39,9 @@ const Popup = ({ action, setTriggerVerseInsert }) => {
 
   return (
     <PopUpTemplate
-      buttonStyle="button gap-2  dark:hover:bg-hc-darkgray-300 dark:bg-hc-darkgray-200 dark:text-gray-200 bg-primary-500 hover:bg-primary-500/90 text-highlight-300 gap-1 "
+      buttonStyle="button gap-2 text-gray-200 bg-primary-500 hover:bg-primary-500/90 text-highlight-300 gap-1"
       buttonText={functionMapping[action].icon}
-      isLarge
+      isSmall
       maxWidth="max-w-xl"
     >
       <div className="inline-block w-full max-w-md p-6 ">
diff --git a/renderer/src/components/EditorPage/TextEditor/PopupButton.jsx b/renderer/src/components/EditorPage/TextEditor/PopupButton.jsx
deleted file mode 100644
index 66ca1e208..000000000
--- a/renderer/src/components/EditorPage/TextEditor/PopupButton.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React, { useState } from 'react';
-import {
-  insertVerseNumber, insertChapterNumber, insertFootnote, insertXRef,
-} from '@/util/cursorUtils';
-import Popup from './Popup';
-
-export const functionMapping = {
-  insertVerseNumber: { title: 'Insert Verse', function: insertVerseNumber },
-  insertChapterNumber: { title: 'Insert Chapter', function: insertChapterNumber },
-  insertFootnote: { title: 'Insert Footnote', function: insertFootnote },
-  insertXRef: { title: 'Insert Cross Reference', function: insertXRef },
-};
-const PopupButton = ({
-  icon, action, isPopupOpen, setIsPopupOpen,
-}) => {
-  const handlePopupOpen = (e) => {
-    e.stopPropagation();
-    setIsPopupOpen(true);
-  };
-  console.log({ isPopupOpen });
-
-  const handlePopupClose = () => {
-    console.log('handlePopupClose sdf');
-    setIsPopupOpen(false);
-  };
-  console.log({ isPopupOpen });
-  return (
-    <div
-      role="button"
-      tabIndex={-1}
-      onKeyDown={(e) => e.stopPropagation()}
-      onClick={(e) => e.stopPropagation()}
-      onFocus={(e) => e.stopPropagation()}
-      onMouseOver={(e) => e.stopPropagation()}
-    >
-      <button
-        title={functionMapping[action].title}
-        type="button"
-        onClick={handlePopupOpen}
-      >
-        <span className="h-5 mr-2 w-5 text-white cursor-pointer">{icon}</span>
-      </button>
-      {/* {isPopupOpen && ( */}
-      <Popup
-        handleClose={handlePopupClose}
-        // handleButtonClick={handleButtonClick}
-        title={functionMapping[action].title}
-        isPopupOpen={isPopupOpen}
-        action={action}
-        setIsPopupOpen={setIsPopupOpen}
-      />
-      {/* )} */}
-    </div>
-  );
-};
-
-export default PopupButton;
diff --git a/renderer/src/components/Popup/Dialog.jsx b/renderer/src/components/Popup/Dialog.jsx
index a78820008..956a01557 100644
--- a/renderer/src/components/Popup/Dialog.jsx
+++ b/renderer/src/components/Popup/Dialog.jsx
@@ -50,7 +50,7 @@ const DialogContent = React.forwardRef(
       <DialogPrimitive.Content
         ref={ref}
         className={classNames(
-          'animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-50 grid gap-4 rounded-b-lg border bg-background shadow-lg focus:outline-none dark:border-none sm:rounded-lg',
+          'animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-50 grid gap-4 rounded-b-lg border bg-background shadow-lg focus:outline-none sm:rounded-lg',
           className,
         )}
         {...props}
diff --git a/renderer/src/components/Popup/index.jsx b/renderer/src/components/Popup/index.jsx
index eb26e3fe8..d6d769262 100644
--- a/renderer/src/components/Popup/index.jsx
+++ b/renderer/src/components/Popup/index.jsx
@@ -31,8 +31,8 @@ export default function PopUp({
           className={classNames(
             maxWidth || '',
             isLarge ? 'overflow-y-auto' : '',
-            isSmall ? 'min-w-[30%] ' : 'min-w-[50%] ',
-            'scrollbar-h-1/2 relative max-h-[96vh] rounded-xl bg-white px-5 text-left align-middle text-hc-blue-900 shadow-xl transition-all scrollbar-thin scrollbar-track-hc-gray-100 scrollbar-thumb-hc-gray-200  dark:bg-hc-darkgray-50  dark:text-hc-darkgray-400  dark:scrollbar-track-hc-darkgray-50 dark:scrollbar-thumb-hc-darkgray-200',
+            isSmall ? 'min-w-[25%] ' : 'min-w-[50%] ',
+            'relative max-h-[96vh] rounded-xl bg-white px-5 text-left align-middle shadow-xl transition-all border',
           )}
         >
           {children}
diff --git a/renderer/src/components/Projects/CustomList.js b/renderer/src/components/Projects/CustomList.js
index 5a5ecf69e..c1b11e1c8 100644
--- a/renderer/src/components/Projects/CustomList.js
+++ b/renderer/src/components/Projects/CustomList.js
@@ -10,7 +10,7 @@ export default function CustomList({
   const dropdownWidth = width ?? 40;
   return (
     <Listbox value={selected} onChange={setSelected} disabled={!show}>
-      <div className={classNames(show === false ? 'bg-gray-200' : '', 'w-52 lg:w-40 block rounded shadow-sm sm:text-sm focus:border-primary border-gray-300')}>
+      <div className={classNames(show === false ? 'bg-gray-200' : '', 'relative w-52 lg:w-40 rounded shadow-sm sm:text-sm focus:border-primary border-gray-300')}>
         <Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left rounded-lg shadow-md cursor-default focus:outline-none focus-visible:ring-2 focus-visible:ring-opacity-75 focus-visible:ring-white focus-visible:ring-offset-orange-300 focus-visible:ring-offset-2 focus-visible:border-indigo-500 sm:text-sm">
           <span id={selected?.title} className="block truncate">{selected?.title}</span>
           <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
@@ -26,7 +26,7 @@ export default function CustomList({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <Listbox.Options className={`absolute z-50 w-52 lg:w-${dropdownWidth} py-1 mt-1 z-10 overflow-auto scrollbars-width text-base bg-white rounded-md shadow-lg max-h-48 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm`}>
+          <Listbox.Options className={`absolute z-50 w-52 lg:w-${dropdownWidth} py-1 mt-1 overflow-auto scrollbars-width text-base bg-white rounded-md shadow-lg max-h-44 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm`}>
             {options.map((option) => (
               <Listbox.Option
                 key={option.title}
diff --git a/renderer/src/components/Projects/NewProject.js b/renderer/src/components/Projects/NewProject.js
index 35bb28b9c..5babc280c 100644
--- a/renderer/src/components/Projects/NewProject.js
+++ b/renderer/src/components/Projects/NewProject.js
@@ -50,7 +50,7 @@ const solutions = [
 function TargetLanguageTag(props) {
   const { children } = props;
   return (
-    <div className="rounded-full px-3 py-1 ml-28 bg-gray-200 text-xs uppercase font-semibold">{children}</div>
+    <div className="rounded-full px-3 py-1 bg-gray-200 text-xs uppercase font-semibold">{children}</div>
   );
 }
 
@@ -317,10 +317,10 @@ export default function NewProject({ call, project, closeEdit }) {
           </div>
           )
         : (
-          <div className=" rounded-md border shadow-sm mt-4 ml-5 mr-5 mb-5">
+          <div className="rounded-md border shadow-sm mt-4 ml-5 mr-5 mb-5">
             <div className="grid grid-cols-1 lg:grid-cols-3 m-10 gap-5">
 
-              <div>
+              <div className="lg:col-span-1">
                 <h4 className="text-xs font-base mb-2 text-primary  tracking-wide leading-4  font-light">
                   {t('label-project-name')}
                   <span className="text-error">*</span>
@@ -334,7 +334,7 @@ export default function NewProject({ call, project, closeEdit }) {
                     handleProjectName(e);
                   }}
                   disabled={call !== 'new'}
-                  className={classNames(call !== 'new' ? 'bg-gray-200' : '', 'w-52 lg:w-80 block rounded shadow-sm sm:text-sm focus:border-primary border-gray-300')}
+                  className={classNames(call !== 'new' ? 'bg-gray-200' : '', 'w-48 lg:w-full rounded shadow-sm sm:text-sm focus:border-primary border-gray-300')}
                 />
                 <span className="text-error">{error.projectName[0]?.message || error.projectName[1]?.message}</span>
                 <h4 className="mt-5 text-xs font-base mb-2 text-primary leading-4 tracking-wide  font-light">{t('label-description')}</h4>
@@ -346,12 +346,12 @@ export default function NewProject({ call, project, closeEdit }) {
                   onChange={(e) => {
                     setNewProjectFields({ ...newProjectFields, description: e.target.value });
                   }}
-                  className="bg-white w-52 lg:w-80 h-28  block rounded shadow-sm sm:text-sm focus:border-primary border-gray-300"
+                  className="bg-white w-48 lg:w-full h-28  block rounded shadow-sm sm:text-sm focus:border-primary border-gray-300"
                 />
                 <span className="text-error">{error.description[0]?.message}</span>
               </div>
 
-              <div className="col-span-2">
+              <div className="lg:col-span-2">
                 <div className="flex gap-5">
                   <div>
                     <h4 className="text-xs font-base mb-2 text-primary  tracking-wide leading-4  font-light">
@@ -373,18 +373,20 @@ export default function NewProject({ call, project, closeEdit }) {
                 </div>
                 <div className="flex gap-5 mt-5 items-center">
                   <div>
-                    {headerDropDown !== 'Audio'
-                      && (
-                      <div className="absolute">
-                        <TargetLanguageTag>
-                          {language.ld ? language.ld : 'LTR'}
-                        </TargetLanguageTag>
-                      </div>
-                    )}
-                    <h4 className="text-xs font-base mb-3 text-primary  tracking-wide leading-4  font-light">
-                      {t('label-target-language')}
-                      <span className="text-error">*</span>
-                    </h4>
+                    <div className="flex gap-4 items-center mb-2">
+                      <h4 className="text-xs font-base  text-primary  tracking-wide leading-4  font-light">
+                        {t('label-target-language')}
+                        <span className="text-error">*</span>
+                      </h4>
+                      {headerDropDown !== 'Audio'
+                        && (
+                          <div>
+                            <TargetLanguageTag>
+                              {language.ld ? language.ld : 'LTR'}
+                            </TargetLanguageTag>
+                          </div>
+                        )}
+                    </div>
                     <CustomMultiComboBox
                       selectedList={[language]}
                       setSelectedList={setLanguage}
diff --git a/renderer/src/components/ProjectsPage/CreateProject/AdvancedSettingsDropdown.js b/renderer/src/components/ProjectsPage/CreateProject/AdvancedSettingsDropdown.js
index 2990eb146..7103fb47b 100644
--- a/renderer/src/components/ProjectsPage/CreateProject/AdvancedSettingsDropdown.js
+++ b/renderer/src/components/ProjectsPage/CreateProject/AdvancedSettingsDropdown.js
@@ -270,7 +270,7 @@ export default function AdvancedSettingsDropdown({ call, project, projectType })
                     show
                   /> */}
 
-                  <div className="py-5 flex gap-3 uppercase text-sm font-medium">
+                  <div className="py-5 flex flex-wrap lg:flex-nowrap gap-3 uppercase text-sm font-medium">
                     <div
                       className={canonSpecification.title === 'All Books' ? 'bg-primary hover:bg-secondary text-white px-3 py-1 rounded-full cursor-pointer whitespace-nowrap' : 'bg-gray-200 hover:bg-primary hover:text-white px-3 py-1 rounded-full cursor-pointer whitespace-nowrap'}
                       onClick={() => selectCanon(canonList[0])}
diff --git a/renderer/src/modules/projects/CustomList.js b/renderer/src/modules/projects/CustomList.js
index a08a9c798..d51086530 100644
--- a/renderer/src/modules/projects/CustomList.js
+++ b/renderer/src/modules/projects/CustomList.js
@@ -10,7 +10,7 @@ export default function CustomList({
   const dropdownWidth = width ?? 40;
   return (
     <Listbox value={selected} onChange={setSelected} disabled={!show}>
-      <div className={classNames(show === false ? 'bg-gray-200' : '', 'w-52 lg:w-40 block rounded shadow-sm sm:text-sm focus:border-primary border-gray-300')}>
+      <div className={classNames(show === false ? 'bg-gray-200' : '', 'relative w-52 lg:w-40 rounded shadow-sm sm:text-sm focus:border-primary border-gray-300')}>
         <Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left rounded-lg shadow-md cursor-default focus:outline-none focus-visible:ring-2 focus-visible:ring-opacity-75 focus-visible:ring-white focus-visible:ring-offset-orange-300 focus-visible:ring-offset-2 focus-visible:border-indigo-500 sm:text-sm">
           <span className="block truncate">{selected?.title}</span>
           <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
@@ -26,7 +26,7 @@ export default function CustomList({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <Listbox.Options className={`absolute z-50 w-52 lg:w-${dropdownWidth} py-1 mt-1 z-10 overflow-auto scrollbars-width text-base bg-white rounded-md shadow-lg max-h-48 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm`}>
+          <Listbox.Options className={`absolute z-50 w-52 lg:w-${dropdownWidth} py-1 mt-1 overflow-auto scrollbars-width text-base bg-white rounded-md shadow-lg max-h-44 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm`}>
             {options.map((option) => (
               <Listbox.Option
                 key={option.title}

From 7ce2e551ddccf7031736445a97eea4a5ec25009d Mon Sep 17 00:00:00 2001
From: samueljd <samuelj.ernest@gmail.com>
Date: Wed, 15 Nov 2023 18:04:10 +0200
Subject: [PATCH 7/7] fixed undo redo and insert popup ui

---
 package.json                                  |   2 +-
 public/icons/Xelah/XMark.svg                  |   3 +
 renderer/public/icons/Xelah/XMark.svg         |   3 +
 .../EditorPage/TextEditor/Buttons.jsx         |  31 ++++--
 .../EditorPage/TextEditor/EditorMenuBar.jsx   |   2 +-
 .../EditorPage/TextEditor/Popup.jsx           |  28 +++--
 styles/globals.css                            |   2 +-
 yarn.lock                                     | 105 +-----------------
 8 files changed, 50 insertions(+), 126 deletions(-)
 create mode 100644 public/icons/Xelah/XMark.svg
 create mode 100644 renderer/public/icons/Xelah/XMark.svg

diff --git a/package.json b/package.json
index c56c1a7a4..be4f08ee8 100644
--- a/package.json
+++ b/package.json
@@ -143,7 +143,7 @@
     "electron-log": "4.4.7",
     "electron-next": "^3.1.5",
     "electron-updater": "^5.0.1",
-    "epitelete": "0.2.20-beta.1",
+    "epitelete": "^0.2.20",
     "epitelete-html": "0.2.20-beta.2",
     "eslint-import-resolver-alias": "^1.1.2",
     "font-detect-rhl": "1.0.5-1",
diff --git a/public/icons/Xelah/XMark.svg b/public/icons/Xelah/XMark.svg
new file mode 100644
index 000000000..457d8e626
--- /dev/null
+++ b/public/icons/Xelah/XMark.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+</svg>
diff --git a/renderer/public/icons/Xelah/XMark.svg b/renderer/public/icons/Xelah/XMark.svg
new file mode 100644
index 000000000..457d8e626
--- /dev/null
+++ b/renderer/public/icons/Xelah/XMark.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+</svg>
diff --git a/renderer/src/components/EditorPage/TextEditor/Buttons.jsx b/renderer/src/components/EditorPage/TextEditor/Buttons.jsx
index 758a16b69..e2fe18eb0 100644
--- a/renderer/src/components/EditorPage/TextEditor/Buttons.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/Buttons.jsx
@@ -20,6 +20,8 @@ export default function Buttons(props) {
   const [preview, setPreviewState] = useState(false);
   const {
     bookCode,
+    canUndo,
+    canRedo,
     undo,
     redo,
     setSectionable,
@@ -84,18 +86,29 @@ export default function Buttons(props) {
           />
         )}
 
-      <ArrowUturnLeftIcon
-        aria-label="Undo-Icon"
-        className="h-5 mr-2 w-5 text-white cursor-pointer"
+      <button
+        type="button"
         onClick={() => undo()}
-        title="Undo"
-      />
-      <ArrowUturnRightIcon
-        aria-label="Redo-Icon"
-        className="h-5 mr-2 w-5 text-white cursor-pointer"
+        disabled={!canUndo}
+        title="Redo"
+      >
+        <ArrowUturnLeftIcon
+          aria-label="Redo-Icon"
+          className="h-5 mr-2 w-5 text-white cursor-pointer"
+        />
+      </button>
+      <button
+        type="button"
         onClick={() => redo()}
+        disabled={!canRedo}
         title="Redo"
-      />
+      >
+        <ArrowUturnRightIcon
+          aria-label="Redo-Icon"
+          className="h-5 mr-2 w-5 text-white cursor-pointer"
+        />
+      </button>
+
       <ArrowDownOnSquareIcon
         aria-label="Save-Icon"
         className="h-5 mr-2 w-5 text-white cursor-pointer"
diff --git a/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx b/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx
index c3a4131e2..a6cb2478e 100644
--- a/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx
@@ -78,7 +78,7 @@ export default function EditorMenuBar(props) {
           <Buttons {...props} />
         </div>
         <div className="flex ml-auto">
-          <MenuDropdown selectedFont={selectedFont} setSelectedFont={setSelectedFont} buttonStyle="h-6 mr-2 w-6 text-white cursor-pointer" />
+          <MenuDropdown selectedFont={selectedFont} setSelectedFont={setSelectedFont} buttonStyle="button text-gray-200 bg-primary-500 hover:bg-primary-500/90 text-highlight-300 gap-1" />
           <InsertMenu setTriggerVerseInsert={setTriggerVerseInsert} />
         </div>
       </div>
diff --git a/renderer/src/components/EditorPage/TextEditor/Popup.jsx b/renderer/src/components/EditorPage/TextEditor/Popup.jsx
index 76421b07d..18698f9d4 100644
--- a/renderer/src/components/EditorPage/TextEditor/Popup.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/Popup.jsx
@@ -2,6 +2,7 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { ScribexContext } from '@/components/context/ScribexContext';
 
+import XMarkIcon from '@/icons/Xelah/XMark.svg';
 import { usePopup } from '../../Popup/PopupContext';
 import PopUpTemplate from '../../Popup';
 import { functionMapping } from './utils/insertFunctionMap';
@@ -15,6 +16,7 @@ const Popup = ({ action, setTriggerVerseInsert }) => {
       setTextToInsert,
       setNumberToInsert,
       setInsertType,
+      setSelectedText,
     },
   } = useContext(ScribexContext);
   const { setIsOpen } = usePopup();
@@ -30,28 +32,34 @@ const Popup = ({ action, setTriggerVerseInsert }) => {
     setInsertType(action);
     setTriggerVerseInsert((prev) => !prev);
 
-    // calling funciton here does not trigger the perf check to safe. Hence the trigger to re-render.
+    // calling funciton here does not trigger the perf check to safe. Hence the trigger to re-render. and the code is commented out.
     // action === 'insertVerseNumber' || action === 'insertChapterNumber'
     //   ? functionMapping[action].function({ caretPosition, numberToInsert })
     //   : functionMapping[action].function({ caretPosition, textToInsert, selectedText });
     setIsOpen(false);
+    setSelectedText('');
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+    setSelectedText('');
   };
 
   return (
     <PopUpTemplate
-      buttonStyle="button gap-2 text-gray-200 bg-primary-500 hover:bg-primary-500/90 text-highlight-300 gap-1"
+      buttonStyle="button text-gray-200 bg-primary-500 hover:bg-primary-500/90 text-highlight-300 gap-1"
       buttonText={functionMapping[action].icon}
       isSmall
       maxWidth="max-w-xl"
     >
-      <div className="inline-block w-full max-w-md p-6 ">
+      <div className="absolute flex text-white justify-between items-center w-full bg-black h-8 mb-8 rounded-t-md">
+        <h2 className="text-sm h-5 pl-2">{functionMapping[action].title}</h2>
+        <button type="button" className="h-full flex items-center px-2 bg-primary rounded-tr-md" onClick={() => handleClose()}>
+          <XMarkIcon className="h-5 w-5 text-white" />
+        </button>
+      </div>
+      <div className="inline-block w-full max-w-md p-6 mt-4">
         <div className="mt-2">
-          <div
-            as="h3"
-            className="text-lg font-medium leading-6 text-gray-900"
-          >
-            {functionMapping[action].title}
-          </div>
           {selectedText && selectedText.length > 0
             && (
               <div>
@@ -63,7 +71,7 @@ const Popup = ({ action, setTriggerVerseInsert }) => {
             )}
 
         </div>
-        <div className="mt-2">
+        <div className="mt-4">
           {action === 'insertVerseNumber' || action === 'insertChapterNumber'
             ? (
               <input
diff --git a/styles/globals.css b/styles/globals.css
index ed769257c..c544797b6 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -262,5 +262,5 @@ p.paragraph:has(.chapter) {
   margin: 0.1em;
 } */
 .button {
-  @apply flex h-8 cursor-pointer  items-center justify-center rounded-lg p-2 text-xs font-bold tracking-wider outline-none duration-[300ms] ease-in-out hover:-translate-y-[.15rem] hover:shadow-lg xl:px-4;
+  @apply flex h-8 cursor-pointer  items-center justify-center rounded-lg p-2 text-xs font-bold  outline-none  xl:px-4;
 }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 856aacd62..5547576c0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3481,18 +3481,6 @@
     "@radix-ui/react-use-callback-ref" "1.0.1"
     "@radix-ui/react-use-escape-keydown" "1.0.3"
 
-"@radix-ui/react-dismissable-layer@1.0.5":
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz#3f98425b82b9068dfbab5db5fff3df6ebf48b9d4"
-  integrity sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/primitive" "1.0.1"
-    "@radix-ui/react-compose-refs" "1.0.1"
-    "@radix-ui/react-primitive" "1.0.3"
-    "@radix-ui/react-use-callback-ref" "1.0.1"
-    "@radix-ui/react-use-escape-keydown" "1.0.3"
-
 "@radix-ui/react-dropdown-menu@^2.0.4":
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.5.tgz#19bf4de8ffa348b4eb6a86842f14eff93d741170"
@@ -3574,23 +3562,6 @@
     "@radix-ui/react-use-size" "1.0.1"
     "@radix-ui/rect" "1.0.1"
 
-"@radix-ui/react-popper@1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.1.3.tgz#24c03f527e7ac348fabf18c89795d85d21b00b42"
-  integrity sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@floating-ui/react-dom" "^2.0.0"
-    "@radix-ui/react-arrow" "1.0.3"
-    "@radix-ui/react-compose-refs" "1.0.1"
-    "@radix-ui/react-context" "1.0.1"
-    "@radix-ui/react-primitive" "1.0.3"
-    "@radix-ui/react-use-callback-ref" "1.0.1"
-    "@radix-ui/react-use-layout-effect" "1.0.1"
-    "@radix-ui/react-use-rect" "1.0.1"
-    "@radix-ui/react-use-size" "1.0.1"
-    "@radix-ui/rect" "1.0.1"
-
 "@radix-ui/react-portal@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.3.tgz#ffb961244c8ed1b46f039e6c215a6c4d9989bda1"
@@ -3599,14 +3570,6 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
-"@radix-ui/react-portal@1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.4.tgz#df4bfd353db3b1e84e639e9c63a5f2565fb00e15"
-  integrity sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-primitive" "1.0.3"
-
 "@radix-ui/react-presence@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.1.tgz#491990ba913b8e2a5db1b06b203cb24b5cdef9ba"
@@ -3648,25 +3611,6 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "1.0.1"
 
-"@radix-ui/react-tooltip@^1.0.7":
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz#8f55070f852e7e7450cc1d9210b793d2e5a7686e"
-  integrity sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/primitive" "1.0.1"
-    "@radix-ui/react-compose-refs" "1.0.1"
-    "@radix-ui/react-context" "1.0.1"
-    "@radix-ui/react-dismissable-layer" "1.0.5"
-    "@radix-ui/react-id" "1.0.1"
-    "@radix-ui/react-popper" "1.1.3"
-    "@radix-ui/react-portal" "1.0.4"
-    "@radix-ui/react-presence" "1.0.1"
-    "@radix-ui/react-primitive" "1.0.3"
-    "@radix-ui/react-slot" "1.0.2"
-    "@radix-ui/react-use-controllable-state" "1.0.1"
-    "@radix-ui/react-visually-hidden" "1.0.3"
-
 "@radix-ui/react-use-callback-ref@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz#f4bb1f27f2023c984e6534317ebc411fc181107a"
@@ -3713,14 +3657,6 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "1.0.1"
 
-"@radix-ui/react-visually-hidden@1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz#51aed9dd0fe5abcad7dee2a234ad36106a6984ac"
-  integrity sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-primitive" "1.0.3"
-
 "@radix-ui/rect@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.0.1.tgz#bf8e7d947671996da2e30f4904ece343bc4a883f"
@@ -8549,18 +8485,7 @@ epitelete-html@0.2.20-beta.2:
     node-html-parser "^5.3.3"
     pure-uuid "^1.6.3"
 
-epitelete@0.2.20-beta.1:
-  version "0.2.20-beta.1"
-  resolved "https://registry.yarnpkg.com/epitelete/-/epitelete-0.2.20-beta.1.tgz#e604ef358132dcb265ce3a967a6aec58162e1b13"
-  integrity sha512-sJpjnj01UDTtO7glo6Tmyvl5WJCZSSyFzbbMWugXM7+LCDdZdIfzdvOWOL+4H68G4ZUjZF3VcA9/PsnE/sBgzA==
-  dependencies:
-    "@babel/core" "^7.19.0"
-    base-64 "^1.0.0"
-    proskomma-json-tools "^0.6.6"
-    pure-uuid "^1.6.3"
-    rfdc "^1.3.0"
-
-epitelete@^0.2.20-beta.1:
+epitelete@^0.2.20, epitelete@^0.2.20-beta.1:
   version "0.2.20"
   resolved "https://registry.yarnpkg.com/epitelete/-/epitelete-0.2.20.tgz#1a89703d5e3152461179bd87540a6f58905141cc"
   integrity sha512-dag7scneBXNrR4LLSmeFWxb1ShYeWOxxRqyogJo9UEES2Nr8B5cNDfGqMqYOszCAMdmnGH1RoH1qydAk04JjoA==
@@ -13572,14 +13497,6 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-<<<<<<< Updated upstream
-lucide-react@^0.284.0:
-  version "0.284.0"
-  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.284.0.tgz#91df00fb62f9de498a4fcc3fbad2d58813bdd23b"
-  integrity sha512-dVSMHYAya/TeY3+vsk+VQJEKNQN2AhIo0+Dp09B2qpzvcBuu93H98YZykFcjIAfmanFiDd8nqfXFR38L757cyQ==
-
-=======
->>>>>>> Stashed changes
 lz-string@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
@@ -16241,16 +16158,6 @@ proskomma-json-tools@^0.5.7:
     ajv "^8.11.0"
     deep-equal "^2.0.5"
 
-proskomma-json-tools@^0.6.6:
-  version "0.6.6"
-  resolved "https://registry.yarnpkg.com/proskomma-json-tools/-/proskomma-json-tools-0.6.6.tgz#a5df84641ff4c6239f94ab93e3dbf71e52333d88"
-  integrity sha512-IEBJTyg6YDKr4E54CLDO1wDjcoiqGKjLxRDTnNSDRaHBG1TJyN1k94V6CHVrvgzKUtQFdWRH77mQ6hJjIUSLVg==
-  dependencies:
-    "@babel/core" "^7.17.10"
-    "@babel/plugin-proposal-throw-expressions" "^7.18.6"
-    ajv "^8.11.0"
-    deep-equal "^2.0.5"
-
 proskomma-json-tools@^0.7.1:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/proskomma-json-tools/-/proskomma-json-tools-0.7.2.tgz#317a0be61402811c5a5cea6fbef2468003e242d5"
@@ -18710,16 +18617,6 @@ symbol-tree@^3.2.2, symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
-tailwind-merge@^1.14.0:
-  version "1.14.0"
-  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-1.14.0.tgz#e677f55d864edc6794562c63f5001f45093cdb8b"
-  integrity sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==
-
-tailwindcss-animate@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz#318b692c4c42676cc9e67b19b78775742388bef4"
-  integrity sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==
-
 tailwindcss@^3.0.2, tailwindcss@^3.2.4:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf"