Ticket #31412: 31412.18.patch

src/wp-includes/js/mce-view.js

@@ -64 +64 @@
                  * 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 +144 @@
                  * @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 +167 @@
                 /**
                  * 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.
+                 */
+                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.
                  */
-                getInstance: function( text ) {
-                        return instances[ encodeURIComponent( text ) ];
+                getText: function( node ) {
+                        return decodeURIComponent( $( node ).data( 'wpview-text' ) || '' );
                 },
 
                 /**
@@ -188 +209 @@
                  * @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 +223 @@
                  * @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 +251 @@
          * 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 +309 @@
 
                         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();
@@ -285 +317 @@
                 },
 
                 /**
-                 * 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.
                  *
                  * @param {Function} callback A callback.
@@ -455 +467 @@
                                 var dom = editor.dom,
                                         styles = '',
                                         bodyClasses = editor.getBody().className || '',
-                                        iframe, iframeDoc, i, resize;
+                                        iframe, iframeDoc, observer, i, resize;
 
                                 content.innerHTML = '';
                                 head = head || '';
@@ -547 +559 @@
                                         };
 
                                         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 +574 @@
                                                 }
                                         }
 
+                                        function classChange() {
+                                                iframeDoc.body.className = editor.getBody().className;
+                                        }
+
                                         if ( importStyles ) {
-                                                editor.on( 'wp-body-class-change', function() {
-                                                        iframeDoc.body.className = editor.getBody().className;
-                                                } );
+                                                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 +651 @@
                         $( 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 +693 @@
                         frame.on( 'close', function() {
                                 frame.detach();
                         } );
+
+                        frame.open();
                 }
         };
 

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

@@ -72 +72 @@
         }
 
         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 +105 @@
                 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 );