TinyMCE: wpView improvements: introduce getText() and remove() methods, improved getInstance(), better docs. Props iseulde. See #31412.

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


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

wp-includes/js/mce-view.js

@@ -64,6 +64,8 @@ window.wp = window.wp || {};
 		 * Returns the settings of a view type.
 		 *
 		 * @param {String} type The view type.
+		 *
+		 * @return {Function} The view constructor.
 		 */
 		get: function( type ) {
 			return views[ type ];
@@ -142,6 +144,8 @@ window.wp = window.wp || {};
 		 * @param {String} type    The view type.
 		 * @param {String} text    The textual representation of the view.
 		 * @param {Object} options Options.
+		 *
+		 * @return {wp.mce.View} The view instance.
 		 */
 		createInstance: function( type, text, options ) {
 			var View = this.get( type ),
@@ -163,10 +167,27 @@ window.wp = window.wp || {};
 		/**
 		 * Get a view instance.
 		 *
-		 * @param {String} text The textual representation of the view.
+		 * @param {(String|HTMLElement)} object The textual representation of the view or the view node.
+		 *
+		 * @return {wp.mce.View} The view instance or undefined.
 		 */
-		getInstance: function( text ) {
-			return instances[ encodeURIComponent( text ) ];
+		getInstance: function( object ) {
+			if ( typeof object === 'string' ) {
+				return instances[ encodeURIComponent( object ) ];
+			}
+
+			return instances[ $( object ).data( 'wpview-text' ) ];
+		},
+
+		/**
+		 * Given a view node, get the view's text.
+		 *
+		 * @param {HTMLElement} node The view node.
+		 *
+		 * @return {String} The textual representation of the view.
+		 */
+		getText: function( node ) {
+			return decodeURIComponent( $( node ).data( 'wpview-text' ) || '' );
 		},
 
 		/**
@@ -188,8 +209,7 @@ window.wp = window.wp || {};
 		 * @param {HTMLElement}    node   The view node to update.
 		 */
 		update: function( text, editor, node ) {
-			var oldText = decodeURIComponent( $( node ).data( 'wpview-text' ) ),
-				instance = this.getInstance( oldText );
+			var instance = this.getInstance( node );
 
 			if ( instance ) {
 				instance.update( text, editor, node );
@@ -203,14 +223,27 @@ window.wp = window.wp || {};
 		 * @param {HTMLElement}    node   The view node to edit.
 		 */
 		edit: function( editor, node ) {
-			var text = decodeURIComponent( $( node ).data( 'wpview-text' ) ),
-				instance = this.getInstance( text );
+			var instance = this.getInstance( node );
 
 			if ( instance && instance.edit ) {
-				instance.edit( text, function( text ) {
+				instance.edit( instance.text, function( text ) {
 					instance.update( text, editor, node );
 				} );
 			}
+		},
+
+		/**
+		 * Remove a given view node from the DOM.
+		 *
+		 * @param {tinymce.Editor} editor The TinyMCE editor instance the view node is in.
+		 * @param {HTMLElement}    node   The view node to remove.
+		 */
+		remove: function( editor, node ) {
+			var instance = this.getInstance( node );
+
+			if ( instance ) {
+				instance.remove( editor, node );
+			}
 		}
 	};
 
@@ -218,7 +251,7 @@ window.wp = window.wp || {};
 	 * A Backbone-like View constructor intended for use when rendering a TinyMCE View.
 	 * The main difference is that the TinyMCE View is not tied to a particular DOM node.
 	 *
-	 * @param {Object} Options.
+	 * @param {Object} options Options.
 	 */
 	wp.mce.View = function( options ) {
 		_.extend( this, options );
@@ -276,44 +309,23 @@ window.wp = window.wp || {};
 
 			if ( this.getContent() ) {
 				this.setContent( this.getContent(), function( editor, node ) {
-					$( node ).data( 'rendered', true );
-					this.bindNodes.apply( this, arguments );
+					$( node ).data( 'rendered', true ).trigger( 'wp-mce-view-bind' );
 				}, force ? null : false );
 			} else {
 				this.setLoader();
 			}
 		},
 
-		/**
-		 * Binds a given rendered view node.
-		 * Runs after a view node's content is added to the DOM.
-		 *
-		 * @param {tinymce.Editor} editor      The TinyMCE editor instance the view node is in.
-		 * @param {HTMLElement}    node        The view node.
-		 * @param {HTMLElement}    contentNode The view's content node.
-		 */
-		bindNodes: function( /* editor, node, contentNode */ ) {},
-
 		/**
 		 * Unbinds all view nodes tied to this view instance.
 		 * Runs before their content is removed from the DOM.
 		 */
 		unbind: function() {
-			this.getNodes( function() {
-				this.unbindNodes.apply( this, arguments );
+			this.getNodes( function( editor, node ) {
+				$( node ).trigger( 'wp-mce-view-unbind' );
 			}, true );
 		},
 
-		/**
-		 * Unbinds a given view node.
-		 * Runs before the view node's content is removed from the DOM.
-		 *
-		 * @param {tinymce.Editor} editor      The TinyMCE editor instance the view node is in.
-		 * @param {HTMLElement}    node        The view node.
-		 * @param {HTMLElement}    contentNode The view's content node.
-		 */
-		unbindNodes: function( /* editor, node, contentNode */ ) {},
-
 		/**
 		 * Gets all the TinyMCE editor instances that support views.
 		 *
@@ -378,7 +390,7 @@ window.wp = window.wp || {};
 		 */
 		replaceMarkers: function() {
 			this.getMarkers( function( editor, node ) {
-				if ( $( node ).text() !== this.text ) {
+				if ( $( node ).html() !== this.text ) {
 					editor.dom.setAttrib( node, 'data-wpview-marker', null );
 					return;
 				}
@@ -455,7 +467,7 @@ window.wp = window.wp || {};
 				var dom = editor.dom,
 					styles = '',
 					bodyClasses = editor.getBody().className || '',
-					iframe, iframeDoc, i, resize;
+					iframe, iframeDoc, observer, i, resize;
 
 				content.innerHTML = '';
 				head = head || '';
@@ -547,10 +559,11 @@ window.wp = window.wp || {};
 					};
 
 					if ( MutationObserver ) {
-						new MutationObserver( _.debounce( function() {
+						observer = new MutationObserver( _.debounce( function() {
 							resize();
-						}, 100 ) )
-						.observe( iframeDoc.body, {
+						}, 100 ) );
+
+						observer.observe( iframeDoc.body, {
 							attributes: true,
 							childList: true,
 							subtree: true
@@ -561,11 +574,18 @@ window.wp = window.wp || {};
 						}
 					}
 
-					if ( importStyles ) {
-						editor.on( 'wp-body-class-change', function() {
+					function classChange() {
 						iframeDoc.body.className = editor.getBody().className;
-						} );
 					}
+
+					if ( importStyles ) {
+						editor.on( 'wp-body-class-change', classChange );
+					}
+
+					$( node ).one( 'wp-mce-view-unbind', function() {
+						observer.disconnect();
+						editor.off( 'wp-body-class-change', classChange );
+					} );
 				}, 50 );
 
 				callback && callback.apply( this, arguments );
@@ -631,6 +651,17 @@ window.wp = window.wp || {};
 			$( node ).data( 'rendered', false );
 			editor.dom.setAttrib( node, 'data-wpview-text', encodeURIComponent( text ) );
 			wp.mce.views.createInstance( this.type, text, this.match( text ).options ).render();
+		},
+
+		/**
+		 * Remove a given view node from the DOM.
+		 *
+		 * @param {tinymce.Editor} editor The TinyMCE editor instance the view node is in.
+		 * @param {HTMLElement}    node   The view node to remove.
+		 */
+		remove: function( editor, node ) {
+			$( node ).trigger( 'wp-mce-view-unbind' );
+			editor.dom.remove( node );
 		}
 	} );
 } )( window, window.wp, window.jQuery );
@@ -662,6 +693,8 @@ window.wp = window.wp || {};
 			frame.on( 'close', function() {
 				frame.detach();
 			} );
+
+			frame.open();
 		}
 	};
 

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

@@ -72,11 +72,9 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 	}
 
 	function removeView( view ) {
-		// TODO: trigger an event to run a clean up function.
-		// Maybe `jQuery( view ).trigger( 'remove' );`?
 		editor.undoManager.transact( function() {
 			handleEnter( view );
-			editor.dom.remove( view );
+			wp.mce.views.remove( editor, view );
 		});
 	}
 
@@ -107,7 +105,7 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 		clipboard = dom.create( 'div', {
 			'class': 'wpview-clipboard',
 			'contenteditable': 'true'
-		}, decodeURIComponent( editor.dom.getAttrib( viewNode, 'data-wpview-text' ) ) );
+		}, wp.mce.views.getText( viewNode ) );
 
 		editor.dom.select( '.wpview-body', viewNode )[0].appendChild( clipboard );
 

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.2-alpha-31558';
+$wp_version = '4.2-alpha-31559';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.