Make WordPress Core

Ticket #38511: 38511.7.patch

File 38511.7.patch, 8.7 KB (added by azaozz, 8 years ago)
  • src/wp-includes/js/mce-view.js

     
    157157
    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 );
    162170
     
    208216                 */
    209217                render: function( force ) {
    210218                        _.each( instances, function( instance ) {
    211                                 instance.render( force );
     219                                instance.render( null, force );
    212220                        } );
    213221                },
    214222
     
    490498                                var dom = editor.dom,
    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 ) {
    496505                                        if ( link.href && link.href.indexOf( 'skins/lightgray/content.min.css' ) === -1 &&
     
    511520                                        }, '\u200B' );
    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;
     523                                editor.undoManager.transact( function() {
     524                                        node.innerHTML = '';
    518525
    519                                         editor.undoManager.transact( function() {
    520                                                 node.innerHTML = '';
     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
     538                                        } );
    521539
    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                                                 } );
     540                                        dom.add( node, 'span', { 'class': 'mce-shim' } );
     541                                        dom.add( node, 'span', { 'class': 'wpview-end' } );
     542                                } );
    535543
    536                                                 dom.add( node, 'span', { 'class': 'mce-shim' } );
    537                                                 dom.add( node, 'span', { 'class': 'wpview-end' } );
    538                                         } );
     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                                }
    539551
    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                                         }
     552                                iframeWin = iframe.contentWindow;
     553                                iframeDoc = iframeWin.document;
     554                                iframeDoc.open();
    547555
    548                                         iframeWin = iframe.contentWindow;
    549                                         iframeDoc = iframeWin.document;
    550                                         iframeDoc.open();
     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                                );
    551586
    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                                         );
     587                                iframeDoc.close();
    582588
    583                                         iframeDoc.close();
     589                                function resize() {
     590                                        var $iframe;
    584591
    585                                         function resize() {
    586                                                 var $iframe;
     592                                        if ( block ) {
     593                                                return;
     594                                        }
    587595
    588                                                 if ( block ) {
    589                                                         return;
    590                                                 }
     596                                        // Make sure the iframe still exists.
     597                                        if ( iframe.contentWindow ) {
     598                                                $iframe = $( iframe );
     599                                                self.iframeHeight = $( iframeDoc.body ).height();
    591600
    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                                                if ( $iframe.height() !== self.iframeHeight ) {
     602                                                        $iframe.height( self.iframeHeight );
     603                                                        editor.nodeChanged();
    601604                                                }
    602605                                        }
     606                                }
    603607
    604                                         if ( self.iframeHeight ) {
    605                                                 block = true;
     608                                if ( self.iframeHeight ) {
     609                                        block = true;
    606610
    607                                                 setTimeout( function() {
    608                                                         block = false;
    609                                                         resize();
    610                                                 }, 3000 );
    611                                         }
     611                                        setTimeout( function() {
     612                                                block = false;
     613                                                resize();
     614                                        }, 3000 );
     615                                }
    612616
    613                                         $( iframeWin ).on( 'load', resize );
     617                                function reload() {
     618                                        $( node ).data( 'rendered', null );
    614619
    615                                         MutationObserver = iframeWin.MutationObserver || iframeWin.WebKitMutationObserver || iframeWin.MozMutationObserver;
     620                                        setTimeout( function() {
     621                                                wp.mce.views.render();
     622                                        } );
     623                                }
    616624
    617                                         if ( MutationObserver ) {
    618                                                 observer = new MutationObserver( _.debounce( resize, 100 ) );
     625                                $( iframeWin ).on( 'load', resize ).on( 'unload', reload );
    619626
    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                                                 }
     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 );
    629640                                        }
     641                                }
    630642
    631                                         callback && callback.call( self, editor, node );
    632                                 }, 50 );
     643                                callback && callback.call( self, editor, node );
    633644                        }, rendered );
    634645                },
    635646
  • 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                        } );