editorjs-text-color-plugin icon indicating copy to clipboard operation
editorjs-text-color-plugin copied to clipboard

Changing colour of link in selection doesn't work

Open ShaneDrury opened this issue 2 years ago • 2 comments

It seems that in versions 2.x the colour changing code changed from document.execCommand to wrapping the selection in <font> elements. As a result text that is broken up by other elements e.g. links won't change colour.

Steps to reproduce:

  • Go to https://jsfiddle.net/37e948xw/25/
  • Select all text
  • Try to change the colour

Expected behaviour

  • The colour of everything in the selection changes to the colour intended

Actual behaviour

  • No change is visible

When I downgraded to v1.13.1 it works as expected.

Thanks!

ShaneDrury avatar Apr 04 '23 09:04 ShaneDrury

Hey there!

Why coloring method changed from document.execCommand to adding <font> tags

The original document.execCommand method was unable to handle undoing selected colors, which is why we switched to using <font> tags for adding text colors in the plugin.

Obstacles

In HTML, when we wrap an <a> tag with a <font> tag, the color of the <font> tag will be overridden by the color of the <a> tag. This is due to HTML's nature to show if a link has been visited. Since this appears to be the default behavior of HTML, at this moment, it's a bit tricky to find a quick solution for adding colors to links.

I'll keep looking for other ways to fix this issue, and I really appreciate your understanding. If you find there are other tags that can not be colored as expected, please feel free to let me know.

flaming-cl avatar Apr 09 '23 23:04 flaming-cl

Actually, visually, the current behaviour is the correct one. If a text with a link in it inherits the same color as the text with no link, how will the user know it's a link? This happens in any website where links usually get a different color or styling.

HybridSolutions avatar Jun 17 '23 23:06 HybridSolutions