From 9ffd0a83c71ad636153437f4ddf211cea2b4dda6 Mon Sep 17 00:00:00 2001 From: "D. Ror" Date: Tue, 25 Jul 2023 09:35:12 -0400 Subject: [PATCH] Add a spell-checker context (#2413) --- .../GlossWithSuggestions.tsx | 9 +++++---- .../tests/GlossWithSuggestions.test.tsx | 17 ----------------- .../DataEntry/DataEntryTable/NewEntry/index.tsx | 3 --- .../DataEntry/DataEntryTable/RecentEntry.tsx | 3 --- .../DataEntry/DataEntryTable/index.tsx | 7 +++---- src/utilities/spellCheckerContext.ts | 7 +++++++ 6 files changed, 15 insertions(+), 31 deletions(-) create mode 100644 src/utilities/spellCheckerContext.ts diff --git a/src/components/DataEntry/DataEntryTable/EntryCellComponents/GlossWithSuggestions.tsx b/src/components/DataEntry/DataEntryTable/EntryCellComponents/GlossWithSuggestions.tsx index bc0ce1d802..9e0dc09276 100644 --- 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/src/components/DataEntry/DataEntryTable/EntryCellComponents/tests/GlossWithSuggestions.test.tsx b/src/components/DataEntry/DataEntryTable/EntryCellComponents/tests/GlossWithSuggestions.test.tsx index 40c2b4918a..0d75e70f33 100644 --- a/src/components/DataEntry/DataEntryTable/EntryCellComponents/tests/GlossWithSuggestions.test.tsx +++ b/src/components/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( - ()} - 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 index be23d7f39f..d0c738d166 100644 --- 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; updateWordWithNewGloss: (wordId: string) => Promise; @@ -287,7 +285,6 @@ export default function NewEntry(props: NewEntryProps): ReactElement { analysisLang={analysisLang} textFieldId={`${idAffix}-gloss`} onUpdate={() => conditionalFocus(FocusTarget.Gloss)} - spellChecker={props.spellChecker} /> diff --git a/src/components/DataEntry/DataEntryTable/RecentEntry.tsx b/src/components/DataEntry/DataEntryTable/RecentEntry.tsx index e181dd2c61..7246a3ab6a 100644 --- 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} /> new LevenshteinDistance(), []); const newVernInput = useRef(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(