Preserving HTML entities when adding embed codes

[gsalkin]

We have a shortcode registered via the UI that allows users to embed Flickr galleries in posts. The UI is registered like so below:

shortcode_ui_register_for_shortcode( 'flickr_embed',
      array(
        'label'            => esc_html__( 'Flickr Gallery', 'shortcode-ui' ),
        'listItemImage'    => 'dashicons-format-gallery',
        'post_type'        => self::SHORT_CODE_POST_TYPES,
        'inner_content'    => array(
            'label'        => esc_html__( 'Flickr Embed', 'shortcode-ui' ),
            'description'  => esc_html__( 'Add the Flickr Gallery embed code.', 'shortcode-ui' ),
        ),
        'attrs'            => array(
          array(
            'label'        => esc_html__( 'Attachment', 'shortcode-ui' ),
            'attr'         => 'attachment',
            'type'         => 'attachment',
            'libraryType'  => array( 'image' ),
            'addButton'    => esc_html__( 'Select Image', 'shortcode-ui' ),
            'frameTitle'   => esc_html__( 'Select The Cover Image - 1040x585 (16:9)', 'shortcode-ui ' ),
            'description'  => esc_html__('Must be 16:9 (1040x585)', 'shortcode-ui'),
          ),
        ),
      )
    );

When pasting in the embed code into the text area, everything works fine. However, if a user goes to edit the shortcake (update a cover image or what have you), many of the html entities have been converted to their unicode(?) entities.

For example, this:
<a data-flickr-embed="true" href="https://www.flickr.com/photos/flickr/albums/72157639858715274" title="Flickr Friday"><img src="https://farm3.staticflickr.com/2838/33797934960_4b586dbcfb_b.jpg" width="1024" height="768" alt="Flickr Friday"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

Becomes this:
<a data-flickr-embed="true" href="https://www.flickr.com/photos/flickr/albums/72157639858715274" title="Flickr Friday"><img src="https://farm3.staticflickr.com/2838/33797934960_4b586dbcfb_b.jpg" width="1024" height="768" alt="Flickr Friday"></a><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20async%20src%3D%22%2F%2Fembedr.flickr.com%2Fassets%2Fclient-code.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

Obviously, stripping the <script> tags prevents the embed from working properly.

Does anyone know how to ensure that the text area preserves the code as originally pasted? Is this a Wordpress issue perhaps?

[goldenapples]

WP replaces <script> and <style> tags in the editor with an image placeholder - see here

We could decode those placeholders in the same way as core does when opening up the shortcode to edit, I haven't put much thought yet into how many edge cases we might need to support for that.

A workaround that might work until the issue is addressed is to use an regular textarea attribute field with 'encoded' => true set, rather than using the inner_content attribute, so that tinymce doesn't have a chance to mangle the value in the first place.