desktop: add support for viewing and removing custom dictionary words (#4362)

Co-authored-by: Abdullah Atta <abdullahatta@streetwriters.co>

apps/desktop/src/api/spell-checker.ts

@@ -118,5 +118,13 @@ export const spellCheckerRouter = t.router({
     .mutation(({ input: { enabled } }) => {
       globalThis.window?.webContents.session.setSpellCheckerEnabled(enabled);
       config.isSpellCheckerEnabled = enabled;
-    })
+    }),
+  words: t.procedure.query(() =>
+    globalThis.window?.webContents.session.listWordsInSpellCheckerDictionary()
+  ),
+  deleteWord: t.procedure.input(z.string()).mutation(({ input: word }) => {
+    globalThis.window?.webContents.session.removeWordFromSpellCheckerDictionary(
+      word
+    );
+  })
 });

apps/web/src/dialogs/settings/components/dictionary-words.tsx

@@ -0,0 +1,53 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { Button, Text } from "@theme-ui/components";
+import { FlexScrollContainer } from "../../../components/scroll-container";
+import { useSpellChecker } from "../../../hooks/use-spell-checker";
+
+export function DictionaryWords() {
+  const words = useSpellChecker((store) => store.words);
+  const deleteWord = useSpellChecker((store) => store.deleteWord);
+
+  return (
+    <>
+      <FlexScrollContainer
+        suppressAutoHide
+        style={{
+          maxHeight: 400,
+          display: "flex",
+          flexDirection: "column"
+        }}
+      >
+        <Text variant="body" sx={{ my: 1 }}>
+          You have {words.length} custom dictionary words.
+        </Text>
+        {words.map((word) => (
+          <Button
+            variant="menuitem"
+            sx={{ textAlign: "left", p: 1 }}
+            onClick={() => deleteWord(word)}
+          >
+            {word}
+          </Button>
+        ))}
+      </FlexScrollContainer>
+    </>
+  );
+}

apps/web/src/dialogs/settings/editor-settings.ts

@@ -29,6 +29,7 @@ import { useSpellChecker } from "../../hooks/use-spell-checker";
 import { SpellCheckerLanguages } from "./components/spell-checker-languages";
 
 import { CustomizeToolbar } from "./components/customize-toolbar";
+import { DictionaryWords } from "./components/dictionary-words";
 
 export const EditorSettings: SettingsGroup[] = [
   {
@@ -149,6 +150,16 @@ symbols (e.g. 202305261253)`,
             component: SpellCheckerLanguages
           }
         ]
+      },
+      {
+        key: "custom-dictionay-words",
+        title: "Custom dictionary words",
+        components: [
+          {
+            type: "custom",
+            component: DictionaryWords
+          }
+        ]
       }
     ]
   },

apps/web/src/hooks/use-spell-checker.ts

@@ -27,6 +27,7 @@ class SpellCheckerStore extends BaseStore<SpellCheckerStore> {
   languages: Language[] = [];
   enabled = true;
   enabledLanguages: Language[] = [];
+  words: string[] = [];
 
   toggleSpellChecker = async () => {
     const enabled = this.get().enabled;
@@ -44,14 +45,19 @@ class SpellCheckerStore extends BaseStore<SpellCheckerStore> {
   };
 
   refresh = async () => {
-    console.log("SPELL CHECK", await desktop?.spellChecker.isEnabled.query());
     this.set({
       enabledLanguages:
         (await desktop?.spellChecker.enabledLanguages.query()) || [],
       languages: (await desktop?.spellChecker.languages.query()) || [],
-      enabled: await desktop?.spellChecker.isEnabled.query()
+      enabled: await desktop?.spellChecker.isEnabled.query(),
+      words: (await desktop?.spellChecker.words.query()) || []
     });
   };
+
+  deleteWord = async (word: string) => {
+    await desktop?.spellChecker.deleteWord.mutate(word);
+    await this.get().refresh();
+  };
 }
 
 const [useSpellChecker] = createStore(SpellCheckerStore);