ckeditor5 icon indicating copy to clipboard operation
ckeditor5 copied to clipboard

LinkImageEditing + ImageBlock in combination with ListEditing

Open Joel-Levi opened this issue 1 year ago • 4 comments

📝 Provide detailed reproduction steps (if any)

Reproduction repo (Open the index.html in the sample folder)

  1. Have an editor with LinkEditing, LinkImageEditing, ImageBlock, ListEditing. (No ImageInline)
  2. Paste the following as HTML ( or use setData() )
<ul>
 <li>
  <a href="https://ckeditor.com" target="_blank" rel="noopener noreferrer">
   <img src="https://ckeditor.com/assets/images/illustration/home-banner.png" height="100px" width="100px">
  </a>
 </li>
</ul>

✔️ Expected result

A list with an image link get pasted

❌ Actual result

The link is thrown out. There is only a list with an image I'm not 100% sure if this is a bug or not, it might be expected behavior on CK's end?

📃 Other details

  • Browser: All
  • OS: All
  • First affected CKEditor version: ?
  • Installed CKEditor plugins: Essentials, ImageBlock, LinkEditing, LinkImageEditing, Paragraph, ListEditing, Undo

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

Joel-Levi avatar Jul 22 '24 12:07 Joel-Levi

Hmm, I reproduced it in the builder as well, it shouldn't result in such data change.

Curious, why do you use *Editing plugins, any particular reason?

Witoso avatar Jul 23 '24 06:07 Witoso

This is a tricky one. Pasting a linked inline image inside a list, while there's no inline images support.

The expected behavior: this should be turned into a linked block image and either "leave" the list or stay within it. The latter would be better from data preservation perspective.

It's tricky because it's a combination of 3 features and it's not a happy path (it needs to be picked up by the block image converters).

Definitely a bug, but might not be an easy one to fix.

Reinmar avatar Jul 23 '24 07:07 Reinmar

Hmm, I reproduced it in the builder as well, it shouldn't result in such data change.

Curious, why do you use *Editing plugins, any particular reason?

We are writing our own toolbar from scratch, so we do not need the UI part.

Joel-Levi avatar Jul 23 '24 07:07 Joel-Levi

This will work when the linked image is wrapped in the <figure> element that typically surrounds block images in CKE5. An example can be seen in this StackBlitz.

Removing the <figure> from initialData will make the issue appear.

mabryl avatar Jul 23 '24 07:07 mabryl