self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-10-31 00:07:48 +02:00
Code Issues Releases Activity

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

Browse Source
This commit is contained in:
Caleb John
2020-12-02 03:36:00 -07:00
committed by GitHub
parent 717b8da1f8
commit 92fe5e2362
6 changed files with 36 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx
View File

@@ -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: () => {

2
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx
View File

@@ -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') {

3
packages/app-desktop/gui/NoteEditor/commands/editorCommandDeclarations.ts
View File

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

2
packages/app-desktop/gui/NoteEditor/commands/focusElementNoteBody.ts
View File

@@ -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',
};

2
packages/app-desktop/gui/NoteEditor/utils/useFormNote.ts
View File

@@ -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' });
}
});
}

29
packages/lib/services/commands/ToolbarButtonUtils.ts
View File

@@ -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,
};