Editor: Specify `maxwidth` in `parse-embed` requests based on width of editor iframe so that TinyMCE view embeds fit, particularly in Text widgets.

See #40854, #34115.

Built from https://develop.svn.wordpress.org/trunk@41985


git-svn-id: http://core.svn.wordpress.org/trunk@41819 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/includes/ajax-actions.php

@@ -2993,9 +2993,10 @@ function wp_ajax_query_themes() {
  * @global WP_Post    $post       Global $post.
  * @global WP_Embed   $wp_embed   Embed API instance.
  * @global WP_Scripts $wp_scripts
+ * @global int        $content_width
  */
 function wp_ajax_parse_embed() {
-	global $post, $wp_embed;
+	global $post, $wp_embed, $content_width;
 
 	if ( empty( $_POST['shortcode'] ) ) {
 		wp_send_json_error();
@@ -3037,6 +3038,15 @@ function wp_ajax_parse_embed() {
 		}
 	}
 
+	// Set $content_width so any embeds fit in the destination iframe.
+	if ( isset( $_POST['maxwidth'] ) && is_numeric( $_POST['maxwidth'] ) && $_POST['maxwidth'] > 0 ) {
+		if ( ! isset( $content_width ) ) {
+			$content_width = intval( $_POST['maxwidth'] );
+		} else {
+			$content_width = min( $content_width, intval( $_POST['maxwidth'] ) );
+		}
+	}
+
 	if ( $url && ! $parsed ) {
 		$parsed = $wp_embed->run_shortcode( $shortcode );
 	}

wp-includes/js/mce-view.js

@@ -85,10 +85,11 @@
 		 * and creates a new instance for every match.
 		 *
 		 * @param {String} content The string to scan.
+		 * @param {tinymce.Editor} editor The editor.
 		 *
 		 * @return {String} The string with markers.
 		 */
-		setMarkers: function( content ) {
+		setMarkers: function( content, editor ) {
 			var pieces = [ { content: content } ],
 				self = this,
 				instance, current;
@@ -115,6 +116,7 @@
 							pieces.push( { content: remaining.substring( 0, result.index ) } );
 						}
 
+						result.options.editor = editor;
 						instance = self.createInstance( type, result.content, result.options );
 						text = instance.loader ? '.' : instance.text;
 
@@ -850,7 +852,7 @@
 		action: 'parse-media-shortcode',
 
 		initialize: function() {
-			var self = this;
+			var self = this, maxwidth = null;
 
 			if ( this.url ) {
 				this.loader = false;
@@ -859,10 +861,16 @@
 				} );
 			}
 
+			// Obtain the target width for the embed.
+			if ( self.editor ) {
+				maxwidth = self.editor.iframeElement.clientWidth - 20; // Minus the sum of horizontal margins and borders.
+			}
+
 			wp.ajax.post( this.action, {
 				post_ID: media.view.settings.post.id,
 				type: this.shortcode.tag,
-				shortcode: this.shortcode.string()
+				shortcode: this.shortcode.string(),
+				maxwidth: maxwidth
 			} )
 			.done( function( response ) {
 				self.render( response );

wp-includes/js/tinymce/plugins/wpview/plugin.js

@@ -88,7 +88,7 @@
 				}
 			}
 
-			event.content = wp.mce.views.setMarkers( event.content );
+			event.content = wp.mce.views.setMarkers( event.content, editor );
 		} );
 
 		// Replace any new markers nodes with views.

wp-includes/js/tinymce/plugins/wpview/plugin.min.js

@@ -1 +1 @@
-!function(a,b){a.PluginManager.add("wpview",function(c){function d(){}function e(a){return c.dom.hasClass(a,"wpview")}function f(a){function b(a,b){return"<p>"+window.decodeURIComponent(b)+"</p>"}return a?a.replace(/<div[^>]+data-wpview-text="([^"]+)"[^>]*>(?:\.|[\s\S]+?wpview-end[^>]+>\s*<\/span>\s*)?<\/div>/g,b).replace(/<p[^>]+data-wpview-marker="([^"]+)"[^>]*>[\s\S]*?<\/p>/g,b):a}return b&&b.mce&&b.mce.views?(c.on("init",function(){var a=window.MutationObserver||window.WebKitMutationObserver;a&&new a(function(){c.fire("wp-body-class-change")}).observe(c.getBody(),{attributes:!0,attributeFilter:["class"]}),c.on("wp-body-class-change",function(){var a=c.getBody().className;c.$('iframe[class="wpview-sandbox"]').each(function(b,c){if(!c.src||'javascript:""'===c.src)try{c.contentWindow.document.body.className=a}catch(d){}})})}),c.on("beforesetcontent",function(a){var d;if(a.selection||b.mce.views.unbind(),a.content){if(!a.load&&(d=c.selection.getNode(),d&&d!==c.getBody()&&/^\s*https?:\/\/\S+\s*$/i.test(a.content))){if(d=c.dom.getParent(d,"p"),!d||!/^[\s\uFEFF\u00A0]*$/.test(c.$(d).text()||""))return;d.innerHTML=""}a.content=b.mce.views.setMarkers(a.content)}}),c.on("setcontent",function(){b.mce.views.render()}),c.on("preprocess hide",function(a){c.$("div[data-wpview-text], p[data-wpview-marker]",a.node).each(function(a,b){b.innerHTML="."})},!0),c.on("postprocess",function(a){a.content=f(a.content)}),c.on("beforeaddundo",function(a){a.level.content=f(a.level.content)}),c.on("drop objectselected",function(a){e(a.targetClone)&&(a.targetClone=c.getDoc().createTextNode(window.decodeURIComponent(c.dom.getAttrib(a.targetClone,"data-wpview-text"))))}),c.on("pastepreprocess",function(b){var c=b.content;c&&(c=a.trim(c.replace(/<[^>]+>/g,"")),/^https?:\/\/\S+$/i.test(c)&&(b.content=c))}),c.on("resolvename",function(a){e(a.target)&&(a.name=c.dom.getAttrib(a.target,"data-wpview-type")||"object")}),c.on("click keyup",function(){var a=c.selection.getNode();e(a)&&c.dom.getAttrib(a,"data-mce-selected")&&a.setAttribute("data-mce-selected","2")}),c.addButton("wp_view_edit",{tooltip:"Edit ",icon:"dashicon dashicons-edit",onclick:function(){var a=c.selection.getNode();e(a)&&b.mce.views.edit(c,a)}}),c.addButton("wp_view_remove",{tooltip:"Remove",icon:"dashicon dashicons-no",onclick:function(){c.fire("cut")}}),c.once("preinit",function(){var a;c.wp&&c.wp._createToolbar&&(a=c.wp._createToolbar(["wp_view_edit","wp_view_remove"]),c.on("wptoolbar",function(b){!b.collapsed&&e(b.element)&&(b.toolbar=a)}))}),c.wp=c.wp||{},c.wp.getView=d,c.wp.setViewCursor=d,{getView:d}):{getView:d}})}(window.tinymce,window.wp);
+!function(a,b){a.PluginManager.add("wpview",function(c){function d(){}function e(a){return c.dom.hasClass(a,"wpview")}function f(a){function b(a,b){return"<p>"+window.decodeURIComponent(b)+"</p>"}return a?a.replace(/<div[^>]+data-wpview-text="([^"]+)"[^>]*>(?:\.|[\s\S]+?wpview-end[^>]+>\s*<\/span>\s*)?<\/div>/g,b).replace(/<p[^>]+data-wpview-marker="([^"]+)"[^>]*>[\s\S]*?<\/p>/g,b):a}return b&&b.mce&&b.mce.views?(c.on("init",function(){var a=window.MutationObserver||window.WebKitMutationObserver;a&&new a(function(){c.fire("wp-body-class-change")}).observe(c.getBody(),{attributes:!0,attributeFilter:["class"]}),c.on("wp-body-class-change",function(){var a=c.getBody().className;c.$('iframe[class="wpview-sandbox"]').each(function(b,c){if(!c.src||'javascript:""'===c.src)try{c.contentWindow.document.body.className=a}catch(d){}})})}),c.on("beforesetcontent",function(a){var d;if(a.selection||b.mce.views.unbind(),a.content){if(!a.load&&(d=c.selection.getNode(),d&&d!==c.getBody()&&/^\s*https?:\/\/\S+\s*$/i.test(a.content))){if(d=c.dom.getParent(d,"p"),!d||!/^[\s\uFEFF\u00A0]*$/.test(c.$(d).text()||""))return;d.innerHTML=""}a.content=b.mce.views.setMarkers(a.content,c)}}),c.on("setcontent",function(){b.mce.views.render()}),c.on("preprocess hide",function(a){c.$("div[data-wpview-text], p[data-wpview-marker]",a.node).each(function(a,b){b.innerHTML="."})},!0),c.on("postprocess",function(a){a.content=f(a.content)}),c.on("beforeaddundo",function(a){a.level.content=f(a.level.content)}),c.on("drop objectselected",function(a){e(a.targetClone)&&(a.targetClone=c.getDoc().createTextNode(window.decodeURIComponent(c.dom.getAttrib(a.targetClone,"data-wpview-text"))))}),c.on("pastepreprocess",function(b){var c=b.content;c&&(c=a.trim(c.replace(/<[^>]+>/g,"")),/^https?:\/\/\S+$/i.test(c)&&(b.content=c))}),c.on("resolvename",function(a){e(a.target)&&(a.name=c.dom.getAttrib(a.target,"data-wpview-type")||"object")}),c.on("click keyup",function(){var a=c.selection.getNode();e(a)&&c.dom.getAttrib(a,"data-mce-selected")&&a.setAttribute("data-mce-selected","2")}),c.addButton("wp_view_edit",{tooltip:"Edit ",icon:"dashicon dashicons-edit",onclick:function(){var a=c.selection.getNode();e(a)&&b.mce.views.edit(c,a)}}),c.addButton("wp_view_remove",{tooltip:"Remove",icon:"dashicon dashicons-no",onclick:function(){c.fire("cut")}}),c.once("preinit",function(){var a;c.wp&&c.wp._createToolbar&&(a=c.wp._createToolbar(["wp_view_edit","wp_view_remove"]),c.on("wptoolbar",function(b){!b.collapsed&&e(b.element)&&(b.toolbar=a)}))}),c.wp=c.wp||{},c.wp.getView=d,c.wp.setViewCursor=d,{getView:d}):{getView:d}})}(window.tinymce,window.wp);

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.9-beta3-41984';
+$wp_version = '4.9-beta3-41985';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.