Desktop: Fixes #4036: Focus editor after pressing toolbar buttons (#4037)

packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx

@@ -85,7 +85,6 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 			}
 			editorRef.current.setSelections(newSelections);
 		}
-		editorRef.current.focus();
 	}, []);
 
 	const addListItem = useCallback((string1, defaultText = '') => {
@@ -97,7 +96,6 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 			} else {
 				wrapSelectionWithStrings(string1, '', defaultText);
 			}
-			editorRef.current.focus();
 		}
 	}, [wrapSelectionWithStrings]);
 
@@ -141,7 +139,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 					} else {
 						reg.logger().warn('CodeMirror: unsupported drop item: ', cmd);
 					}
-				} else if (cmd.name === 'focus') {
+				} else if (cmd.name === 'editor.focus') {
 					editorRef.current.focus();
 				} else {
 					commandProcessed = false;
@@ -170,6 +168,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 						textItalic: () => wrapSelectionWithStrings('*', '*', _('emphasised text')),
 						textLink: async () => {
 							const url = await dialogs.prompt(_('Insert Hyperlink'));
+							editorRef.current.focus();
 							if (url) wrapSelectionWithStrings('[', `](${url})`);
 						},
 						textCode: () => {

packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx

@@ -247,7 +247,7 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 				if (cmd.name === 'insertText') {
 					const result = await markupToHtml.current(MarkupToHtml.MARKUP_LANGUAGE_MARKDOWN, cmd.value, { bodyOnly: true });
 					editor.insertContent(result.html);
-				} else if (cmd.name === 'focus') {
+				} else if (cmd.name === 'editor.focus') {
 					editor.focus();
 				} else if (cmd.name === 'dropItems') {
 					if (cmd.value.type === 'notes') {

packages/app-desktop/gui/NoteEditor/commands/editorCommandDeclarations.ts

@@ -92,6 +92,9 @@ const declarations: CommandDeclaration[] = [
 	{
 		name: 'editor.setText',
 	},
+	{
+		name: 'editor.focus',
+	},
 ];
 
 export default declarations;

packages/app-desktop/gui/NoteEditor/commands/focusElementNoteBody.ts

@@ -10,7 +10,7 @@ export const declaration: CommandDeclaration = {
 export const runtime = (comp: any): CommandRuntime => {
 	return {
 		execute: async () => {
-			comp.editorRef.current.execCommand({ name: 'focus' });
+			comp.editorRef.current.execCommand({ name: 'editor.focus' });
 		},
 		enabledCondition: 'oneNoteSelected',
 	};

packages/app-desktop/gui/NoteEditor/utils/useFormNote.ts

@@ -161,7 +161,7 @@ export default function useFormNote(dependencies: HookDependencies) {
 				if (Setting.value(focusSettingName) === 'title') {
 					if (titleInputRef.current) titleInputRef.current.focus();
 				} else {
-					if (editorRef.current) editorRef.current.execCommand({ name: 'focus' });
+					if (editorRef.current) editorRef.current.execCommand({ name: 'editor.focus' });
 				}
 			});
 		}

packages/lib/services/commands/ToolbarButtonUtils.ts

@@ -33,6 +33,30 @@ export default class ToolbarButtonUtils {
 		return this.service_;
 	}
 
+	// Editor commands will focus the editor after they're executed
+	private isEditorCommand(commandName: string) {
+		return (commandName.indexOf('editor.') === 0 ||
+				// These commands are grandfathered in, but in the future
+				// all editor commands should start with "editor."
+				// WARNING: Some commands such as textLink are not defined here
+				// because they are more complex and handle focus manually
+				commandName === 'textCopy' ||
+				commandName === 'textCut' ||
+				commandName === 'textPaste' ||
+				commandName === 'textSelectAll' ||
+				commandName === 'textBold' ||
+				commandName === 'textItalic' ||
+				commandName === 'textCode' ||
+				commandName === 'attachFile' ||
+				commandName === 'textNumberedList' ||
+				commandName === 'textBulletedList' ||
+				commandName === 'textCheckbox' ||
+				commandName === 'textHeading' ||
+				commandName === 'textHorizontalRule' ||
+				commandName === 'insertDateTime'
+		);
+	}
+
 	private commandToToolbarButton(commandName: string, whenClauseContext: any): ToolbarButtonInfo {
 		const newEnabled = this.service.isEnabled(commandName, whenClauseContext);
 		const newTitle = this.service.title(commandName);
@@ -52,8 +76,11 @@ export default class ToolbarButtonUtils {
 			tooltip: this.service.label(commandName),
 			iconName: command.declaration.iconName,
 			enabled: newEnabled,
-			onClick: () => {
+			onClick: async () => {
 				void this.service.execute(commandName);
+				if (this.isEditorCommand(commandName)) {
+					void this.service.execute('editor.focus');
+				}
 			},
 			title: newTitle,
 		};