diff --git a/packages/editor/types.ts b/packages/editor/types.ts index ef0d3e9648..0d2b08994b 100644 --- a/packages/editor/types.ts +++ b/packages/editor/types.ts @@ -1,9 +1,8 @@ import type { Theme } from '@joplin/lib/themes/type'; import type { EditorEvent } from './events'; -// Editor commands. For compatibility, the string values of these commands -// should correspond with the CodeMirror 5 commands: -// https://codemirror.net/5/doc/manual.html#commands +// Editor commands. Plugins can access these commands using editor.execCommand +// or, in some cases, by prefixing the command name with `editor.`. export enum EditorCommandType { Undo = 'undo', Redo = 'redo', diff --git a/readme/dev/BUILD.md b/readme/dev/BUILD.md index 6cecba029c..e0981b66bf 100644 --- a/readme/dev/BUILD.md +++ b/readme/dev/BUILD.md @@ -104,6 +104,8 @@ To make changes to the application, you'll need to rebuild any TypeScript file y Running `yarn tsc` would have the same effect, but without watching. +**Mobile-specific note**: If making changes to the note editor, viewer, or other WebView content, run `yarn watchInjectedJs` from `packages/app-mobile` to rebuild the WebView JavaScript files on change. + ## Running an application with additional parameters You can specify additional parameters when running the desktop or CLI application. To do so, add `--` to the `yarn start` command, followed by your flags. For example: diff --git a/readme/dev/spec/editor_commands.md b/readme/dev/spec/editor_commands.md new file mode 100644 index 0000000000..c472c87467 --- /dev/null +++ b/readme/dev/spec/editor_commands.md @@ -0,0 +1,39 @@ +# Editor Commands + +## On Mobile + +On mobile, there are two types of editor-related commands: +- Editor commands +- Note screen commands + +These commands can be used in different cases and run in different contexts. + +### Note screen commands + +These commands are stored in `packages/app-mobile/components/screens/Note/commands`. Note screen commands run in the main React Native JavaScript context. + +After adding a new note screen command, run `yarn buildScriptIndexes` from the top-level Joplin directory. + +### CodeMirror commands + +These commands are stored in `packages/editor/CodeMirror/editorCommands/editorCommands.ts` and are shared between mobile and desktop. On mobile, these commands run in the editor `WebView`, giving them access to the CodeMirror API. + +Although all of these commands can be accessed by plugins using `editor.execCommand`, some are registered directly with the `CommandService`. Registering an editor command with the `CommandService` can be useful in a few circumstances. In particular, it: +- Allows the command to be run directly using `CommandService.instance().execute('commandName')`. This makes it simpler for plugins to access the command. +- Allows adding a toolbar button for the command. + +New editor commands registered with `CommandService` should: +- Be added to `NoteEditor/commandDeclarations.ts` in the `app-mobile` package. +- Be given the `editor.` prefix to mark them as editor commands. This changes how the commands are applied, for example, by focusing the editor after the command completes. + +While testing a new editor command, be sure to watch the bundled editor JavaScript for changes. See `BUILD.md` for details. + +## On Desktop + +On desktop, the different note editor types each register their own command handlers. For example, the `useEditorCommands.ts` hook in `NoteBody/CodeMirror/v6/useEditorCommands.ts` is responsible for registering the different editor commands. + +In most cases, to share code with the mobile app, new commands here should call: +```js + // For some SomeCommand implemented in packages/editor + editorRef.current.execCommand(EditorCommandType.SomeCommand, ...argsHere) +```