Awesome

Editor.js Alert Tool

Provides Alert blocks for the Editor.js.

Features

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

How does it look like?

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

Try it out yourself on the demo page.

Installation

Install via NPM

Get the package

npm i --save editorjs-alert

Include module at your application

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

// OR

import Alert from 'editorjs-alert';

Download to your project's source dir

Copy dist/bundle.js file to your page.

Load from CDN

You can load specific version of package from jsDelivr CDN.

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

Usage

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: {
        alertTypes: ['primary', 'secondary', 'info', 'success', 'warning', 'danger', 'light', 'dark'],
        defaultType: 'primary',
        messagePlaceholder: 'Enter something',
      },
    },
  },

  //...
});

Config Params

All properties are optional.

Field	Type	Default Value	Description
`alertTypes`	`array`	`['primary', 'secondary', 'info', 'success', 'warning', 'danger', 'light', 'dark']`	Alert types that can be used in the editor
`defaultType`	`string`	`info`	default Alert type (should be either of `primary`, `secondary`, `info`, `success`, `warning`, `danger`, `light` or `dark`)
`defaultAlign`	`string`	`left`	default Alert alignment (should be either of `left`, `center` or `right`)
`messagePlaceholder`	`string`	`Type here...`	placeholder to show in Alert`s message

Output data

Field	Type	Description
message	`string`	Alert message
type	`string`	Alert type among one of `primary`, `secondary`, `info`, `success`, `warning`, `danger`, `light` or `dark`
align	`string`	Align type should be one of `left`, `center` or `right`

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

Local Development

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.

Publishing to NPM

Run yarn build to build the production bundle, bump the version in package.json.
Commit and push the changes.
Create a release new tag for the bumped version (e.g. git tag v1.0.2).
Push the tag using git push --tags.
Publish the package to NPM using yarn publish.

License

This project is licensed under the MIT License.