Ticket #38511: 38511.5.patch

src/wp-includes/js/mce-view.js

@@ -490 +490 @@
                                 var dom = editor.dom,
                                         styles = '',
                                         bodyClasses = editor.getBody().className || '',
-                                        editorHead = editor.getDoc().getElementsByTagName( 'head' )[0];
+                                        editorHead = editor.getDoc().getElementsByTagName( 'head' )[0],
+                                        iframe, iframeWin, iframeDoc, MutationObserver, observer, i, block;
 
                                 tinymce.each( dom.$( 'link[rel="stylesheet"]', editorHead ), function( link ) {
                                         if ( link.href && link.href.indexOf( 'skins/lightgray/content.min.css' ) === -1 &&
@@ -511 +512 @@
                                         }, '\u200B' );
                                 }
 
-                                // Seems the browsers need a bit of time to insert/set the view nodes,
-                                // or the iframe will fail especially when switching Text => Visual.
-                                setTimeout( function() {
-                                        var iframe, iframeWin, iframeDoc, MutationObserver, observer, i, block;
-
-                                        editor.undoManager.transact( function() {
-                                                node.innerHTML = '';
-
-                                                iframe = dom.add( node, 'iframe', {
-                                                        /* jshint scripturl: true */
-                                                        src: tinymce.Env.ie ? 'javascript:""' : '',
-                                                        frameBorder: '0',
-                                                        allowTransparency: 'true',
-                                                        scrolling: 'no',
-                                                        'class': 'wpview-sandbox',
-                                                        style: {
-                                                                width: '100%',
-                                                                display: 'block'
-                                                        },
-                                                        height: self.iframeHeight
-                                                } );
+                                editor.undoManager.transact( function() {
+                                        node.innerHTML = '';
 
-                                                dom.add( node, 'span', { 'class': 'mce-shim' } );
-                                                dom.add( node, 'span', { 'class': 'wpview-end' } );
+                                        iframe = dom.add( node, 'iframe', {
+                                                /* jshint scripturl: true */
+                                                src: tinymce.Env.ie ? 'javascript:""' : '',
+                                                frameBorder: '0',
+                                                allowTransparency: 'true',
+                                                scrolling: 'no',
+                                                'class': 'wpview-sandbox',
+                                                style: {
+                                                        width: '100%',
+                                                        display: 'block'
+                                                },
+                                                height: self.iframeHeight
                                         } );
 
-                                        // Bail if the iframe node is not attached to the DOM.
-                                        // Happens when the view is dragged in the editor.
-                                        // There is a browser restriction when iframes are moved in the DOM. They get emptied.
-                                        // The iframe will be rerendered after dropping the view node at the new location.
-                                        if ( ! iframe.contentWindow ) {
-                                                return;
-                                        }
+                                        dom.add( node, 'span', { 'class': 'mce-shim' } );
+                                        dom.add( node, 'span', { 'class': 'wpview-end' } );
+                                } );
 
-                                        iframeWin = iframe.contentWindow;
-                                        iframeDoc = iframeWin.document;
-                                        iframeDoc.open();
-
-                                        iframeDoc.write(
-                                                '<!DOCTYPE html>' +
-                                                '<html>' +
-                                                        '<head>' +
-                                                                '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />' +
-                                                                head +
-                                                                styles +
-                                                                '<style>' +
-                                                                        'html {' +
-                                                                                'background: transparent;' +
-                                                                                'padding: 0;' +
-                                                                                'margin: 0;' +
-                                                                        '}' +
-                                                                        'body#wpview-iframe-sandbox {' +
-                                                                                'background: transparent;' +
-                                                                                'padding: 1px 0 !important;' +
-                                                                                'margin: -1px 0 0 !important;' +
-                                                                        '}' +
-                                                                        'body#wpview-iframe-sandbox:before,' +
-                                                                        'body#wpview-iframe-sandbox:after {' +
-                                                                                'display: none;' +
-                                                                                'content: "";' +
-                                                                        '}' +
-                                                                '</style>' +
-                                                        '</head>' +
-                                                        '<body id="wpview-iframe-sandbox" class="' + bodyClasses + '">' +
-                                                                body +
-                                                        '</body>' +
-                                                '</html>'
-                                        );
+                                // Bail if the iframe node is not attached to the DOM.
+                                // Happens when the view is dragged in the editor.
+                                // There is a browser restriction when iframes are moved in the DOM. They get emptied.
+                                // The iframe will be rerendered after dropping the view node at the new location.
+                                if ( ! iframe.contentWindow ) {
+                                        return;
+                                }
 
-                                        iframeDoc.close();
+                                iframeWin = iframe.contentWindow;
+                                iframeDoc = iframeWin.document;
+                                iframeDoc.open();
+
+                                iframeDoc.write(
+                                        '<!DOCTYPE html>' +
+                                        '<html>' +
+                                                '<head>' +
+                                                        '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />' +
+                                                        head +
+                                                        styles +
+                                                        '<style>' +
+                                                                'html {' +
+                                                                        'background: transparent;' +
+                                                                        'padding: 0;' +
+                                                                        'margin: 0;' +
+                                                                '}' +
+                                                                'body#wpview-iframe-sandbox {' +
+                                                                        'background: transparent;' +
+                                                                        'padding: 1px 0 !important;' +
+                                                                        'margin: -1px 0 0 !important;' +
+                                                                '}' +
+                                                                'body#wpview-iframe-sandbox:before,' +
+                                                                'body#wpview-iframe-sandbox:after {' +
+                                                                        'display: none;' +
+                                                                        'content: "";' +
+                                                                '}' +
+                                                        '</style>' +
+                                                '</head>' +
+                                                '<body id="wpview-iframe-sandbox" class="' + bodyClasses + '">' +
+                                                        body +
+                                                '</body>' +
+                                        '</html>'
+                                );
 
-                                        function resize() {
-                                                var $iframe;
+                                iframeDoc.close();
 
-                                                if ( block ) {
-                                                        return;
-                                                }
+                                function resize() {
+                                        var $iframe;
 
-                                                // Make sure the iframe still exists.
-                                                if ( iframe.contentWindow ) {
-                                                        $iframe = $( iframe );
-                                                        self.iframeHeight = $( iframeDoc.body ).height();
-
-                                                        if ( $iframe.height() !== self.iframeHeight ) {
-                                                                $iframe.height( self.iframeHeight );
-                                                                editor.nodeChanged();
-                                                        }
+                                        if ( block ) {
+                                                return;
+                                        }
+
+                                        // Make sure the iframe still exists.
+                                        if ( iframe.contentWindow ) {
+                                                $iframe = $( iframe );
+                                                self.iframeHeight = $( iframeDoc.body ).height();
+
+                                                if ( $iframe.height() !== self.iframeHeight ) {
+                                                        $iframe.height( self.iframeHeight );
+                                                        editor.nodeChanged();
                                                 }
                                         }
+                                }
 
-                                        if ( self.iframeHeight ) {
-                                                block = true;
+                                if ( self.iframeHeight ) {
+                                        block = true;
 
-                                                setTimeout( function() {
-                                                        block = false;
-                                                        resize();
-                                                }, 3000 );
-                                        }
+                                        setTimeout( function() {
+                                                block = false;
+                                                resize();
+                                        }, 3000 );
+                                }
 
-                                        $( iframeWin ).on( 'load', resize );
+                                $( iframeWin ).on( 'load', resize );
 
-                                        MutationObserver = iframeWin.MutationObserver || iframeWin.WebKitMutationObserver || iframeWin.MozMutationObserver;
+                                MutationObserver = iframeWin.MutationObserver || iframeWin.WebKitMutationObserver || iframeWin.MozMutationObserver;
 
-                                        if ( MutationObserver ) {
-                                                observer = new MutationObserver( _.debounce( resize, 100 ) );
+                                if ( MutationObserver ) {
+                                        observer = new MutationObserver( _.debounce( resize, 100 ) );
 
-                                                observer.observe( iframeDoc.body, {
-                                                        attributes: true,
-                                                        childList: true,
-                                                        subtree: true
-                                                } );
-                                        } else {
-                                                for ( i = 1; i < 6; i++ ) {
-                                                        setTimeout( resize, i * 700 );
-                                                }
+                                        observer.observe( iframeDoc.body, {
+                                                attributes: true,
+                                                childList: true,
+                                                subtree: true
+                                        } );
+                                } else {
+                                        for ( i = 1; i < 6; i++ ) {
+                                                setTimeout( resize, i * 700 );
                                         }
+                                }
 
-                                        callback && callback.call( self, editor, node );
-                                }, 50 );
+                                callback && callback.call( self, editor, node );
                         }, rendered );
                 },
 

src/wp-includes/js/tinymce/plugins/wpview/plugin.js

@@ -93 +93 @@
 
                 // Replace any new markers nodes with views.
                 editor.on( 'setcontent', function() {
+                        // Make sure that the editor is focussed.
+                        // May refresh the content internally which resets the iframes.
+                        editor.focus();
                         wp.mce.views.render();
                 } );