Add a spell-checker context (#2413)

sillsdev · Jul 25, 2023 · 9ffd0a8 · 9ffd0a8
1 parent f9bc1e0
commit 9ffd0a8
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 31 deletions.
diff --git a/src/components/DataEntry/DataEntryTable/EntryCellComponents/GlossWithSuggestions.tsx b/src/components/DataEntry/DataEntryTable/EntryCellComponents/GlossWithSuggestions.tsx
@@ -1,9 +1,9 @@
 import { Autocomplete, TextField } from "@mui/material";
-import React, { ReactElement, useEffect } from "react";
+import React, { ReactElement, useContext, useEffect } from "react";
 import { Key } from "ts-key-enum";
 
 import { WritingSystem } from "api";
-import SpellChecker from "utilities/spellChecker";
+import SpellCheckerContext from "utilities/spellCheckerContext";
 
 interface GlossWithSuggestionsProps {
   isNew?: boolean;
@@ -16,7 +16,6 @@ interface GlossWithSuggestionsProps {
   analysisLang: WritingSystem;
   textFieldId: string;
   onUpdate?: () => void;
-  spellChecker?: SpellChecker;
 }
 
 /**
@@ -25,6 +24,8 @@ interface GlossWithSuggestionsProps {
 export default function GlossWithSuggestions(
   props: GlossWithSuggestionsProps
 ): ReactElement {
+  const spellChecker = useContext(SpellCheckerContext);
+
   const maxSuggestions = 5;
 
   useEffect(() => {
@@ -44,7 +45,7 @@ export default function GlossWithSuggestions(
       }
       // freeSolo allows use of a typed entry not available as a drop-down option
       freeSolo
-      options={props.spellChecker?.getSpellingSuggestions(props.gloss) ?? []}
+      options={spellChecker.getSpellingSuggestions(props.gloss)}
       value={props.gloss}
       onBlur={() => {
         if (props.onBlur) {

diff --git a/...mponents/DataEntry/DataEntryTable/EntryCellComponents/tests/GlossWithSuggestions.test.tsx b/...mponents/DataEntry/DataEntryTable/EntryCellComponents/tests/GlossWithSuggestions.test.tsx
@@ -3,7 +3,6 @@ import renderer from "react-test-renderer";
 
 import GlossWithSuggestions from "components/DataEntry/DataEntryTable/EntryCellComponents/GlossWithSuggestions";
 import { newWritingSystem } from "types/writingSystem";
-import SpellChecker from "utilities/spellChecker";
 
 // A work-around for this console error: https://github.com/mui/material-ui/issues/28687#issuecomment-1513741911
 jest.mock("@mui/base/node/useAutocomplete/useAutocomplete", () => () => ({
@@ -60,20 +59,4 @@ describe("GlossWithSuggestions", () => {
       );
     });
   });
-
-  it("renders with spell checker", () => {
-    renderer.act(() => {
-      renderer.create(
-        <GlossWithSuggestions
-          gloss={""}
-          glossInput={React.createRef<HTMLDivElement>()}
-          updateGlossField={jest.fn()}
-          handleEnterAndTab={jest.fn()}
-          analysisLang={newWritingSystem()}
-          textFieldId={"test-gloss"}
-          spellChecker={new SpellChecker("en")}
-        />
-      );
-    });
-  });
 });
diff --git a/src/components/DataEntry/DataEntryTable/NewEntry/index.tsx b/src/components/DataEntry/DataEntryTable/NewEntry/index.tsx
@@ -26,7 +26,6 @@ import VernDialog from "components/DataEntry/DataEntryTable/NewEntry/VernDialog"
 import Pronunciations from "components/Pronunciations/PronunciationsComponent";
 import { StoreState } from "types";
 import theme from "types/theme";
-import SpellChecker from "utilities/spellChecker";
 
 const idAffix = "new-entry";
 
@@ -44,7 +43,6 @@ const gridItemStyle = (spacing: number): CSSProperties => ({
 interface NewEntryProps {
   analysisLang: WritingSystem;
   vernacularLang: WritingSystem;
-  spellChecker?: SpellChecker;
   // Parent component handles new entry state:
   addNewEntry: () => Promise<void>;
   updateWordWithNewGloss: (wordId: string) => Promise<void>;
@@ -287,7 +285,6 @@ export default function NewEntry(props: NewEntryProps): ReactElement {
           analysisLang={analysisLang}
           textFieldId={`${idAffix}-gloss`}
           onUpdate={() => conditionalFocus(FocusTarget.Gloss)}
-          spellChecker={props.spellChecker}
         />
       </Grid>
       <Grid item xs={1} style={gridItemStyle(1)}>

diff --git a/src/components/DataEntry/DataEntryTable/RecentEntry.tsx b/src/components/DataEntry/DataEntryTable/RecentEntry.tsx
@@ -11,7 +11,6 @@ import {
 import Pronunciations from "components/Pronunciations/PronunciationsComponent";
 import theme from "types/theme";
 import { newGloss } from "types/word";
-import SpellChecker from "utilities/spellChecker";
 import { firstGlossText } from "utilities/wordUtilities";
 
 const idAffix = "recent-entry";
@@ -30,7 +29,6 @@ export interface RecentEntryProps {
   analysisLang: WritingSystem;
   vernacularLang: WritingSystem;
   disabled?: boolean;
-  spellChecker?: SpellChecker;
 }
 
 /**
@@ -109,7 +107,6 @@ export default function RecentEntry(props: RecentEntryProps): ReactElement {
           }}
           analysisLang={props.analysisLang}
           textFieldId={`${idAffix}-${props.rowIndex}-gloss`}
-          spellChecker={props.spellChecker}
         />
       </Grid>
       <Grid

diff --git a/src/components/DataEntry/DataEntryTable/index.tsx b/src/components/DataEntry/DataEntryTable/index.tsx
@@ -7,6 +7,7 @@ import {
   ReactElement,
   RefObject,
   useCallback,
+  useContext,
   useEffect,
   useMemo,
   useRef,
@@ -35,7 +36,7 @@ import { useAppSelector } from "types/hooks";
 import theme from "types/theme";
 import { newNote, newSense, newWord, simpleWord } from "types/word";
 import { defaultWritingSystem } from "types/writingSystem";
-import SpellChecker from "utilities/spellChecker";
+import SpellCheckerContext from "utilities/spellCheckerContext";
 import { LevenshteinDistance } from "utilities/utilities";
 import { firstGlossText } from "utilities/wordUtilities";
 
@@ -233,7 +234,7 @@ export default function DataEntryTable(
 
   const levDist = useMemo(() => new LevenshteinDistance(), []);
   const newVernInput = useRef<HTMLDivElement>(null);
-  const spellChecker = useMemo(() => new SpellChecker(), []);
+  const spellChecker = useContext(SpellCheckerContext);
   useEffect(() => {
     spellChecker.updateLang(analysisLang.bcp47);
   }, [analysisLang.bcp47, spellChecker]);
@@ -876,7 +877,6 @@ export default function DataEntryTable(
               deleteAudioFromWord={(wordId: string, fileName: string) =>
                 deleteAudioFromWord(wordId, fileName)
               }
-              spellChecker={spellChecker}
               focusNewEntry={() => focusInput(newVernInput)}
               analysisLang={analysisLang}
               vernacularLang={vernacularLang}
@@ -889,7 +889,6 @@ export default function DataEntryTable(
 
         <Grid item xs={12}>
           <NewEntry
-            spellChecker={spellChecker}
             analysisLang={analysisLang}
             vernacularLang={vernacularLang}
             // Parent handles new entry state of child:

diff --git a/src/utilities/spellCheckerContext.ts b/src/utilities/spellCheckerContext.ts
@@ -0,0 +1,7 @@
+import { createContext } from "react";
+
+import SpellChecker from "utilities/spellChecker";
+
+const SpellCheckerContext = createContext(new SpellChecker());
+
+export default SpellCheckerContext;