Problem/Motivation

Integration with CKEditor5. By now there are some style issues and no support for darkmode.

ckeditor-dark

ckeditor-dark

ckeditor-dark

Issue fork gin-3255204

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

Hosisam created an issue. See original summary.

wim leers’s picture

IIRC this bug was fixed months ago, I forget if that was on the Drupal side (downstream) or on the CKE5 side (upstream):

ckeditor-dark

Can you test this again, with the latest Drupal 9.3 patch release? 🙏

wim leers’s picture

RE: dark mode: a quick search led me to https://github.com/ckeditor/ckeditor5/issues/8275, which in turn led me to https://ckeditor.com/docs/ckeditor5/latest/examples/framework/theme-cust... — look at that! 🤩🥳

Although it was designed with versatility and the most common editor use cases in mind, some integrations may require adjustments to make it match the style guidelines of the ecosystem. This kind of customization can be done by importing an extra .css file and overriding the native CSS variables.

Doesn't that sound wonderful? :D

dieterholvoet’s picture

StatusFileSize
new205.71 KB

There's still a z-index issue when scrolling a text area out of the viewport while having the heading dropdown open.

Screenshot

dieterholvoet’s picture

StatusFileSize
new214.6 KB

The default size of an empty text area is also quite small, not sure if this is a Gin issue.

Screenshot

saschaeggi made their first commit to this issue’s fork.

saschaeggi’s picture

Assigned: Unassigned » saschaeggi
saschaeggi’s picture

Issue tags: +Drupalcon Prague 2022
saschaeggi’s picture

Status: Active » Needs review
StatusFileSize
new1.17 MB

CKEditor 5 support with proper Darkmode integration is ready for testing! 🥳

CKEditor 5 Darkmode

wim leers’s picture

Very nice! And with surprisingly little code! :D

The most recent CKEditor 5 update (#3306153: Update CKEditor 5 to 35.1.0) incorporated a huge amount of work (done upstream!) to ensure sufficient contrast. It was required for #3283803: [upstream] CKE5 toggleable toolbar items not enough contrast. It'd be a shame if this regressed on that front 🤓

saschaeggi’s picture

StatusFileSize
new119.86 KB

@wimleers this has been addressed 👍

Active item

damienmckenna’s picture

Issue tags: +ckeditor5
saschaeggi’s picture

saschaeggi’s picture

Still looking for a review here

saschaeggi’s picture

Assigned: saschaeggi » Unassigned
johan den hollander’s picture

Just tested this with the code from the MR in a site running Drupal 9.4.8 with CKEditor 5 enabled.
Looks good to me!

Contrast
Contrast

Darkmode
Darkmode

saschaeggi’s picture

Issue summary: View changes
StatusFileSize
new354.54 KB
new111.08 KB

@Johan den Hollander I fixed 2 small visual bugs for the highlighted item background and the icon color in the latest ckeditor5 version.

ckeditor5 bg fix
ckeditor5 bg darkmode fix

johan den hollander’s picture

Allright. Updated core to use the latest 9.4.x dev version.
Also saw Gin updating to a later commit:
- Upgrading drupal/gin (dev-3255204-support-ckeditor5 59a412d => dev-3255204-support-ckeditor5 7fe65ee)

Had to do some intense staring on the provided screenshots but could make out the differences.
Look like it's the same now:

ckeditor-normal

ckeditor-dark

wim leers’s picture

Status: Needs review » Reviewed & tested by the community
Issue tags: -Needs accessibility review

This looks very solid to me 🤩

Love that you're feeding --gin-SOMETHING into --ck-SOMETHING — impressive reuse & extensibility! 🤓

I don't think this should be blocked on accessibility review — even if it's maybe less optimal, this clearly is a step in the right direction, we shouldn't block contrib themes on the strict gates that core needs to comply with. Pragmatic progress matters more!

Had to do some intense staring on the provided screenshots

🤣👏

saschaeggi’s picture

Love that you're feeding --gin-SOMETHING into --ck-SOMETHING — impressive reuse & extensibility! 🤓

Yeah the fact that CK5 also uses CSS3 vars made this waaaay easier. Only minimal overrides were needed.

saschaeggi’s picture

Status: Reviewed & tested by the community » Fixed

Thanks all for making this a reality!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.