Changeset 38158

Timestamp:

07/26/2016 11:12:14 PM (8 years ago)

Author:

azaozz

Message:

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.

Location:

trunk/src/wp-includes/js

Files:

• mce-view.js (modified) (10 diffs)
• tinymce/plugins/wpview/plugin.js (modified) (1 diff)

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

@@ -354 +354 @@
             this.getNodes( function( editor, node ) {
                 this.unbindNode.call( this, editor, node );
-                $( node ).trigger( 'wp-mce-view-unbind' );
             }, true );
         },
@@ -395 +394 @@
                     } )
                     .each( function() {
-                        callback.call( self, editor, this );
+                        callback.call( self, editor, this, this /* back compat */ );
                     } );
             } );
@@ -430 +429 @@
 
                 $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>'
                 );
 
@@ -486 +485 @@
          */
         setIframes: function( head, body, callback, rendered ) {
-            var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
-                self = this;
+            var self = this;
 
             this.getNodes( function( editor, node ) {
@@ -517 +515 @@
                 // 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() {
@@ -548 +546 @@
                     }
 
-                    iframeDoc = iframe.contentWindow.document;
-
+                    iframeWin = iframe.contentWindow;
+                    iframeDoc = iframeWin.document;
                     iframeDoc.open();
 
@@ -613 +611 @@
                     }
 
-                    $( iframe.contentWindow ).on( 'load', resize );
+                    $( iframeWin ).on( 'load', resize );
+
+                    MutationObserver = iframeWin.MutationObserver || iframeWin.WebKitMutationObserver || iframeWin.MozMutationObserver;
 
                     if ( MutationObserver ) {
@@ -623 +623 @@
                             subtree: true
                         } );
-
-                        $( node ).one( 'wp-mce-view-unbind', function() {
-                            observer.disconnect();
-                        } );
                     } else {
                         for ( i = 1; i < 6; i++ ) {
@@ -632 +628 @@
                         }
                     }
-
-                    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 );
@@ -727 +713 @@
         remove: function( editor, node ) {
             this.unbindNode.call( this, editor, node );
-            $( node ).trigger( 'wp-mce-view-unbind' );
             editor.dom.remove( node );
             editor.focus();

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

@@ -32 +32 @@
         }
 
+        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 ) {