WordPress.org

Make WordPress Core

Changeset 39282


Ignore:
Timestamp:
11/17/16 20:31:12 (4 months ago)
Author:
iseulde
Message:

TinyMCE views: fix Firefox issues.

  • Set focus before rendering to prevent reload in Firefox.
  • Rerender views if they are unloaded.
  • Remove timeout added in [29513].
  • Fix argument in wp.mce.views.render.
  • Empty views on hide. Missed in #36434.

Props gitlost, azaozz, iseulde.
Fixes #38511.

Location:
trunk/src/wp-includes/js
Files:
2 edited

Legend:

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

    r39051 r39282  
    158158            text = tinymce.DOM.decode( text ); 
    159159 
     160            if ( text.indexOf( '[' ) !== -1 && text.indexOf( ']' ) !== -1 ) { 
     161                // Looks like a shortcode? Remove any line breaks from inside of shortcodes 
     162                // or autop will replace them with <p> and <br> later and the string won't match. 
     163                text = text.replace( /\[[^\]]+\]/g, function( match ) { 
     164                    return match.replace( /[\r\n]/g, '' ); 
     165                }); 
     166            } 
     167 
    160168            if ( ! force ) { 
    161169                instance = this.getInstance( text ); 
     
    209217        render: function( force ) { 
    210218            _.each( instances, function( instance ) { 
    211                 instance.render( force ); 
     219                instance.render( null, force ); 
    212220            } ); 
    213221        }, 
     
    491499                    styles = '', 
    492500                    bodyClasses = editor.getBody().className || '', 
    493                     editorHead = editor.getDoc().getElementsByTagName( 'head' )[0]; 
     501                    editorHead = editor.getDoc().getElementsByTagName( 'head' )[0], 
     502                    iframe, iframeWin, iframeDoc, MutationObserver, observer, i, block; 
    494503 
    495504                tinymce.each( dom.$( 'link[rel="stylesheet"]', editorHead ), function( link ) { 
     
    512521                } 
    513522 
    514                 // Seems the browsers need a bit of time to insert/set the view nodes, 
    515                 // or the iframe will fail especially when switching Text => Visual. 
    516                 setTimeout( function() { 
    517                     var iframe, iframeWin, iframeDoc, MutationObserver, observer, i, block; 
    518  
    519                     editor.undoManager.transact( function() { 
    520                         node.innerHTML = ''; 
    521  
    522                         iframe = dom.add( node, 'iframe', { 
    523                             /* jshint scripturl: true */ 
    524                             src: tinymce.Env.ie ? 'javascript:""' : '', 
    525                             frameBorder: '0', 
    526                             allowTransparency: 'true', 
    527                             scrolling: 'no', 
    528                             'class': 'wpview-sandbox', 
    529                             style: { 
    530                                 width: '100%', 
    531                                 display: 'block' 
    532                             }, 
    533                             height: self.iframeHeight 
    534                         } ); 
    535  
    536                         dom.add( node, 'span', { 'class': 'mce-shim' } ); 
    537                         dom.add( node, 'span', { 'class': 'wpview-end' } ); 
     523                editor.undoManager.transact( function() { 
     524                    node.innerHTML = ''; 
     525 
     526                    iframe = dom.add( node, 'iframe', { 
     527                        /* jshint scripturl: true */ 
     528                        src: tinymce.Env.ie ? 'javascript:""' : '', 
     529                        frameBorder: '0', 
     530                        allowTransparency: 'true', 
     531                        scrolling: 'no', 
     532                        'class': 'wpview-sandbox', 
     533                        style: { 
     534                            width: '100%', 
     535                            display: 'block' 
     536                        }, 
     537                        height: self.iframeHeight 
    538538                    } ); 
    539539 
    540                     // Bail if the iframe node is not attached to the DOM. 
    541                     // Happens when the view is dragged in the editor. 
    542                     // There is a browser restriction when iframes are moved in the DOM. They get emptied. 
    543                     // The iframe will be rerendered after dropping the view node at the new location. 
    544                     if ( ! iframe.contentWindow ) { 
     540                    dom.add( node, 'span', { 'class': 'mce-shim' } ); 
     541                    dom.add( node, 'span', { 'class': 'wpview-end' } ); 
     542                } ); 
     543 
     544                // Bail if the iframe node is not attached to the DOM. 
     545                // Happens when the view is dragged in the editor. 
     546                // There is a browser restriction when iframes are moved in the DOM. They get emptied. 
     547                // The iframe will be rerendered after dropping the view node at the new location. 
     548                if ( ! iframe.contentWindow ) { 
     549                    return; 
     550                } 
     551 
     552                iframeWin = iframe.contentWindow; 
     553                iframeDoc = iframeWin.document; 
     554                iframeDoc.open(); 
     555 
     556                iframeDoc.write( 
     557                    '<!DOCTYPE html>' + 
     558                    '<html>' + 
     559                        '<head>' + 
     560                            '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />' + 
     561                            head + 
     562                            styles + 
     563                            '<style>' + 
     564                                'html {' + 
     565                                    'background: transparent;' + 
     566                                    'padding: 0;' + 
     567                                    'margin: 0;' + 
     568                                '}' + 
     569                                'body#wpview-iframe-sandbox {' + 
     570                                    'background: transparent;' + 
     571                                    'padding: 1px 0 !important;' + 
     572                                    'margin: -1px 0 0 !important;' + 
     573                                '}' + 
     574                                'body#wpview-iframe-sandbox:before,' + 
     575                                'body#wpview-iframe-sandbox:after {' + 
     576                                    'display: none;' + 
     577                                    'content: "";' + 
     578                                '}' + 
     579                            '</style>' + 
     580                        '</head>' + 
     581                        '<body id="wpview-iframe-sandbox" class="' + bodyClasses + '">' + 
     582                            body + 
     583                        '</body>' + 
     584                    '</html>' 
     585                ); 
     586 
     587                iframeDoc.close(); 
     588 
     589                function resize() { 
     590                    var $iframe; 
     591 
     592                    if ( block ) { 
    545593                        return; 
    546594                    } 
    547595 
    548                     iframeWin = iframe.contentWindow; 
    549                     iframeDoc = iframeWin.document; 
    550                     iframeDoc.open(); 
    551  
    552                     iframeDoc.write( 
    553                         '<!DOCTYPE html>' + 
    554                         '<html>' + 
    555                             '<head>' + 
    556                                 '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />' + 
    557                                 head + 
    558                                 styles + 
    559                                 '<style>' + 
    560                                     'html {' + 
    561                                         'background: transparent;' + 
    562                                         'padding: 0;' + 
    563                                         'margin: 0;' + 
    564                                     '}' + 
    565                                     'body#wpview-iframe-sandbox {' + 
    566                                         'background: transparent;' + 
    567                                         'padding: 1px 0 !important;' + 
    568                                         'margin: -1px 0 0 !important;' + 
    569                                     '}' + 
    570                                     'body#wpview-iframe-sandbox:before,' + 
    571                                     'body#wpview-iframe-sandbox:after {' + 
    572                                         'display: none;' + 
    573                                         'content: "";' + 
    574                                     '}' + 
    575                                 '</style>' + 
    576                             '</head>' + 
    577                             '<body id="wpview-iframe-sandbox" class="' + bodyClasses + '">' + 
    578                                 body + 
    579                             '</body>' + 
    580                         '</html>' 
    581                     ); 
    582  
    583                     iframeDoc.close(); 
    584  
    585                     function resize() { 
    586                         var $iframe; 
    587  
    588                         if ( block ) { 
    589                             return; 
     596                    // Make sure the iframe still exists. 
     597                    if ( iframe.contentWindow ) { 
     598                        $iframe = $( iframe ); 
     599                        self.iframeHeight = $( iframeDoc.body ).height(); 
     600 
     601                        if ( $iframe.height() !== self.iframeHeight ) { 
     602                            $iframe.height( self.iframeHeight ); 
     603                            editor.nodeChanged(); 
    590604                        } 
    591  
    592                         // Make sure the iframe still exists. 
    593                         if ( iframe.contentWindow ) { 
    594                             $iframe = $( iframe ); 
    595                             self.iframeHeight = $( iframeDoc.body ).height(); 
    596  
    597                             if ( $iframe.height() !== self.iframeHeight ) { 
    598                                 $iframe.height( self.iframeHeight ); 
    599                                 editor.nodeChanged(); 
    600                             } 
    601                         } 
    602                     } 
    603  
    604                     if ( self.iframeHeight ) { 
    605                         block = true; 
    606  
    607                         setTimeout( function() { 
    608                             block = false; 
    609                             resize(); 
    610                         }, 3000 ); 
    611                     } 
    612  
    613                     $( iframeWin ).on( 'load', resize ); 
    614  
    615                     MutationObserver = iframeWin.MutationObserver || iframeWin.WebKitMutationObserver || iframeWin.MozMutationObserver; 
    616  
    617                     if ( MutationObserver ) { 
    618                         observer = new MutationObserver( _.debounce( resize, 100 ) ); 
    619  
    620                         observer.observe( iframeDoc.body, { 
    621                             attributes: true, 
    622                             childList: true, 
    623                             subtree: true 
    624                         } ); 
    625                     } else { 
    626                         for ( i = 1; i < 6; i++ ) { 
    627                             setTimeout( resize, i * 700 ); 
    628                         } 
    629                     } 
    630  
    631                     callback && callback.call( self, editor, node ); 
    632                 }, 50 ); 
     605                    } 
     606                } 
     607 
     608                if ( self.iframeHeight ) { 
     609                    block = true; 
     610 
     611                    setTimeout( function() { 
     612                        block = false; 
     613                        resize(); 
     614                    }, 3000 ); 
     615                } 
     616 
     617                function reload() { 
     618                    $( node ).data( 'rendered', null ); 
     619 
     620                    setTimeout( function() { 
     621                        wp.mce.views.render(); 
     622                    } ); 
     623                } 
     624 
     625                $( iframeWin ).on( 'load', resize ).on( 'unload', reload ); 
     626 
     627                MutationObserver = iframeWin.MutationObserver || iframeWin.WebKitMutationObserver || iframeWin.MozMutationObserver; 
     628 
     629                if ( MutationObserver ) { 
     630                    observer = new MutationObserver( _.debounce( resize, 100 ) ); 
     631 
     632                    observer.observe( iframeDoc.body, { 
     633                        attributes: true, 
     634                        childList: true, 
     635                        subtree: true 
     636                    } ); 
     637                } else { 
     638                    for ( i = 1; i < 6; i++ ) { 
     639                        setTimeout( resize, i * 700 ); 
     640                    } 
     641                } 
     642 
     643                callback && callback.call( self, editor, node ); 
    633644            }, rendered ); 
    634645        }, 
  • trunk/src/wp-includes/js/tinymce/plugins/wpview/plugin.js

    r38158 r39282  
    9494        // Replace any new markers nodes with views. 
    9595        editor.on( 'setcontent', function() { 
     96            // Make sure that the editor is focussed. 
     97            // May refresh the content internally which resets the iframes. 
     98            editor.focus(); 
    9699            wp.mce.views.render(); 
    97100        } ); 
    98101 
    99102        // Empty view nodes for easier processing. 
    100         editor.on( 'preprocess', function( event ) { 
     103        editor.on( 'preprocess hide', function( event ) { 
    101104            editor.$( 'div[data-wpview-text], p[data-wpview-marker]', event.node ).each( function( i, node ) { 
    102105                node.innerHTML = '.'; 
Note: See TracChangeset for help on using the changeset viewer.