Icons not visible with Editor.js v2.26.0

[johnpuddephatt]

It looks like Editor.js has changed the way it uses icons and the way this package references icons for link and unlink no longer works.

[Mortimer333]

+1

[nptrainor]

I believe this problem can be overcome in the following way.

I'm not using React or anything as fancy as that. I just want to use the tool on a website, and so have chosen a simple solution. YMMV so I suggest you keep a copy of the original files.

Firstly, navigate to where you have put the "bundle.js" file - the one that starts "(function webpackUniversalModuleDefinition(root, factory) {". This is the one which controls the hyperlink creation.

Open it with a text editor and search for the word "svg" (without quotes).
You will see (below) that it takes to you a whole bunch of Javascript which creates a SVG icon element, sets various attributes like height/width/icon class etc.

" var icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n icon.classList.add('icon', 'icon--' + name);\n icon.setAttribute('width', width + 'px');\n icon.setAttribute('height', height + 'px');\n icon.innerHTML = "<use xmlns:xlink=\"http://www.w3.org/1999/xlink\\\" xlink:href=\"#".concat(name, "\">");\n return icon;\n }\n }"

What we are after is the icon.innerHTML= bit of Javascript. Remove this bit only. The bit that set the innerHTML, ie. this bit
"icon.innerHTML = "<use xmlns:xlink=\"http://www.w3.org/1999/xlink\\\" xlink:href=\"#".concat(name, "\">");\n "

Leave the "return icon;\n" section in place.

Now, our editor doesn't have an icon for the Link and Unlink button. So, we need to use CSS to tell it what to put there.

I've got a small CSS file containing (among other things) the following:

svg.icon--link { background-image: url(' path to IconLink.svg'); }
svg.icon--unlink { background-image: url('/ path to IconUnlink.svg'); }

You can get the correct icons from the github /codex-team/icons.

So far as I can see this works, and puts the Link and Unlink icon in place.

HTH

Update: I've abandoned using this code as it uses ExecCommand as a key component - but this command is deprecated. I want something that will continue to work into the future. I also couldn't work out why the editor pumped out only a single forward slash after the http: ...

It would be grand if these issues could be resolved.

[patratel]

For a simpler solution you can also just write this

svg.icon--link
  background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.5em' height='0.5em' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M7.5 17.5q-2.3 0-3.9-1.6T2 12q0-2.3 1.6-3.9t3.9-1.6H18q1.65 0 2.825 1.175T22 10.5q0 1.65-1.175 2.825T18 14.5H8.5q-1.05 0-1.775-.725T6 12q0-1.05.725-1.775T8.5 9.5H18V11H8.5q-.425 0-.713.288T7.5 12q0 .425.288.713T8.5 13H18q1.05 0 1.775-.725T20.5 10.5q0-1.05-.725-1.775T18 8H7.5Q5.85 8 4.675 9.175T3.5 12q0 1.65 1.175 2.825T7.5 16H18v1.5H7.5Z'/%3E%3C/svg%3E" )
  background-repeat: no-repeat
  background-size: cover
  background-position: bottom center, 50%, 50%
svg.icon--unlink
  background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.5em' height='0.5em' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M7.5 17.5q-2.3 0-3.9-1.6T2 12q0-2.3 1.6-3.9t3.9-1.6H18q1.65 0 2.825 1.175T22 10.5q0 1.65-1.175 2.825T18 14.5H8.5q-1.05 0-1.775-.725T6 12q0-1.05.725-1.775T8.5 9.5H18V11H8.5q-.425 0-.713.288T7.5 12q0 .425.288.713T8.5 13H18q1.05 0 1.775-.725T20.5 10.5q0-1.05-.725-1.775T18 8H7.5Q5.85 8 4.675 9.175T3.5 12q0 1.65 1.175 2.825T7.5 16H18v1.5H7.5Z'/%3E%3C/svg%3E" )
  background-repeat: no-repeat
  background-size: cover
  background-position: bottom center, 50%, 50%