{"id":13769523,"url":"https://github.com/vishaltelangre/editorjs-alert","last_synced_at":"2026-03-03T03:06:12.641Z","repository":{"id":42745972,"uuid":"281046272","full_name":"vishaltelangre/editorjs-alert","owner":"vishaltelangre","description":"Editor.js tool for adding colorful alerts/callouts","archived":false,"fork":false,"pushed_at":"2023-04-19T12:06:43.000Z","size":198,"stargazers_count":51,"open_issues_count":14,"forks_count":15,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-14T13:05:20.515Z","etag":null,"topics":["alert-tool","codex-editor-alert","editorjs","editorjs-alert","editorjs-callout","editorjs-plugin","editorjs-tool","editorjs-warning"],"latest_commit_sha":null,"homepage":"https://vishaltelangre.github.io/editorjs-alert/examples/demo.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vishaltelangre.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-07-20T07:30:08.000Z","updated_at":"2024-04-13T19:38:30.000Z","dependencies_parsed_at":"2024-01-12T10:25:53.370Z","dependency_job_id":"98d2b071-f2f0-4619-91c3-c1d0f53d2f03","html_url":"https://github.com/vishaltelangre/editorjs-alert","commit_stats":{"total_commits":18,"total_committers":4,"mean_commits":4.5,"dds":"0.16666666666666663","last_synced_commit":"18967b921800f723174c597f2f4ead7138e0653e"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vishaltelangre%2Feditorjs-alert","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vishaltelangre%2Feditorjs-alert/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vishaltelangre%2Feditorjs-alert/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vishaltelangre%2Feditorjs-alert/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vishaltelangre","download_url":"https://codeload.github.com/vishaltelangre/editorjs-alert/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230438185,"owners_count":18225870,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alert-tool","codex-editor-alert","editorjs","editorjs-alert","editorjs-callout","editorjs-plugin","editorjs-tool","editorjs-warning"],"created_at":"2024-08-03T17:00:27.761Z","updated_at":"2026-03-03T03:06:12.614Z","avatar_url":"https://github.com/vishaltelangre.png","language":"JavaScript","funding_links":[],"categories":["Tools"],"sub_categories":["Block Tools"],"readme":"# Editor.js Alert Tool\n\n[![npm](https://img.shields.io/npm/v/editorjs-alert.svg?style=?style=flat\u0026logo=appveyor)](https://www.npmjs.com/package/editorjs-alert) ![Version of EditorJS that the plugin is compatible with](https://badgen.net/badge/Editor.js/v2.0/blue)\n\nProvides Alert blocks for the [Editor.js](https://editorjs.io/).\n\n## Features\n\n- 8 different alert block styes\n- Convert from other blocks into an Alert block\n- Convert an Alert block into other blocks\n\n## How does it look like?\n\nWatch this tool in action in the following short GIF movie.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/876195/87923460-294ee780-ca9b-11ea-8a73-009453d77478.gif\" alt=\"Alert sneak peek GIF!\"\u003e\n\n**Try it out yourself on the [demo page](https://vishaltelangre.github.io/editorjs-alert/examples/demo.html).**\n\n## Installation\n\n### Install via NPM\n\nGet the package\n\n```sh\nnpm i --save editorjs-alert\n```\n\nInclude module at your application\n\n```js\nconst Header = require('editorjs-alert');\n\n// OR\n\nimport Alert from 'editorjs-alert';\n```\n\n### Download to your project's source dir\n\nCopy [`dist/bundle.js`](./dist/bundle.js) file to your page.\n\n### Load from CDN\n\nYou can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/editorjs-alert).\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/editorjs-alert@latest\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nAdd a new Tool `Alert` to the `tools` property of the Editor.js initial config.\n\n```js\nvar editor = EditorJS({\n  // ...\n\n  tools: {\n    // ...\n    alert: Alert,\n  },\n\n  // ...\n});\n```\n\nOr initialize Alert tool with additional optional settings\n\n```js\nvar editor = EditorJS({\n  //...\n\n  tools: {\n    //...\n    alert: {\n      class: Alert,\n      inlineToolbar: true,\n      shortcut: 'CMD+SHIFT+A',\n      config: {\n        alertTypes: ['primary', 'secondary', 'info', 'success', 'warning', 'danger', 'light', 'dark'],\n        defaultType: 'primary',\n        messagePlaceholder: 'Enter something',\n      },\n    },\n  },\n\n  //...\n});\n```\n\n## Config Params\n\nAll properties are optional.\n\n| Field                | Type     | Default Value  | Description                                                                                                                |\n| -------------------- | -------- | -------------- | -------------------------------------------------------------------------------------------------------------------------- |\n| `alertTypes`         | `array`  | `['primary', 'secondary', 'info', 'success', 'warning', 'danger', 'light', 'dark']` | Alert types that can be used in the editor |\n| `defaultType`        | `string` | `info`         | default Alert type (should be either of `primary`, `secondary`, `info`, `success`, `warning`, `danger`, `light` or `dark`) |\n| `defaultAlign`     | `string` | `left`         | default Alert alignment (should be either of `left`, `center` or `right`)                                              |\n| `messagePlaceholder` | `string` | `Type here...` | placeholder to show in Alert`s message\n\n## Output data\n\n| Field   | Type     | Description                                                                                               |\n| ------- | -------- | --------------------------------------------------------------------------------------------------------- |\n| message | `string` | Alert message                                                                                             |\n| type    | `string` | Alert type among one of `primary`, `secondary`, `info`, `success`, `warning`, `danger`, `light` or `dark` |\n| align   | `string` | Align type should be one of `left`, `center` or `right`                                                   |\n\n```json\n{\n  \"type\": \"alert\",\n  \"data\": {\n    \"type\": \"danger\",\n    \"align\" : \"center\",\n    \"text\": \"\u003cstrong\u003eHoly smokes!\u003c/strong\u003e\u003cbr\u003eSomething seriously \u003cem\u003ebad\u003c/em\u003e happened.\"\n  }\n}\n```\n\n## Local Development\n\n- Run `yarn install`.\n- Run `yarn dev` to continuously watch for the changes made in `./src/index.js` and updates a development bundle under `./dist` folder.\n- Open `./examples/development.html` in the browser to verify the tool's functionality.\n\n## Publishing to NPM\n\n- Run `yarn build` to build the production bundle, bump the version in `package.json`.\n- Commit and push the changes.\n- Create a release new tag for the bumped version (e.g. `git tag v1.0.2`).\n- Push the tag using `git push --tags`.\n- Publish the package to NPM using `yarn publish`.\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvishaltelangre%2Feditorjs-alert","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvishaltelangre%2Feditorjs-alert","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvishaltelangre%2Feditorjs-alert/lists"}