@coolbytes/editorjs-alerts v1.0.4

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

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

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"
}