Hello everyone,
I'm currently working on a Joplin plugin that adds a button to the editor toolbar. This button should insert an HTML code snippet into both the Rich Text Editor and the Markdown Editor. The button works flawlessly in the Rich Text Editor, but the HTML code is not being inserted in the Markdown Editor.
Here's the current code of my plugins index.ts
:
import joplin from 'api';
import { ToolbarButtonLocation, ViewType } from 'api/types';
const htmlSnippet = '<div style="background-color:darkblue;padding:10px;color:white"><b>Info:</b> Foo.</div>';
joplin.plugins.register({
onStart: async function() {
await joplin.commands.register({
name: 'insertHTML',
label: 'Insert HTML',
iconName: 'fas fa-code',
execute: async () => {
const view = joplin.views.currentView();
if (view.type === ViewType.Editor) {
const editor = view.codeMirror;
const cursor = editor.getCursor();
editor.replaceRange(htmlSnippet, cursor);
}
},
});
await joplin.views.toolbarButtons.create('insertHTMLButton', 'insertHTML', ToolbarButtonLocation.EditorToolbar);
},
});
Problem:
The HTML code is correctly inserted in the Rich Text Editor.
In the Markdown Editor, nothing happens when I click the button.
Questions:
What am I doing wrong that the HTML code is not being inserted in the Markdown Editor?
Is there a better way to insert the HTML code into the Markdown Editor?
Thank you in advance!
joplin.commands.execute('insertText', 'HTML here')
might work for this.
See the sample imaging plugin for an example:
// ---------------------------------------------------------------
const imageHandle = await joplin.imaging.createFromResource(resource.id);
const resizedImageHandle = await joplin.imaging.resize(imageHandle, { width: 100 });
// ---------------------------------------------------------------
// Convert the image to a resource and add it to the note
// ---------------------------------------------------------------
const newResource = await joplin.imaging.toJpgResource(resizedImageHandle, { title: "Thumbnail" });
await joplin.commands.execute('insertText', '\n![](:/' + newResource.id + ')');
// ---------------------------------------------------------------
// Free up the image objects at the end
// ---------------------------------------------------------------
await joplin.imaging.free(imageHandle);
await joplin.imaging.free(resizedImageHandle);
},
});
This does not work. I get the following error in the Dev Tools Console when I click on my button while in markdown editor:
CodeMirror execCommand: unsupported command: insertText
output.warn @ main-html.js:50
log @ C:\Users\username\AppDa…\dist\Logger.js:221
warn @ C:\Users\username\AppDa…s\dist\Logger.js:86
editor.execCommand @ C:\Users\username\AppDa…5\CodeMirror.js:244
(anonymous) @ C:\Users\username\AppDa…5\CodeMirror.js:249
(anonymous) @ C:\Users\username\AppDa…\v5\CodeMirror.js:8
__awaiter @ C:\Users\username\AppDa…\v5\CodeMirror.js:4
execCommand @ C:\Users\username\AppDa…5\CodeMirror.js:123
(anonymous) @ C:\Users\username\AppDa…ommandHandler.js:53
(anonymous) @ C:\Users\username\AppDa…CommandHandler.js:8
__awaiter @ C:\Users\username\AppDa…CommandHandler.js:4
execute @ C:\Users\username\AppDa…ommandHandler.js:26
(anonymous) @ C:\Users\username\AppDa…mmandService.js:161
(anonymous) @ C:\Users\username\AppDa…CommandService.js:8
__awaiter @ C:\Users\username\AppDa…CommandService.js:4
execute @ C:\Users\username\AppDa…mmandService.js:152
(anonymous) @ C:\Users\username\AppDa…oplinCommands.js:85
(anonymous) @ C:\Users\username\AppDa…JoplinCommands.js:9
__awaiter @ C:\Users\username\AppDa…JoplinCommands.js:5
execute @ C:\Users\username\AppDa…oplinCommands.js:84
(anonymous) @ C:\Users\username\AppDa…teSandboxCall.js:50
(anonymous) @ C:\Users\username\AppDa…uteSandboxCall.js:8
__awaiter @ C:\Users\username\AppDa…uteSandboxCall.js:4
executeSandboxCall @ C:\Users\username\AppDa…teSandboxCall.js:37
(anonymous) @ C:\Users\username\AppDa…PluginRunner.js:159
(anonymous) @ C:\Users\username\AppDa…s\PluginRunner.js:8
__awaiter @ C:\Users\username\AppDa…s\PluginRunner.js:4
(anonymous) @ C:\Users\username\AppDa…PluginRunner.js:125
emit @ node:events:525
onMessage @ node:electron/js2c/renderer_init:2