CKEditor 5 Styles dropdown broken when in off-canvas sidebar

Created on 18 December 2023, 11 months ago
Updated 28 June 2024, 5 months ago

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:

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

🐛 Bug report
Status

Fixed

Version

10.4

Component
CKEditor 5 

Last updated about 15 hours ago

Created by

🇺🇸United States jessehs Taos, New Mexico

Live updates comments and jobs are added and updated live.
  • CSS

    It involves the content or handling of Cascading Style Sheets.

  • JavaScript

    Affects the content, performance, or handling of Javascript.

Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024