Electron: Add spellcheck toggle in the Session tab (closes #7550)

desktop/main.js

@@ -115,12 +115,22 @@ function createWindow(port) {
       preload: path.join(__dirname, "preload.js"),
       nodeIntegration: false,
       contextIsolation: true,
-      spellcheck: false,
+      spellcheck: true,
     },
   });
   if (state && state.maximized) mainWindow.maximize();
   mainWindow.webContents.on("context-menu", (_, params) => {
     const tmpl = [];
+    if (params.misspelledWord) {
+      for (const s of params.dictionarySuggestions) {
+        tmpl.push({ label: s, click: () => mainWindow.webContents.replaceMisspelling(s) });
+      }
+      if (params.dictionarySuggestions.length) tmpl.push({ type: "separator" });
+      tmpl.push(
+        { label: "Add to dictionary", click: () => mainWindow.webContents.session.addWordToSpellCheckerDictionary(params.misspelledWord) },
+        { type: "separator" },
+      );
+    }
     if (params.editFlags.canCut) tmpl.push({ role: "cut" });
     if (params.editFlags.canCopy) tmpl.push({ role: "copy" });
     if (params.editFlags.canPaste) tmpl.push({ role: "paste" });

js/main.js

@@ -881,6 +881,29 @@ if (document.readyState === "loading") {
   setupPasteHandler();
 }
 
+//------------------------------------------------
+// Spellcheck toggle (Electron only; checkbox is hidden in the browser)
+//------------------------------------------------
+
+function setupSpellcheckToggle() {
+  if (!window.electronAPI) return;
+  const checkbox = document.querySelector("#spellcheck input[data-testid=\"checkbox\"]");
+  if (!checkbox) {
+    setTimeout(setupSpellcheckToggle, 500);
+    return;
+  }
+
+  const apply = () => { document.body.spellcheck = checkbox.checked; };
+  apply();
+  checkbox.addEventListener("change", apply);
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", setupSpellcheckToggle);
+} else {
+  setupSpellcheckToggle();
+}
+
 //------------------------------------------------
 // Tooltips
 //------------------------------------------------

modules/shared.py

@@ -292,6 +292,7 @@ settings = {
     'show_two_notebook_columns': False,
     'paste_to_attachment': False,
     'include_past_attachments': True,
+    'spellcheck': False,
 
     # Generation parameters - Curve shape
     'temperature': neutral_samplers['temperature'],

modules/ui.py

@@ -249,7 +249,7 @@ def list_interface_input_elements():
     ]
 
     if shared.is_electron:
-        elements += ['model_dir']
+        elements += ['model_dir', 'spellcheck']
 
     if not shared.args.portable:
         # Image generation elements
@@ -519,7 +519,7 @@ def setup_auto_save():
     ]
 
     if shared.is_electron:
-        change_elements += ['model_dir']
+        change_elements += ['model_dir', 'spellcheck']
 
     if not shared.args.portable:
         # Image generation tab (ui_image_generation.py)

modules/ui_session.py

@@ -70,6 +70,8 @@ def create_ui():
                 shared.gradio['show_two_notebook_columns'] = gr.Checkbox(label='Show two columns in the Notebook tab', value=shared.settings['show_two_notebook_columns'])
                 shared.gradio['paste_to_attachment'] = gr.Checkbox(label='Turn long pasted text into attachments in the Chat tab', value=shared.settings['paste_to_attachment'], elem_id='paste_to_attachment')
                 shared.gradio['include_past_attachments'] = gr.Checkbox(label='Include attachments/search results from previous messages in the chat prompt', value=shared.settings['include_past_attachments'])
+                if shared.is_electron:
+                    shared.gradio['spellcheck'] = gr.Checkbox(label='Enable spellcheck in text inputs', value=shared.settings['spellcheck'], elem_id='spellcheck')
 
                 if portable_version:
                     gr.Markdown("## Updates")