[wp-trac] [WordPress Trac] #51417: TinyMCE stripping <picture> tags

[WordPress Trac]

#51417: TinyMCE stripping <picture>  tags
-------------------------------+-----------------------------
 Reporter:  Grzegorz.Janoszka  |       Owner:  (none)
     Type:  defect (bug)       |      Status:  new
 Priority:  normal             |   Milestone:  Future Release
Component:  TinyMCE            |     Version:  5.5.1
 Severity:  normal             |  Resolution:
 Keywords:  needs-patch        |     Focuses:
-------------------------------+-----------------------------
Description changed by SergeyBiryukov:

Old description:

> Hi,
> We have new, way more efficient graphic formats coming - avif and webp.
> They are already supported by Firefox and Chrome. The recommended and
> backwards compatible method of inserting them is using a picture tag with
> an img fallback, for example:
>
>   <picture>
>   <source srcset="example.avif" type="image/avif">
>   <source srcset="fallback.webp" type="image/webp">
>   <img src="fallback.jpg" alt="AVIF example with WebP and JPEG fallback">
>   </picture>
>
> Using the filter tiny_mce_before_init I can make TinyMCE accept the code
> if it is not surrounded by caption shortcode. Unfortunately the editor
> handles the [caption] code in javascript, the file is wp-
> includes/js/tinymce/plugins/wpeditimage/plugin.js
> and it has a filter:
>
>                         img = c.match( /((?:<a [^>]+>)?<img
> [^>]+>(?:<\/a>)?)([\s\S]*)/i );
>
> which removes everything except a and img tags. So <picture> and <source>
> become stripped. There is no filter nor configuration to modify how that
> JS works.
>
> I am not asking for a full <picture> support in WordPress. All I would
> love to see is to see TinyMCE not stripping <picture> and <source> tag
> when I place them inside caption. All the rest of WP support for AVIF can
> already be achieved using the existing filters like image_send_to_editor.

New description:

 Hi,
 We have new, way more efficient graphic formats coming - avif and webp.
 They are already supported by Firefox and Chrome. The recommended and
 backwards compatible method of inserting them is using a picture tag with
 an img fallback, for example:
 {{{
 <picture>
 <source srcset="example.avif" type="image/avif">
 <source srcset="fallback.webp" type="image/webp">
 <img src="fallback.jpg" alt="AVIF example with WebP and JPEG fallback">
 </picture>
 }}}
 Using the filter tiny_mce_before_init I can make TinyMCE accept the code
 if it is not surrounded by caption shortcode. Unfortunately the editor
 handles the [caption] code in javascript, the file is wp-
 includes/js/tinymce/plugins/wpeditimage/plugin.js
 and it has a filter:
 {{{
 img = c.match( /((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)([\s\S]*)/i );
 }}}
 which removes everything except a and img tags. So <picture> and <source>
 become stripped. There is no filter nor configuration to modify how that
 JS works.

 I am not asking for a full <picture> support in WordPress. All I would
 love to see is to see TinyMCE not stripping <picture> and <source> tag
 when I place them inside caption. All the rest of WP support for AVIF can
 already be achieved using the existing filters like image_send_to_editor.

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/51417#comment:4>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform