Contrib.social

[DrupalImage] Image alignment lost when copy/pasted from another CKEditor 5 instance

Open on Drupal.org →
Created on 29 November 2023, 9 months ago
Updated 29 February 2024, 6 months ago

Problem/Motivation

When copying aligned block images from one CKEditor instance to another (same page or different page), the alignment is lost, and it appears there is a fallback alignment.

When viewing the source, the <img> element is wrapped in a <figure> element with proper alignment, the source for the pasted version is an <img> element wrapped in a <span>.

The problem does not occur on the CKEditor demo pages on their website, however, it does occur on a vanilla Drupal 10 site stood up on simplytest.me, leading us to believe the problem is related to the integration.

The problem only appears to be related to when you use the "Insert Image" button, but does not seem to happen if you insert an image with media library.

Steps to reproduce

  1. Edit a content type form with at least one CKEditor field instance. The CKEditor instance must have the "Insert Image" button activated in the menu
  2. Click "Insert Image" in the CKEditor instance and add an image
  3. Align the image to the middle
  4. Select all and copy to clipboard
  5. Paste into a different CKEditor instance in your Drupal site (can be the same content type)
  6. The alignment for the image is wrong

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Active

Version

11.0 🔥

Component
CKEditor 5  →

Last updated 2 days ago

Created by

🇺🇸United States scrumryan

Live updates comments and jobs are added and updated live.
  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

  • JavaScript

    Affects the content, performance, or handling of Javascript.

Sign in to follow issues

Comments & Activities

  • Issue created by @scrumryan
  • Comment 9 months ago →
    🇺🇸United States scrumryan
  • Status changed to Postponed: needs info 9 months ago
  • Comment 9 months ago →
    🇧🇪Belgium Wim Leers Ghent 🇧🇪🇪🇺

    Ah, that sucks! Thanks for the detailed report! 👍 Just to be certain though, could you please do drush cget filter.format.<ID> and drush cget editor.editor.<ID>?

    In theory this needs tests, but I have no idea how we could possibly test this in Drupal's chromedriver-powered tests. Search all WebDriverTestBase files in Drupal core for "paste" and you'll find zero hits 🥲

    (I haven't tried to reproduce yet, but I can totally see how a relative edge case like this one was never manually tested.)

  • Comment 9 months ago →
    🇺🇸United States scrumryan

    Sure, here are the config files.

    I can imagine this type of test would be difficult. In our troubleshooting it was pretty clear there is some "magic" that happens during copy/paste pipeline in the CKEditor, I can imagine there could be an entire test suite around just that operation.

  • Status changed to Active 6 months ago
  • Comment 6 months ago →
    🇧🇪Belgium Wim Leers Ghent 🇧🇪🇪🇺

    Next time, please change the status, that'll make it clear the additional info is now present 😊

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024