TinyMCE, wpView:

- Add the `wpview-wrap` class and pass third param to the getNodes() callback for back-compat.
- Attach the mutation observer that resizes a view iframe inside the iframe to minimize memory use/leaks.
- Remove the `wp-mce-view-unbind` event. It has never been particularly reliable and now it doesn't fire when the user deletes a view by typing or pasting over it.
- Restore changing of a view iframe body classes when the editor body classes change.

Props iseulde, azaozz.
Fixes #36434.
Built from https://develop.svn.wordpress.org/trunk@38158


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

wp-includes/js/mce-view.js

@@ -353,7 +353,6 @@
 		unbind: function() {
 			this.getNodes( function( editor, node ) {
 				this.unbindNode.call( this, editor, node );
-				$( node ).trigger( 'wp-mce-view-unbind' );
 			}, true );
 		},
 
@@ -394,7 +393,7 @@
 						return rendered ? data : ! data;
 					} )
 					.each( function() {
-						callback.call( self, editor, this );
+						callback.call( self, editor, this, this /* back compat */ );
 					} );
 			} );
 		},
@@ -429,7 +428,7 @@
 				}
 
 				$viewNode = editor.$(
-					'<div class="wpview" data-wpview-text="' + this.encodedText + '" data-wpview-type="' + this.type + '" contenteditable="false"></div>'
+					'<div class="wpview wpview-wrap" data-wpview-text="' + this.encodedText + '" data-wpview-type="' + this.type + '" contenteditable="false"></div>'
 				);
 
 				editor.$( node ).replaceWith( $viewNode );
@@ -485,8 +484,7 @@
 		 * @param {Boolean}  rendered Only set for (un)rendered nodes. Optional.
 		 */
 		setIframes: function( head, body, callback, rendered ) {
-			var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
-				self = this;
+			var self = this;
 
 			this.getNodes( function( editor, node ) {
 				var dom = editor.dom,
@@ -516,7 +514,7 @@
 				// Seems the browsers need a bit of time to insert/set the view nodes,
 				// or the iframe will fail especially when switching Text => Visual.
 				setTimeout( function() {
-					var iframe, iframeDoc, observer, i, block;
+					var iframe, iframeWin, iframeDoc, MutationObserver, observer, i, block;
 
 					editor.undoManager.transact( function() {
 						node.innerHTML = '';
@@ -547,8 +545,8 @@
 						return;
 					}
 
-					iframeDoc = iframe.contentWindow.document;
-
+					iframeWin = iframe.contentWindow;
+					iframeDoc = iframeWin.document;
 					iframeDoc.open();
 
 					iframeDoc.write(
@@ -612,7 +610,9 @@
 						}, 3000 );
 					}
 
-					$( iframe.contentWindow ).on( 'load', resize );
+					$( iframeWin ).on( 'load', resize );
+
+					MutationObserver = iframeWin.MutationObserver || iframeWin.WebKitMutationObserver || iframeWin.MozMutationObserver;
 
 					if ( MutationObserver ) {
 						observer = new MutationObserver( _.debounce( resize, 100 ) );
@@ -622,26 +622,12 @@
 							childList: true,
 							subtree: true
 						} );
-
-						$( node ).one( 'wp-mce-view-unbind', function() {
-							observer.disconnect();
-						} );
 					} else {
 						for ( i = 1; i < 6; i++ ) {
 							setTimeout( resize, i * 700 );
 						}
 					}
 
-					function classChange() {
-						iframeDoc.body.className = editor.getBody().className;
-					}
-
-					editor.on( 'wp-body-class-change', classChange );
-
-					$( node ).one( 'wp-mce-view-unbind', function() {
-						editor.off( 'wp-body-class-change', classChange );
-					} );
-
 					callback && callback.call( self, editor, node );
 				}, 50 );
 			}, rendered );
@@ -726,7 +712,6 @@
 		 */
 		remove: function( editor, node ) {
 			this.unbindNode.call( this, editor, node );
-			$( node ).trigger( 'wp-mce-view-unbind' );
 			editor.dom.remove( node );
 			editor.focus();
 		}

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

@@ -31,6 +31,35 @@
 				.replace( /<p[^>]+data-wpview-marker="([^"]+)"[^>]*>[\s\S]*?<\/p>/g, callback );
 		}
 
+		editor.on( 'init', function() {
+			var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
+
+			if ( MutationObserver ) {
+				new MutationObserver( function() {
+					editor.fire( 'wp-body-class-change' );
+				} )
+				.observe( editor.getBody(), {
+					attributes: true,
+					attributeFilter: ['class']
+				} );
+			}
+
+			// Pass on body class name changes from the editor to the wpView iframes.
+			editor.on( 'wp-body-class-change', function() {
+				var className = editor.getBody().className;
+
+				editor.$( 'iframe[class="wpview-sandbox"]' ).each( function( i, iframe ) {
+					// Make sure it is a local iframe
+					// jshint scripturl: true
+					if ( ! iframe.src || iframe.src === 'javascript:""' ) {
+						try {
+							iframe.contentWindow.document.body.className = className;
+						} catch( er ) {}
+					}
+				});
+			} );
+		});
+
 		// Scan new content for matching view patterns and replace them with markers.
 		editor.on( 'beforesetcontent', function( event ) {
 			var node;

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("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",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){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.on("setcontent",function(){b.mce.views.render()}),c.on("preprocess",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){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.6-beta4-38157';
+$wp_version = '4.6-beta4-38158';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.