Changeset 39282

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:

• mce-view.js (modified) (4 diffs)
• tinymce/plugins/wpview/plugin.js (modified) (1 diff)

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

@@ -158 +158 @@
             text = tinymce.DOM.decode( text );
 
+            if ( text.indexOf( '[' ) !== -1 && text.indexOf( ']' ) !== -1 ) {
+                // Looks like a shortcode? Remove any line breaks from inside of shortcodes
+                // or autop will replace them with <p> and <br> later and the string won't match.
+                text = text.replace( /\[[^\]]+\]/g, function( match ) {
+                    return match.replace( /[\r\n]/g, '' );
+                });
+            }
+
             if ( ! force ) {
                 instance = this.getInstance( text );
@@ -209 +217 @@
         render: function( force ) {
             _.each( instances, function( instance ) {
-                instance.render( force );
+                instance.render( null, force );
             } );
         },
@@ -491 +499 @@
                     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 ) {
@@ -512 +521 @@
                 }
 
-                // 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
-                        } );
-
-                        dom.add( node, 'span', { 'class': 'mce-shim' } );
-                        dom.add( node, 'span', { 'class': 'wpview-end' } );
+                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
                     } );
 
-                    // 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 ) {
+                    dom.add( node, 'span', { 'class': 'mce-shim' } );
+                    dom.add( node, 'span', { 'class': 'wpview-end' } );
+                } );
+
+                // 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;
+                }
+
+                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>'
+                );
+
+                iframeDoc.close();
+
+                function resize() {
+                    var $iframe;
+
+                    if ( block ) {
                         return;
                     }
 
-                    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>'
-                    );
-
-                    iframeDoc.close();
-
-                    function resize() {
-                        var $iframe;
-
-                        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();
                         }
-
-                        // 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;
-
-                        setTimeout( function() {
-                            block = false;
-                            resize();
-                        }, 3000 );
-                    }
-
-                    $( iframeWin ).on( 'load', resize );
-
-                    MutationObserver = iframeWin.MutationObserver || iframeWin.WebKitMutationObserver || iframeWin.MozMutationObserver;
-
-                    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 );
-                        }
-                    }
-
-                    callback && callback.call( self, editor, node );
-                }, 50 );
+                    }
+                }
+
+                if ( self.iframeHeight ) {
+                    block = true;
+
+                    setTimeout( function() {
+                        block = false;
+                        resize();
+                    }, 3000 );
+                }
+
+                function reload() {
+                    $( node ).data( 'rendered', null );
+
+                    setTimeout( function() {
+                        wp.mce.views.render();
+                    } );
+                }
+
+                $( iframeWin ).on( 'load', resize ).on( 'unload', reload );
+
+                MutationObserver = iframeWin.MutationObserver || iframeWin.WebKitMutationObserver || iframeWin.MozMutationObserver;
+
+                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 );
+                    }
+                }
+
+                callback && callback.call( self, editor, node );
             }, rendered );
         },

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

@@ -94 +94 @@
         // 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();
         } );
 
         // Empty view nodes for easier processing.
-        editor.on( 'preprocess', function( event ) {
+        editor.on( 'preprocess hide', function( event ) {
             editor.$( 'div[data-wpview-text], p[data-wpview-marker]', event.node ).each( function( i, node ) {
                 node.innerHTML = '.';