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

Replace block tunes HTML with config and update icons

README.md

@@ -118,15 +118,15 @@ actions: [
         name: 'new_button',
         icon: '<svg>...</svg>',
         title: 'New Button',
+        toggle: true,
         action: (name) => {
             alert(`${name} button clicked`);
-            return false;
         }
     }
 ]
 ```
-By adding `return true` or `return false` at the end of your custom actions, you can determine wether the icon in the tool's settings is toggled or not. This is helpfull for actions that do not toggle between states, but execute a different action.
-If toggling is enabled, an `image-tool--[button name]` class will be appended and removed from the container.
+
+**_NOTE:_**  return value of `action` callback for settings whether action button should be toggled or not is *deprecated*. Consider using `toggle` option instead.
 
 ## Output data
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/image",
-  "version": "2.6.2",
+  "version": "2.7.0",
   "keywords": [
     "codex editor",
     "tool",
@@ -43,5 +43,8 @@
     "svg-inline-loader": "^0.8.0",
     "webpack": "^4.29.5",
     "webpack-cli": "^3.2.3"
+  },
+  "dependencies": {
+    "@codexteam/icons": "^0.0.6"
   }
 }

src/index.css

@@ -135,6 +135,17 @@
       }
     }
   }
+
+  .cdx-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      height: auto;
+      margin: 0 6px 0 0;
+    }
+  }
 }
 
 @keyframes image-preloader-spin {

src/index.js

@@ -41,13 +41,13 @@
  * @property {string} file.url — image URL
  */
 
-// eslint-disable-next-line
-import css from './index.css';
+import './index.css';
+
 import Ui from './ui';
-import Tunes from './tunes';
-import ToolboxIcon from './svg/toolbox.svg';
 import Uploader from './uploader';
 
+import { IconAddBorder, IconStretch, IconAddBackground, IconPicture } from '@codexteam/icons';
+
 /**
  * @typedef {object} ImageConfig
  * @description Config supported by Tool
@@ -93,11 +93,39 @@ export default class ImageTool {
    */
   static get toolbox() {
     return {
-      icon: ToolboxIcon,
+      icon: IconPicture,
       title: 'Image',
     };
   }
 
+  /**
+   * Available image tools
+   *
+   * @returns {Array}
+   */
+  static get tunes() {
+    return [
+      {
+        name: 'withBorder',
+        icon: IconAddBorder,
+        title: 'With border',
+        toggle: true,
+      },
+      {
+        name: 'stretched',
+        icon: IconStretch,
+        title: 'Stretch image',
+        toggle: true,
+      },
+      {
+        name: 'withBackground',
+        icon: IconAddBackground,
+        title: 'With background',
+        toggle: true,
+      },
+    ];
+  }
+
   /**
    * @param {object} tool - tool properties got from editor.js
    * @param {ImageToolData} tool.data - previously saved data
@@ -149,15 +177,6 @@ export default class ImageTool {
       readOnly,
     });
 
-    /**
-     * Module for working with tunes
-     */
-    this.tunes = new Tunes({
-      api,
-      actions: this.config.actions,
-      onChange: (tuneName) => this.tuneToggled(tuneName),
-    });
-
     /**
      * Set saved state
      */
@@ -203,14 +222,33 @@ export default class ImageTool {
   }
 
   /**
-   * Makes buttons with tunes: add background, add border, stretch image
+   * Returns configuration for block tunes: add background, add border, stretch image
    *
    * @public
    *
-   * @returns {Element}
+   * @returns {Array}
    */
   renderSettings() {
-    return this.tunes.render(this.data);
+    // Merge default tunes with the ones that might be added by user
+    // @see https://github.com/editor-js/image/pull/49
+    const tunes = ImageTool.tunes.concat(this.config.actions);
+
+    return tunes.map(tune => ({
+      icon: tune.icon,
+      label: this.api.i18n.t(tune.title),
+      name: tune.name,
+      toggle: tune.toggle,
+      isActive: this.data[tune.name],
+      onActivate: () => {
+        /* If it'a user defined tune, execute it's callback stored in action property */
+        if (typeof tune.action === 'function') {
+          tune.action(tune.name);
+
+          return;
+        }
+        this.tuneToggled(tune.name);
+      },
+    }));
   }
 
   /**
@@ -311,7 +349,7 @@ export default class ImageTool {
     this._data.caption = data.caption || '';
     this.ui.fillCaption(this._data.caption);
 
-    Tunes.tunes.forEach(({ name: tune }) => {
+    ImageTool.tunes.forEach(({ name: tune }) => {
       const value = typeof data[tune] !== 'undefined' ? data[tune] === true || data[tune] === 'true' : false;
 
       this.setTune(tune, value);

src/ui.js

@@ -1,4 +1,5 @@
-import buttonIcon from './svg/button-icon.svg';
+import { IconPicture } from '@codexteam/icons';
+import { make } from './utils/dom';
 
 /**
  * Class for working with UI:
@@ -110,7 +111,7 @@ export default class Ui {
   createFileButton() {
     const button = make('div', [ this.CSS.button ]);
 
-    button.innerHTML = this.config.buttonContent || `${buttonIcon} ${this.api.i18n.t('Select an Image')}`;
+    button.innerHTML = this.config.buttonContent || `${IconPicture} ${this.api.i18n.t('Select an Image')}`;
 
     button.addEventListener('click', () => {
       this.onSelectFile();
@@ -250,26 +251,3 @@ export default class Ui {
   }
 }
 
-/**
- * Helper for making Elements with attributes
- *
- * @param  {string} tagName           - new Element tag name
- * @param  {Array|string} classNames  - list or name of CSS class
- * @param  {object} attributes        - any attributes
- * @returns {Element}
- */
-export const make = function make(tagName, classNames = null, attributes = {}) {
-  const el = document.createElement(tagName);
-
-  if (Array.isArray(classNames)) {
-    el.classList.add(...classNames);
-  } else if (classNames) {
-    el.classList.add(classNames);
-  }
-
-  for (const attrName in attributes) {
-    el[attrName] = attributes[attrName];
-  }
-
-  return el;
-};

src/uploader.js

@@ -1,4 +1,5 @@
 import ajax from '@codexteam/ajax';
+import isPromise from './utils/isPromise';
 
 /**
  * Module for file uploading. Handle 3 scenarios:
@@ -176,12 +177,3 @@ export default class Uploader {
   }
 }
 
-/**
- * Check if passed object is a Promise
- *
- * @param  {*}  object - object to check
- * @returns {boolean}
- */
-function isPromise(object) {
-  return object && typeof object.then === "function";
-}

src/utils/dom.js

@@ -0,0 +1,23 @@
+/**
+ * Helper for making Elements with attributes
+ *
+ * @param  {string} tagName           - new Element tag name
+ * @param  {Array|string} classNames  - list or name of CSS class
+ * @param  {object} attributes        - any attributes
+ * @returns {Element}
+ */
+export function make(tagName, classNames = null, attributes = {}) {
+  const el = document.createElement(tagName);
+
+  if (Array.isArray(classNames)) {
+    el.classList.add(...classNames);
+  } else if (classNames) {
+    el.classList.add(classNames);
+  }
+
+  for (const attrName in attributes) {
+    el[attrName] = attributes[attrName];
+  }
+
+  return el;
+};