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.


git-svn-id: https://develop.svn.wordpress.org/trunk@41985 602fd350-edb4-49c9-b593-d223f7449a82

src/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 );
 	}

src/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 );

src/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.