diff --git a/renderer/src/components/EditorPage/TextEditor/Editor.jsx b/renderer/src/components/EditorPage/TextEditor/Editor.jsx index 54fbeff18..03c1ad86e 100644 --- a/renderer/src/components/EditorPage/TextEditor/Editor.jsx +++ b/renderer/src/components/EditorPage/TextEditor/Editor.jsx @@ -1,4 +1,6 @@ -import React, { useContext, useEffect } from 'react'; +import React, { + useContext, useEffect, useLayoutEffect, useRef, +} from 'react'; import { HtmlPerfEditor } from '@xelah/type-perf-html'; import LoadingScreen from '@/components/Loading/LoadingScreen'; @@ -12,7 +14,7 @@ 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'; +import { onIntersection, scrollReference } from './utils/IntersectionObserver'; export default function Editor(props) { const { @@ -98,14 +100,35 @@ export default function Editor(props) { // eslint-disable-next-line react-hooks/exhaustive-deps }, [triggerVerseInsert]); + const isScrolling = useRef(false); + useLayoutEffect(() => { + const handleScroll = () => { + isScrolling.current = true; + }; + const handleScrollEnd = () => { + isScrolling.current = false; + }; + const editorDiv = document.getElementById('fulleditor'); + // Adding scroll and click event listeners + editorDiv.addEventListener('scroll', handleScroll); + editorDiv.addEventListener('click', handleScrollEnd); + return () => { + editorDiv.removeEventListener('scroll', handleScroll); + editorDiv.removeEventListener('click', handleScrollEnd); + }; + }, []); + useAutoSaveIndication(isSaving); function onReferenceSelected({ chapter, verse }) { chapter && setChapterNumber(chapter); verse && setVerseNumber(verse); + scrollReference(chapter); } - const observer = new IntersectionObserver((entries) => onIntersection({ setChapterNumber, scrollLock, entries }), { + const observer = new IntersectionObserver((entries) => onIntersection({ + scroll: isScrolling.current, setChapterNumber, scrollLock, entries, setVerseNumber, + }), { root: document.querySelector('editor'), threshold: 0, rootMargin: '0% 0% -60% 0%', @@ -140,6 +163,7 @@ export default function Editor(props) { return (
{ + onChangeChapter(chapterNumber, 1); + onChangeVerse(verseNumber, 1); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [chapterNumber, verseNumber]); + const { catalog } = useCatalog({ proskomma, stateId, verbose }); const { id: docSetId, documents } = (done && catalog.docSets[0]) || {}; if (done) { diff --git a/renderer/src/components/EditorPage/TextEditor/utils/IntersectionObserver.js b/renderer/src/components/EditorPage/TextEditor/utils/IntersectionObserver.js index b6f806ad2..dafa7eaf2 100644 --- a/renderer/src/components/EditorPage/TextEditor/utils/IntersectionObserver.js +++ b/renderer/src/components/EditorPage/TextEditor/utils/IntersectionObserver.js @@ -9,12 +9,17 @@ export const scrollReference = (chapterNumber) => { }); }; -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) : {}; +export const onIntersection = ({ + scroll, entries, setChapterNumber, scrollLock, setVerseNumber, +}) => { + if (scroll) { + // eslint-disable-next-line no-restricted-syntax + for (const entry of entries) { + if (entry.isIntersecting) { + setChapterNumber(entry.target.dataset.attsNumber); + setVerseNumber(1); + scrollLock === false ? scrollReference(entry.target.dataset.attsNumber) : {}; + } } } };