Skip to content

Commit

Permalink
I put the sentences loading one layer outside the main editor, to avo…
Browse files Browse the repository at this point in the history 
…id the editor to re-render everytime the juxtalinear editor module
  • Loading branch information
danielc-n committed Mar 20, 2024
1 parent 97d0ada commit d24564b
Show file tree
Hide file tree
Showing 7 changed files with 185 additions and 236 deletions.
185 changes: 153 additions & 32 deletions renderer/src/components/EditorPage/JuxtaTextEditor/Editor.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* eslint-disable no-unused-vars */
import React, { useContext, useEffect } from 'react';
import React, { useContext, useEffect, useState } from 'react';
import md5 from 'md5';

import LoadingScreen from '@/components/Loading/LoadingScreen';
import { ReferenceContext } from '@/components/context/ReferenceContext';
Expand All @@ -14,6 +15,10 @@ import { functionMapping } from './utils/insertFunctionMap';
import { useAutoSaveIndication } from '@/hooks2/useAutoSaveIndication';
import { onIntersection } from './utils/IntersectionObserver';
import JuxtalinearEditor from '@/components/EditorPage/JuxtalinearEditor'; // eslint-disable-line
import SentenceContextProvider from '@/components/context/SentenceContext';
import { useReadJuxtaFile } from '@/components/EditorPage/JuxtaTextEditor/hooks/useReadJuxtaFile';
import { normalizeString } from '@/components/Projects/utils/updateJsonJuxta.js';
// import { readUserSettings } from '@/core/projects/userSettings';

export default function Editor(props) {
const {
Expand All @@ -30,7 +35,6 @@ export default function Editor(props) {
// addSequenceId,
// saveHtmlPerf,
// setGraftSequenceId,
bookAvailable,
setChapterNumber,
setVerseNumber,
triggerVerseInsert,
Expand All @@ -42,6 +46,9 @@ export default function Editor(props) {
},
} = useContext(ReferenceContext);

const { usfmData, bookAvailable, readFileName } = useReadJuxtaFile();
const [jsonFileContent, setJsonFileContent] = useState(null);

const {
states: { openSideBar, scrollLock },
actions: { setOpenSideBar, setSideBarTab },
Expand All @@ -59,27 +66,28 @@ export default function Editor(props) {
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);
// }
// },
// };
const [fileName, setFileName] = useState('');
const [sentences, setGlobalTotalSentences] = useState(
new Array(),
);
const [originText, setOriginText] = useState([])
const [itemArrays, setItemArrays] = useState([]);
const [curIndex, setCurIndex] = useState(0);

const [userSettingsJson, setUserSettingsJson] = useState(null);

const setGlobalItemArrays = (index, itemArr) => {
const newItemArrays = [...itemArrays];
newItemArrays[index] = itemArr;
setItemArrays(newItemArrays);
}

const setGlobalSentences = (index, sentence) => {
const newSentences = [...sentences];
newSentences[index] = sentence;
setGlobalTotalSentences(newSentences);
}

useEffect(() => {
setBookChange(false);
// eslint-disable-next-line react-hooks/exhaustive-deps
Expand All @@ -101,10 +109,99 @@ export default function Editor(props) {

useAutoSaveIndication(isSaving);

// function onReferenceSelected({ chapter, verse }) {
// chapter && setChapterNumber(chapter);
// verse && setVerseNumber(verse);
// }
const remakeSentences = (stcs) => {
let checksumSentences = '';
let checksumChuncks = '';
let currentCs = '';
return stcs.map((stc) => {
checksumChuncks = '';
currentCs = '';
const counts = {};
const chunks = stc.chunks.filter(({ source }) => source[0]).map((chunk) => {
const source = chunk.source.map((src) => {
if (counts[src.content] === undefined) {
counts[src.content] = 0;
} else {
counts[src.content] += 1;
}
return { ...src, index: counts[src.content] };
});
currentCs = md5(normalizeString(JSON.stringify(source) + chunk.gloss)) + '';
checksumChuncks += currentCs;
return {
source,
gloss: chunk.gloss,
checksum: currentCs
};
});
currentCs = md5(checksumChuncks) + '';
checksumSentences += currentCs;
return {
originalSource: stc.originalSource,
chunks,
sourceString: stc.sourceString,
checksum: checksumSentences
};
});
};

const getItems = (res = null) => {
if (res !== null) {
return res[0].chunks
.map(({ source, gloss, checksum }, index) => {
return {
chunk: source
.filter((s) => s)
.map((s, n) => {
return {
id: `item-${index * 1000 + n}`,
content: s.content,
index: s.index,
};
}),
gloss,
checksum,
};
})
.filter(({ chunk }) => chunk.length);
} else {
return sentences[curIndex].chunks
.map(({ source, gloss, checksum }, index) => {
return {
chunk: source
.filter((s) => s)
.map((s, n) => {
return {
id: `item-${index * 1000 + n}`,
content: s.content,
index: s.index
};
}),
gloss,
checksum,
};
})
.filter(({ chunk }) => chunk.length);
}
};

const tryLoadSentences = () => {
if (bookAvailable) {
const resContent = JSON.parse(usfmData[0].data);
setJsonFileContent(resContent);
setFileName(readFileName);
setCurIndex(curIndex);
setGlobalTotalSentences(remakeSentences(resContent.sentences));
setOriginText(resContent.sentences.map((sentence) => sentence.sourceString));
if (resContent.sentences.length) {
setItemArrays([getItems(resContent.sentences)]);
}
}
}

useEffect(() => {
tryLoadSentences();
}, [usfmData]);

const observer = new IntersectionObserver((entries) => onIntersection({ setChapterNumber, scrollLock, entries }), {
root: document.querySelector('editor'),
Expand Down Expand Up @@ -158,11 +255,35 @@ export default function Editor(props) {
className="border-l-2 border-r-2 border-secondary pb-16 overflow-auto h-full scrollbars-width leading-8"
>
<div id="editor" style={style}>
{/* {!bookAvailable && <EmptyScreen />}
{bookAvailable && (!sequenceId || bookChange) && <LoadingScreen />}
{bookAvailable && sequenceId && !bookChange && (
)} */}
<JuxtalinearEditor {..._props} />
{!bookAvailable && <EmptyScreen />}
{bookAvailable && sentences.length <= 0 && <LoadingScreen />}
{bookAvailable && sentences.length > 0 && (
<SentenceContextProvider
value={{
fileName,
sentences,
originText,
itemArrays,
curIndex,
jsonFileContent,
userSettingsJson,
setFileName,
setGlobalSentences,
setOriginText,
setGlobalTotalSentences,
setGlobalItemArrays,
setItemArrays,
setCurIndex,
setChapterNumber,
setVerseNumber,
setJsonFileContent,
setUserSettingsJson,
getItems,
}}
>
<JuxtalinearEditor {..._props} />
</SentenceContextProvider>
)}
</div>
</div>
);
Expand Down
5 changes: 3 additions & 2 deletions renderer/src/components/EditorPage/JuxtaTextEditor/EditorMenuBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,8 @@ export default function EditorMenuBar(props) {
/>
)}
</div>
<div
{/** TODO : bookmark behavior */}
{/* <div
role="button"
tabIndex="0"
title="bookmark"
Expand All @@ -70,7 +71,7 @@ export default function EditorMenuBar(props) {
className="h-5 mr-4 w-5 text-white cursor-pointer"
aria-hidden="true"
/>
</div>
</div> */}
</div>
</div>
{/* <div className="mx-2.5 min-h-[33px] flex items-center justify-center">
Expand Down
83 changes: 5 additions & 78 deletions renderer/src/components/EditorPage/JuxtalinearEditor/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,12 @@
import React, { useState } from 'react';

// import { setupIonicReact } from '@ionic/react'
// import { useTranslation } from 'react-i18next';
import React from 'react';
import Home from './pages/Home';

/* Core CSS required for Ionic components to work properly */
// import '@ionic/react/css/core.css';

import { Layout } from './components/Layout';
import SentenceContextProvider from '@/components/context/SentenceContext';
// import { ISentence, IChunk } from './types';

// setupIonicReact();

// export const SentenceContext = createContext<ISentenceContext>({
// fileName: '',
// sentences: [],
// originText: [],
// itemArrays: [[]],
// curIndex: 0,
// setFileName: () => {},
// setGlobalSentences: () => {},
// setOriginText: () => {},
// setGlobalTotalSentences: () => {},
// setGlobalItemArrays: () => {},
// setItemArrays: () => {},
// setCurIndex: () => {},
// })

const JuxtalinearEditor: React.FC<any> = ({
bookAvailable,
setChapterNumber,
setVerseNumber,
bookChange,
setBookChange,
}) => {
const [fileName, setFileName] = useState('');
const [sentences, setGlobalTotalSentences] = useState(
new Array<ISentence>(),
);
const [originText, setOriginText] = useState<string[]>([])
const [itemArrays, setItemArrays] = useState<
IChunk[][]
>([]);
const [curIndex, setCurIndex] = useState(0);

const setGlobalItemArrays = (index: number, itemArr: IChunk[]) => {
const newItemArrays = [...itemArrays];
newItemArrays[index] = itemArr;
setItemArrays(newItemArrays);
}

const setGlobalSentences = (index: number, sentence: ISentence) => {
const newSentences = [...sentences];
newSentences[index] = sentence;
setGlobalTotalSentences(newSentences);
}

const JuxtalinearEditor: React.FC<any> = () => {
return (
<SentenceContextProvider
value={{
fileName,
sentences,
originText,
itemArrays,
curIndex,
setFileName,
setGlobalSentences,
setOriginText,
setGlobalTotalSentences,
setGlobalItemArrays,
setItemArrays,
setCurIndex,
setChapterNumber,
setVerseNumber,
}}
>
<Layout>
<Home />
</Layout>
</SentenceContextProvider>
<Layout>
<Home />
</Layout>
);
};

Expand Down
Loading

0 comments on commit d24564b

Please sign in to comment.