Custom Code Plugin for Editor.js

The Custom Code Plugin for Editor.js enables you to incorporate code examples into your articles, along with a dropdown for selecting the language mode.

This plugin is only compatible with Vite 4.

Installation

Install plugin in your existing project.

npm i @rxpm/editor-js-code

Usage

Include plugin in your application.

import CodeTool from '@rxpm/editor-js-code';

Register the plugin in the tools property of the Editor.js configuration.

const editor = EditorJS({
    ...
    tools: {
        code: CodeTool
    }
    ...
});

Provide additional language modes.

const editor = EditorJS({
    ...
    tools: {
        code: {
            class: CodeTool,
            config: {
                modes: {
                    js: 'JavaScript',
                    py: 'Python',
                    go: 'Go',
                    cpp: 'C++',
                    cs: 'C#',
                    md: 'Markdown',
                },
                defaultMode: 'go',
            },
        },
    },
    ...
});

Config Params

This plugin supports additional configuration parameters.

Field	Type	Description	Default
placeholder	string	Placeholder string	Enter a code
modes	object	Supported language modes	{ text: "Plain Text" }
defaultMode	string	Default selected language mode	text

Output Data

Editor.js will produce the following code block.

{
    "type": "code",
    "data": {
        "code": "package main\n\nimport \"fmt\"\n\nfunc main() {\n    messages := make(chan string)\n\n    go func() { messages <- \"ping\" }()\n\n    msg := <-messages\n    fmt.Println(msg)\n}",
        "mode": "go"
    }
}

License

ISC © Rajat Sharma