Documentation / joplin-plugin-api / ContentScriptType

Enumeration: ContentScriptType

Enumeration Members

CodeMirrorPlugin

CodeMirrorPlugin: "codeMirrorPlugin"

Registers a new CodeMirror plugin, which should follow the template below.

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

• 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 plugin key is your CodeMirror plugin. This is where you can register new commands with CodeMirror or interact with the CodeMirror instance as needed.

• 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'].

• 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 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.

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.

Defined in

types.ts:749

---

MarkdownItPlugin

MarkdownItPlugin: "markdownItPlugin"

Registers a new Markdown-It plugin, which should follow the template below.

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 to see how the data should be structured.

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');
        }
    }
}

Defined in

types.ts:664