Add built-in support for spellchecking

fixture-menu.js

@@ -33,5 +33,9 @@ contextMenu({
 (async () => {
 	await app.whenReady();
 
-	await (new BrowserWindow()).loadFile(path.join(__dirname, 'fixture.html'));
+	await (new BrowserWindow({
+		webPreferences: {
+			spellcheck: true
+		}
+	})).loadFile(path.join(__dirname, 'fixture.html'));
 })();

fixture.js

@@ -45,7 +45,7 @@ contextMenu({
 
 	await (new BrowserWindow({
 		webPreferences: {
-			nodeIntegration: true
+			spellcheck: true
 		}
 	})).loadFile(path.join(__dirname, 'fixture.html'));
 })();

index.d.ts

@@ -17,6 +17,21 @@ declare namespace contextMenu {
 		@default 'Look Up “{selection}”'
 		*/
 		readonly lookUpSelection?: string;
+
+		/**
+		@default 'Search with Google'
+		*/
+		readonly searchWithGoogle?: string;
+
+		/**
+		@default 'Correct Automatically'
+		*/
+		readonly correctAutomatically?: string;
+
+		/**
+		@default 'Learn Spelling'
+		*/
+		readonly learnSpelling?: string;
 
 		/**
 		@default 'Cut'
@@ -81,6 +96,9 @@ declare namespace contextMenu {
 	interface Actions {
 		readonly separator: () => MenuItemConstructorOptions;
 		readonly lookUpSelection: (options: ActionOptions) => MenuItemConstructorOptions;
+		readonly searchWithGoogle: (options: ActionOptions) => MenuItemConstructorOptions;
+		readonly correctAutomatically: (options: ActionOptions) => MenuItemConstructorOptions;
+		readonly learnSpelling: (options: ActionOptions) => MenuItemConstructorOptions;
 		readonly cut: (options: ActionOptions) => MenuItemConstructorOptions;
 		readonly copy: (options: ActionOptions) => MenuItemConstructorOptions;
 		readonly paste: (options: ActionOptions) => MenuItemConstructorOptions;
@@ -129,6 +147,13 @@ declare namespace contextMenu {
 		*/
 		readonly showLookUpSelection?: boolean;
 
+		/**
+		Show the `Search with Google` menu item when right-clicking text on macOS.
+
+		@default true
+		*/
+		readonly showSearchWithGoogle?: boolean;
+
 		/**
 		Show the `Copy Image` menu item when right-clicking on an image.
 
@@ -217,8 +242,11 @@ declare namespace contextMenu {
 		- `showSaveImageAs`
 		- `showInspectElement`
 		- `showServices`
+		- `showSearchWithGoogle`
+
+		To get spellchecking, “Correct Automatically”, and “Learn Spelling” in the menu, please enable the `spellcheck` preference in browser window: `new BrowserWindow({webPreferences: {spellcheck: true}})`
 
-		@default [defaultActions.cut(), defaultActions.copy(), defaultActions.paste(), defaultActions.separator(), defaultActions.saveImage(), defaultActions.saveImageAs(), defaultActions.copyLink(), defaultActions.copyImage(), defaultActions.copyImageAddress(), defaultActions.separator(), defaultActions.copyLink(), defaultActions.separator(), defaultActions.inspect()]
+		@default [...dictionarySuggestions, defaultActions.separator(), defaultActions.correctAutomatically(), defaultActions.separator(), defaultActions.learnSpelling(), defaultActions.separator(), defaultActions.lookUpSelection(), defaultActions.separator(),defaultActions.searchWithGoogle(), defaultActions.cut(), defaultActions.copy(), defaultActions.paste(), defaultActions.separator(), defaultActions.saveImage(), defaultActions.saveImageAs(), defaultActions.copyLink(), defaultActions.copyImage(), defaultActions.copyImageAddress(), defaultActions.separator(), defaultActions.copyLink(), defaultActions.separator(), defaultActions.inspect()]
 		*/
 		readonly menu?: (
 			defaultActions: Actions,
@@ -239,17 +267,24 @@ import {app, BrowserWindow} from 'electron';
 import contextMenu = require('electron-context-menu');
 
 contextMenu({
-	prepend: (params, browserWindow) => [{
-		label: 'Rainbow',
-		// Only show it when right-clicking images
-		visible: params.mediaType === 'image'
-	}]
+	prepend: (defaultActions, params, browserWindow) => [
+		{
+			label: 'Rainbow',
+			// Only show it when right-clicking images
+			visible: params.mediaType === 'image'
+		}
+	]
 });
 
 let mainWindow;
 (async () => {
 	await app.whenReady();
-	mainWindow = new BrowserWindow();
+
+	mainWindow = new BrowserWindow({
+		webPreferences: {
+			spellcheck: true
+		}
+	});
 });
 ```
 */

index.js

@@ -51,6 +51,16 @@ const create = (win, options) => {
 					}
 				}
 			}),
+			searchWithGoogle: decorateMenuItem({
+				id: 'searchWithGoogle',
+				label: 'Search with Google',
+				visible: hasText,
+				click() {
+					const url = new URL('https://www.google.com/search');
+					url.searchParams.set('q', props.selectionText);
+					electron.shell.openExternal(url.toString());
+				}
+			}),
 			cut: decorateMenuItem({
 				id: 'cut',
 				label: 'Cut',
@@ -152,6 +162,24 @@ const create = (win, options) => {
 					});
 				}
 			}),
+			correctAutomatically: decorateMenuItem({
+				id: 'correctAutomatically',
+				label: 'Correct Spelling Automatically',
+				visible: props.isEditable && hasText && props.misspelledWord && props.dictionarySuggestions.length,
+				click() {
+					const target = webContents(win);
+					target.insertText(props.dictionarySuggestions[0]);
+				}
+			}),
+			learnSpelling: decorateMenuItem({
+				id: 'learnSpelling',
+				label: 'Learn Spelling',
+				visible: props.isEditable && hasText && props.misspelledWord,
+				click() {
+					const target = webContents(win);
+					target.session.addWordToSpellCheckerDictionary(props.misspelledWord);
+				}
+			}),
 			inspect: () => ({
 				id: 'inspect',
 				label: 'Inspect Element',
@@ -173,10 +201,44 @@ const create = (win, options) => {
 
 		const shouldShowInspectElement = typeof options.showInspectElement === 'boolean' ? options.showInspectElement : isDev;
 
+		function word(suggestion) {
+			return {
+				id: 'dictionarySuggestions',
+				label: suggestion,
+				visible: props.isEditable && hasText && props.misspelledWord,
+				click(menuItem) {
+					const target = webContents(win);
+					target.insertText(menuItem.label);
+				}
+			};
+		}
+
+		let dictionarySuggestions = [];
+		if (hasText && props.misspelledWord && props.dictionarySuggestions.length > 0) {
+			dictionarySuggestions = props.dictionarySuggestions.map(word);
+		} else {
+			dictionarySuggestions.push(
+				{
+					id: 'dictionarySuggestions',
+					label: 'No guesses available',
+					visible: hasText && props.misspelledWord,
+					enabled: false
+				}
+			);
+		}
+
 		let menuTemplate = [
+			defaultActions.separator(),
+			...dictionarySuggestions,
+			defaultActions.separator(),
+			defaultActions.correctAutomatically(),
+			defaultActions.separator(),
+			defaultActions.learnSpelling(),
 			defaultActions.separator(),
 			options.showLookUpSelection !== false && defaultActions.lookUpSelection(),
 			defaultActions.separator(),
+			options.showSearchWithGoogle !== false && defaultActions.searchWithGoogle(),
+			defaultActions.separator(),
 			defaultActions.cut(),
 			defaultActions.copy(),
 			defaultActions.paste(),

package.json

@@ -37,7 +37,7 @@
 	"devDependencies": {
 		"@types/node": "^12.0.10",
 		"ava": "^2.1.0",
-		"electron": "^7.1.1",
+		"electron": "^8.0.0",
 		"tsd": "^0.10.0",
 		"xo": "^0.25.3"
 	},

readme.md

@@ -43,7 +43,12 @@ contextMenu({
 let mainWindow;
 (async () => {
 	await app.whenReady();
-	mainWindow = new BrowserWindow();
+
+	mainWindow = new BrowserWindow(
+		webPreferences: {
+			spellcheck: true
+		}
+	);
 })();
 ```
 
@@ -90,6 +95,13 @@ Default: `true`
 
 Show the `Look Up {selection}` menu item when right-clicking text on macOS.
 
+#### showSearchWithGoogle
+
+Type: `boolean`\
+Default: `true`
+
+Show the `Search with Google` menu item when right-clicking text on macOS.
+
 #### showCopyImage
 
 Type: `boolean`\
@@ -185,11 +197,20 @@ The following options are ignored when `menu` is used:
 - `showSaveImageAs`
 - `showInspectElement`
 - `showServices`
-
+- `showSearchWithGoogle`
+
 Default actions:
 
+To get spellcheck, Correct Automatically and Learn Spelling in the menu, please enable the `spellcheck` preference in browser window.
+Format:
+`new BrowserWindow({ webPreferences: {spellcheck: true}})`
+
+- `spellCheck`
+- `correctAutomatically`
+- `learnSpelling`
 - `separator`
 - `lookUpSelection`
+- `searchWithGoogle`
 - `cut`
 - `copy`
 - `paste`
@@ -201,7 +222,8 @@ Default actions:
 - `inspect`
 - `services`
 
-Example:
+
+Example for actions:
 
 ```js
 {