Desktop: Fixes #8316: Include more Rich Text editor commands in the menu

.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

.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

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 (joplinCommandToTinyMceCommands[cmd.name] === true) {
-				if (!('ui' in tinyMceCmd)) tinyMceCmd.ui = false;
+					// Already handled in useWindowCommandHandlers.ts
-				if (!('value' in tinyMceCmd)) tinyMceCmd.value = null;
+				} 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');
 						},
 					});
 

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

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