feat(electron): spellcheck setting (#8730)

fix AF-1647

packages/frontend/apps/electron/src/main/shared-state-schema.ts

@@ -43,3 +43,11 @@ export type TabViewsMetaSchema = z.infer<typeof tabViewsMetaSchema>;
 export type WorkbenchMeta = z.infer<typeof workbenchMetaSchema>;
 export type WorkbenchViewMeta = z.infer<typeof workbenchViewMetaSchema>;
 export type WorkbenchViewModule = z.infer<typeof workbenchViewIconNameSchema>;
+
+export const SpellCheckStateSchema = z.object({
+  enabled: z.boolean().optional(),
+});
+
+export const SpellCheckStateKey = 'spellCheckState';
+export type SpellCheckStateKey = typeof SpellCheckStateKey;
+export type SpellCheckStateSchema = z.infer<typeof SpellCheckStateSchema>;

packages/frontend/apps/electron/src/main/ui/handlers.ts

@@ -3,6 +3,7 @@ import { getLinkPreview } from 'link-preview-js';
 
 import { persistentConfig } from '../config-storage/persist';
 import { logger } from '../logger';
+import type { WorkbenchViewMeta } from '../shared-state-schema';
 import type { NamespaceHandlers } from '../type';
 import {
   activateView,
@@ -27,7 +28,6 @@ import {
 } from '../windows-manager';
 import { showTabContextMenu } from '../windows-manager/context-menu';
 import { getOrCreateCustomThemeWindow } from '../windows-manager/custom-theme-window';
-import type { WorkbenchViewMeta } from '../windows-manager/tab-views-meta-schema';
 import { getChallengeResponse } from './challenge';
 import { uiSubjects } from './subject';
 
@@ -216,4 +216,8 @@ export const uiHandlers = {
     win.show();
     win.focus();
   },
+  restartApp: async () => {
+    app.relaunch();
+    app.quit();
+  },
 } satisfies NamespaceHandlers;

packages/frontend/apps/electron/src/main/windows-manager/tab-views.ts

@@ -2,6 +2,8 @@ import { join } from 'node:path';
 
 import {
   app,
+  Menu,
+  MenuItem,
   session,
   type View,
   type WebContents,
@@ -26,16 +28,18 @@ import { CLOUD_BASE_URL, isDev } from '../config';
 import { mainWindowOrigin, shellViewUrl } from '../constants';
 import { ensureHelperProcess } from '../helper-process';
 import { logger } from '../logger';
-import { globalStateStorage } from '../shared-storage/storage';
-import { getCustomThemeWindow } from './custom-theme-window';
-import { getMainWindow, MainWindowManager } from './main-window';
 import {
+  SpellCheckStateKey,
+  SpellCheckStateSchema,
   TabViewsMetaKey,
   type TabViewsMetaSchema,
   tabViewsMetaSchema,
   type WorkbenchMeta,
   type WorkbenchViewMeta,
-} from './tab-views-meta-schema';
+} from '../shared-state-schema';
+import { globalStateStorage } from '../shared-storage/storage';
+import { getCustomThemeWindow } from './custom-theme-window';
+import { getMainWindow, MainWindowManager } from './main-window';
 
 async function getAdditionalArguments() {
   const { getExposedMeta } = await import('../exposed');
@@ -74,6 +78,10 @@ const TabViewsMetaState = {
   },
 };
 
+const spellCheckSettings = SpellCheckStateSchema.parse(
+  globalStateStorage.get(SpellCheckStateKey) ?? {}
+);
+
 type AddTabAction = {
   type: 'add-tab';
   payload: WorkbenchMeta;
@@ -816,13 +824,44 @@ export class WebContentViewsManager {
         transparent: true,
         contextIsolation: true,
         sandbox: false,
-        spellcheck: false, // TODO(@pengx17): enable?
+        spellcheck: spellCheckSettings.enabled,
         preload: join(__dirname, './preload.js'), // this points to the bundled preload module
         // serialize exposed meta that to be used in preload
         additionalArguments: additionalArguments,
       },
     });
 
+    if (spellCheckSettings.enabled) {
+      view.webContents.on('context-menu', (_event, params) => {
+        const menu = new Menu();
+
+        // Add each spelling suggestion
+        for (const suggestion of params.dictionarySuggestions) {
+          menu.append(
+            new MenuItem({
+              label: suggestion,
+              click: () => view.webContents.replaceMisspelling(suggestion),
+            })
+          );
+        }
+
+        // Allow users to add the misspelled word to the dictionary
+        if (params.misspelledWord) {
+          menu.append(
+            new MenuItem({
+              label: 'Add to dictionary', // TODO: i18n
+              click: () =>
+                view.webContents.session.addWordToSpellCheckerDictionary(
+                  params.misspelledWord
+                ),
+            })
+          );
+        }
+
+        menu.popup();
+      });
+    }
+
     this.webViewsMap$.next(this.tabViewsMap.set(viewId, view));
     let unsub = () => {};