From 0f9727144f45296ee1e6113b0b13fd2a12dda1d0 Mon Sep 17 00:00:00 2001 From: Laurent Cozic Date: Wed, 14 Jun 2023 14:56:14 +0100 Subject: [PATCH] Desktop: Fixes #8316: Include more Rich Text editor commands in the menu --- .eslintignore | 1 + .gitignore | 1 + .../NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx | 38 ++++++++----------- .../utils/joplinCommandToTinyMceCommands.ts | 22 +++++++++++ .../utils/useWindowCommandHandler.ts | 5 ++- 5 files changed, 44 insertions(+), 23 deletions(-) create mode 100644 packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/joplinCommandToTinyMceCommands.ts diff --git a/.eslintignore b/.eslintignore index 8bc593935..1e4ed3e2f 100644 --- a/.eslintignore +++ b/.eslintignore @@ -225,6 +225,7 @@ packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useScrollHandler.j packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useScrollUtils.js packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.js packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/styles/index.js +packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/joplinCommandToTinyMceCommands.js packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/openEditDialog.js packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/setupToolbarButtons.js packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/types.js diff --git a/.gitignore b/.gitignore index ae5fe94c4..3fca94bb1 100644 --- a/.gitignore +++ b/.gitignore @@ -210,6 +210,7 @@ packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useScrollHandler.j packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useScrollUtils.js packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.js packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/styles/index.js +packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/joplinCommandToTinyMceCommands.js packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/openEditDialog.js packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/setupToolbarButtons.js packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/types.js diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx b/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx index 673488d74..4c0c5a345 100644 --- a/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx +++ b/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx @@ -26,6 +26,7 @@ import { loadScript } from '../../../utils/loadScript'; import bridge from '../../../../services/bridge'; import { TinyMceEditorEvents } from './utils/types'; import type { Editor } from 'tinymce'; +import { joplinCommandToTinyMceCommands, TinyMceCommand } from './utils/joplinCommandToTinyMceCommands'; const { clipboard } = require('electron'); const supportedLocales = require('./supportedLocales'); @@ -78,23 +79,6 @@ function stripMarkup(markupLanguage: number, markup: string, options: any = null return markupToHtml_.stripMarkup(markupLanguage, markup, options); } -interface TinyMceCommand { - name: string; - value?: any; - ui?: boolean; -} - -interface JoplinCommandToTinyMceCommands { - [key: string]: TinyMceCommand; -} - -const joplinCommandToTinyMceCommands: JoplinCommandToTinyMceCommands = { - 'textBold': { name: 'mceToggleFormat', value: 'bold' }, - 'textItalic': { name: 'mceToggleFormat', value: 'italic' }, - 'textLink': { name: 'mceLink' }, - 'search': { name: 'SearchReplace' }, -}; - interface LastOnChangeEventInfo { content: string; resourceInfos: ResourceInfos; @@ -274,11 +258,17 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => { return false; } - const tinyMceCmd: TinyMceCommand = { ...joplinCommandToTinyMceCommands[cmd.name] }; - if (!('ui' in tinyMceCmd)) tinyMceCmd.ui = false; - if (!('value' in tinyMceCmd)) tinyMceCmd.value = null; + if (joplinCommandToTinyMceCommands[cmd.name] === true) { + // Already handled in useWindowCommandHandlers.ts + } else if (joplinCommandToTinyMceCommands[cmd.name] === false) { + // Explicitely not supported + } else { + const tinyMceCmd: TinyMceCommand = { ...(joplinCommandToTinyMceCommands[cmd.name] as TinyMceCommand) }; + if (!('ui' in tinyMceCmd)) tinyMceCmd.ui = false; + if (!('value' in tinyMceCmd)) tinyMceCmd.value = null; - editor.execCommand(tinyMceCmd.name, tinyMceCmd.ui, tinyMceCmd.value); + editor.execCommand(tinyMceCmd.name, tinyMceCmd.ui, tinyMceCmd.value); + } return true; }, @@ -603,11 +593,15 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => { joplinSup: { inline: 'sup', remove: 'all' }, }, setup: (editor: Editor) => { + editor.addCommand('joplinAttach', () => { + insertResourcesIntoContentRef.current(); + }); + editor.ui.registry.addButton('joplinAttach', { tooltip: _('Attach file'), icon: 'paperclip', onAction: async function() { - insertResourcesIntoContentRef.current(); + editor.execCommand('joplinAttach'); }, }); diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/joplinCommandToTinyMceCommands.ts b/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/joplinCommandToTinyMceCommands.ts new file mode 100644 index 000000000..2ccb9edb2 --- /dev/null +++ b/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/joplinCommandToTinyMceCommands.ts @@ -0,0 +1,22 @@ +export interface TinyMceCommand { + name: string; + value?: any; + ui?: boolean; +} + +interface JoplinCommandToTinyMceCommands { + [key: string]: TinyMceCommand | boolean; +} + +// If the mapping is simply `true` it means that the command is supported via +// useWindowCommandHandlers.ts. We still add it here to have the complete list +// of supported commands. +export const joplinCommandToTinyMceCommands: JoplinCommandToTinyMceCommands = { + 'textBold': { name: 'mceToggleFormat', value: 'bold' }, + 'textItalic': { name: 'mceToggleFormat', value: 'italic' }, + 'textCode': { name: 'mceToggleFormat', value: 'code' }, + 'textLink': { name: 'mceLink' }, + 'search': { name: 'SearchReplace' }, + 'attachFile': { name: 'joplinAttach' }, + 'insertDateTime': true, +}; diff --git a/packages/app-desktop/gui/NoteEditor/utils/useWindowCommandHandler.ts b/packages/app-desktop/gui/NoteEditor/utils/useWindowCommandHandler.ts index cd4be46b3..9893032ad 100644 --- a/packages/app-desktop/gui/NoteEditor/utils/useWindowCommandHandler.ts +++ b/packages/app-desktop/gui/NoteEditor/utils/useWindowCommandHandler.ts @@ -4,6 +4,7 @@ import editorCommandDeclarations from '../editorCommandDeclarations'; import CommandService, { CommandDeclaration, CommandRuntime, CommandContext } from '@joplin/lib/services/CommandService'; import time from '@joplin/lib/time'; import { reg } from '@joplin/lib/registry'; +import { joplinCommandToTinyMceCommands } from '../NoteBody/TinyMCE/utils/joplinCommandToTinyMceCommands'; const commandsWithDependencies = [ require('../commands/showLocalSearch'), @@ -24,6 +25,8 @@ interface HookDependencies { } function editorCommandRuntime(declaration: CommandDeclaration, editorRef: any, setFormNote: Function): CommandRuntime { + const markdownEditorOnly = !Object.keys(joplinCommandToTinyMceCommands).includes(declaration.name); + return { execute: async (_context: CommandContext, ...args: any[]) => { if (!editorRef.current) { @@ -65,7 +68,7 @@ function editorCommandRuntime(declaration: CommandDeclaration, editorRef: any, s // currently selected text. // // https://github.com/laurent22/joplin/issues/5707 - enabledCondition: '(!modalDialogVisible || gotoAnythingVisible) && markdownEditorPaneVisible && oneNoteSelected && noteIsMarkdown', + enabledCondition: `(!modalDialogVisible || gotoAnythingVisible) ${markdownEditorOnly ? '&& markdownEditorPaneVisible' : ''} && oneNoteSelected && noteIsMarkdown`, }; }