CKEditor breaks existing figure elements

[ItagMichael]

Description

When upgrading/converting to CKEditor, the markup for existing images with captions changes and the figure and figcaption elements get deleted.

Not sure if this is something I need to fix in HtmlPurifier, but I can embed new images in CKEditor which uses figure elements and these do persist.

Steps to reproduce

1. In a Redactor RTE field, have an existing figure element with image and caption:

<figure><img src="/uploads/shared/1200x630.png?v=1625830523#asset:74:url" alt="OG image" data-image="4ogpunopbfm4"><figcaption>Caption for this image</figcaption></figure>

2. Run ./craft ckeditor/convert, open the new CKEditor field
3. View source and observe the content is now:

<p>
    <img src="/uploads/shared/1200x630.png?v=1625830523#asset:74:url" alt="OG image">Caption for this image
</p>

Additional info

• Craft version: 4.4.8
• PHP version: 8.1
• Database driver & version: MariaDB 10.4.27
• CKEditor version: 3.3.0
• HtmlPurifier config:

{
  "Attr.AllowedFrameTargets": [
    "_blank"
  ],
  "Attr.EnableID": true,
  "HTML.AllowedComments": [
    "pagebreak"
  ],
  "HTML.SafeIframe": true,
  "URI.SafeIframeRegexp": "%^(https?:)?//(www.youtube.com/embed/|www.youtube-nocookie.com/embed/|www.youtube.com/watch|player.vimeo.com/video/|fast.wistia.net/embed/)%"
}

[i-just]

Hi, thanks for reaching out. The good news is the ckeditor/convert command doesn’t actually touch your data, so unless you re-save the element with the converted field, the data stored in the database won’t change.

CKeditor uses <figure> for various items, not just images, and it looks like it relies on the <figure> tag to have a class of image in order to interpret it the way Redactor did.

I’ll update again once I have a solution in place.

[brandonkelly]

CKEditor 3.4.0 is out with improved support for <figure> elements defined by Redactor 🎉