Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vishaltelangre/editorjs-alert
Editor.js tool for adding colorful alerts/callouts
https://github.com/vishaltelangre/editorjs-alert
alert-tool codex-editor-alert editorjs editorjs-alert editorjs-callout editorjs-plugin editorjs-tool editorjs-warning
Last synced: about 1 month ago
JSON representation
Editor.js tool for adding colorful alerts/callouts
- Host: GitHub
- URL: https://github.com/vishaltelangre/editorjs-alert
- Owner: vishaltelangre
- License: mit
- Created: 2020-07-20T07:30:08.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-04-19T12:06:43.000Z (over 1 year ago)
- Last Synced: 2024-04-14T13:05:20.515Z (8 months ago)
- Topics: alert-tool, codex-editor-alert, editorjs, editorjs-alert, editorjs-callout, editorjs-plugin, editorjs-tool, editorjs-warning
- Language: JavaScript
- Homepage: https://vishaltelangre.github.io/editorjs-alert/examples/demo.html
- Size: 193 KB
- Stars: 51
- Watchers: 5
- Forks: 15
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-editorjs - editorjs-alert - tool for adding colorful alert messages (Tools / Block Tools)
README
# Editor.js Alert Tool
[](https://www.npmjs.com/package/editorjs-alert) 
Provides Alert blocks for the [Editor.js](https://editorjs.io/).
## 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`](./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](LICENSE).