From fd1c56fef254413af4feb25bd78e0c47c3108139 Mon Sep 17 00:00:00 2001 From: samueljd Date: Tue, 10 Sep 2024 17:05:24 +0530 Subject: [PATCH] lexical editor integrated. --- .../Navigation/reference/SelectBook.js | 2 + .../Navigation/reference/SelectVerse.js | 13 +- .../TextEditor/BibleNavigationX.jsx | 3 +- .../EditorPage/TextEditor/EditorMenuBar.jsx | 16 +-- .../EditorPage/TextEditor/Lexical.jsx | 53 ++++---- .../EditorPage/TextEditor/index.jsx | 113 +++++++++++------- .../modules/editorsidebar/EditorSideBar.js | 24 ++-- styles/globals.css | 4 +- 8 files changed, 126 insertions(+), 102 deletions(-) diff --git a/renderer/src/components/EditorPage/Navigation/reference/SelectBook.js b/renderer/src/components/EditorPage/Navigation/reference/SelectBook.js index 40261083e..680a2734b 100644 --- a/renderer/src/components/EditorPage/Navigation/reference/SelectBook.js +++ b/renderer/src/components/EditorPage/Navigation/reference/SelectBook.js @@ -14,6 +14,7 @@ export default function SelectBook({ selectedBooks, setSelectedBooks, scope, + setBook, existingScope = [], disableScope = {}, call = '', @@ -39,6 +40,7 @@ export default function SelectBook({ function bookSelect(e, bookId) { e.preventDefault(); onChangeBook(bookId, selectedBooks[0]); + setBook(bookId); if (multiSelectBook === false) { selectBook(); } } diff --git a/renderer/src/components/EditorPage/Navigation/reference/SelectVerse.js b/renderer/src/components/EditorPage/Navigation/reference/SelectVerse.js index 4cd805594..5783b9691 100644 --- a/renderer/src/components/EditorPage/Navigation/reference/SelectVerse.js +++ b/renderer/src/components/EditorPage/Navigation/reference/SelectVerse.js @@ -35,11 +35,16 @@ export default function SelectVerse({ const onChapterSelect = (e, chapterNum) => { e.preventDefault(); onChangeChapter(chapterNum, chapter); + onChangeVerse(1, 1); setOpenChapter(false); - setOpenVerse(true); - window.location.href = `#ch-${chapterNum}`; + // setOpenVerse(true); + closeBooks(); + closeVerses(); + + // window.location.href = `#ch-${chapterNum}`; if (chapterNum && setChapterNumber) { setChapterNumber(chapterNum); + setVerseNumber(1); // document.getElementById('editor').querySelector(`#ch-${chapterNum}`)?.scrollIntoView(); } }; @@ -88,13 +93,13 @@ export default function SelectVerse({ :   {chapter} -
+ {/*
{t('label-verse')} :   {multiSelectVerse ? controlVerseSelect.join() : verse} -
+
*/}
{children} diff --git a/renderer/src/components/EditorPage/TextEditor/BibleNavigationX.jsx b/renderer/src/components/EditorPage/TextEditor/BibleNavigationX.jsx index 4be5cb2b0..509993ba1 100644 --- a/renderer/src/components/EditorPage/TextEditor/BibleNavigationX.jsx +++ b/renderer/src/components/EditorPage/TextEditor/BibleNavigationX.jsx @@ -12,7 +12,7 @@ import { ReferenceContext } from '@/components/context/ReferenceContext'; export default function BibleNavigationX(props) { const { - showVerse, chapterNumber, setChapterNumber, verseNumber, setVerseNumber, + showVerse, chapterNumber, setChapterNumber, verseNumber, setVerseNumber, setBook, } = props; const supportedBooks = null; // if empty array or null then all books available @@ -169,6 +169,7 @@ export default function BibleNavigationX(props) { multiSelectBook={multiSelectBook} selectedBooks={selectedBooks} setSelectedBooks={setSelectedBooks} + setBook={setBook} // The SelectBook is also been used to set the Canon-Scope for the projects and // "scope" is added to disable the click on the book list. scope="Other" will only // allow to click/select the book. diff --git a/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx b/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx index a9b13f3af..b29f9d751 100644 --- a/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx +++ b/renderer/src/components/EditorPage/TextEditor/EditorMenuBar.jsx @@ -6,8 +6,6 @@ import { LockClosedIcon, BookmarkIcon, LockOpenIcon } from '@heroicons/react/24/ // import BibleNavigationX from '@/components/EditorPage/TextEditor/BibleNavigationX'; import { useTranslation } from 'react-i18next'; import BibleNavigationX from './BibleNavigationX'; -import Buttons from './Buttons'; -import InsertMenu from './InsertMenu'; export default function EditorMenuBar(props) { const { @@ -17,9 +15,10 @@ export default function EditorMenuBar(props) { verseNumber, setVerseNumber, handleSelectedFont, - setTriggerVerseInsert, handleEditorFontSize, editorFontSize, + book, + setBook, } = props; const { t } = useTranslation(); @@ -46,6 +45,8 @@ export default function EditorMenuBar(props) { setChapterNumber={setChapterNumber} verseNumber={verseNumber} setVerseNumber={setVerseNumber} + book={book} + setBook={setBook} />
-
-
- -
-
- - -
-
); } diff --git a/renderer/src/components/EditorPage/TextEditor/Lexical.jsx b/renderer/src/components/EditorPage/TextEditor/Lexical.jsx index 81d6af51e..d0f3b696a 100644 --- a/renderer/src/components/EditorPage/TextEditor/Lexical.jsx +++ b/renderer/src/components/EditorPage/TextEditor/Lexical.jsx @@ -1,36 +1,20 @@ import { - useEffect, useState, useRef, useMemo, useContext, + useEffect, useState, useRef, useMemo, } from 'react'; import { - Editor, getViewOptions, DEFAULT_VIEW_MODE, immutableNoteCallerNodeName, NoteEditor, + Editor, getViewOptions, DEFAULT_VIEW_MODE, immutableNoteCallerNodeName, } from '@biblionexus-foundation/scribe-editor'; -import { ProjectContext } from '@/components/context/ProjectContext'; -import EditorSideBar from '@/modules/editorsidebar/EditorSideBar'; +// import { ProjectContext } from '@/components/context/ProjectContext'; +// import EditorSideBar from '@/modules/editorsidebar/EditorSideBar'; // import '@biblionexus-foundation/scribe-editor/dist/style.css'; -const defaultScrRef = { - /* PSA */ bookCode: 'PSA', - chapterNum: 1, - verseNum: 1, -}; - -export default function LexicalEditor({ usjInput, onUsjChange, setNavRef }) { +export default function LexicalEditor({ + usjInput, onUsjChange, setNavRef, selectedFont, fontSize, projectScriptureDir, scrRef, setScrRef, +}) { const [usj, setUsj] = useState(); - // const [initialRender, setInitialRender] = useState(true); - const [scrRef, setScrRef] = useState(defaultScrRef); - const editorRef = useRef(null); - const [stateX, setStateX] = useState(false); - const [text, setText] = useState(''); - const { - states: { openSideBar, scrollLock }, - actions: { setOpenSideBar, setSideBarTab }, - } = useContext(ProjectContext); - function closeSideBar(status) { - setOpenSideBar(status); - } - const previousUsjRef = useRef(null); + const editorRef = useRef(null); useEffect(() => { const timeoutId = setTimeout(() => { @@ -49,9 +33,9 @@ export default function LexicalEditor({ usjInput, onUsjChange, setNavRef }) { const nodeOptions = { [immutableNoteCallerNodeName]: { onClick: (e) => { - setStateX(true); - setText(e.currentTarget.getAttribute('data-caller-id')); - setOpenSideBar(!openSideBar); + // const callerId = e.currentTarget.getAttribute('data-caller-id'); + // setText(callerId); + console.log({ e }); }, }, }; @@ -70,10 +54,17 @@ export default function LexicalEditor({ usjInput, onUsjChange, setNavRef }) { }, [scrRef]); return ( -
+
1.3) ? 1.5 : '', + direction: `${projectScriptureDir === 'RTL' ? 'rtl' : 'auto'}`, + }} + >
-
+
- + {/* { stateX && (
) - } + } */}
); diff --git a/renderer/src/components/EditorPage/TextEditor/index.jsx b/renderer/src/components/EditorPage/TextEditor/index.jsx index 1c61e1717..5ae4c7302 100644 --- a/renderer/src/components/EditorPage/TextEditor/index.jsx +++ b/renderer/src/components/EditorPage/TextEditor/index.jsx @@ -1,69 +1,84 @@ import React, { useEffect, useState, useContext, Fragment, useMemo, } from 'react'; -import { ScribexContext } from '@/components/context/ScribexContext'; import { ReferenceContext } from '@/components/context/ReferenceContext'; import { ProjectContext } from '@/components/context/ProjectContext'; import EditorSideBar from '@/modules/editorsidebar/EditorSideBar'; import { debounce } from 'lodash'; +import { + getViewOptions, DEFAULT_VIEW_MODE, immutableNoteCallerNodeName, +} from '@biblionexus-foundation/scribe-editor'; +import { LoadingSpinner } from '@/components/LoadingSpinner'; import { useReadUsfmFile } from './hooks/useReadUsfmFile'; import EditorMenuBar from './EditorMenuBar'; import LexicalEditor from './Lexical'; import { updateCacheNSaveFile } from '../LexicalEditor/updateAndSave'; +const defaultScrRef = { + bookCode: 'PSA', + chapterNum: 1, + verseNum: 1, +}; + export default function TextEditor() { - const { state, actions } = useContext(ScribexContext); - const [bookChange, setBookChange] = useState(false); const [chapterNumber, setChapterNumber] = useState(1); const [verseNumber, setVerseNumber] = useState(1); - const [triggerVerseInsert, setTriggerVerseInsert] = useState(false); + const [book, setBook] = useState(); const [usjInput, setUsjInput] = useState(); - // const [parser, setParser] = useState(); + const [text, setText] = useState(); + const [scrRef, setScrRef] = useState(defaultScrRef); const [navRef, setNavRef] = useState(); + const { + states: { openSideBar }, + actions: { setOpenSideBar, setSideBarTab }, + } = useContext(ProjectContext); + function closeSideBar(status) { + setOpenSideBar(status); + } + const [viewMode] = useState(DEFAULT_VIEW_MODE); - // const initializeParser = async () => { - // await USFMParser.init(); - // usfmParser = new USFMParser(); - // setParser(usfmParser); - // }; - // useEffect(() => { - // initializeParser(); - // }, []); + const nodeOptions = { + [immutableNoteCallerNodeName]: { + onClick: (e) => { + const callerId = e.currentTarget.getAttribute('data-caller-id'); + setText(callerId); + setOpenSideBar(true); + setSideBarTab('footnotes'); + }, + }, + }; + const viewOptions = useMemo(() => getViewOptions(viewMode), [viewMode]); const { - bookAvailable, bookId, cachedData, + bookId, cachedData, } = useReadUsfmFile(); + useEffect(() => { if (cachedData.error) { console.error('Error parsing USFM', cachedData.error); - return; } const { usj } = cachedData; - if (!usj && usj === {}) { return; } - console.log({ usj }); + if (!usj && usj?.entries(usj).length === 0) { return; } + console.log(usj); setUsjInput(usj); }, [bookId, cachedData]); const { - state: { selectedFont }, + state: { selectedFont, fontSize, projectScriptureDir }, actions: { handleSelectedFont, onChangeChapter, onChangeVerse }, } = useContext(ReferenceContext); - const { - states: { openSideBar }, - actions: { setOpenSideBar }, - } = useContext(ProjectContext); - - function closeSideBar(status) { - setOpenSideBar(status); - } - useEffect(() => { + setScrRef({ + bookCode: book, + chapterNum: chapterNumber, + verseNum: verseNumber, + }); onChangeChapter(chapterNumber, 1); onChangeVerse(verseNumber, 1); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [chapterNumber, verseNumber]); + }, [chapterNumber, verseNumber, book]); useEffect(() => { if (navRef) { @@ -82,35 +97,47 @@ export default function TextEditor() { ); const _props = { - ...state, - // ...perfState, - ...actions, - // ...perfActions, selectedFont, chapterNumber, - verseNumber, - // isLoading, - // bookName, - bookChange, - bookAvailable, - handleEditorFontSize, - setBookChange, setChapterNumber, + verseNumber, setVerseNumber, + book, + setBook, handleSelectedFont, - triggerVerseInsert, - setTriggerVerseInsert, + scrRef, + setScrRef, + }; + + const notesProps = { + usj: usjInput, + onChange: handleUsjChange, + viewOptions, + nodeOptions, + text, + }; + const props = { + selectedFont, + fontSize, + projectScriptureDir, + usjInput, + onUsjChange: handleUsjChange, + setNavRef, + scrRef, + setScrRef, + book, + setBook, }; return ( <>
- {usjInput && } + {!usjInput ? : }
); diff --git a/renderer/src/modules/editorsidebar/EditorSideBar.js b/renderer/src/modules/editorsidebar/EditorSideBar.js index 202d1fab4..b0b54e12a 100644 --- a/renderer/src/modules/editorsidebar/EditorSideBar.js +++ b/renderer/src/modules/editorsidebar/EditorSideBar.js @@ -24,9 +24,9 @@ import CrossReferenceIcon from '@/icons/crossreference.svg'; import FootNotesIcon from '@/icons/footnotes.svg'; import Search from './Search'; -import CrossReferences from './CrossReferences'; +// import CrossReferences from './CrossReferences'; // import FootNotes from './FootNotes'; -import GraftEditor from './GraftEditor'; +// import GraftEditor from './GraftEditor'; import Comments from './Comments'; import Bookmarks from '../../components/EditorPage/BookMarks/Bookmarks'; @@ -55,7 +55,7 @@ export default function EditorSideBar(props) { const { isOpen, closeSideBar, - graftProps, + notesProps, } = props; const { @@ -193,12 +193,18 @@ export default function EditorSideBar(props) {
{state.tabIndex === 0 && } - {state.tabIndex === 1 - // && } - && } - {state.tabIndex === 2 - && } - {/* && } */} + {/* {state.tabIndex === 1 + && } */} + {state.tabIndex === 2 && ( + + )} + {/* && } */} {state.tabIndex === 3 && } {state.tabIndex === 4 diff --git a/styles/globals.css b/styles/globals.css index a4447008c..b3f50c36e 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -342,7 +342,7 @@ p.paragraph:has(.chapter) { /* ChapterNode, ImmutableChapterNode */ .formatted-font .usfm_c { - @apply m-2 block break-before-column font-medium uppercase tracking-wider before:content-['Chapter_:_']; + @apply text-primary block break-before-column font-medium uppercase tracking-wider before:content-['Chapter_:_']; } .text-spacing[dir='ltr'] .usfm_c { @apply pl-4 text-left; @@ -370,7 +370,7 @@ p.paragraph:has(.chapter) { /* VerseNode, ImmutableVerseNode */ .formatted-font .usfm_v { - @apply align-top text-xs uppercase tracking-wider text-cyan-500; + @apply align-top text-xs uppercase tracking-wider text-primary; } .text-spacing[dir='ltr'] .usfm_v { @apply text-left;