Make WordPress Core

Changeset 39282


Ignore:
Timestamp:
11/17/2016 08:31:12 PM (8 years 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.