From 92fe5e23622fb2f6ba94fc41537afac0d7d64f22 Mon Sep 17 00:00:00 2001 From: Caleb John Date: Wed, 2 Dec 2020 03:36:00 -0700 Subject: [PATCH] Desktop: Fixes #4036: Focus editor after pressing toolbar buttons (#4037) --- .../NoteBody/CodeMirror/CodeMirror.tsx | 5 ++-- .../NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx | 2 +- .../commands/editorCommandDeclarations.ts | 3 ++ .../commands/focusElementNoteBody.ts | 2 +- .../gui/NoteEditor/utils/useFormNote.ts | 2 +- .../services/commands/ToolbarButtonUtils.ts | 29 ++++++++++++++++++- 6 files changed, 36 insertions(+), 7 deletions(-) diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx index b5fa892d82..e3f4196756 100644 --- a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx +++ b/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: () => { diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx b/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx index 5d3e0c7581..45eded72f7 100644 --- a/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx +++ b/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') { diff --git a/packages/app-desktop/gui/NoteEditor/commands/editorCommandDeclarations.ts b/packages/app-desktop/gui/NoteEditor/commands/editorCommandDeclarations.ts index 4c9e24b18b..75e496fd95 100644 --- a/packages/app-desktop/gui/NoteEditor/commands/editorCommandDeclarations.ts +++ b/packages/app-desktop/gui/NoteEditor/commands/editorCommandDeclarations.ts @@ -92,6 +92,9 @@ const declarations: CommandDeclaration[] = [ { name: 'editor.setText', }, + { + name: 'editor.focus', + }, ]; export default declarations; diff --git a/packages/app-desktop/gui/NoteEditor/commands/focusElementNoteBody.ts b/packages/app-desktop/gui/NoteEditor/commands/focusElementNoteBody.ts index 4909f94962..6d2859d615 100644 --- a/packages/app-desktop/gui/NoteEditor/commands/focusElementNoteBody.ts +++ b/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', }; diff --git a/packages/app-desktop/gui/NoteEditor/utils/useFormNote.ts b/packages/app-desktop/gui/NoteEditor/utils/useFormNote.ts index 9ffc74a959..931179070f 100644 --- a/packages/app-desktop/gui/NoteEditor/utils/useFormNote.ts +++ b/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' }); } }); } diff --git a/packages/lib/services/commands/ToolbarButtonUtils.ts b/packages/lib/services/commands/ToolbarButtonUtils.ts index 016ffc9eda..cc9ff3ebe0 100644 --- a/packages/lib/services/commands/ToolbarButtonUtils.ts +++ b/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, };