Alerts block tool for Editor.js
npm install @coolbytes/editorjs-alertsThis 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.
#### Block Tool
!alerts
#### Block Settings
!settings
##### Pastel (Default)
!pastel
##### Solid
!solid
##### Outlined
!outlined
Using npm
``sh`
npm install @coolbytes/editorjs-alerts
Using yarn
`sh`
yarn add @coolbytes/editorjs-alerts
Include it in the tools property of Editor.js config:
`js`
const editor = new EditorJS({
tools: {
alert: Alert
}
});
|Field|Type|Optional|Default|Description|
|---|---|---|---|---|
|alertTypes|string[]|Yes|['info', 'success', 'blocked', 'warning', 'danger']|All supported alert types|string
|defaultAlertType||Yes|'info'|Preferred alert type|string[]
|alertStyles||Yes|['pastel', 'solid', 'outlined']|All supported alert styles|string
|defaultAlertStyle||Yes|'pastel'|Preferred alert style|string[]
|alignTypes||Yes|['left', 'center', 'right', 'justify']|All supported alignment options|string
|defaultAlignType||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'
}
}
}
});
|Field|Type|Description|
|---|---|---|
|text|string|Alert's text|string
|alert||Alert type|string
|alertStyle||Alert style|string
|align||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"
}