Provides Alert blocks for the Editor.js.

• 8 different alert block styes
• Convert from other blocks into an Alert block
• Convert an Alert block into other blocks

Watch this tool in action in the following short GIF movie.

Try it out yourself on the demo page.

Get the package

npm i --save editorjs-alert

Include module at your application

const Header = require('editorjs-alert');

// OR

import Alert from 'editorjs-alert';

Copy dist/bundle.js file to your page.

You can load specific version of package from jsDelivr CDN.

<script src="https://cdn.jsdelivr.net/npm/editorjs-alert@latest"></script>

Add a new Tool Alert to the tools property of the Editor.js initial config.

var editor = EditorJS({
  // ...

  tools: {
    // ...
    alert: Alert,
  },

  // ...
});

Or initialize Alert tool with additional optional settings

var editor = EditorJS({
  //...

  tools: {
    //...
    alert: {
      class: Alert,
      inlineToolbar: true,
      shortcut: 'CMD+SHIFT+A',
      config: {
        defaultType: 'primary',
        messagePlaceholder: 'Enter something',
      },
    },
  },

  //...
});

All properties are optional.

{
  "type": "alert",
  "data": {
    "type": "danger",
    "text": "<strong>Holy smokes!</strong><br>Something seriously <em>bad</em> happened."
  }
}

• Run yarn install.
• Run yarn dev to continuously watch for the changes made in ./src/index.js and updates a development bundle under ./dist folder.
• Open ./examples/development.html in the browser to verify the tool's functionality.

This project is licensed under the MIT License.