Decide what to do about CKEditor styles in core themes

we need to decide what to do about these styles as the module is being moved to contrib.

Actually … are we moving it to contrib? 🤔 Should we? CKEditor 4's security support will end, so …

I'm personally in favor of option 1. In its simplest form, it should be simple to implement and maintain. It would also be consistent with what we are aiming to do with CKEditor 5.

💯

For Bartik and Seven, it seems easiest to leave the CSS in the respective themes which will also be moving to contrib, then the contrib themes can provide support for the contrib module. Then Claro and Olivero CSS could be dropped when ckeditor4 is moved out.

Having said that option #1 sounds good if it's not too much effort.

Not sure I understand what option 1 means. It would be sort of a normalize.css for CKE content when there is no CSS declared? how is that different to leaving everything to CKE4 default styles? are the CKE4 default styles not good enough?

Thanks for the explanation.

Givent that I'd add normalize.css in CKE by default and stop there. All the core themes depend on it so that would make for a good default baseline IMO

About the files that are not inside the CKE iframe editor here is a list of what's happening in core themes regarding CKE libraries extension/overrides:

Classy

// INFO YML
libraries-extend:
  media/media_embed_ckeditor_theme:
    - classy/media_embed_ckeditor_theme

// LIBRARIES
media_embed_ckeditor_theme:
    js/media_embed_ckeditor.theme.js: {}

// JS FILE 
Drupal.theme.mediaEmbedPreviewError = () => 

Bartik

Same override as classy

Claro

Only CSS additions + the classy copy/paste

The CSS is used to make sure the CKE area has focus styles in the content editing, that the CKE dialogs follow the claro theme and not the default CKE styling, and to add a focus style to the CKE text format admin interface.

// INFO YML
libraries-extend:
  ckeditor/drupal.ckeditor:
    - claro/ckeditor-editor
  ckeditor/drupal.ckeditor.admin:
    - claro/ckeditor-admin
  core/ckeditor:
    - claro/ckeditor-dialog

// LIBRARIES
ckeditor-editor:
      css/theme/ckeditor-editor.css: {}
ckeditor-admin:
      css/theme/ckeditor.admin.css: {}
ckeditor-dialog:
      css/theme/ckeditor-dialog.css: {}

Olivero

Single CSS addition

// INFO YML 
libraries-extend:
  core/ckeditor:
    - olivero/cke-dialog

// LIBRARIES
cke-dialog:
      css/components/cke-dialog.css: {}

Seven

Couple of CSS extension + the classy copy/paste

Focus styles for editor buttons in the text format admin interface + CKE dialog styling

// INFO YML
libraries-extend:
  core/ckeditor:
    - seven/ckeditor-dialog
    - seven/ckeditor-admin

// LIBRARIES
ckeditor-admin:
      css/theme/ckeditor-admin.css: {}
ckeditor-dialog:
      css/theme/ckeditor-dialog.css: {}

Stable

Bunch of CSS files overrides, custom CKE theme based on CKE "moono"

CSS files are copy/paste from the CKE module. I guess it's to make sure stable is indeed stable should the CKE module CSS change.

There is one addition to ckeditor.css, stable adds a rule for CKE styling when used with quickedit.

// INFO YML
libraries-override:
  ckeditor/drupal.ckeditor:
        css/ckeditor.css: css/ckeditor/ckeditor.css
  ckeditor/drupal.ckeditor.plugins.drupalimagecaption:
        css/plugins/drupalimagecaption/ckeditor.drupalimagecaption.css: css/ckeditor/plugins/drupalimagecaption/ckeditor.drupalimagecaption.css
  ckeditor/drupal.ckeditor.plugins.language:
        css/plugins/language/ckeditor.language.css: css/ckeditor/plugins/language/ckeditor.language.css
  ckeditor/drupal.ckeditor.admin:
        css/ckeditor.admin.css: css/ckeditor/ckeditor.admin.css

Stable 9

Bunch of CSS files overrides, same as Stable theme. CSS is the same as the stable theme.

libraries-override:
  ckeditor/drupal.ckeditor:
        css/ckeditor.css: css/ckeditor/ckeditor.css
  ckeditor/drupal.ckeditor.plugins.drupalimagecaption:
        css/plugins/drupalimagecaption/ckeditor.drupalimagecaption.css: css/ckeditor/plugins/drupalimagecaption/ckeditor.drupalimagecaption.css
  ckeditor/drupal.ckeditor.plugins.language:
        css/plugins/language/ckeditor.language.css: css/ckeditor/plugins/language/ckeditor.language.css
  ckeditor/drupal.ckeditor.admin:
        css/ckeditor.admin.css: css/ckeditor/ckeditor.admin.css

added some details in the comment above. Most rules are about styling the CKE dialogs, and there are a couple of rules to make sure the focus is styled in a couple of cases.

the dialogs are very much usable without the styles overrides, just pretty different visually than the rest of the themes.

That works for the admin config interface, still missing focus style when using the cke in an edit form.

That works for me, this also adds a focus style to CKE4 on olivero (wrong color for olivero but better than nothing) :)

1. +++ b/core/modules/ckeditor/css/ckeditor.admin.css
   @@ -210,6 +210,8 @@
    }
   

   On HEAD, with FF and Chrome, I tested button focus in the admin form with every core theme (including Stark and Classy) and the focus ring was visible in each. I'm not sure this is necessary for the admin form, I may be missing something here...

2. +++ b/core/modules/ckeditor/css/ckeditor.css
   @@ -210,6 +210,8 @@
   +  outline: 5px auto -webkit-focus-ring-color;
   

   It was mentioned in an earlier comment that it was noticed FF wasn't getting focus rings in some themes, but the color here is not recognized by FF. The color on the dash outline isn't that distinct from the borders.

I agree with @nod_ that dialogs look fine and are plenty usable without the theme styling:

I'm happy with it. Resolves an issue in olivero too so extra bonus :)

Committed to 10.1.x and cherry picked to 10.0.x and 9.5.x.

This is a nice solution as it acknowledges that CKEditor 4 is near EOL / Core exclusion so it does not attempt to provide a pixel-perfect means of continuing use of an EOL, but it does address issues that would compromise accessibility / feature access.

Cursor is blocked on chrome.

@leo liao If you're hoping to see this change added to Drupal core it's best to create a new issue. It won't see any progress added to something that was closed several months ago.