editor-js · spalz · Sep 15, 2020 · Sep 15, 2020 · Sep 15, 2020 · Sep 15, 2020
diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
 ![](https://badgen.net/badge/CodeX%20Editor/v2.0/blue)
 
-# Warning Tool
+# Success Tool
 
-Provides Warning Block for the [CodeX Editor](https://ifmo.su/editor). Block has title and message. It can be used, for example, for editorials notifications or appeals.
+Provides Success Block for the [CodeX Editor](https://ifmo.su/editor). Block has title and message. It can be used, for example, for editorials notifications or appeals.
 
 ![](https://capella.pics/2d7b7bc1-ac46-4020-89c9-390d1a7297e2.jpg)
 
@@ -13,13 +13,13 @@ Provides Warning Block for the [CodeX Editor](https://ifmo.su/editor). Block has
 Get the package
 
 ```shell
-npm i --save-dev @editorjs/warning
+npm i --save-dev @editorjs/success
 ```
 
 Include module at your application
 
 ```javascript
-const Warning = require('@editorjs/warning');
+const Success = require('@editorjs/success');
 ```
 
 ### Download to your project's source dir
@@ -29,9 +29,9 @@ const Warning = require('@editorjs/warning');
 
 ### Load from CDN
 
-You can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@editorjs/warning).
+You can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@editorjs/success).
 
-`https://cdn.jsdelivr.net/npm/@editorjs/warning@latest`
+`https://cdn.jsdelivr.net/npm/@editorjs/success@latest`
 
 Then require this script on page with CodeX Editor.
 
@@ -49,23 +49,23 @@ var editor = CodexEditor({
 
   tools: {
     ...
-    warning: Warning,
+    success: Success,
   },
 
   ...
 });
 ```
 
-Or init Warning Tool with additional settings
+Or init Success Tool with additional settings
 
 ```javascript
 var editor = CodexEditor({
   ...
 
   tools: {
     ...
-    warning: {
-      class: Warning,
+    success: {
+      class: Success,
       inlineToolbar: true,
       shortcut: 'CMD+SHIFT+W',
       config: {
@@ -83,19 +83,19 @@ var editor = CodexEditor({
 
 | Field              | Type     | Description                       |
 | ------------------ | -------- | ----------------------------------|
-| titlePlaceholder   | `string` | Warning Tool's title placeholder  |
-| messagePlaceholder | `string` | Warning Tool's message placeholder|
+| titlePlaceholder   | `string` | Success Tool's title placeholder  |
+| messagePlaceholder | `string` | Success Tool's message placeholder|
 
 ## Output data
 
 | Field     | Type     | Description      |
 | --------- | -------- | -----------------|
-| title     | `string` | warning's title  |
-| message   | `string` | warning's message|
+| title     | `string` | Success's title  |
+| message   | `string` | Success's message|
 
 ```json
 {
-    "type" : "warning",
+    "type" : "success",
     "data" : {
         "title" : "Note:",
         "message" : "Avoid using this method just for lulz. It can be very dangerous opposite your daily fun stuff."

diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/package.json b/package.json
@@ -1,17 +1,17 @@
 {
-  "name": "@editorjs/warning",
+  "name": "@editorjs/success",
   "version": "1.1.1",
   "keywords": [
     "codex editor",
     "tool",
-    "warning",
+    "success",
     "editorjs",
     "editor.js",
     "editor"
   ],
-  "description": "Warning Tool for Editor.js",
+  "description": "Success Tool for Editor.js",
   "license": "MIT",
-  "repository": "https://github.com/editor-js/warning",
+  "repository": "https://github.com/editor-js/success",
   "main": "./dist/bundle.js",
   "scripts": {
     "build": "webpack --mode production",

diff --git a/src/index.css b/src/index.css
@@ -1,27 +1,26 @@
-.cdx-warning {
+.cdx-success {
   position: relative;
 }
 
-.cdx-warning [contentEditable=true][data-placeholder]::before{
+.cdx-success [contentEditable=true][data-placeholder]::before {
   position: absolute;
   content: attr(data-placeholder);
   color: #707684;
   font-weight: normal;
   opacity: 0;
 }
 
-.cdx-warning [contentEditable=true][data-placeholder]:empty::before {
+.cdx-success [contentEditable=true][data-placeholder]:empty::before {
   opacity: 1;
 }
 
-.cdx-warning [contentEditable=true][data-placeholder]:empty:focus::before {
+.cdx-success [contentEditable=true][data-placeholder]:empty:focus::before {
   opacity: 0;
 }
 
-
-.cdx-warning::before {
+.cdx-success::before {
   content: '';
-  background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 320 294' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath fill='%237B7E89' d='M160.5 97c12.426 0 22.5 10.074 22.5 22.5v28c0 12.426-10.074 22.5-22.5 22.5S138 159.926 138 147.5v-28c0-12.426 10.074-22.5 22.5-22.5zm0 83c14.636 0 26.5 11.864 26.5 26.5S175.136 233 160.5 233 134 221.136 134 206.5s11.864-26.5 26.5-26.5zm-.02-135c-6.102 0-14.05 8.427-23.842 25.28l-74.73 127.605c-12.713 21.444-17.806 35.025-15.28 40.742 2.527 5.717 8.519 9.175 17.974 10.373h197.255c5.932-1.214 10.051-4.671 12.357-10.373 2.307-5.702-1.812-16.903-12.357-33.603L184.555 70.281C174.608 53.427 166.583 45 160.48 45zm154.61 165.418c2.216 6.027 3.735 11.967 4.393 18.103.963 8.977.067 18.035-3.552 26.98-7.933 19.612-24.283 33.336-45.054 37.586l-4.464.913H61.763l-2.817-.357c-10.267-1.3-19.764-4.163-28.422-9.16-11.051-6.377-19.82-15.823-25.055-27.664-4.432-10.03-5.235-19.952-3.914-29.887.821-6.175 2.486-12.239 4.864-18.58 3.616-9.64 9.159-20.55 16.718-33.309L97.77 47.603c6.469-11.125 12.743-20.061 19.436-27.158 4.62-4.899 9.562-9.07 15.206-12.456C140.712 3.01 150.091 0 160.481 0c10.358 0 19.703 2.99 27.989 7.933 5.625 3.356 10.563 7.492 15.193 12.354 6.735 7.072 13.08 15.997 19.645 27.12l.142.24 76.986 134.194c6.553 10.46 11.425 19.799 14.654 28.577z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 10 10'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Crect width='10' height='10' transform='translate(919 911)' fill='none'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(-919 -911)' clip-path='url(%23a)'%3E%3Cg transform='translate(928.426 920.427)'%3E%3Ccircle cx='4.243' cy='4.243' r='4.243' transform='translate(-10.426 -4.427) rotate(-45)' fill='none' stroke='%23707684' stroke-miterlimit='10' stroke-width='1.2'/%3E%3Cpath d='M21,25.989,22.27,27.26,24.534,25' transform='translate(-26.98 -30.413)' fill='none' stroke='%23707684' stroke-miterlimit='10' stroke-width='1.2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
   width: 18px;
   height: 18px;
   background-size: 18px 18px;
@@ -31,15 +30,17 @@
 }
 
 @media all and (max-width: 735px) {
-  .cdx-warning::before {
+  .cdx-success::before {
     display: none;
   }
 }
 
-.cdx-warning__message {
+.cdx-success__message {
   min-height: 85px;
+  line-height: 1.6;
 }
 
-.cdx-warning__title {
+.cdx-success__title {
   margin-bottom: 6px;
-}
+  line-height: 1.6;
+}
diff --git a/src/index.js b/src/index.js
@@ -9,22 +9,22 @@ require('./index.css').toString();
 import ToolboxIcon from './svg/toolbox.svg';
 
 /**
- * @class Warning
- * @classdesc Warning Tool for Editor.js
- * @property {WarningData} data - Warning Tool`s input and output data
+ * @class Success
+ * @classdesc Success Tool for Editor.js
+ * @property {SuccessData} data - Success Tool`s input and output data
  * @property {object} api - Editor.js API instance
  *
- * @typedef {object} WarningData
- * @description Warning Tool`s input and output data
- * @property {string} title - warning`s title
- * @property {string} message - warning`s message
+ * @typedef {object} SuccessData
+ * @description Success Tool`s input and output data
+ * @property {string} title - success`s title
+ * @property {string} message - success`s message
  *
- * @typedef {object} WarningConfig
- * @description Warning Tool`s initial configuration
- * @property {string} titlePlaceholder - placeholder to show in warning`s title input
- * @property {string} messagePlaceholder - placeholder to show in warning`s message input
+ * @typedef {object} SuccessConfig
+ * @description Success Tool`s initial configuration
+ * @property {string} titlePlaceholder - placeholder to show in success`s title input
+ * @property {string} messagePlaceholder - placeholder to show in success`s message input
  */
-export default class Warning {
+export default class Success {
   /**
    * Get Toolbox settings
    *
@@ -34,12 +34,12 @@ export default class Warning {
   static get toolbox() {
       return {
         icon: ToolboxIcon,
-        title: 'Warning'
+        title: 'Success'
       };
   }
 
   /**
-   * Allow to press Enter inside the Warning
+   * Allow to press Enter inside the Success
    * @public
    * @returns {boolean}
    */
@@ -48,7 +48,7 @@ export default class Warning {
   }
 
   /**
-   * Default placeholder for warning title
+   * Default placeholder for success title
    *
    * @public
    * @returns {string}
@@ -58,7 +58,7 @@ export default class Warning {
   }
 
   /**
-   * Default placeholder for warning message
+   * Default placeholder for success message
    *
    * @public
    * @returns {string}
@@ -68,32 +68,32 @@ export default class Warning {
   }
 
   /**
-   * Warning Tool`s styles
+   * Success Tool`s styles
    *
    * @returns {Object}
    */
   get CSS() {
     return {
       baseClass: this.api.styles.block,
-      wrapper: 'cdx-warning',
-      title: 'cdx-warning__title',
+      wrapper: 'cdx-success',
+      title: 'cdx-success__title',
       input: this.api.styles.input,
-      message: 'cdx-warning__message'
+      message: 'cdx-success__message'
     };
   }
 
   /**
    * Render plugin`s main Element and fill it with saved data
    *
-   * @param {WarningData} data — previously saved data
-   * @param {WarningConfig} config — user config for Tool
+   * @param {SuccessData} data — previously saved data
+   * @param {SuccessConfig} config — user config for Tool
    * @param {Object} api - Editor.js API
    */
   constructor({data, config, api}) {
     this.api = api;
 
-    this.titlePlaceholder = config.titlePlaceholder || Warning.DEFAULT_TITLE_PLACEHOLDER;
-    this.messagePlaceholder = config.messagePlaceholder || Warning.DEFAULT_MESSAGE_PLACEHOLDER;
+    this.titlePlaceholder = config.titlePlaceholder || Success.DEFAULT_TITLE_PLACEHOLDER;
+    this.messagePlaceholder = config.messagePlaceholder || Success.DEFAULT_MESSAGE_PLACEHOLDER;
 
     this.data = {
       title: data.title || '',
@@ -102,7 +102,7 @@ export default class Warning {
   }
 
   /**
-   * Create Warning Tool container with inputs
+   * Create Success Tool container with inputs
    *
    * @returns {Element}
    */
@@ -127,14 +127,14 @@ export default class Warning {
   }
 
   /**
-   * Extract Warning data from Warning Tool element
+   * Extract Success data from Success Tool element
    *
-   * @param {HTMLDivElement} warningElement - element to save
-   * @returns {WarningData}
+   * @param {HTMLDivElement} successElement - element to save
+   * @returns {SuccessData}
    */
-  save(warningElement) {
-    const title = warningElement.querySelector(`.${this.CSS.title}`);
-    const message = warningElement.querySelector(`.${this.CSS.message}`);
+  save(successElement) {
+    const title = successElement.querySelector(`.${this.CSS.title}`);
+    const message = successElement.querySelector(`.${this.CSS.message}`);
 
     return Object.assign(this.data, {
       title: title.innerHTML,
@@ -167,7 +167,7 @@ export default class Warning {
   }
 
   /**
-   * Sanitizer config for Warning Tool saved data
+   * Sanitizer config for Success Tool saved data
    * @return {Object}
    */
    static get sanitize() {

diff --git a/src/svg/toolbox.svg b/src/svg/toolbox.svg