ContentScriptType

module.exports = {
    default: function(context) {
        return {
            plugin: function(CodeMirror) {
                // ...
            },
            codeMirrorResources: [],
            codeMirrorOptions: {
                                 // ...
                      },
            assets: {
                // ...
            },
        }
    }
}

• The context argument allows communicating with other parts of your plugin (see below).

• The plugin key is your CodeMirror plugin. This is where you can register new commands with CodeMirror or interact with the CodeMirror instance as needed.

• CodeMirror 5 only: The codeMirrorResources key is an array of CodeMirror resources that will be loaded and attached to the CodeMirror module. These are made up of addons, keymaps, and modes. For example, for a plugin that want's to enable clojure highlighting in code blocks. codeMirrorResources would be set to ['mode/clojure/clojure']. This field is ignored on mobile and when the desktop beta editor is enabled.

• CodeMirror 5 only: The codeMirrorOptions key contains all the CodeMirror options that will be set or changed by this plugin. New options can alse be declared via CodeMirror.defineOption, and then have their value set here. For example, a plugin that enables line numbers would set codeMirrorOptions to {'lineNumbers': true}.

• Using the optional assets key you may specify only CSS assets that should be loaded in the rendered HTML document. Check for example the Joplin [Mermaid plugin](https://github.com/laurent22/joplin/blob/dev/packages/renderer/MdToHtml/rules/mermaid.ts) to see how the data should be structured.

One of the plugin, codeMirrorResources, or codeMirrorOptions keys must be provided for the plugin to be valid. Having multiple or all provided is also okay.

See also:

• The demo plugin for an example of all these keys being used in one plugin.
• See the editor plugin tutorial for how to develop a plugin for the mobile editor and the desktop beta markdown editor.

Posting messages from the content script to your plugin

In order to post messages to the plugin, you can use the postMessage function passed to the context.

const response = await context.postMessage('messageFromCodeMirrorContentScript');

When you post a message, the plugin can send back a response thus allowing two-way communication:

await joplin.contentScripts.onMessage(contentScriptId, (message) => {
    // Process message
    return response; // Can be any object, string or number
});

See JoplinContentScripts.onMessage for more details, as well as the postMessage demo.

module.exports = {
    default: function(context) {
        return {
            plugin: function(markdownIt, pluginOptions) {
                // ...
            },
            assets: {
                // ...
            },
        }
    }
}

See the demo for a simple Markdown-it plugin example.

Exported members

• The context argument is currently unused but could be used later on to provide access to your own plugin so that the content script and plugin can communicate.

• The required plugin key is the actual Markdown-It plugin - check the official doc for more information.

• Using the optional assets key you may specify assets such as JS or CSS that should be loaded in the rendered HTML document. Check for example the Joplin [Mermaid plugin](https://github.com/laurent22/joplin/blob/dev/packages/renderer/MdToHtml/rules/mermaid.ts) to see how the data should be structured.

Supporting the Rich Text Editor

Joplin's Rich Text Editor works with rendered HTML, which is converted back to markdown when saving. To prevent the original markdown for your plugin from being lost, Joplin needs additional metadata.

To provide this,

1. Wrap the HTML generated by your plugin in an element with class joplin-editable. For example,

   <div class="joplin-editable">
       ...your html...
   </div>

2. Add a child with class joplin-source that contains the original markdown that was rendered by your plugin. Include data-joplin-source-open, data-joplin-source-close, and data-joplin-language attributes. For example, if your plugin rendered the following code block,

   ```foo
   ... original source here ...
   ```

   then it should render to

   <div class="joplin-editable">
       <pre
           class="joplin-source"
           data-joplin-language="foo"
           data-joplin-source-open="```foo&NewLine;"
           data-joplin-source-close="```"
       > ... original source here ... </pre>
       ... rendered HTML here ...
   </div>

See the demo for a complete example.

Getting the settings from the renderer

You can access your plugin settings from the renderer by calling pluginOptions.settingValue("your-setting-key').

Posting messages from the content script to your plugin

The application provides the following function to allow executing commands from the rendered HTML code:

const response = await webviewApi.postMessage(contentScriptId, message);

• contentScriptId is the ID you've defined when you registered the content script. You can retrieve it from the context.
• message can be any basic JavaScript type (number, string, plain object), but it cannot be a function or class instance.

When you post a message, the plugin can send back a response thus allowing two-way communication:

await joplin.contentScripts.onMessage(contentScriptId, (message) => {
    // Process message
    return response; // Can be any object, string or number
});

See JoplinContentScripts.onMessage for more details, as well as the postMessage demo.

Registering an existing Markdown-it plugin

To include a regular Markdown-It plugin, that doesn't make use of any Joplin-specific features, you would simply create a file such as this:

module.exports = {
    default: function(context) {
        return {
            plugin: require('markdown-it-toc-done-right');
        }
    }
}