Icon appearing

[devon2018]

Hi there.

Seems to be an issue with the icon showing in the inline editor, see attached image. you can hover over the option and its the just the icon thats not showing;

I'm using react btw, with tailwind css not sure if thats where the issue is coming from

[MattPoetker]

For those who want a monkey patch for this issue, you can overrride the iconSvg method in the Hyperlink class like this:

export class CustomHyperlink extends Hyperlink {
  iconSvg(name, width = 14, height = 14) {
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.classList.add('icon', 'icon--' + name);
    svg.setAttribute('width', '24');
    svg.setAttribute('height','24');
    svg.setAttribute('viewBox', '0 0 24 24')
    svg.setAttribute('fill', 'none');
    if (name == 'link') {
      svg.innerHTML = `
        <path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M7.69998 12.6L7.67896 12.62C6.53993 13.7048 6.52012 15.5155 7.63516 16.625V16.625C8.72293 17.7073 10.4799 17.7102 11.5712 16.6314L13.0263 15.193C14.0703 14.1609 14.2141 12.525 13.3662 11.3266L13.22 11.12"></path><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M16.22 11.12L16.3564 10.9805C17.2895 10.0265 17.3478 8.5207 16.4914 7.49733V7.49733C15.5691 6.39509 13.9269 6.25143 12.8271 7.17675L11.3901 8.38588C10.0935 9.47674 9.95706 11.4241 11.0888 12.6852L11.12 12.72"></path>
      `;
    } else {
      svg.innerHTML = `
        <path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M15.7795 11.5C15.7795 11.5 16.053 11.1962 16.5497 10.6722C17.4442 9.72856 17.4701 8.2475 16.5781 7.30145V7.30145C15.6482 6.31522 14.0873 6.29227 13.1288 7.25073L11.8796 8.49999"></path><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M8.24517 12.3883C8.24517 12.3883 7.97171 12.6922 7.47504 13.2161C6.58051 14.1598 6.55467 15.6408 7.44666 16.5869V16.5869C8.37653 17.5731 9.93744 17.5961 10.8959 16.6376L12.1452 15.3883"></path><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M17.7802 15.1032L16.597 14.9422C16.0109 14.8624 15.4841 15.3059 15.4627 15.8969L15.4199 17.0818"></path><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M6.39064 9.03238L7.58432 9.06668C8.17551 9.08366 8.6522 8.58665 8.61056 7.99669L8.5271 6.81397"></path><line x1="12.1142" x2="11.7" y1="12.2" y2="11.7858" stroke="currentColor" stroke-linecap="round" stroke-width="2"></line>
      `;
    }
    return svg;
  }

Then use the custom class in your editor config/initialization:

new EditorJS({
      holder: this.editorTarget,
      tools: {
        link: {
          class: CustomHyperlink,
          inlineToolbar : true,
          config: {
            shortcut: 'CMD+L',
            target: '_blank',
            rel: 'nofollow',
            availableTargets: ['_blank', '_self'],
            availableRels: ['author', 'noreferrer'],
            validate: false,
          }
        },
        // ...

Hope that helps!

[weogrim]

@MattPoetker thanks for solution ;)

[mustafaekim]

will there be an update fixing this issue in the npm package?