WordPress.org

Make WordPress Core

Changeset 38158


Ignore:
Timestamp:
07/26/2016 11:12:14 PM (4 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/mce-view.js

    r38157 r38158  
    354354            this.getNodes( function( editor, node ) {
    355355                this.unbindNode.call( this, editor, node );
    356                 $( node ).trigger( 'wp-mce-view-unbind' );
    357356            }, true );
    358357        },
     
    395394                    } )
    396395                    .each( function() {
    397                         callback.call( self, editor, this );
     396                        callback.call( self, editor, this, this /* back compat */ );
    398397                    } );
    399398            } );
     
    430429
    431430                $viewNode = editor.$(
    432                     '<div class="wpview" data-wpview-text="' + this.encodedText + '" data-wpview-type="' + this.type + '" contenteditable="false"></div>'
     431                    '<div class="wpview wpview-wrap" data-wpview-text="' + this.encodedText + '" data-wpview-type="' + this.type + '" contenteditable="false"></div>'
    433432                );
    434433
     
    486485         */
    487486        setIframes: function( head, body, callback, rendered ) {
    488             var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
    489                 self = this;
     487            var self = this;
    490488
    491489            this.getNodes( function( editor, node ) {
     
    517515                // or the iframe will fail especially when switching Text => Visual.
    518516                setTimeout( function() {
    519                     var iframe, iframeDoc, observer, i, block;
     517                    var iframe, iframeWin, iframeDoc, MutationObserver, observer, i, block;
    520518
    521519                    editor.undoManager.transact( function() {
     
    548546                    }
    549547
    550                     iframeDoc = iframe.contentWindow.document;
    551 
     548                    iframeWin = iframe.contentWindow;
     549                    iframeDoc = iframeWin.document;
    552550                    iframeDoc.open();
    553551
     
    613611                    }
    614612
    615                     $( iframe.contentWindow ).on( 'load', resize );
     613                    $( iframeWin ).on( 'load', resize );
     614
     615                    MutationObserver = iframeWin.MutationObserver || iframeWin.WebKitMutationObserver || iframeWin.MozMutationObserver;
    616616
    617617                    if ( MutationObserver ) {
     
    623623                            subtree: true
    624624                        } );
    625 
    626                         $( node ).one( 'wp-mce-view-unbind', function() {
    627                             observer.disconnect();
    628                         } );
    629625                    } else {
    630626                        for ( i = 1; i < 6; i++ ) {
     
    632628                        }
    633629                    }
    634 
    635                     function classChange() {
    636                         iframeDoc.body.className = editor.getBody().className;
    637                     }
    638 
    639                     editor.on( 'wp-body-class-change', classChange );
    640 
    641                     $( node ).one( 'wp-mce-view-unbind', function() {
    642                         editor.off( 'wp-body-class-change', classChange );
    643                     } );
    644630
    645631                    callback && callback.call( self, editor, node );
     
    727713        remove: function( editor, node ) {
    728714            this.unbindNode.call( this, editor, node );
    729             $( node ).trigger( 'wp-mce-view-unbind' );
    730715            editor.dom.remove( node );
    731716            editor.focus();
  • trunk/src/wp-includes/js/tinymce/plugins/wpview/plugin.js

    r37597 r38158  
    3232        }
    3333
     34        editor.on( 'init', function() {
     35            var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
     36
     37            if ( MutationObserver ) {
     38                new MutationObserver( function() {
     39                    editor.fire( 'wp-body-class-change' );
     40                } )
     41                .observe( editor.getBody(), {
     42                    attributes: true,
     43                    attributeFilter: ['class']
     44                } );
     45            }
     46
     47            // Pass on body class name changes from the editor to the wpView iframes.
     48            editor.on( 'wp-body-class-change', function() {
     49                var className = editor.getBody().className;
     50
     51                editor.$( 'iframe[class="wpview-sandbox"]' ).each( function( i, iframe ) {
     52                    // Make sure it is a local iframe
     53                    // jshint scripturl: true
     54                    if ( ! iframe.src || iframe.src === 'javascript:""' ) {
     55                        try {
     56                            iframe.contentWindow.document.body.className = className;
     57                        } catch( er ) {}
     58                    }
     59                });
     60            } );
     61        });
     62
    3463        // Scan new content for matching view patterns and replace them with markers.
    3564        editor.on( 'beforesetcontent', function( event ) {
Note: See TracChangeset for help on using the changeset viewer.