CKEditor 5 <figure> elements contain empty space

Created on 16 March 2024, 10 months ago
Updated 14 August 2024, 5 months ago

In Drupal 10.2.4 with Olivero theme I have nodes that contain an image added with CKEditor 5 to their top part.

My problem is that each time I come to edit any of these nodes, the figure element of the image figure becomes gigantic around 5000px X 6000px.

To see the problem in real time please check the attached screenshots.

🐛 Bug report
Status

Postponed: needs info

Version

11.0 🔥

Component
CKEditor 5 

Last updated about 4 hours ago

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @bendqh1
  • Status changed to Postponed: needs info 10 months ago
  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    Please provide detailed steps to reproduce. The screenshots appear to use Hebrew — can you also reproduce this with English?

    Also: what admin theme is this using?

  • Admin theme is Claro.

    Even if I put English on top and switch the website's default language to English, the problem persists.

    I don't have any steps to reproduce becuase someday after some Bash-Composer-Drush minor upgrade it just started.

  • 🇺🇸United States xjm
  • I'm also experiencing this problem on a few sites. My steps to reproduce are:
    1. Create a content type with a CKEditor5 field, using a text format which has direct image uploads rather than Media Library images
    2. Create a piece of content and insert an image larger than the width of CKEditor. The one I'm testing with is 1920 x 1280.
    3. On first inserting the image, everything is fine.
    4. Save the content, then go back and edit it again
    5. Now when viewing the image in CKEditor, it has a large gap underneath.

    The img tag itself has width and height attributes set to 1920 and 1280, then the figure tag that gets wrapped around it gets inline styles of width: 1920px and height: 1280px. Because the img tag has a max width of 100%, it scales down, but the inline height attribute on the figure element forces that to still be the full image height, causing the gap. Images that are smaller than the CKEditor width don't have the problem.

    Of the two sites I've observed this on, one is on Drupal 10.2.6 with the Claro admin theme, and the other is on Drupal 10.2.3 with the Gin admin theme.

Production build 0.71.5 2024