{"_id":"@7polo/editorjs-alert","name":"@7polo/editorjs-alert","dist-tags":{"latest":"1.1.3"},"versions":{"1.1.3":{"name":"@7polo/editorjs-alert","version":"1.1.3","description":"Editor.js tool for adding colorful alerts","main":"./dist/bundle.js","scripts":{"build":"webpack --mode production","dev":"webpack --mode development --watch","precommit":"yarn build && git add dist && lint-staged"},"husky":{"hooks":{"pre-commit":"yarn precommit"}},"lint-staged":{"**/*.{html,css,js}":["prettier --write"]},"repository":{"type":"git","url":"git+https://github.com/7polo/editorjs-alert.git"},"keywords":["editorjs","editor.js","editorjs tool","codex","codex editor","codex.editor","alert","info message","note"],"author":{"name":"Vishal Telangre"},"license":"MIT","bugs":{"url":"https://github.com/7polo/editorjs-alert/issues"},"homepage":"https://github.com/7polo/editorjs-alert","devDependencies":{"@babel/core":"^7.21.3","@babel/preset-env":"^7.20.2","babel-loader":"9.1.2","css-loader":"^6.7.3","husky":"^8.0.3","lint-staged":"^13.2.0","prettier":"2.8.4","sass":"^1.59.3","sass-loader":"^13.2.1","style-loader":"^3.3.2","svg-inline-loader":"^0.8.2","webpack":"^5.76.2","webpack-cli":"^5.0.1"},"_id":"@7polo/editorjs-alert@1.1.3","gitHead":"18967b921800f723174c597f2f4ead7138e0653e","_nodeVersion":"20.12.2","_npmVersion":"10.5.0","dist":{"integrity":"sha512-gSb0Q5WtNoZA5WHQ+EpGohS5asRxry1aEAvxZlAI5SBwlQoIiIbgNE0+NkadCVcFNwkLNIopZyRuC2RL45N9QQ==","shasum":"d08ce6ae10fc628d41715440b360294800126114","tarball":"https://registry.npmjs.org/@7polo/editorjs-alert/-/editorjs-alert-1.1.3.tgz","fileCount":23,"unpackedSize":49438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFOqjzw6YdzBFkme3mlHE+hVapYnTe4bBJ3Dts02wzm1AiBtydD4nNAyue9/Zk7a0UbDKiw/EBSOqG+ZHp4oDx3Czg=="}]},"_npmUser":{"name":"7polo","email":"apologizebao@163.com"},"directories":{},"maintainers":[{"name":"7polo","email":"apologizebao@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/editorjs-alert_1.1.3_1713883442873_0.6169215465016646"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-23T14:44:02.734Z","1.1.3":"2024-04-23T14:44:03.054Z","modified":"2024-04-23T14:44:03.504Z"},"maintainers":[{"name":"7polo","email":"apologizebao@163.com"}],"description":"Editor.js tool for adding colorful alerts","homepage":"https://github.com/7polo/editorjs-alert","keywords":["editorjs","editor.js","editorjs tool","codex","codex editor","codex.editor","alert","info message","note"],"repository":{"type":"git","url":"git+https://github.com/7polo/editorjs-alert.git"},"author":{"name":"Vishal Telangre"},"bugs":{"url":"https://github.com/7polo/editorjs-alert/issues"},"license":"MIT","readme":"# Editor.js Alert Tool\n\n[![npm](https://img.shields.io/npm/v/editorjs-alert.svg?style=?style=flat&logo=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<p align=\"center\">\n  <img src=\"https://user-images.githubusercontent.com/876195/87923460-294ee780-ca9b-11ea-8a73-009453d77478.gif\" alt=\"Alert sneak peek GIF!\">\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 @7polo/editorjs-alert\n```\n\nInclude module at your application\n\n```js\nconst Header = require('@7polo/editorjs-alert');\n\n// OR\n\nimport Alert from '@7polo/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<script src=\"https://cdn.jsdelivr.net/npm/editorjs-alert@latest\"></script>\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        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| `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\": \"<strong>Holy smokes!</strong><br>Something seriously <em>bad</em> 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","readmeFilename":"README.md"}