CKEditor 5: enable highlight button

[herbdool]

Similar to how emoji button was added to CKE5 and also there's a request to add an anchor button #4914 (comment), we could also enable the highlight button.

It's already included in Backdrop core, but just not enabled as an option.

See https://ckeditor.com/docs/ckeditor5/latest/features/highlight.html

[swampopus]

I like this idea, but I wanted to add as a reminder-- if it is enabled, CKEditor 5 simply adds a <mark class='marker-yellow'>whatever</mark> to achieve the highlight effect.

So, this means that .marker-yellow, .marker-red, etc., would all need to be defined and added to the site's CSS. The easiest way to do this would be a new css file under ckeditor5/css/ and then add it to the site's css with

function ckeditor5_init() {
   backdrop_add_css(backdrop_get_path('module', 'ckeditor5') . '/css/ckeditor5-extras.css'));  // for example
}

but there is probably a more elegant method. I honestly am not sure. This would effectively add it for every page of the site, and you'd only need it on pages with content which you know for a fact CKeditor5 was used to edit, but figuring that out feels like even more overhead than just using hook_init?

[herbdool]

I had created a test module adapted from https://git.drupalcode.org/project/ckeditor5_plugin_pack/-/tree/1.5.x/modules/ckeditor5_plugin_pack_highlight?ref_type=heads. It's not a lot of CSS. The Drupal version comes up with a complicated way to find out if the CSS needs to be loaded.

[indigoxela]

If this goes into core, we'd need a way to make sure styles don't vanish as soon as one switches the editor or theme. 😉

A quick note: a span with a class has no semantic meaning (unlike em or strong), it's a purely visual thing.

Another note: span with class that provide forground/background color are already available via "styles" plugin (dropdown) and custom CSS.

[swampopus]

@indigoxela The highlight plugin uses the <mark> tag, not spans, so semantically it should be fine. TBH I just learned there even was a <mark> tag. Never had to use it before I guess. According to caniuse, it's been around since 2010 or so.

[indigoxela]

The highlight plugin uses the tag, not spans

I see, some CSS for that ships with core's normalize.css. Must be ancient, but I never saw that tag so far. 😉

Nothing in TinyMCE supports that. Easy to write, though. But... 🤷 I'm not convinced, this is an 80% use case.

@herbdool could this go to contrib as well?

[swampopus]

Nothing in TinyMCE supports that. Easy to write, though.

I did some checking-- with a default config, TinyMCE would need to have "mark" added to its "valid_elements" or "extended_valid_elements" setting.

Also, apparently the <mark> tag with no styles applied will render as a yellow highlighter by most browsers. So that's interesting. CKEditor gives it classes for other colors, like .marker-red, .marker-pink, etc. So if a user was switching between the two editors, their highlighted sections might all convert to just plain yellow, unless TinyMCE implements those classes as well.

[indigoxela]

TinyMCE would need to have "mark" added to its "valid_elements"

That's the (core) Filter module, which filters 😜 the display of content. The Filter module has a UI for that. Tiny wouldn't wipe out the mark tag, as it's valid HTML, but has no button to add it. And, yes, the special styles by class would go to either core (system) styles or every existing theme out there. 😉

So, as usual, if core decides to do something tailored around CKE5, there's work to do in contrib to catch up. And if we ever decided to switch the default editor in core...

[swampopus]

True. It does feel like this should be a contrib module. Just my opinion though.

In fact, I could imagine some kind of grand unified module for all the extra plugins which are already part of CKEditor, just not turned on. For example, the Font plugin and this one, the anchor plugin, etc.

Call it "ckeditor5_expanded_plugins" or something similar. Just an idea.

[herbdool]

That's the approach of Drupal's ckeditor5_plugin_pack module https://git.drupalcode.org/project/ckeditor5_plugin_pack. I'm on the fence about including highlight - it's pretty simple but it does require adding styles which has a bigger impact. So it could go into a "plugin pack" instead.

I do feel more strongly that the anchor plugin should be enabled in core and not contrib (and others agree). It is much more basic and more likely to be used.

[swampopus]

I gotcha-- well, either way-- I'd say some kind of misc plugin pack for things that aren't enabled by default (there's probably more than just bookmark, highlight, and font) might go well in a module like that. If you do decide to do that, I'd be happy to contribute the (minimal) work I've done on the ckeditor5_font_plugin module, then deprecate the module entirely.