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.
Using npm
npm install @coolbytes/editorjs-alerts
Using yarn
yarn add @coolbytes/editorjs-alerts
Include it in the tools property of Editor.js config:
const editor = new EditorJS({ tools: { alert: Alert } });
| 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' } } } });
| 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"
}