Alerts block tool for Editor.js

This block tool provides alert banners for Editor.js. The tool also provides configuration to choose from different styles (see Styles) and to enable alignment options.

Preview

Block Tool

Block Settings

Styles

Pastel (Default)

Solid

Outlined

Installation

Using npm

npm install @coolbytes/editorjs-alerts

Using yarn

yarn add @coolbytes/editorjs-alerts

Usage

Include it in the tools property of Editor.js config:

const editor = new EditorJS({
  tools: {
    alert: Alert
  }
});

Config Params

Field	Type	Optional	Default	Description
alertTypes	string[]	Yes	['info', 'success', 'blocked', 'warning', 'danger']	All supported alert types
defaultAlertType	string	Yes	'info'	Preferred alert type
alertStyles	string[]	Yes	['pastel', 'solid', 'outlined']	All supported alert styles
defaultAlertStyle	string	Yes	'pastel'	Preferred alert style
alignTypes	string[]	Yes	['left', 'center', 'right', 'justify']	All supported alignment options
defaultAlignType	string	Yes	'left'	Preferred alignment type

 

const editor = EditorJS({
  tools: {
    alert: {
      class: Alert,
      config: {
        alertTypes: ['info', 'success', 'blocked', 'warning', 'danger'],
        defaultAlertType: 'info',
        alertStyles: ['pastel', 'solid', 'outlined'],
        defaultAlertStyle: 'pastel',
        alignTypes: ['left', 'center', 'right', 'justify'],
        defaultAlignType: 'left'
      }
    }
  }
});

Output data

Field	Type	Description
text	string	Alert's text
alert	string	Alert type
alertStyle	string	Alert style
align	string	Alignment type

 

Example:

{
  "time": 1715969561758,
  "blocks": [
    {
      "id": "_K5QcJHHuK",
      "type": "alert",
      "data": {
        "text": "This is an info alert",
        "alert": "info",
        "alertStyle": "pastel",
        "align": "left"
      }
    }
  ],
  "version": "2.29.1"
}