[drupalImage] Linked images in CKEditor 5 incorrectly also link image captions

Created on 25 October 2023, 7 months ago
Updated 17 November 2023, 7 months ago

Problem/Motivation

When applying both a caption and a link to an image in CKEditor 5, the content saves fine initially but then on edit, the caption inherits the link that was applied to the image.

Steps to reproduce

  • Fresh install of Drupal 11.x
  • Visit /node/add/article, leave the text format as "Basic HTML"
  • Insert an image into the body field rich text editor
  • Add a caption to the image through the balloon editor
  • Enter caption text
  • Add a link to the image through the balloon editor
  • Save the node
  • On view, the caption and link display correctly.
  • Edit the node
  • Now within CKEditor, the previously unlinked caption now has the same link as the image itself.

Note that this same problem does not exist within the CKEditor 5 demo, but it has a different approach to caption handling.

Proposed resolution

The problem happening when loading existing data implies some issue with the upcast code.

Remaining tasks

Investigate the cause.

User interface changes

None.

API changes

None.

Data model changes

None.

Release notes snippet

🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component
CKEditor 5 

Last updated 1 day ago

Created by

🇺🇸United States quicksketch

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

    Affects the content, performance, or handling of Javascript.

Sign in to follow issues

Comments & Activities

  • Issue created by @quicksketch
  • Assigned to Wim Leers
  • 🇧🇪Belgium Wim Leers Ghent 🇧🇪🇪🇺

    \Drupal\Tests\ckeditor5\FunctionalJavascript\ImageTestBase::testImageCaption() tests image caption functionalityexplicitly, but indeed not in combination with linking.

    Reproduced in manual testing.

  • @wim-leers opened merge request.
  • Issue was unassigned.
  • Status changed to Needs work 7 months ago
  • 🇧🇪Belgium Wim Leers Ghent 🇧🇪🇪🇺

    Now also reproduced by an automated test.

    I didn't check yet, but I suspect that the linkHref attribute is being applied to not just the image, but also the caption. Install https://www.drupal.org/project/ckeditor5_dev and this becomes easy to check 👍

    (I wrote almost none of the CKEditor 5 JS logic, so I'm deferring to @quicksketch, @lauriii, @bnjmnm and @nod_ to make the tests pass 😅)

  • 🇧🇪Belgium Wim Leers Ghent 🇧🇪🇪🇺
  • 🇧🇪Belgium Wim Leers Ghent 🇧🇪🇪🇺
Production build 0.69.0 2024