In Electron app, adding support for: (#385)

- Spell checker in context-menu
- Browser-like context menu options
- Left-click links open them in system browser instead of Electron pop-up

electron/index.cjs

@@ -1,6 +1,16 @@
 const path = require('path');
 
-const {dialog,  app, BrowserWindow, Tray, Menu } = require('electron');
+const {
+  app,
+  shell,
+  clipboard,
+  dialog,
+  download,
+  BrowserWindow,
+  Tray,
+  Menu,
+  MenuItem,
+} = require('electron');
 const isDev = require('electron-is-dev');
 const { autoUpdater } = require('electron-updater');
 let win = null;
@@ -13,11 +23,130 @@ const PORT = isDev ? '5173' : '51735';
 const ICON = 'icon-rounded.png';
 const ICON_TEMPLATE = 'iconTemplate.png';
 
+const setupLinksLeftClick = (win) => {
+  win.webContents.setWindowOpenHandler(({ url }) => {
+    shell.openExternal(url);
+    return { action: 'deny' };
+  });
+};
+
+const setupContextMenu = (win) => {
+  win.webContents.on('context-menu', (_, params) => {
+    const { x, y, linkURL, selectionText } = params;
+
+    const template = [
+      { role: 'undo' },
+      { role: 'redo' },
+      { type: 'separator' },
+      { role: 'cut' },
+      { role: 'copy' },
+      { role: 'paste' },
+      { role: 'pasteAndMatchStyle' },
+      { role: 'delete' },
+      { type: 'separator' },
+      { role: 'selectAll' },
+      { type: 'separator' },
+      { role: 'toggleDevTools' },
+    ];
+
+    const spellingMenu = [];
+
+    if (selectionText && !linkURL) {
+      // Add each spelling suggestion
+      for (const suggestion of params.dictionarySuggestions) {
+        spellingMenu.push(
+          new MenuItem({
+            label: suggestion,
+            click: () => win.webContents.replaceMisspelling(suggestion),
+          })
+        );
+      }
+
+      // Allow users to add the misspelled word to the dictionary
+      if (params.misspelledWord) {
+        spellingMenu.push(
+          new MenuItem({
+            label: 'Add to dictionary',
+            click: () =>
+              win.webContents.session.addWordToSpellCheckerDictionary(
+                params.misspelledWord
+              ),
+          })
+        );
+      }
+
+      if (spellingMenu.length > 0) {
+        spellingMenu.push({ type: 'separator' });
+      }
+
+      template.push(
+        { type: 'separator' },
+        {
+          label: `Search Google for "${selectionText}"`,
+          click: () => {
+            shell.openExternal(
+              `https://www.google.com/search?q=${encodeURIComponent(
+                selectionText
+              )}`
+            );
+          },
+        },
+        {
+          label: `Search DuckDuckGo for "${selectionText}"`,
+          click: () => {
+            shell.openExternal(
+              `https://duckduckgo.com/?q=${encodeURIComponent(selectionText)}`
+            );
+          },
+        }
+      );
+    }
+
+    if (linkURL) {
+      template.push(
+        { type: 'separator' },
+        {
+          label: 'Open Link in Browser',
+          click: () => {
+            shell.openExternal(linkURL);
+          },
+        },
+        {
+          label: 'Copy Link Address',
+          click: () => {
+            clipboard.writeText(linkURL);
+          },
+        },
+        {
+          label: 'Save Link As...',
+          click: () => {
+            dialog.showSaveDialog(
+              win,
+              { defaultPath: path.basename(linkURL) },
+              (filePath) => {
+                if (filePath) {
+                  download(win, linkURL, { filename: filePath });
+                }
+              }
+            );
+          },
+        }
+      );
+    }
+
+    Menu.buildFromTemplate([...spellingMenu, ...template]).popup({
+      window: win,
+      x,
+      y,
+    });
+  });
+};
+
 function createWindow() {
   autoUpdater.checkForUpdatesAndNotify();
 
   win = new BrowserWindow({
-	autoHideMenuBar: true,
+    autoHideMenuBar: true,
     show: false,
     icon: assetPath(ICON),
   });
@@ -35,26 +164,27 @@ function createWindow() {
     win.webContents.openDevTools({ mode: 'detach' });
   }
 
+  setupLinksLeftClick(win);
+  setupContextMenu(win);
+
   return win;
 }
 
 const assetPath = (asset) => {
   return path.join(
     __dirname,
     isDev ? `../public/${asset}` : `../dist/${asset}`
-  )
-}
-
-const createTray = (window) => {
-  const tray = new Tray(
-    assetPath(!isMacOS ? ICON : ICON_TEMPLATE)
   );
+};
+
+const createTray = (win) => {
+  const tray = new Tray(assetPath(!isMacOS ? ICON : ICON_TEMPLATE));
   const contextMenu = Menu.buildFromTemplate([
     {
       label: 'Show',
       click: () => {
         win.maximize();
-        window.show();
+        win.show();
       },
     },
     {
@@ -68,7 +198,7 @@ const createTray = (window) => {
 
   tray.on('click', () => {
     win.maximize();
-    window.show();
+    win.show();
   });
   tray.setToolTip('Better ChatGPT');
   tray.setContextMenu(contextMenu);
@@ -91,18 +221,18 @@ process.on('uncaughtException', (error) => {
 });
 
 if (!instanceLock) {
-  app.quit()
+  app.quit();
 } else {
   app.on('second-instance', (event, commandLine, workingDirectory) => {
     if (win) {
-      if (win.isMinimized()) win.restore()
-      win.focus()
+      if (win.isMinimized()) win.restore();
+      win.focus();
     }
-  })
+  });
 
   app.whenReady().then(() => {
-    win = createWindow()
-  })
+    win = createWindow();
+  });
 }
 
 const createServer = () => {