Problem/Motivation

There is some inline style being added in the ckeditor5.js file that causes breakage in the styles drop-down in CKEditor 5 when it's in an off-canvas sidebar.

With the Gin theme this is more apparent and causes the label for the editor style to be completely obscured.

Broken:
styles broken
Fixed:
styles fixed

Steps to reproduce

It's easiest to reproduce in Umami.

  1. Edit the Basic HTML text format: /en/admin/config/content/formats/manage/basic_html
  2. Add the Style selector to the editor.
  3. Edit the Style config to provide a decent number of options:
  4. h2.test-h2-style|Test H2 Style
    h2.test-h2-style2|Test H2 Style 2
    h2.test-h2-style2|Test H2 Style 3
    h2.test-h2-style4|Test H2 Style 4
    h2.test-h2-style5|Test H2 Style 5
    h2.test-h2-style6|Test H2 Style 6
  5. Edit the Source Editing config to allow <h2 id class> (otherwise you would get a fatal error when trying to save the format.)
  6. Edit the layout of an article: /en/node/18/layout
  7. Add a block to the layout. Choose "Create content block", and "Basic block".
  8. Drag to expand the sidebar to allow the full editor to be shown.
  9. Create some text, change it to "H2" heading, and open the Style selector drop-down.

Proposed resolution

Remove the offending inline style from ckeditor5.js on line 321: `${prefix} .ck.ck-content {display:block;min-height:5rem;}`,

Remaining tasks

Determine what this style was intended to solve and test to make sure it does not cause a regression.

Problem/Motivation

User interface changes

After

API changes

Data model changes

Release notes snippet

Issue fork drupal-3409561

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

jessehs created an issue. See original summary.

jessehs’s picture

Issue summary: View changes
jessehs’s picture

StatusFileSize
new710 bytes

This patch removes the offending style from ckeditor5.js. Looking at git blame, it's unclear why this inline style was added originally. It appears to go all the way back to when CKEditor 5 was added: 35972c91

jessehs’s picture

Status: Active » Needs review
wim leers’s picture

Version: 10.1.x-dev » 11.x-dev
Assigned: Unassigned » lauriii
Issue tags: +CSS, +JavaScript
Related issues: +#3278415: Remove usages of the JavaScript ES6 build step, the build step itself, and associated dev dependencies

Thanks for the detailed bug report! 🤩

This was added in #3278415: Remove usages of the JavaScript ES6 build step, the build step itself, and associated dev dependencies. I don't know enough about this CSS to provide more guidance — but @nod_ or @lauriii would be able to 😊

wim leers’s picture

Title: CKEditor 5 Styles dropdown broken when in off-canvas sidebar » [Style] CKEditor 5 Styles dropdown broken when in off-canvas sidebar
Issue tags: -JavaScript +JavaScript
needs-review-queue-bot’s picture

Status: Needs review » Needs work

The Needs Review Queue Bot tested this issue.

While you are making the above changes, we recommend that you convert this patch to a merge request. Merge requests are preferred over patches. Be sure to hide the old patch files as well. (Converting an issue to a merge request without other contributions to the issue will not receive credit.)

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

vinmayiswamy’s picture

Status: Needs work » Needs review

Created MR with the proposed changes. Please review.
Thanks!

andre.bonon’s picture

Status: Needs review » Reviewed & tested by the community
StatusFileSize
new173.64 KB

I executed the steps mentioned and applied the patch.
That works for me.
test

quietone’s picture

Issue summary: View changes

I read the issue summary, comments and the MR. I agree with @Wim Leers in thanking @jessehs for a detailed issue summary. The MR does implement the proposed changes and testing was done in #11 confirming the fix. There are no questions unanswered.

I do have a question. Why is 'style' in the title twice? Is that necessary. Since the first style is in square brackets, is there a need for a new special issue title?

I also updated credit and leaving at RTBC.

nod_’s picture

Title: [Style] CKEditor 5 Styles dropdown broken when in off-canvas sidebar » CKEditor 5 Styles dropdown broken when in off-canvas sidebar
Assigned: lauriii » nod_

Issue has been on my todo for a while, getting to it. I seem to remember that the rule was useful at some point, need to dig into why

nod_’s picture

fix is ok since #3241295: CKEditor 5 isn't respecting field widgets row settings sets a minimum height for the editor element

  • nod_ committed dbff7d42 on 10.4.x
    Issue #3409561 by VinmayiSwamy, jessehs, andre.bonon, Wim Leers,...

  • nod_ committed c5359f33 on 11.0.x
    Issue #3409561 by VinmayiSwamy, jessehs, andre.bonon, Wim Leers,...

  • nod_ committed 766418a8 on 11.x
    Issue #3409561 by VinmayiSwamy, jessehs, andre.bonon, Wim Leers,...
nod_’s picture

Version: 11.x-dev » 10.4.x-dev
Assigned: nod_ » Unassigned
Status: Reviewed & tested by the community » Fixed

Committed and pushed 766418a8d5 to 11.x and c5359f3392 to 11.0.x and dbff7d429b to 10.4.x. Thanks!

Status: Fixed » Closed (fixed)

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