Changeset 32022

Timestamp:

04/04/2015 10:59:07 PM (9 years ago)

Author:

azaozz

Message:

TinyMCE wpView:

• Fix editor undo levels.
• Remove views and markers in the DOM before serialization.
• Unbind views before removing them on hide.
• Empty the content in the timeout, so it doesn't render iframes twice.

Props iseulde. Fixes #31669.

Location:

trunk/src/wp-includes

Files:

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

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

@@ -88 +88 @@
          *
          * @param {String} content The string to scan.
+         *
+         * @return {String} The string with markers.
          */
         setMarkers: function( content ) {
@@ -299 +301 @@
          * Renders all view nodes tied to this view instance that are not yet rendered.
          *
+         * @param {String} content The content to render. Optional.
          * @param {Boolean} force Rerender all view nodes tied to this view instance.
          */
-        render: function( force ) {
+        render: function( content, force ) {
+            if ( content != null ) {
+                this.content = content;
+            }
+
+            content = this.getContent();
+
             // If there's nothing to render an no loader needs to be shown, stop.
-            if ( ! this.loader && ! this.getContent() ) {
+            if ( ! this.loader && ! content ) {
                 return;
             }
@@ -313 +322 @@
             this.replaceMarkers();
 
-            if ( this.getContent() ) {
-                this.setContent( this.getContent(), function( editor, node ) {
-                    $( node ).data( 'rendered', true ).trigger( 'wp-mce-view-bind' );
+            if ( content ) {
+                this.setContent( content, function( editor, node ) {
+                    $( node ).data( 'rendered', true );
+                    this.bindNode.call( this, editor, node );
                 }, force ? null : false );
             } else {
@@ -323 +333 @@
 
         /**
+         * Binds a given node after its content is added to the DOM.
+         */
+        bindNode: function() {},
+
+        /**
+         * Unbinds a given node before its content is removed from the DOM.
+         */
+        unbindNode: function() {},
+
+        /**
          * Unbinds all view nodes tied to this view instance.
          * Runs before their content is removed from the DOM.
@@ -328 +348 @@
         unbind: function() {
             this.getNodes( function( editor, node ) {
+                this.unbindNode.call( this, editor, node );
                 $( node ).trigger( 'wp-mce-view-unbind' );
             }, true );
@@ -448 +469 @@
                     contentNode.appendChild( _.isString( content ) ? editor.dom.createFragment( content ) : content );
 
-                    callback && callback.apply( this, arguments );
+                    callback && callback.call( this, editor, node, contentNode );
                 }, rendered );
             }
@@ -462 +483 @@
          */
         setIframes: function( head, body, callback, rendered ) {
-            var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
+            var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
+                self = this;
 
             this.getNodes( function( editor, node, content ) {
-                // Seems Firefox needs a bit of time to insert/set the view nodes,
+                var dom = editor.dom,
+                    styles = '',
+                    bodyClasses = editor.getBody().className || '',
+                    editorHead = editor.getDoc().getElementsByTagName( 'head' )[0],
+                    iframe, iframeDoc, observer, i;
+
+                tinymce.each( dom.$( 'link[rel="stylesheet"]', editorHead ), function( link ) {
+                    if ( link.href && link.href.indexOf( 'skins/lightgray/content.min.css' ) === -1 &&
+                        link.href.indexOf( 'skins/wordpress/wp-content.css' ) === -1 ) {
+
+                        styles += dom.getOuterHTML( link );
+                    }
+                } );
+
+                // 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 dom = editor.dom,
-                        styles = '',
-                        bodyClasses = editor.getBody().className || '',
-                        iframe, iframeDoc, observer, i;
-
-                    tinymce.each( dom.$(
-                        'link[rel="stylesheet"]',
-                        editor.getDoc().getElementsByTagName( 'head' )[0]
-                    ), function( link ) {
-                        if (
-                            link.href &&
-                            link.href.indexOf( 'skins/lightgray/content.min.css' ) === -1 &&
-                            link.href.indexOf( 'skins/wordpress/wp-content.css' ) === -1
-                        ) {
-                            styles += dom.getOuterHTML( link );
-                        }
-                    } );
-
                     content.innerHTML = '';
 
@@ -583 +601 @@
                     } );
 
-                    callback && callback.apply( this, arguments );
+                    callback && callback.call( self, editor, node );
                 }, 50 );
             }, rendered );
@@ -665 +683 @@
          */
         remove: function( editor, node ) {
+            this.unbindNode.call( this, editor, node, $( node ).find( '.wpview-content' ).get( 0 ) );
             $( node ).trigger( 'wp-mce-view-unbind' );
             editor.dom.remove( node );
@@ -729 +748 @@
                 } );
 
-                self.content = self.template( {
+                self.render( self.template( {
                     attachments: attachments,
                     columns: attrs.columns ? parseInt( attrs.columns, 10 ) : wp.media.galleryDefaults.columns
-                } );
-
-                self.render();
+                } ) );
             } )
             .fail( function( jqXHR, textStatus ) {
@@ -755 +772 @@
             }
 
-            wp.ajax.send( this.action, {
-                data: {
-                    post_ID: postID,
-                    type: this.shortcode.tag,
-                    shortcode: this.shortcode.string()
-                }
+            wp.ajax.post( this.action, {
+                post_ID: postID,
+                type: this.shortcode.tag,
+                shortcode: this.shortcode.string()
             } )
             .done( function( response ) {
-                self.content = response;
-                self.render();
+                self.render( response );
             } )
             .fail( function( response ) {

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

@@ -5 +5 @@
  */
 tinymce.PluginManager.add( 'wpview', function( editor ) {
-    var selected,
+    var $ = editor.$,
+        selected,
         Env = tinymce.Env,
         VK = tinymce.util.VK,
@@ -154 +155 @@
     // Remove the content of view wrappers from HTML string
     function emptyViews( content ) {
-        return content.replace(/<div[^>]+data-wpview-text=\"([^"]+)"[^>]*>[\s\S]+?wpview-selection-after[^>]+>(?:&nbsp;|\u00a0)*<\/p><\/div>/g, '$1' );
+        content = content.replace( /<div[^>]+data-wpview-text="([^"]+)"[^>]*>[\s\S]+?wpview-selection-after[^>]+>[^<>]*<\/p>\s*<\/div>/g, function( all, match ) {
+            return '<p>' + window.decodeURIComponent( match ) + '</p>';
+        });
+
+        return content.replace( / data-wpview-marker="[^"]+"/g, '' );
     }
 
     // Prevent adding undo levels on changes inside a view wrapper
     editor.on( 'BeforeAddUndo', function( event ) {
-        if ( event.lastLevel && emptyViews( event.level.content ) === emptyViews( event.lastLevel.content ) ) {
-            event.preventDefault();
+        if ( event.level.content ) {
+            event.level.content = emptyViews( event.level.content );
         }
     });
@@ -169 +174 @@
     editor.on( 'BeforeSetContent', function( event ) {
         var node;
+
+        if ( ! event.selection ) {
+            wp.mce.views.unbind();
+        }
 
         if ( ! event.content ) {
@@ -340 +349 @@
     });
 
+    function resetViews( rootNode ) {
+        // Replace view nodes
+        $( 'div[data-wpview-text]', rootNode ).each( function( i, node ) {
+            var $node = $( node ),
+                text = window.decodeURIComponent( $node.attr( 'data-wpview-text' ) || '' );
+
+            if ( text && node.parentNode ) {
+                $node.replaceWith( $( editor.dom.create('p') ).text( text ) );
+            }
+        });
+
+        // Remove marker attributes
+        $( 'p[data-wpview-marker]', rootNode ).attr( 'data-wpview-marker', null );
+    }
+
     editor.on( 'PreProcess', function( event ) {
-        // Empty the wpview wrap nodes
-        tinymce.each( editor.dom.select( 'div[data-wpview-text]', event.node ), function( node ) {
-            node.textContent = node.innerText = '\u00a0';
-        });
-    });
-
-    editor.on( 'PostProcess', function( event ) {
-        if ( event.content ) {
-            event.content = event.content.replace( /<div [^>]*?data-wpview-text="([^"]*)"[^>]*>[\s\S]*?<\/div>/g, function( match, shortcode ) {
-                if ( shortcode ) {
-                    return '<p>' + window.decodeURIComponent( shortcode ) + '</p>';
-                }
-                return ''; // If error, remove the view wrapper
-            });
-        }
+        // Replace the view nodes with their text in the DOM clone.
+        resetViews( event.node );
+    }, true );
+
+    editor.on( 'hide', function() {
+        // Replace the view nodes with their text directly in the editor body.
+        wp.mce.views.unbind();
+        resetViews( editor.getBody() );
     });
 

trunk/src/wp-includes/version.php

@@ -19 +19 @@
  * @global string $tinymce_version
  */
-$tinymce_version = '4109-20150310';
+$tinymce_version = '4109-20150404';
 
 /**