editorjs-alert
Editor.js tool for adding colorful alerts/callouts
Editor.js Alert Tool
Provides Alert blocks for the Editor.js.
Features
- 8 different alert block styes
- Convert from other blocks into an Alert block
- Convert an Alert block into other blocks
How does it look like?
Watch this tool in action in the following short GIF movie.
**Try it out yourself on the [demo page](https://vishaltelangre.github.io/editorjs-alert/examples/demo.html).**
## Installation
### Install via NPM
Get the package
```sh
npm i --save editorjs-alert
```
Include module at your application
```js
const Header = require('editorjs-alert');
// OR
import Alert from 'editorjs-alert';
```
### Download to your project's source dir
Copy [`dist/bundle.js`](/editorjs-alert/dist/bundle.js) file to your page.
### Load from CDN
You can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/editorjs-alert).
```html
```
## Usage
Add a new Tool `Alert` to the `tools` property of the Editor.js initial config.
```js
var editor = EditorJS({
// ...
tools: {
// ...
alert: Alert,
},
// ...
});
```
Or initialize Alert tool with additional optional settings
```js
var editor = EditorJS({
//...
tools: {
//...
alert: {
class: Alert,
inlineToolbar: true,
shortcut: 'CMD+SHIFT+A',
config: {
alertTypes: ['primary', 'secondary', 'info', 'success', 'warning', 'danger', 'light', 'dark'],
defaultType: 'primary',
messagePlaceholder: 'Enter something',
},
},
},
//...
});
```
## Config Params
All properties are optional.
| Field | Type | Default Value | Description |
| -------------------- | -------- | -------------- | -------------------------------------------------------------------------------------------------------------------------- |
| `alertTypes` | `array` | `['primary', 'secondary', 'info', 'success', 'warning', 'danger', 'light', 'dark']` | Alert types that can be used in the editor |
| `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
## Output data
| 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` |
```json
{
"type": "alert",
"data": {
"type": "danger",
"align" : "center",
"text": "Holy smokes!
Something seriously bad happened."
}
}
```
## Local Development
- 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.
## Publishing to NPM
- Run `yarn build` to build the production bundle, bump the version in `package.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`.
## License
This project is licensed under the [MIT License](/editorjs-alert/LICENSE).