Make WordPress Core

Ticket #38511: 38511.6.patch

File 38511.6.patch, 8.2 KB (added by iseulde, 8 years ago)
  • src/wp-includes/js/mce-view.js

     
    208208                 */
    209209                render: function( force ) {
    210210                        _.each( instances, function( instance ) {
    211                                 instance.render( force );
     211                                instance.render( null, force );
    212212                        } );
    213213                },
    214214
     
    490490                                var dom = editor.dom,
    491491                                        styles = '',
    492492                                        bodyClasses = editor.getBody().className || '',
    493                                         editorHead = editor.getDoc().getElementsByTagName( 'head' )[0];
     493                                        editorHead = editor.getDoc().getElementsByTagName( 'head' )[0],
     494                                        iframe, iframeWin, iframeDoc, MutationObserver, observer, i, block;
    494495
    495496                                tinymce.each( dom.$( 'link[rel="stylesheet"]', editorHead ), function( link ) {
    496497                                        if ( link.href && link.href.indexOf( 'skins/lightgray/content.min.css' ) === -1 &&
     
    511512                                        }, '\u200B' );
    512513                                }
    513514
    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;
     515                                editor.undoManager.transact( function() {
     516                                        node.innerHTML = '';
    518517
    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' } );
     518                                        iframe = dom.add( node, 'iframe', {
     519                                                /* jshint scripturl: true */
     520                                                src: tinymce.Env.ie ? 'javascript:""' : '',
     521                                                frameBorder: '0',
     522                                                allowTransparency: 'true',
     523                                                scrolling: 'no',
     524                                                'class': 'wpview-sandbox',
     525                                                style: {
     526                                                        width: '100%',
     527                                                        display: 'block'
     528                                                },
     529                                                height: self.iframeHeight
    538530                                        } );
    539531
    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 ) {
    545                                                 return;
    546                                         }
     532                                        dom.add( node, 'span', { 'class': 'mce-shim' } );
     533                                        dom.add( node, 'span', { 'class': 'wpview-end' } );
     534                                } );
    547535
    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                                         );
     536                                // Bail if the iframe node is not attached to the DOM.
     537                                // Happens when the view is dragged in the editor.
     538                                // There is a browser restriction when iframes are moved in the DOM. They get emptied.
     539                                // The iframe will be rerendered after dropping the view node at the new location.
     540                                if ( ! iframe.contentWindow ) {
     541                                        return;
     542                                }
    582543
    583                                         iframeDoc.close();
     544                                iframeWin = iframe.contentWindow;
     545                                iframeDoc = iframeWin.document;
     546                                iframeDoc.open();
     547
     548                                iframeDoc.write(
     549                                        '<!DOCTYPE html>' +
     550                                        '<html>' +
     551                                                '<head>' +
     552                                                        '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />' +
     553                                                        head +
     554                                                        styles +
     555                                                        '<style>' +
     556                                                                'html {' +
     557                                                                        'background: transparent;' +
     558                                                                        'padding: 0;' +
     559                                                                        'margin: 0;' +
     560                                                                '}' +
     561                                                                'body#wpview-iframe-sandbox {' +
     562                                                                        'background: transparent;' +
     563                                                                        'padding: 1px 0 !important;' +
     564                                                                        'margin: -1px 0 0 !important;' +
     565                                                                '}' +
     566                                                                'body#wpview-iframe-sandbox:before,' +
     567                                                                'body#wpview-iframe-sandbox:after {' +
     568                                                                        'display: none;' +
     569                                                                        'content: "";' +
     570                                                                '}' +
     571                                                        '</style>' +
     572                                                '</head>' +
     573                                                '<body id="wpview-iframe-sandbox" class="' + bodyClasses + '">' +
     574                                                        body +
     575                                                '</body>' +
     576                                        '</html>'
     577                                );
    584578
    585                                         function resize() {
    586                                                 var $iframe;
     579                                iframeDoc.close();
    587580
    588                                                 if ( block ) {
    589                                                         return;
    590                                                 }
     581                                function resize() {
     582                                        var $iframe;
    591583
    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                                                         }
     584                                        if ( block ) {
     585                                                return;
     586                                        }
     587
     588                                        // Make sure the iframe still exists.
     589                                        if ( iframe.contentWindow ) {
     590                                                $iframe = $( iframe );
     591                                                self.iframeHeight = $( iframeDoc.body ).height();
     592
     593                                                if ( $iframe.height() !== self.iframeHeight ) {
     594                                                        $iframe.height( self.iframeHeight );
     595                                                        editor.nodeChanged();
    601596                                                }
    602597                                        }
     598                                }
    603599
    604                                         if ( self.iframeHeight ) {
    605                                                 block = true;
     600                                if ( self.iframeHeight ) {
     601                                        block = true;
    606602
    607                                                 setTimeout( function() {
    608                                                         block = false;
    609                                                         resize();
    610                                                 }, 3000 );
    611                                         }
     603                                        setTimeout( function() {
     604                                                block = false;
     605                                                resize();
     606                                        }, 3000 );
     607                                }
     608
     609                                function reload() {
     610                                        $( node ).data( 'rendered', null );
    612611
    613                                         $( iframeWin ).on( 'load', resize );
     612                                        setTimeout( function() {
     613                                                wp.mce.views.render();
     614                                        } );
     615                                }
    614616
    615                                         MutationObserver = iframeWin.MutationObserver || iframeWin.WebKitMutationObserver || iframeWin.MozMutationObserver;
     617                                $( iframeWin ).on( 'load', resize ).on( 'unload', reload );
    616618
    617                                         if ( MutationObserver ) {
    618                                                 observer = new MutationObserver( _.debounce( resize, 100 ) );
     619                                MutationObserver = iframeWin.MutationObserver || iframeWin.WebKitMutationObserver || iframeWin.MozMutationObserver;
    619620
    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                                                 }
     621                                if ( MutationObserver ) {
     622                                        observer = new MutationObserver( _.debounce( resize, 100 ) );
     623
     624                                        observer.observe( iframeDoc.body, {
     625                                                attributes: true,
     626                                                childList: true,
     627                                                subtree: true
     628                                        } );
     629                                } else {
     630                                        for ( i = 1; i < 6; i++ ) {
     631                                                setTimeout( resize, i * 700 );
    629632                                        }
     633                                }
    630634
    631                                         callback && callback.call( self, editor, node );
    632                                 }, 50 );
     635                                callback && callback.call( self, editor, node );
    633636                        }, rendered );
    634637                },
    635638
  • src/wp-includes/js/tinymce/plugins/wpview/plugin.js

     
    9393
    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 = '.';
    103106                        } );