Plugins: Support executing codemirror commands from plugins when usin…

…g execCommand (#5012)

.eslintignore

@@ -338,6 +338,9 @@ packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useEditorSearch.js
 packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useExternalPlugins.d.ts
 packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useExternalPlugins.js
 packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useExternalPlugins.js.map
+packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useJoplinCommands.d.ts
+packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useJoplinCommands.js
+packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useJoplinCommands.js.map
 packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useJoplinMode.d.ts
 packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useJoplinMode.js
 packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useJoplinMode.js.map

.gitignore

@@ -324,6 +324,9 @@ packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useEditorSearch.js
 packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useExternalPlugins.d.ts
 packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useExternalPlugins.js
 packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useExternalPlugins.js.map
+packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useJoplinCommands.d.ts
+packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useJoplinCommands.js
+packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useJoplinCommands.js.map
 packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useJoplinMode.d.ts
 packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useJoplinMode.js
 packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useJoplinMode.js.map

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

@@ -224,10 +224,12 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 						textHeading: () => addListItem('## ', ''),
 						textHorizontalRule: () => addListItem('* * *'),
 						'editor.execCommand': (value: CommandValue) => {
-							if (editorRef.current[value.name]) {
-								if (!('args' in value)) value.args = [];
+							if (!('args' in value)) value.args = [];
 
+							if (editorRef.current[value.name]) {
 								editorRef.current[value.name](...value.args);
+							} else if (editorRef.current.commandExists(value.name)) {
+								editorRef.current.execCommand(value.name);
 							} else {
 								reg.logger().warn('CodeMirror execCommand: unsupported command: ', value.name);
 							}

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

@@ -20,6 +20,7 @@ import useEditorSearch from './utils/useEditorSearch';
 import useJoplinMode from './utils/useJoplinMode';
 import useKeymap from './utils/useKeymap';
 import useExternalPlugins from './utils/useExternalPlugins';
+import useJoplinCommands from './utils/useJoplinCommands';
 
 import 'codemirror/keymap/emacs';
 import 'codemirror/keymap/vim';
@@ -107,6 +108,7 @@ function Editor(props: EditorProps, ref: any) {
 	useJoplinMode(CodeMirror);
 	const pluginOptions: any = useExternalPlugins(CodeMirror, props.plugins);
 	useKeymap(CodeMirror);
+	useJoplinCommands(CodeMirror);
 
 	useImperativeHandle(ref, () => {
 		return editor;

packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useJoplinCommands.ts

@@ -0,0 +1,7 @@
+// Helper commands added to the the CodeMirror instance
+export default function useJoplinCommands(CodeMirror: any) {
+
+	CodeMirror.defineExtension('commandExists', function(name: string) {
+		return !!CodeMirror.commands[name];
+	});
+}

packages/lib/services/plugins/api/JoplinCommands.ts

@@ -21,6 +21,34 @@ import { Command } from './types';
  *
  * To view what arguments are supported, you can open any of these files
  * and look at the `execute()` command.
+ *
+ * ## Executing editor commands
+ *
+ * There might be a situation where you want to invoke editor commands
+ * without using a {@link JoplinContentScripts | contentScript}. For this
+ * reason Joplin provides the built in `editor.execCommand` command.
+ *
+ * `editor.execCommand`  should work with any core command in both the
+ * [CodeMirror](https://codemirror.net/doc/manual.html#execCommand) and
+ * [TinyMCE](https://www.tiny.cloud/docs/api/tinymce/tinymce.editorcommands/#execcommand) editors,
+ * as well as most functions calls directly on a CodeMirror editor object (extensions).
+ *
+ * * [CodeMirror commands](https://codemirror.net/doc/manual.html#commands)
+ * * [TinyMCE core editor commands](https://www.tiny.cloud/docs/advanced/editor-command-identifiers/#coreeditorcommands)
+ *
+ * `editor.execCommand` supports adding arguments for the commands.
+ *
+ * ```typescript
+ * await joplin.commands.execute('editor.execCommand', {
+ *     name: 'madeUpCommand', // CodeMirror and TinyMCE
+ *     args: [], // CodeMirror and TinyMCE
+ *     ui: false, // TinyMCE only
+ *     value: '', // TinyMCE only
+ * });
+ * ```
+ *
+ * [View the example using the CodeMirror editor](https://github.com/laurent22/joplin/blob/dev/packages/app-cli/tests/support/plugins/codemirror_content_script/src/index.ts)
+ *
  */
 export default class JoplinCommands {