Drupal 10 and CKEditor 5 issues/differences

[keelanfh]

Thought I'd do a bit of testing with CKEditor in our D10 branch.

A few things I observed:

Height of body field

The height of the body field (in Service pages, perhaps elsewhere too) is very small compared to in CKEditor 4. Actually smaller than the Summary field.

D9 for comparison:

Possible to e.g. set link styles on non-links

In D9 you cannot set link styles (external link, PDF link, Start button) on non-links. Similarly for some of the other styles ("Green ticks") which should only be set on certain elements. In D10 you can do this, which means you have something styled as an interactive element which actually isn't interactive.

Possible to set multiple styles on the same element

In D10 it is possible to set multiple conflicting styles on the same element, e.g. here is an item styled simultaneously as Callout primary, Callout teal and Callout carbon. It should only be possible to set one of these styles

Styles do not appear in WYSIWYG preview

In D9 there are some nice preview styles in the WYSIWYG to show what things will look like when you publish them. These are missing in D10:

D9 for comparison:

New "code" and "code block" styles have appeared

Unlikely to be useful for LGD, should probably be removed

[ekes]

Is that https://www.drupal.org/project/drupal/issues/3241295 fixed in 10.1.x or is the min max rows setting not there?

[keelanfh]

Is that https://www.drupal.org/project/drupal/issues/3241295 fixed in 10.1.x or is the min max rows setting not there?

I'll check. Looks like I was on 10.0.9.

[justinepocock]

The height of the body field can be fixed with css much easier in CK5 I've added to a ckeditor.css file

.ck-editor__editable {
  min-height: 200px;
} 

Styles do not appear in WYSIWYG preview - you need to make a stylesheet for the styles to appear and add the following code to the themes info.yml file. It might be as simple as adding the 5 to the line of code

ckeditor5-stylesheets: 
  - css/base/ckeditor.css 

I'll see if I can get some patches whipped up over the next few days for those, I'm following the chat in the Drupal #ckeditor5 slack channel closely, and work is progressing fast but not fast enough, especially around the setting styles on elements.

[keelanfh]

Awesome!

[keelanfh]

For some progress on this one:

• Height of body field - fixed in Correct styles and height of CKEditor 5 WYSIWYG localgov_base#462
• Possible to set link styles on non-links - fixed upstream and released in Drupal 10.1.0
• Possible to set multiple styles on the same element - not fixed. I think this was an upstream design decision to allow multiple styles to be applied to the same element.
• Styles do not appear in WYSIWYG preview - fixed in Correct styles and height of CKEditor 5 WYSIWYG localgov_base#462
• New "code" and "code block" styles have appeared - fix in CKEditor 5 wysiwyg profile changes #185