Make picture/srcset work

[marob]

I can't find how to make picture/srcset feature to work with that plugin.

If I paste that code after switching to source editing:

<picture>
  <source srcset="https://interactive-examples.mdn.mozilla.net/media/cc0-images/surfer-240-200.jpg" media="(orientation: portrait)">
  <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/painted-hand-298-332.jpg" alt="">
</picture>

it's not displayed in view mode and it's replaced by the following code (discovered with developed tools):

<span data-ck-unsafe-element="picture"></span>

I've checked that same example on Full-featured editor and that's working.

I've tried overriding config with the following one (thinking maybe disallow or sanitizeHtml were the culprits), but that's still not working:

globalThis.CKEditorConfig = {
    configs:{
        toolbar:{
            editorConfig:{
              htmlSupport: {
                allow: [
                  {
                    name: /.*/,
                    attributes: true,
                    classes: true,
                    styles: true,
                  },
                ],
                disallow: [],
              },
              htmlEmbed: {
                sanitizeHtml: (inputHtml) => inputHtml
              }
            }
        },
    },
}

I've even tried upgrading to 37.0.0-alpha.0 version of CKEditor as I've found some work was done about that feature in that version, but still no success.

I suspect maybe ckeditor5-easy-image plugin is missing, but I have not bean able to test adding it as I can't find how to do that without having to create a fork of your plugin.

[marob]

PR https://github.com/nshenderov/strapi-plugin-ckeditor/pull/83 should (partially?) fix this issue. Indeed, above example code now displays the image in view mode.

Note that, in view mode, the rendered HTML is now the following (seen with developer tool):

<picture>
  <span data-ck-unsafe-element="source" srcset="https://interactive-examples.mdn.mozilla.net/media/cc0-images/surfer-240-200.jpg" media="(orientation: portrait)"></span>
  <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/painted-hand-298-332.jpg" alt="">
</picture>

While it displays the image, it's still replacing <source> tag with a <span> tag with a data-ck-unsafe-element attribute. This behavior is not happening in Full-feature editor but I don't know why it's behaving differently...

[marob]

It looks like removing GeneralHtmlSupport makes the source to display correctly. The culprit is https://github.com/ckeditor/ckeditor5/blob/f59e00c5ea84100da9eec1d032e9957c3f642097/packages/ckeditor5-html-support/src/integrations/customelement.ts#L79 that automatically adds source in the unsafeElements (which is supposed to be a readonly attribute by the way...).

Note that for dependency reasons, Style also has to be removed.

[nshenderov]

@marob Hi, you can easily remove plugins you don't want for your project via configuration of the plugin. Also, the same is for adding plugins.

[marob]

Hi @nshenderov. Thanks for your answer.

I found 2 ways:

• using ckeditor.txt, but it requires to override the entire list of plugins, I didn't find how to add/remove just one
• using patch-package to "patch" base.js but it doesn't look like a good way to do it

Is there a better and easier way?

Also, do you think adding PictureEditing by default could be a possibility?