Provides Alert blocks for the Editor.js.
- 8 different alert block styes
- Convert from other blocks into an Alert block
- Convert an Alert block into other blocks
Watch this tool in action in the following short GIF movie.
Try it out yourself on the demo page.
Get the package
npm i --save @7polo/editorjs-alert
Include module at your application
const Header = require('@7polo/editorjs-alert');
// OR
import Alert from '@7polo/editorjs-alert';
Copy dist/bundle.js
file to your page.
You can load specific version of package from jsDelivr CDN.
<script src="https://cdn.jsdelivr.net/npm/editorjs-alert@latest"></script>
Add a new Tool Alert
to the tools
property of the Editor.js initial config.
var editor = EditorJS({
// ...
tools: {
// ...
alert: Alert,
},
// ...
});
Or initialize Alert tool with additional optional settings
var editor = EditorJS({
//...
tools: {
//...
alert: {
class: Alert,
inlineToolbar: true,
shortcut: 'CMD+SHIFT+A',
config: {
defaultType: 'primary',
messagePlaceholder: 'Enter something',
},
},
},
//...
});
All properties are optional.
Field | Type | Default Value | Description |
---|---|---|---|
defaultType |
string |
info |
default Alert type (should be either of primary , secondary , info , success , warning , danger , light or dark ) |
defaultAlign |
string |
left |
default Alert alignment (should be either of left , center or right ) |
messagePlaceholder |
string |
Type here... |
placeholder to show in Alert`s message |
Field | Type | Description |
---|---|---|
message | string |
Alert message |
type | string |
Alert type among one of primary , secondary , info , success , warning , danger , light or dark
|
align | string |
Align type should be one of left , center or right
|
{
"type": "alert",
"data": {
"type": "danger",
"align" : "center",
"text": "<strong>Holy smokes!</strong><br>Something seriously <em>bad</em> happened."
}
}
- Run
yarn install
. - Run
yarn dev
to continuously watch for the changes made in./src/index.js
and updates a development bundle under./dist
folder. - Open
./examples/development.html
in the browser to verify the tool's functionality.
- Run
yarn build
to build the production bundle, bump the version inpackage.json
. - Commit and push the changes.
- Create a release new tag for the bumped version (e.g.
git tag v1.0.2
). - Push the tag using
git push --tags
. - Publish the package to NPM using
yarn publish
.
This project is licensed under the MIT License.