Uploading an image to CKEditor5 causes entire layout to shift

Created on 18 April 2024, 7 months ago
Updated 13 August 2024, 3 months ago

Problem/Motivation

When placing an image into the ckeditor the layout shifts

Steps to reproduce

1. Create a page
2. Add an image (not media library)
3. Save the page
4. Edit the page
See the shift

Proposed resolution

Don't mess up the layout

TBD as a solution should be noted

Remaining tasks

Discover issues
Update issue summary with proposed solution

User interface changes

Before

After

TBD

API changes

N/A

Data model changes

N/A

Release notes snippet

N/A

🐛 Bug report
Status

Active

Version

10.3

Component
CKEditor 5 

Last updated about 2 hours ago

Created by

🇺🇸United States smustgrave

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

Comments & Activities

  • Issue created by @smustgrave
  • 🇺🇸United States bernardm28 Tennessee

    I can confirm this is an issue.
    https://ddev.readthedocs.io/en/latest/users/quickstart/#__tabbed_4_2
    I used the ddev quick start and then created a new basic page on Olivero's standard profile.

  • 🇺🇸United States bernardm28 Tennessee

    Seems like the issue comes from

    without the issue

    <figure class="image ck-widget image_resized ck-widget_with-resizer ck-widget_selected" style="height:1512px;width:2824px;" contenteditable="false"

    removing style="height:1512px;width:2824px;" fixes the issue.

  • 🇺🇸United States bernardm28 Tennessee

    Same page without the issue.

    removing style="height:1512px;width:2824px;" from <figure class="image ck-widget image_resized ck-widget_with-resizer ck-widget_selected" style="height:1512px;width:2824px;" contenteditable="false"

  • 🇺🇸United States bernardm28 Tennessee

    Also, I just noticed that clicking the original format as seen in the image below fixes it.

    However, that setting does not get saved so upon opening the node the layout changes and it pics a different resolution.
    So the image ckeditor plugin might be the buggy party here.

  • I think I have found something.

    https://git.drupalcode.org/project/drupal/-/blob/4692fca5bcd33728bff24a5...

    ⚠️ Everything below this point is copy/pasted directly from https://github.com/ckeditor/ckeditor5/pull/15222, to continue to use the `width` and `height` attributes to indicate resized width and height. This is necessary since CKEditor 5 v40.0.0.

    CKEditor5 uses image_resized attribute to track whether the image was resized or not. Drupal does it differently - it uses only width and height attributes of the img tag.

    The problem here is that both width and height attributes are set immediately after an image is uploaded. Once the editor is reloaded, Drupal makes CKEditor think that the image was manually resized.

    Looks like a bug in drupalimageediting.js

  • 🇧🇷Brazil aluzzardi Pelotas, RS

    That issue is not only happening with images while adding via editor.
    We found the same issue if you add a very long URL and click to see the Source Code.
    I uploaded a video with the issue.
    My quick fix for it was to add a custom css for the .ck.ck-editor via theme:

    theme.info.yml
    ckeditor5-stylesheets:
        - css/admin/ckeditor-fixes.css
    
    .ck.ck-editor {
      max-width: 960px;
    }
    

    It's not the best I belive but should help others for now.

  • The issue is occurring for me as well.

  • @aluzzardi's workaround works for me. Thank you @aluzzardi!

Production build 0.71.5 2024