feat(icons): codex icons package is used instead of svg sprite (codex-team#2173)

* chore(icons): migrating to the coded icon pack

* conversion toolbar

* inline toolbar, part 1

* inline-link tool has the new icons

* added a test for creating a link by Enter keydown in link input

* rm last icons, svg sprite, loaders

* rollback .ce-settings styles

* Update CHANGELOG.md

* Update settings.json

Author: neSpecc

.vscode/settings.json

@@ -2,6 +2,7 @@
     "cSpell.words": [
       "Behaviour",
       "cacheable",
+      "childs",
       "codexteam",
       "colspan",
       "contenteditable",
@@ -11,6 +12,7 @@
       "editorjs",
       "entrypoints",
       "Flippable",
+      "GRAMMARLY",
       "hsablonniere",
       "intellij",
       "keydowns",

docs/CHANGELOG.md

@@ -6,6 +6,7 @@
 - `New` — *UI* — Block Tunes became vertical just like the Toolbox 🤩
 - `New` — *Block Tunes API* — Now `render()` method of a Block Tune can return config with just icon, label and callback instead of custom HTML. This impovement is a key to the new straightforward way of configuring tune's appearance in Block Tunes menu.
 - `New` — *Tools API* — As well as `render()` in `Tunes API`, Tool's `renderSettings()` now also supports new configuration format.
+- `New` — *UI* — Meet the new icons from [CodeX Icons](https://github.com/codex-team/icons) pack 🛍 💝
 - `Deprecated` — *Styles API* — CSS classes `.cdx-settings-button` and `.cdx-settings-button--active` are not recommended to use. Consider configuring your block settings with new JSON API instead.
 - `Fix` — Wrong element not highlighted anymore when popover opened.
 - `Fix` — When Tunes Menu open keydown events can not be handled inside plugins.

package.json

@@ -13,15 +13,14 @@
   ],
   "scripts": {
     "clear": "rimraf dist && mkdirp dist",
-    "build": "yarn clear && yarn svg && yarn build:webpack:prod",
-    "build:dev": "yarn clear && yarn svg && yarn build:webpack:dev",
+    "build": "yarn clear && yarn build:webpack:prod",
+    "build:dev": "yarn clear && yarn build:webpack:dev",
     "build:webpack:dev": "webpack --mode development --progress --display-error-details --display-entrypoints --watch",
     "build:webpack:prod": "webpack --mode production",
     "lint": "eslint src/ --ext .ts && yarn lint:tests",
     "lint:errors": "eslint src/ --ext .ts --quiet",
     "lint:fix": "eslint src/ --ext .ts --fix",
     "lint:tests": "eslint test/ --ext .ts",
-    "svg": "svg-sprite-generate -d src/assets/ -o dist/sprite.svg",
     "ci:pull_paragraph": "git submodule update --init ./src/tools/paragraph",
     "pull_tools": "git submodule update --init --recursive",
     "_tools:checkout": "git submodule foreach \"git checkout master || git checkout main\"",
@@ -73,7 +72,6 @@
     "eslint-plugin-chai-friendly": "^0.7.2",
     "eslint-plugin-cypress": "^2.12.1",
     "extract-text-webpack-plugin": "^3.0.2",
-    "html-janitor": "^2.0.4",
     "license-webpack-plugin": "^2.1.4",
     "mkdirp": "^1.0.4",
     "postcss-apply": "^0.12.0",
@@ -82,10 +80,8 @@
     "postcss-nested": "^4.1.2",
     "postcss-nested-ancestors": "^2.0.0",
     "postcss-preset-env": "^6.6.0",
-    "raw-loader": "^4.0.1",
     "rimraf": "^3.0.2",
     "stylelint": "^13.3.3",
-    "svg-sprite-generator": "^0.0.7",
     "terser-webpack-plugin": "^2.3.6",
     "ts-loader": "^7.0.1",
     "tslint": "^6.1.1",
@@ -98,8 +94,10 @@
     "url": "https://opencollective.com/editorjs"
   },
   "dependencies": {
+    "@codexteam/icons": "^0.0.4",
     "codex-notifier": "^1.1.2",
     "codex-tooltip": "^1.0.5",
+    "html-janitor": "^2.0.4",
     "nanoid": "^3.1.22"
   }
 }

src/assets/arrow-down.svg

@@ -4,7 +4,7 @@
  * @copyright <CodeX Team> 2018
  */
 import { API, BlockTune, PopoverItem } from '../../../types';
-import $ from '../dom';
+import { IconCross } from '@codexteam/icons';
 
 /**
  *
@@ -36,8 +36,7 @@ export default class DeleteTune implements BlockTune {
    */
   public render(): PopoverItem {
     return {
-      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-      icon: $.svg('cross', 14, 14).outerHTML,
+      icon: IconCross,
       label: this.api.i18n.t('Delete'),
       name: 'delete',
       confirmation: {

src/assets/arrow-up.svg

@@ -4,9 +4,10 @@
  * @copyright <CodeX Team> 2018
  */
 
-import $ from '../dom';
 import { API, BlockTune, PopoverItem } from '../../../types';
 import Popover from '../utils/popover';
+import { IconChevronDown } from '@codexteam/icons';
+
 
 /**
  *
@@ -45,8 +46,7 @@ export default class MoveDownTune implements BlockTune {
    */
   public render(): PopoverItem {
     return {
-      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-      icon: $.svg('arrow-down', 14, 14).outerHTML,
+      icon: IconChevronDown,
       label: this.api.i18n.t('Move down'),
       onActivate: (item, event): void => this.handleClick(event),
       name: 'move-down',

src/assets/bold.svg

@@ -3,9 +3,9 @@
  * @classdesc Editor's default tune that moves up selected block
  * @copyright <CodeX Team> 2018
  */
-import $ from '../dom';
 import { API, BlockTune, PopoverItem } from '../../../types';
 import Popover from '../../components/utils/popover';
+import { IconChevronUp } from '@codexteam/icons';
 
 /**
  *
@@ -44,8 +44,7 @@ export default class MoveUpTune implements BlockTune {
    */
   public render(): PopoverItem {
     return {
-      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-      icon: $.svg('arrow-up', 14, 14).outerHTML,
+      icon: IconChevronUp,
       label: this.api.i18n.t('Move up'),
       onActivate: (item, e): void => this.handleClick(e),
       name: 'move-up',

src/assets/cross.svg

@@ -45,10 +45,10 @@ export default class Dom {
   }
 
   /**
-   * Helper for making Elements with classname and attributes
+   * Helper for making Elements with class name and attributes
    *
    * @param  {string} tagName - new Element tag name
-   * @param  {string[]|string} [classNames] - list or name of CSS classname(s)
+   * @param  {string[]|string} [classNames] - list or name of CSS class name(s)
    * @param  {object} [attributes] - any attributes
    * @returns {HTMLElement}
    */
@@ -80,25 +80,6 @@ export default class Dom {
     return document.createTextNode(content);
   }
 
-  /**
-   * Creates SVG icon linked to the sprite
-   *
-   * @param {string} name - name (id) of icon from sprite
-   * @param {number} [width] - icon width
-   * @param {number} [height] - icon height
-   * @returns {SVGElement}
-   */
-  public static svg(name: string, width = 14, height = 14): SVGElement {
-    const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-
-    icon.classList.add('icon', 'icon--' + name);
-    icon.setAttribute('width', width + 'px');
-    icon.setAttribute('height', height + 'px');
-    icon.innerHTML = `<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#${name}"></use>`;
-
-    return icon;
-  }
-
   /**
    * Append one or several elements to the parent
    *
@@ -202,7 +183,7 @@ export default class Dom {
   }
 
   /**
-   * Find all contendeditable, textarea and editable input elements passed holder contains
+   * Find all contenteditable, textarea and editable input elements passed holder contains
    *
    * @param holder - element where to find inputs
    */

src/assets/dots.svg

@@ -1,5 +1,5 @@
-import $ from '../dom';
 import { InlineTool, SanitizerConfig } from '../../../types';
+import { IconBold } from '@codexteam/icons';
 
 /**
  * Bold Tool
@@ -61,8 +61,7 @@ export default class BoldInlineTool implements InlineTool {
     this.nodes.button = document.createElement('button') as HTMLButtonElement;
     this.nodes.button.type = 'button';
     this.nodes.button.classList.add(this.CSS.button, this.CSS.buttonModifier);
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    this.nodes.button.appendChild($.svg('bold', 12, 14));
+    this.nodes.button.innerHTML = IconBold;
 
     return this.nodes.button;
   }

src/assets/italic.svg

@@ -1,5 +1,5 @@
-import $ from '../dom';
 import { InlineTool, SanitizerConfig } from '../../../types';
+import { IconItalic } from '@codexteam/icons';
 
 /**
  * Italic Tool
@@ -61,8 +61,7 @@ export default class ItalicInlineTool implements InlineTool {
     this.nodes.button = document.createElement('button') as HTMLButtonElement;
     this.nodes.button.type = 'button';
     this.nodes.button.classList.add(this.CSS.button, this.CSS.buttonModifier);
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    this.nodes.button.appendChild($.svg('italic', 4, 11));
+    this.nodes.button.innerHTML = IconItalic;
 
     return this.nodes.button;
   }

src/assets/link.svg

@@ -1,9 +1,8 @@
 import SelectionUtils from '../selection';
-
-import $ from '../dom';
 import * as _ from '../utils';
-import { API, InlineTool, SanitizerConfig } from '../../../types';
+import { InlineTool, SanitizerConfig, API } from '../../../types';
 import { Notifier, Toolbar, I18n, InlineToolbar } from '../../../types/api';
+import { IconLink, IconUnlink } from '@codexteam/icons';
 
 /**
  * Link Tool
@@ -123,10 +122,8 @@ export default class LinkInlineTool implements InlineTool {
     this.nodes.button = document.createElement('button') as HTMLButtonElement;
     this.nodes.button.type = 'button';
     this.nodes.button.classList.add(this.CSS.button, this.CSS.buttonModifier);
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    this.nodes.button.appendChild($.svg('link', 14, 10));
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    this.nodes.button.appendChild($.svg('unlink', 15, 11));
+
+    this.nodes.button.innerHTML = IconLink;
 
     return this.nodes.button;
   }
@@ -194,6 +191,7 @@ export default class LinkInlineTool implements InlineTool {
     const anchorTag = this.selection.findParentTag('A');
 
     if (anchorTag) {
+      this.nodes.button.innerHTML = IconUnlink;
       this.nodes.button.classList.add(this.CSS.buttonUnlink);
       this.nodes.button.classList.add(this.CSS.buttonActive);
       this.openActions();
@@ -207,6 +205,7 @@ export default class LinkInlineTool implements InlineTool {
 
       this.selection.save();
     } else {
+      this.nodes.button.innerHTML = IconLink;
       this.nodes.button.classList.remove(this.CSS.buttonUnlink);
       this.nodes.button.classList.remove(this.CSS.buttonActive);
     }

src/assets/plus.svg

@@ -8,6 +8,7 @@ import { ModuleConfig } from '../../../types-internal/module-config';
 import { BlockAPI } from '../../../../types';
 import Block from '../../block';
 import Toolbox, { ToolboxEvent } from '../../ui/toolbox';
+import { IconMenu, IconPlus } from '@codexteam/icons';
 
 /**
  * @todo Tab on non-empty block should open Block Settings of the hoveredBlock (not where caret is set)
@@ -335,9 +336,9 @@ export default class Toolbar extends Module<ToolbarNodes> {
      *  - Plus Button
      *  - Toolbox
      */
-    this.nodes.plusButton = $.make('div', this.CSS.plusButton);
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    $.append(this.nodes.plusButton, $.svg('plus', 16, 16));
+    this.nodes.plusButton = $.make('div', this.CSS.plusButton, {
+      innerHTML: IconPlus,
+    });
     $.append(this.nodes.actions, this.nodes.plusButton);
 
     this.readOnlyMutableListeners.on(this.nodes.plusButton, 'click', () => {
@@ -365,11 +366,10 @@ export default class Toolbar extends Module<ToolbarNodes> {
      *  - Remove Block Button
      *  - Settings Panel
      */
-    this.nodes.settingsToggler = $.make('span', this.CSS.settingsToggler);
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    const settingsIcon = $.svg('dots', 16, 16);
+    this.nodes.settingsToggler = $.make('span', this.CSS.settingsToggler, {
+      innerHTML: IconMenu,
+    });
 
-    $.append(this.nodes.settingsToggler, settingsIcon);
     $.append(this.nodes.actions, this.nodes.settingsToggler);
 
     this.tooltip.onHover(

src/assets/sad-face.svg

@@ -11,6 +11,7 @@ import Tooltip from '../../utils/tooltip';
 import { ModuleConfig } from '../../../types-internal/module-config';
 import InlineTool from '../../tools/inline';
 import { CommonInternalSettings } from '../../tools/base';
+import { IconChevronDown } from '@codexteam/icons';
 
 /**
  * Inline Toolbar elements
@@ -51,6 +52,7 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
     inputField: 'cdx-input',
     focusedButton: 'ce-inline-tool--focused',
     conversionToggler: 'ce-inline-toolbar__dropdown',
+    conversionTogglerArrow: 'ce-inline-toolbar__dropdown-arrow',
     conversionTogglerHidden: 'ce-inline-toolbar__dropdown--hidden',
     conversionTogglerContent: 'ce-inline-toolbar__dropdown-content',
     togglerAndButtonsWrapper: 'ce-inline-toolbar__toggler-and-button-wrapper',
@@ -428,11 +430,12 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
     this.nodes.conversionToggler = $.make('div', this.CSS.conversionToggler);
     this.nodes.conversionTogglerContent = $.make('div', this.CSS.conversionTogglerContent);
 
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    const icon = $.svg('toggler-down', 13, 13);
+    const iconWrapper = $.make('div', this.CSS.conversionTogglerArrow, {
+      innerHTML: IconChevronDown,
+    });
 
     this.nodes.conversionToggler.appendChild(this.nodes.conversionTogglerContent);
-    this.nodes.conversionToggler.appendChild(icon);
+    this.nodes.conversionToggler.appendChild(iconWrapper);
 
     this.nodes.togglerAndButtonsWrapper.appendChild(this.nodes.conversionToggler);
 
@@ -665,6 +668,15 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
 
     tool.surround(range);
     this.checkToolsState();
+
+    /**
+     * If tool has "actions", so after click it will probably toggle them on.
+     * For example, the Inline Link Tool will show the URL-input.
+     * So we disable the Flipper for that case to allow Tool bind own Enter listener
+     */
+    if (tool.renderActions !== undefined) {
+      this.flipper.deactivate();
+    }
   }
 
   /**