LinkImageEditing + ImageBlock in combination with ListEditing
📝 Provide detailed reproduction steps (if any)
Reproduction repo (Open the index.html in the sample folder)
- Have an editor with LinkEditing, LinkImageEditing, ImageBlock, ListEditing. (No ImageInline)
- 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.
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?
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.
Hmm, I reproduced it in the builder as well, it shouldn't result in such data change.
Curious, why do you use
*Editingplugins, any particular reason?
We are writing our own toolbar from scratch, so we do not need the UI part.
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.