From c88c4d4f21a8c6237145f2b5be0c6c36fa6ee61d Mon Sep 17 00:00:00 2001 From: Scott Taylor Date: Tue, 26 Aug 2014 04:45:54 +0000 Subject: [PATCH] MCE View sandboxes: * Use a `MutationObserver` to listen to the `body` class of the parent editor frame. * In `wpview_media_sandbox_styles()`, only return the MEjs stylesheets. * In `wp_ajax_parse_media_shortcode()` and `wp_ajax_parse_embed()`, return an object instead of an HTML blob to allow passing `body` and `head` separately Props avryl, azaozz. Fixes #29048. git-svn-id: https://develop.svn.wordpress.org/trunk@29615 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/includes/ajax-actions.php | 23 +++++--- src/wp-includes/js/mce-view.js | 52 +++++++++++++++---- .../js/mediaelement/wp-mediaelement.css | 9 +--- .../js/tinymce/plugins/wpview/plugin.js | 13 ++++- src/wp-includes/media.php | 13 +---- 5 files changed, 71 insertions(+), 39 deletions(-) diff --git a/src/wp-admin/includes/ajax-actions.php b/src/wp-admin/includes/ajax-actions.php index f4b043dba2..f1ba77f5d7 100644 --- a/src/wp-admin/includes/ajax-actions.php +++ b/src/wp-admin/includes/ajax-actions.php @@ -2705,7 +2705,9 @@ function wp_ajax_parse_embed() { ) ); } - wp_send_json_success( $parsed ); + wp_send_json_success( array( + 'body' => $parsed + ) ); } function wp_ajax_parse_media_shortcode() { @@ -2729,19 +2731,21 @@ function wp_ajax_parse_media_shortcode() { ) ); } - ob_start(); - + $head = ''; $styles = wpview_media_sandbox_styles(); - foreach ( $styles as $style ) { - printf( '', $style ); - } - echo $shortcode; + foreach ( $styles as $style ) { + $head .= ''; + } if ( ! empty( $wp_scripts ) ) { $wp_scripts->done = array(); } + ob_start(); + + echo $shortcode; + if ( 'playlist' === $_REQUEST['type'] ) { wp_underscore_playlist_templates(); @@ -2750,5 +2754,8 @@ function wp_ajax_parse_media_shortcode() { wp_print_scripts( 'wp-mediaelement' ); } - wp_send_json_success( ob_get_clean() ); + wp_send_json_success( array( + 'head' => $head, + 'body' => ob_get_clean() + ) ); } diff --git a/src/wp-includes/js/mce-view.js b/src/wp-includes/js/mce-view.js index a5b1806af4..1632d7daba 100644 --- a/src/wp-includes/js/mce-view.js +++ b/src/wp-includes/js/mce-view.js @@ -123,16 +123,35 @@ window.wp = window.wp || {}; } ); }, /* jshint scripturl: true */ - setIframes: function ( html ) { - var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; + setIframes: function ( head, body ) { + var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver, + importStyles = this.type === 'video' || this.type === 'audio' || this.type === 'playlist'; - if ( html.indexOf( ' Visual. setTimeout( function() { @@ -156,6 +175,8 @@ window.wp = window.wp || {}; '' + '' + '' + + head + + styles + '' + '' + - '' + - html + + '' + + body + '' + '' ); @@ -195,10 +221,16 @@ window.wp = window.wp || {}; setTimeout( resize, i * 700 ); } } + + if ( importStyles ) { + editor.on( 'wp-body-class-change', function() { + iframeDoc.body.className = editor.getBody().className; + }); + } }, 50 ); }); } else { - this.setContent( html ); + this.setContent( body ); } }, setError: function( message, dashicon ) { @@ -560,7 +592,7 @@ window.wp = window.wp || {}; setNodes: function () { if ( this.parsed ) { - this.setIframes( this.parsed ); + this.setIframes( this.parsed.head, this.parsed.body ); } else { this.fail(); } @@ -579,7 +611,7 @@ window.wp = window.wp || {}; .done( function( response ) { if ( response ) { self.parsed = response; - self.setIframes( response ); + self.setIframes( response.head, response.body ); } else { self.fail( true ); } diff --git a/src/wp-includes/js/mediaelement/wp-mediaelement.css b/src/wp-includes/js/mediaelement/wp-mediaelement.css index 38a91e69a4..36cf8e8c12 100644 --- a/src/wp-includes/js/mediaelement/wp-mediaelement.css +++ b/src/wp-includes/js/mediaelement/wp-mediaelement.css @@ -1,10 +1,3 @@ -#wpview-iframe-sandbox { - color: #444; - font-family: "Open Sans", sans-serif; - font-size: 13px; - line-height: 1.4em; -} - .mejs-container { clear: both; } @@ -278,4 +271,4 @@ video.wp-video-shortcode, .wp-audio-playlist .me-cannotplay span { padding: 5px 15px; -} \ No newline at end of file +} diff --git a/src/wp-includes/js/tinymce/plugins/wpview/plugin.js b/src/wp-includes/js/tinymce/plugins/wpview/plugin.js index 2d390c1480..7bbf46657b 100644 --- a/src/wp-includes/js/tinymce/plugins/wpview/plugin.js +++ b/src/wp-includes/js/tinymce/plugins/wpview/plugin.js @@ -260,7 +260,8 @@ tinymce.PluginManager.add( 'wpview', function( editor ) { editor.on( 'init', function() { var scrolled = false, - selection = editor.selection; + selection = editor.selection, + MutationObserver = window.MutationObserver || window.WebKitMutationObserver; // When a view is selected, ensure content that is being pasted // or inserted is added to a text node (instead of the view). @@ -333,6 +334,16 @@ tinymce.PluginManager.add( 'wpview', function( editor ) { scrolled = false; } }, true ); + + if ( MutationObserver ) { + new MutationObserver( function() { + editor.fire( 'wp-body-class-change' ); + } ) + .observe( editor.getBody(), { + attributes: true, + attributeFilter: ['class'] + } ); + } }); editor.on( 'PreProcess', function( event ) { diff --git a/src/wp-includes/media.php b/src/wp-includes/media.php index af8d938ca3..1529c16260 100644 --- a/src/wp-includes/media.php +++ b/src/wp-includes/media.php @@ -3310,19 +3310,8 @@ function attachment_url_to_postid( $url ) { */ function wpview_media_sandbox_styles() { $version = 'ver=' . $GLOBALS['wp_version']; - $open_sans = "//fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=$version"; - $dashicons = includes_url( "css/dashicons.css?$version" ); $mediaelement = includes_url( "js/mediaelement/mediaelementplayer.min.css?$version" ); $wpmediaelement = includes_url( "js/mediaelement/wp-mediaelement.css?$version" ); - /** - * For use by themes that need to override the styling of MediaElement based previews in the Visual editor. - * Not intended for adding editor-style.css. Ideally these styles will be applied by using - * the 'seamless' iframe attribute in the future. - * - * @since 4.0 - * - * @param array The URLs to the stylesheets that will be loaded in the sandbox iframe. - */ - return apply_filters( 'wpview_media_sandbox_styles', array( $open_sans, $dashicons, $mediaelement, $wpmediaelement ) ); + return array( $mediaelement, $wpmediaelement ); }