Add SpellCheck toggle in textarea context menu

src/main/mainWindow.ts

@@ -8,6 +8,7 @@ import { app, BrowserWindow, BrowserWindowConstructorOptions, Menu, Tray } from
 import { join } from "path";
 import { IpcEvents } from "shared/IpcEvents";
 import { once } from "shared/utils/once";
+import type { SettingsStore } from "shared/utils/SettingsStore";
 
 import { ICON_PATH } from "../shared/paths";
 import { createAboutWindow } from "./about";
@@ -27,6 +28,27 @@ app.on("before-quit", () => {
 
 export let mainWin: BrowserWindow;
 
+function makeSettingsListenerHelpers<O extends object>(o: SettingsStore<O>) {
+    const listeners = new Map<(data: any) => void, PropertyKey>();
+
+    const addListener: typeof o.addChangeListener = (path, cb) => {
+        listeners.set(cb, path);
+        o.addChangeListener(path, cb);
+    };
+    const removeListener = () => {
+        for (const [listener, path] of listeners) {
+            o.removeChangeListener(path as any, listener);
+        }
+
+        listeners.clear();
+    };
+
+    return [addListener, removeListener] as const;
+}
+
+const [addSettingsListener, removeSettingsListeners] = makeSettingsListenerHelpers(Settings);
+const [addVencordSettingsListener, removeVencordSettingsListeners] = makeSettingsListenerHelpers(VencordSettings);
+
 function initTray(win: BrowserWindow) {
     const trayMenu = Menu.buildFromTemplate([
         {
@@ -187,11 +209,11 @@ function initWindowBoundsListeners(win: BrowserWindow) {
 }
 
 function initSettingsListeners(win: BrowserWindow) {
-    Settings.addChangeListener("tray", enable => {
+    addSettingsListener("tray", enable => {
         if (enable) initTray(win);
         else tray?.destroy();
     });
-    Settings.addChangeListener("disableMinSize", disable => {
+    addSettingsListener("disableMinSize", disable => {
         if (disable) {
             // 0 no work
             win.setMinimumSize(1, 1);
@@ -206,7 +228,7 @@ function initSettingsListeners(win: BrowserWindow) {
         }
     });
 
-    VencordSettings.addChangeListener("macosTranslucency", enabled => {
+    addVencordSettingsListener("macosTranslucency", enabled => {
         if (enabled) {
             win.setVibrancy("sidebar");
             win.setBackgroundColor("#ffffff00");
@@ -224,6 +246,10 @@ function initSpellCheck(win: BrowserWindow) {
 }
 
 function createMainWindow() {
+    // Clear up previous settings listeners
+    removeSettingsListeners();
+    removeVencordSettingsListeners();
+
     const win = (mainWin = new BrowserWindow({
         show: false,
         autoHideMenuBar: true,

src/renderer/patches/spellCheck.tsx

@@ -5,13 +5,16 @@
  */
 
 import { addContextMenuPatch } from "@vencord/types/api/ContextMenu";
-import { Menu } from "@vencord/types/webpack/common";
+import { findStoreLazy } from "@vencord/types/webpack";
+import { ContextMenu, FluxDispatcher, Menu } from "@vencord/types/webpack/common";
 
 import { addPatch } from "./shared";
 
 let word: string;
 let corrections: string[];
 
+const SpellCheckStore = findStoreLazy("SpellcheckStore");
+
 // Make spellcheck suggestions work
 addPatch({
     patches: [
@@ -38,22 +41,36 @@ addPatch({
 });
 
 addContextMenuPatch("textarea-context", children => () => {
-    if (!word || !corrections?.length) return;
+    const hasCorrections = Boolean(word && corrections?.length);
 
     children.push(
         <Menu.MenuGroup>
-            {corrections.map(c => (
+            {hasCorrections && (
-                <Menu.MenuItem
+                <>
-                    id={"vcd-spellcheck-suggestion-" + c}
+                    {corrections.map(c => (
-                    label={c}
+                        <Menu.MenuItem
-                    action={() => VencordDesktopNative.spellcheck.replaceMisspelling(c)}
+                            id={"vcd-spellcheck-suggestion-" + c}
-                />
+                            label={c}
-            ))}
+                            action={() => VencordDesktopNative.spellcheck.replaceMisspelling(c)}
-            <Menu.MenuSeparator />
+                        />
-            <Menu.MenuItem
+                    ))}
-                id="vcd-spellcheck-learn"
+                    <Menu.MenuSeparator />
-                label={`Add ${word} to dictionary`}
+                    <Menu.MenuItem
-                action={() => VencordDesktopNative.spellcheck.addToDictionary(word)}
+                        id="vcd-spellcheck-learn"
+                        label={`Add ${word} to dictionary`}
+                        action={() => VencordDesktopNative.spellcheck.addToDictionary(word)}
+                    />
+                </>
+            )}
+            <Menu.MenuCheckboxItem
+                id="vcd-spellcheck-enabled"
+                label="Enable Spellcheck"
+                checked={SpellCheckStore.isEnabled()}
+                action={() => {
+                    FluxDispatcher.dispatch({ type: "SPELLCHECK_TOGGLE" });
+                    // Haven't found a good way to update state, so just close for now 🤷‍♀️
+                    ContextMenu.close();
+                }}
             />
         </Menu.MenuGroup>
     );