Customise inline tool icon(s)

[gatanaso]

Hi,

First of all, thank you for such an amazing editor 🙌

I wanted to know is it possible to customise the built in inline tool icons?

At the moment the icon SVGs for the inline tools are hardcoded. For example:

editor.js/src/components/inline-tools/inline-tool-bold.ts

Line 64 in 63eeec0

this.nodes.button.appendChild($.svg('bold', 12, 14));

It would be great if there is a way to define a css class or inject a custom SVG icon for an inline tool via the inlineToolbar property.

Thanks you 🙏

[pie6k]

I also think it would be amazing!

While I think Editor.js looks cool, I'd like to customize it to match UI of website I'd use it in.

[ony3000]

It may not be an elegant way, but this way you can customize it.

First, create a custom inline tool with the same structure as src/components/inline-tools/inline-tool-bold.ts.

class MyBoldTool {

  static get isInline() {
    return true;
  }

  static get title() {
    return 'Bold';
  }

  static get sanitize() {
    return {
      b: {},
    };
  }

  constructor() {
    this._commandName = 'bold';
    this._CSS = {
      button: 'ce-inline-tool',
      buttonActive: 'ce-inline-tool--active',
      buttonModifier: 'ce-inline-tool--bold',
    };
    this._nodes = {
      button: undefined,
    };
  }

  render() {
    this._nodes.button = document.createElement('button');
    this._nodes.button.type = 'button';
    this._nodes.button.classList.add(this._CSS.button, this._CSS.buttonModifier);
    this._nodes.button.appendChild($.svg('bold', 12, 14));

    return this._nodes.button;
  }

  surround(range) {
    document.execCommand(this._commandName);
  }

  checkState(selection) {
    const isActive = document.queryCommandState(this._commandName);

    this._nodes.button.classList.toggle(this._CSS.buttonActive, isActive);

    return isActive;
  }

  get shortcut() {
    return 'CMD+B';
  }
}

export default MyBoldTool;

Then, change the icon inside the render() to whatever you want.

-    this._nodes.button.appendChild($.svg('bold', 12, 14));
+    const icon = document.createElement('i');
+    icon.classList.add('fas', 'fa-bold'); // Font Awesome 5
+    this._nodes.button.appendChild(icon);

And finally, add this tool to the editor configuration.

const editor = new EditorJS({

  /* Your editor configs are here. */

  tools: {
    bold: {
      class: MyBoldTool,
    },
  },
});

Now you can use customized icon.

[ony3000]

In addition to the comment above, the italic tool has a similar structure to the bold tool, so it can be easily customized, but the link tool is a bit more complicated.

See the following link for example code: MyLinkTool.js

Icon redefinition can be done by modifying the code in render() just like other tools.

-    this._nodes.button.appendChild($.svg('link', 14, 10));
+    const linkIcon = document.createElement('i');
+    linkIcon.classList.add('icon--link');     // required
+    linkIcon.classList.add('fas', 'fa-link'); // Font Awesome 5
+    this._nodes.button.appendChild(linkIcon);

-    this._nodes.button.appendChild($.svg('unlink', 15, 11));
+    const unlinkIcon = document.createElement('i');
+    unlinkIcon.classList.add('icon--unlink');     // required
+    unlinkIcon.classList.add('fas', 'fa-unlink'); // Font Awesome 5
+    this._nodes.button.appendChild(unlinkIcon);

Adding it to the editor configuration is the same as other tools.

const editor = new EditorJS({

  /* Your editor configs are here. */

  tools: {

    /* Your other tools are here. */

    link: {
      class: MyLinkTool,
    },
  },
});

Now you can use custom icon in the default inline tools.