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
!alerts

#### Block Settings
!settings

Styles

##### Pastel (Default)
!pastel

##### Solid
!solid

##### Outlined
!outlined

Installation

Using npm

``sh
npm install @coolbytes/editorjs-alerts
`

Using yarn

`sh
yarn add @coolbytes/editorjs-alerts
`

Usage

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

`js
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|

`js
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:

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