Merge pull request #76 from editor-js/update-tunes

Update tunes config and icons
editor-js · Nov 29, 2022 · f0e9f01 · f0e9f01
2 parents 58b5dc7 + 1dfbe77
commit f0e9f01
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 51 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/list",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "keywords": [
     "codex editor",
     "list",
@@ -31,5 +31,8 @@
     "style-loader": "^1.2.1",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11"
+  },
+  "dependencies": {
+    "@codexteam/icons": "^0.0.4"
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -1,15 +1,17 @@
 /**
  * Build styles
  */
-require('./index.css').toString();
+import './index.css';
+
+import { IconListBulleted, IconListNumbered } from '@codexteam/icons'
 
 /**
  * @typedef {object} ListData
  * @property {string} style - can be ordered or unordered
  * @property {Array} items - li elements
  */
 
- /**
+/**
  * @typedef {object} ListConfig
  * @description Tool's config from Editor
  * @property {string} defaultStyle — ordered or unordered
@@ -18,8 +20,7 @@ require('./index.css').toString();
 /**
  * List Tool for the Editor.js 2.0
  */
-class List {
-
+export default class List {
   /**
    * Notify core that read-only mode is supported
    *
@@ -48,7 +49,7 @@ class List {
    */
   static get toolbox() {
     return {
-      icon: '<svg width="17" height="13" viewBox="0 0 17 13" xmlns="http://www.w3.org/2000/svg"> <path d="M5.625 4.85h9.25a1.125 1.125 0 0 1 0 2.25h-9.25a1.125 1.125 0 0 1 0-2.25zm0-4.85h9.25a1.125 1.125 0 0 1 0 2.25h-9.25a1.125 1.125 0 0 1 0-2.25zm0 9.85h9.25a1.125 1.125 0 0 1 0 2.25h-9.25a1.125 1.125 0 0 1 0-2.25zm-4.5-5a1.125 1.125 0 1 1 0 2.25 1.125 1.125 0 0 1 0-2.25zm0-4.85a1.125 1.125 0 1 1 0 2.25 1.125 1.125 0 0 1 0-2.25zm0 9.85a1.125 1.125 0 1 1 0 2.25 1.125 1.125 0 0 1 0-2.25z"/></svg>',
+      icon: IconListBulleted,
       title: 'List',
     };
   }
@@ -78,14 +79,14 @@ class List {
     this.settings = [
       {
         name: 'unordered',
-        title: this.api.i18n.t('Unordered'),
-        icon: '<svg width="17" height="13" viewBox="0 0 17 13" xmlns="http://www.w3.org/2000/svg"> <path d="M5.625 4.85h9.25a1.125 1.125 0 0 1 0 2.25h-9.25a1.125 1.125 0 0 1 0-2.25zm0-4.85h9.25a1.125 1.125 0 0 1 0 2.25h-9.25a1.125 1.125 0 0 1 0-2.25zm0 9.85h9.25a1.125 1.125 0 0 1 0 2.25h-9.25a1.125 1.125 0 0 1 0-2.25zm-4.5-5a1.125 1.125 0 1 1 0 2.25 1.125 1.125 0 0 1 0-2.25zm0-4.85a1.125 1.125 0 1 1 0 2.25 1.125 1.125 0 0 1 0-2.25zm0 9.85a1.125 1.125 0 1 1 0 2.25 1.125 1.125 0 0 1 0-2.25z"/></svg>',
+        label: this.api.i18n.t('Unordered'),
+        icon: IconListBulleted,
         default: config.defaultStyle === 'unordered' || false,
       },
       {
         name: 'ordered',
-        title: this.api.i18n.t('Ordered'),
-        icon: '<svg width="17" height="13" viewBox="0 0 17 13" xmlns="http://www.w3.org/2000/svg"><path d="M5.819 4.607h9.362a1.069 1.069 0 0 1 0 2.138H5.82a1.069 1.069 0 1 1 0-2.138zm0-4.607h9.362a1.069 1.069 0 0 1 0 2.138H5.82a1.069 1.069 0 1 1 0-2.138zm0 9.357h9.362a1.069 1.069 0 0 1 0 2.138H5.82a1.069 1.069 0 0 1 0-2.137zM1.468 4.155V1.33c-.554.404-.926.606-1.118.606a.338.338 0 0 1-.244-.104A.327.327 0 0 1 0 1.59c0-.107.035-.184.105-.234.07-.05.192-.114.369-.192.264-.118.475-.243.633-.373.158-.13.298-.276.42-.438a3.94 3.94 0 0 1 .238-.298C1.802.019 1.872 0 1.975 0c.115 0 .208.042.277.127.07.085.105.202.105.351v3.556c0 .416-.15.624-.448.624a.421.421 0 0 1-.32-.127c-.08-.085-.121-.21-.121-.376zm-.283 6.664h1.572c.156 0 .275.03.358.091a.294.294 0 0 1 .123.25.323.323 0 0 1-.098.238c-.065.065-.164.097-.296.097H.629a.494.494 0 0 1-.353-.119.372.372 0 0 1-.126-.28c0-.068.027-.16.081-.273a.977.977 0 0 1 .178-.268c.267-.264.507-.49.722-.678.215-.188.368-.312.46-.371.165-.11.302-.222.412-.334.109-.112.192-.226.25-.344a.786.786 0 0 0 .085-.345.6.6 0 0 0-.341-.553.75.75 0 0 0-.345-.08c-.263 0-.47.11-.62.329-.02.029-.054.107-.101.235a.966.966 0 0 1-.16.295c-.059.069-.145.103-.26.103a.348.348 0 0 1-.25-.094.34.34 0 0 1-.099-.258c0-.132.031-.27.093-.413.063-.143.155-.273.279-.39.123-.116.28-.21.47-.282.189-.072.411-.107.666-.107.307 0 .569.045.786.137a1.182 1.182 0 0 1 .618.623 1.18 1.18 0 0 1-.096 1.083 2.03 2.03 0 0 1-.378.457c-.128.11-.344.282-.646.517-.302.235-.509.417-.621.547a1.637 1.637 0 0 0-.148.187z"/></svg>',
+        label: this.api.i18n.t('Ordered'),
+        icon: IconListNumbered,
         default: config.defaultStyle === 'ordered' || true,
       },
     ];
@@ -199,43 +200,15 @@ class List {
    * Settings
    *
    * @public
-   * @returns {Element}
+   * @returns {Array}
    */
   renderSettings() {
-    const wrapper = this._make('div', [ this.CSS.settingsWrapper ], {});
-
-    this.settings.forEach((item) => {
-      const itemEl = this._make('div', this.CSS.settingsButton, {
-        innerHTML: item.icon,
-      });
-
-      itemEl.addEventListener('click', () => {
-        this.toggleTune(item.name);
-
-        // clear other buttons
-        const buttons = itemEl.parentNode.querySelectorAll('.' + this.CSS.settingsButton);
-
-        Array.from(buttons).forEach((button) =>
-          button.classList.remove(this.CSS.settingsButtonActive)
-        );
-
-        // mark active
-        itemEl.classList.toggle(this.CSS.settingsButtonActive);
-      });
-
-      this.api.tooltip.onHover(itemEl, item.title, {
-        placement: 'top',
-        hidingDelay: 500,
-      });
-
-      if (this._data.style === item.name) {
-        itemEl.classList.add(this.CSS.settingsButtonActive);
-      }
-
-      wrapper.appendChild(itemEl);
-    });
-
-    return wrapper;
+    return this.settings.map(item => ({
+      ...item,
+      isActive: this._data.style === item.name,
+      closeOnActivate: true,
+      onActivate: () => this.toggleTune(item.name)
+    }))
   }
 
   /**
@@ -266,7 +239,7 @@ class List {
    * @param {string} style - 'ordered' or 'unordered'
    * @returns {HTMLOListElement|HTMLUListElement}
    */
-  makeMainTag(style){
+  makeMainTag(style) {
     const styleClass = style === 'ordered' ? this.CSS.wrapperOrdered : this.CSS.wrapperUnordered;
     const tag = style === 'ordered' ? 'ol' : 'ul';
 
@@ -304,9 +277,6 @@ class List {
       wrapperOrdered: 'cdx-list--ordered',
       wrapperUnordered: 'cdx-list--unordered',
       item: 'cdx-list__item',
-      settingsWrapper: 'cdx-list-settings',
-      settingsButton: this.api.styles.settingsButton,
-      settingsButtonActive: this.api.styles.settingsButtonActive,
     };
   }
 
@@ -498,4 +468,3 @@ class List {
   }
 }
 
-module.exports = List;
diff --git a/webpack.config.js b/webpack.config.js
@@ -37,6 +37,7 @@ module.exports = {
     publicPath: '/',
     filename: 'bundle.js',
     library: 'List',
-    libraryTarget: 'umd'
+    libraryTarget: 'umd',
+    libraryExport: 'default',
   }
 };
diff --git a/yarn.lock b/yarn.lock
@@ -701,6 +701,11 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@codexteam/icons@^0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@codexteam/icons/-/icons-0.0.4.tgz#8b72dcd3f3a1b0d880bdceb2abebd74b46d3ae13"
+  integrity sha512-V8N/TY2TGyas4wLrPIFq7bcow68b3gu8DfDt1+rrHPtXxcexadKauRJL6eQgfG7Z0LCrN4boLRawR4S9gjIh/Q==
+
 "@types/json-schema@^7.0.4":
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.4.tgz#38fd73ddfd9b55abb1e1b2ed578cb55bd7b7d339"