Contrib.social

CKEditor 5 "break text" media is center aligned in the editor

Open on Drupal.org →
Created on 21 March 2023, over 1 year ago
Updated 31 May 2024, 27 days ago

Problem/Motivation

Media embedded with CKEditor 5 defaults to the "break text" alignment option which should follow the default left alignment. But inside the editor, these items are centered horizontally, whereas when saved and viewed outside the editor, the embedded media item is left aligned as expected.

Steps to reproduce

1. Using Drupal version 9.5.5 install and enable CKEditor 5 and the Embed Media plugin.
2. Go to /admin/config/content/formats/manage/basic_html and configure the WYSIWYG editor to use the CKEditor 5 and the media embed plugin. See Embedding media with CKEditor documentation.
3. Create/edit a node and embed media within CKEditor by clicking the "Insert Media" button in the CKEditor toolbar. This will open the media library, where you can select the media file you want to embed.
4. Note that inside the editor, the embedded media item is horizontally centered.

5. Save the node and now note that the embedded media item is left aligned.

Proposed resolution

Inside the editor, embedded media is wrapped inside of a <figure> element whose CSS (from drupalmedia.css) is set to 

display: table;
margin: 0.9em auto;

which results in a center-aligned media item. But when viewed outside of the editor, the media item is not wrapped in a <figure> element and therefore falls back to the default left alignment.

The CSS applied to editor-specific HTML elements should not introduce additional CSS formatting that will not be applied outside of the editor because it results in a discrepancy between the element's appearance inside and outside the editor.

Remaining tasks

User interface changes

After patch

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component
CKEditor 5  →

Last updated about 3 hours ago

Created by

🇺🇸United States RichardDavies Portland, Oregon

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

    It involves the content or handling of Cascading Style Sheets.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024