replace temp sj-usfm-grammar with usfm-grammar-web

package.json

@@ -222,7 +222,6 @@
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "5.0.1",
-    "sj-usfm-grammar": "3.0.8",
     "styled-components": "^5.3.6",
     "tc-ui-toolkit": "5.3.3",
     "terser-webpack-plugin": "^5.3.10",
@@ -232,6 +231,7 @@
     "use-deep-compare": "^1.1.0",
     "usfm-editor": "0.8.7",
     "usfm-grammar": "^2.3.1",
+    "usfm-grammar-web": "^3.0.0",
     "uuid": "^9.0.1",
     "wavesurfer.js": "^6.6.4",
     "webpack-node-externals": "^3.0.0",

renderer/src/components/EditorPage/Reference/Audio/ReferenceAudio.js

@@ -31,7 +31,7 @@ const ReferenceAudio = ({
   const {
     actions: {
       setReferenceLoading,
-      setCounter,
+      // setCounter,
     },
   } = useContext(ReferenceContext);
   const {

renderer/src/components/EditorPage/Reference/ReferenceBible/useReadReferenceUsfmFile.js

@@ -26,7 +26,7 @@ export const useReadReferenceUsfmFile = ({
   const {
     actions: {
       setReferenceLoading,
-      setCounter,
+      // setCounter,
     },
   } = useContext(ReferenceContext);
 
@@ -78,7 +78,7 @@ export const useReadReferenceUsfmFile = ({
                       status: true,
                       text: t('dynamic-msg-load-ref-bible-success'),
                     });
-                    setCounter(4);
+                    // setCounter(4);
                   } else if (chosenResource.type === 'common') {
                     const commonResourcePath = path.join(newpath, packageInfo.name, 'common', 'resources', refName, key);
                     const commonResourceIngredients = await readIngredients({ filePath: commonResourcePath });
@@ -98,7 +98,7 @@ export const useReadReferenceUsfmFile = ({
                       status: true,
                       text: t('dynamic-msg-load-ref-bible-success'),
                     });
-                    setCounter(4);
+                    // setCounter(4);
                   } else {
                     setUsfmData([]);
                     setBookAvailable(false);

renderer/src/components/EditorPage/TextEditor/conversionUtils.js

@@ -1,47 +1,66 @@
-import USFMParser from 'sj-usfm-grammar';
+import { USFMParser, Validator } from 'usfm-grammar-web';
 
 let usfmParserInstance;
 let usfmParserInitialized;
+let validatorInstance;
+let validatorInitialized;
 
-export async function initializeParser() {
-  if (!usfmParserInstance) {
-    if (!usfmParserInitialized) {
-      usfmParserInitialized = await USFMParser.init();
-    }
-    await usfmParserInitialized;
-    usfmParserInstance = new USFMParser();
+export async function initializeParser(usfm = null, usj = null) {
+  if (!usfmParserInitialized) {
+    usfmParserInitialized = await USFMParser.init(
+      'https://cdn.jsdelivr.net/npm/usfm-grammar-web@3.0.0/tree-sitter-usfm.wasm',
+      'https://cdn.jsdelivr.net/npm/usfm-grammar-web@3.0.0/tree-sitter.wasm',
+    );
+  }
+  await usfmParserInitialized;
+  if (usfm) {
+    usfmParserInstance = new USFMParser(usfm);
+  } else if (usj) {
+    usfmParserInstance = new USFMParser(null, usj);
   }
   return usfmParserInstance;
 }
 
-export async function convertUsfmToUsj(usfm) {
-  if (!usfmParserInstance) {
-    usfmParserInstance = await initializeParser();
+export async function initializeValidator() {
+  if (!validatorInitialized) {
+    validatorInitialized = await Validator.init(
+      'https://cdn.jsdelivr.net/npm/usfm-grammar-web@3.0.0-beta.16/tree-sitter-usfm.wasm',
+      'https://cdn.jsdelivr.net/npm/usfm-grammar-web@3.0.0-beta.16/tree-sitter.wasm',
+    );
   }
+  await validatorInitialized;
+  validatorInstance = new Validator();
+  return validatorInstance;
+}
+export async function convertUsfmToUsj(usfm) {
+  usfmParserInstance = await initializeParser(usfm, null);
   try {
-    const usj = usfmParserInstance.usfmToUsj(usfm);
+    const usj = usfmParserInstance.toUSJ();
+    console.log('converting', { usj });
     return { usj };
   } catch (e) {
     return { usj: { content: [] }, error: e };
   }
 }
 
 export async function convertUsjToUsfm(usj) {
-  if (!usfmParserInstance) {
-    usfmParserInstance = await initializeParser();
-  }
-  const usfm = usfmParserInstance.usjToUsfm(usj);
+  usfmParserInstance = await initializeParser(null, usj);
+  // }
+  const usfm = usfmParserInstance.usfm;
   return usfm;
 }
 
 export async function validateUsfm(usfm) {
-  if (!usfmParserInstance) {
-    usfmParserInstance = await initializeParser();
-  }
+  validatorInstance = await initializeValidator();
+
   try {
-    const { isValid, validUSFM, bookCode } = usfmParserInstance.validate(usfm);
-    // console.log('USFM validation, isValid:', isValid, 'validUSFM:', validUSFM, bookCode);
-    return { isValid, validUSFM, bookCode };
+    let isValid = validatorInstance.isValidUSFM(usfm);
+    if (isValid) {
+      return { isValid, validUSFM: usfm };
+    }
+    const validUSFM = validatorInstance.autoFixUSFM(usfm);
+    isValid = validatorInstance.isValidUSFM(validUSFM);
+    return { isValid, validUSFM };
   } catch (e) {
     return { isValid: false, error: e };
   }
@@ -56,3 +75,11 @@
     // eslint-disable-next-line no-console
     console.error('Error initializing USFM Parser:', err);
   });
+
+initializeValidator().then(() => {
+  // eslint-disable-next-line no-console
+  console.log('USFM Validator initialized successfully');
+}).catch((err) => {
+  // eslint-disable-next-line no-console
+  console.error('Error initializing USFM Validator:', err);
+});

renderer/src/components/EditorPage/TextEditor/index.jsx

@@ -20,16 +20,15 @@ const defaultScrRef = {
 };
 
 export default function TextEditor() {
-  const [chapterNumber, setChapterNumber] = useState(1);
-  const [verseNumber, setVerseNumber] = useState(1);
-
   const [usjInput, setUsjInput] = useState();
   const [scrRef, setScrRef] = useState(defaultScrRef);
   const [navRef, setNavRef] = useState();
   const [parseError, setParseError] = useState(false);
   const {
     state: {
       bookId: defaultBookId,
+      chapter,
+      verse,
       selectedFont,
       editorFontSize,
       projectScriptureDir,
@@ -41,6 +40,9 @@ export default function TextEditor() {
       handleEditorFontSize,
     },
   } = useContext(ReferenceContext);
+  // console.log({ chapter, verse });
+  const [chapterNumber, setChapterNumber] = useState(chapter);
+  const [verseNumber, setVerseNumber] = useState(verse);
   const { showSnackbar } = useAutoSnackbar();
   const { t } = useTranslation();
   const [book, setBook] = useState(defaultBookId);
@@ -83,6 +85,11 @@ export default function TextEditor() {
       );
   }, [cachedData, loading]);
 
+  // useEffect(() => {
+  //   setChapterNumber(chapter);
+  //   setVerseNumber(verse);
+  // }, [chapter, verse]);
+
   useEffect(() => {
     setScrRef({
       bookCode: book,
@@ -105,7 +112,6 @@ export default function TextEditor() {
   const handleUsjChange = useMemo(
     () => debounce(async (updatedUsj) => {
       updateCacheNSaveFile(updatedUsj, book);
-      // console.log('usj updated', updatedUsj);
     }, 1000),
     [book],
   );

renderer/src/components/Projects/ImportPopUp.js

@@ -13,8 +13,8 @@ import styles from './ImportPopUp.module.css';
 import * as logger from '../../logger';
 import CloseIcon from '@/illustrations/close-button-black.svg';
 import { updateJsonJuxta } from './utils/updateJsonJuxta';
+import { extractBookCode } from './utils/extractBookCode';
 
-const grammar = require('usfm-grammar');
 const advanceSettings = require('../../lib/AdvanceSettings.json');
 
 export default function ImportPopUp(props) {
@@ -119,7 +119,8 @@ export default function ImportPopUp(props) {
       switch (projectType) {
       case 'Translation': {
         const usfm = fs.readFileSync(filePath, 'utf8');
-        const { isValid, validUSFM, bookCode } = await validateUsfm(usfm);
+        const { isValid, validUSFM } = await validateUsfm(usfm);
+        const bookCode = extractBookCode(validUSFM);
         if (isValid) {
           // If importing a USFM file then ask user for replace of USFM with the new content or not
           replaceConformation(true);
@@ -137,15 +138,14 @@ export default function ImportPopUp(props) {
 
       case 'Audio': {
         const usfm = fs.readFileSync(filePath, 'utf8');
-        const myUsfmParser = new grammar.USFMParser(usfm, grammar.LEVEL.RELAXED);
-        const isJsonValid = myUsfmParser.validate();
-        if (isJsonValid) {
+        const { isValid, validUSFM } = await validateUsfm(usfm);
+        const bookCode = extractBookCode(validUSFM);
+        if (isValid) {
           // If importing a USFM file then ask user for replace of USFM with the new content or not
           replaceConformation(true);
           logger.debug('ImportPopUp.js', 'Valid USFM file.');
-          const jsonOutput = myUsfmParser.toJSON();
-          files.push({ id: jsonOutput.book.bookCode, content: usfm });
-          bookCodeList.push(jsonOutput.book.bookCode);
+          files.push({ id: bookCode, content: validUSFM });
+          bookCodeList.push(bookCode);
         } else {
           logger.warn('ImportPopUp.js', 'Invalid USFM file.');
           setNotify('failure');
@@ -186,17 +186,15 @@ export default function ImportPopUp(props) {
         const fileExt = filename.split('.').pop()?.toLowerCase();
         if (fileExt === 'txt' || fileExt === 'usfm' || fileExt === 'text' || fileExt === 'sfm'
             || fileExt === undefined) {
-          const myUsfmParser = new grammar.USFMParser(file, grammar.LEVEL.RELAXED);
-          const isJsonValid = myUsfmParser.validate();
+          const { isValid, validUSFM } = await validateUsfm(file);
+          const bookCode = extractBookCode(validUSFM);
           // if the USFM is valid
-          if (isJsonValid) {
+          if (isValid) {
             replaceConformation(true);
             logger.debug('ImportPopUp.js', 'Valid USFM file.');
-            // then we get the book code and we transform our data to our Juxta json file
-            const jsonOutput = myUsfmParser.toJSON();
-            const juxtaJson = JSON.stringify(readUsfm(file, jsonOutput.book.bookCode));
-            files.push({ id: jsonOutput.book.bookCode, content: juxtaJson });
-            bookCodeList.push(jsonOutput.book.bookCode);
+            const juxtaJson = JSON.stringify(readUsfm(file, bookCode));
+            files.push({ id: bookCode, content: juxtaJson });
+            bookCodeList.push(bookCode);
           } else {
             logger.warn('ImportPopUp.js', 'Invalid USFM file.');
             setNotify('failure');

renderer/src/components/Projects/utils/extractBookCode.js

@@ -0,0 +1,4 @@
+export const extractBookCode = (text) => {
+  const idMatch = text.match(/\\id\s+([A-Za-z0-9]{3})/);
+  return idMatch ? idMatch[1].toUpperCase() : null;
+};

renderer/src/components/context/ReferenceContext.js

@@ -48,7 +48,7 @@ export default function ReferenceContextProvider({ children }) {
     status: false,
     text: '',
   });
-  const [counter, setCounter] = useState(7);
+  // const [counter, setCounter] = useState(7);
   const [bookmarksVerses, setBookmarksVerses] = useState([]);
   const myEditorRef = useRef();
   const [closeNavigation, setCloseNavigation] = useState(false);
@@ -227,7 +227,7 @@ export default function ReferenceContextProvider({ children }) {
       layout,
       row,
       referenceLoading,
-      counter,
+      // counter,
       bookmarksVerses,
       myEditorRef,
       closeNavigation,
@@ -280,7 +280,7 @@ export default function ReferenceContextProvider({ children }) {
       setLayout,
       setRow,
       setReferenceLoading,
-      setCounter,
+      // setCounter,
       setBookmarksVerses,
       setCloseNavigation,
       setProjectScriptureDir,

renderer/src/translations/en.js

@@ -161,7 +161,7 @@ export const En = {
   'dynamic-msg-resource-added': 'resource added successfully',
   'dynamic-msg-resource-unable-fetch-url': 'unable to fetch selected resource from the given url',
   'dynamic-msg-load-ref-bible-snack': 'successfully loaded {{refName}} files',
-  'dynamic-msg-load-ref-bible-snack-fail': 'failed to loaded {{refName}} files',
+  'dynamic-msg-load-ref-bible-snack-fail': 'failed to load {{refName}} files',
   'dynamic-msg-load-ref-bible-success': 'Reference-burrito loaded succesfully',
   'dynamic-msg-validate-hook-project-name': 'The input has to be between {{minLen}} and {{maxLen}} characters long',
   'dynamic-msg-update-burrito-version': 'Update the the burrito from {{version1}} to {{version2}}',