Desktop: Resolves #4458: Improved spell checking support in dialogs and text input fields

.eslintignore

@@ -193,6 +193,9 @@ packages/app-desktop/commands/focusElement.js.map
 packages/app-desktop/commands/openProfileDirectory.d.ts
 packages/app-desktop/commands/openProfileDirectory.js
 packages/app-desktop/commands/openProfileDirectory.js.map
+packages/app-desktop/commands/replaceMisspelling.d.ts
+packages/app-desktop/commands/replaceMisspelling.js
+packages/app-desktop/commands/replaceMisspelling.js.map
 packages/app-desktop/commands/startExternalEditing.d.ts
 packages/app-desktop/commands/startExternalEditing.js
 packages/app-desktop/commands/startExternalEditing.js.map

.gitignore

@@ -180,6 +180,9 @@ packages/app-desktop/commands/focusElement.js.map
 packages/app-desktop/commands/openProfileDirectory.d.ts
 packages/app-desktop/commands/openProfileDirectory.js
 packages/app-desktop/commands/openProfileDirectory.js.map
+packages/app-desktop/commands/replaceMisspelling.d.ts
+packages/app-desktop/commands/replaceMisspelling.js
+packages/app-desktop/commands/replaceMisspelling.js.map
 packages/app-desktop/commands/startExternalEditing.d.ts
 packages/app-desktop/commands/startExternalEditing.js
 packages/app-desktop/commands/startExternalEditing.js.map

packages/app-desktop/app.ts

@@ -92,6 +92,7 @@ const globalCommands = [
 	require('./commands/startExternalEditing'),
 	require('./commands/stopExternalEditing'),
 	require('./commands/toggleExternalEditing'),
+	require('./commands/replaceMisspelling'),
 	require('@joplin/lib/commands/historyBackward'),
 	require('@joplin/lib/commands/historyForward'),
 	require('@joplin/lib/commands/synchronize'),

packages/app-desktop/commands/replaceMisspelling.ts

@@ -0,0 +1,36 @@
+import CommandService, { CommandRuntime, CommandDeclaration, CommandContext } from '@joplin/lib/services/CommandService';
+import { AppState } from '../app';
+import bridge from '../services/bridge';
+
+export const declaration: CommandDeclaration = {
+	name: 'replaceMisspelling',
+};
+
+function isInsideContainer(node: any, className: string): boolean {
+	while (node) {
+		if (node.classList && node.classList.contains(className)) return true;
+		node = node.parentNode;
+	}
+	return false;
+}
+
+export const runtime = (): CommandRuntime => {
+	return {
+		execute: async (context: CommandContext, suggestion: string) => {
+			const state = context.state as AppState;
+			const modalDialogVisible = !!Object.keys(state.visibleDialogs).length;
+
+			// If we're inside one of the editors, we need to use their own
+			// replaceSelection command to set the suggested word. Outside of
+			// it, we can use the Chrome built-in replaceMisspelling function,
+			// which will work in any standard text input.
+
+			const activeElement = document.activeElement;
+			if (!modalDialogVisible && (isInsideContainer(activeElement, 'codeMirrorEditor') || isInsideContainer(activeElement, 'tox-edit-area__iframe'))) {
+				await CommandService.instance().execute('replaceSelection', suggestion);
+			} else {
+				bridge().window().webContents.replaceMisspelling(suggestion);
+			}
+		},
+	};
+};

packages/app-desktop/gui/MainScreen/MainScreen.tsx

@@ -323,6 +323,13 @@ class MainScreenComponent extends React.Component<Props, State> {
 			const toSave = saveLayout(this.props.mainLayout);
 			Setting.setValue('ui.layout', toSave);
 		}
+
+		if (prevState.promptOptions !== this.state.promptOptions) {
+			this.props.dispatch({
+				type: !prevState.promptOptions ? 'VISIBLE_DIALOGS_ADD' : 'VISIBLE_DIALOGS_REMOVE',
+				name: 'promptDialog',
+			});
+		}
 	}
 
 	layoutModeListenerKeyDown(event: any) {

packages/lib/services/spellChecker/SpellCheckerService.ts

@@ -98,7 +98,7 @@ export default class SpellCheckerService {
 				output.push({
 					label: suggestion,
 					click: () => {
-						void CommandService.instance().execute('replaceSelection', suggestion);
+						void CommandService.instance().execute('replaceMisspelling', suggestion);
 					},
 				});
 			}