Changeset 32678

Timestamp:

06/01/2015 06:08:19 PM (10 years ago)

Author:

azaozz

Message:

TinyMCE wpView: preserve HTML wrapped in shortcodes.
Fixes #32078.

Location:

trunk/src/wp-includes/js

Files:

• mce-view.js (modified) (5 diffs)
• media-audiovideo.js (modified) (1 diff)
• media/views/frame/video-details.js (modified) (1 diff)
• tinymce/plugins/wpview/plugin.js (modified) (3 diffs)

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

@@ -94 +94 @@
             var pieces = [ { content: content } ],
                 self = this,
-                instance,
-                current;
+                instance, current;
 
             _.each( views, function( view, type ) {
@@ -103 +102 @@
                 _.each( current, function( piece ) {
                     var remaining = piece.content,
-                        result;
+                        result, text;
 
                     // Ignore processed pieces, but retain their location.
@@ -120 +119 @@
 
                         instance = self.createInstance( type, result.content, result.options );
+                        text = instance.loader ? '.' : instance.text;
 
                         // Add the processed piece for the match.
                         pieces.push( {
-                            content: '<p data-wpview-marker="' + instance.encodedText + '">' + instance.text + '</p>',
+                            content: '<p data-wpview-marker="' + instance.encodedText + '">' + text + '</p>',
                             processed: true
                         } );
@@ -139 +139 @@
             } );
 
-            return _.pluck( pieces, 'content' ).join( '' );
+            content = _.pluck( pieces, 'content' ).join( '' );
+            return content.replace( /<p>\s*<p data-wpview-marker=/g, '<p data-wpview-marker=' ).replace( /<\/p>\s*<\/p>/g, '</p>' );
         },
 
@@ -417 +418 @@
         replaceMarkers: function() {
             this.getMarkers( function( editor, node ) {
-                if ( $( node ).text() !== this.text ) {
+                if ( ! this.loader && $( node ).text() !== this.text ) {
                     editor.dom.setAttrib( node, 'data-wpview-marker', null );
                     return;

trunk/src/wp-includes/js/media-audiovideo.js

@@ -705 +705 @@
             if ( -1 === content.indexOf( attachment.get( 'url' ) ) ) {
                 content += [
-                    '<track srclang="en" label="English"kind="subtitles" src="',
+                    '<track srclang="en" label="English" kind="subtitles" src="',
                     attachment.get( 'url' ),
                     '" />'

trunk/src/wp-includes/js/media/views/frame/video-details.js

@@ -121 +121 @@
             if ( -1 === content.indexOf( attachment.get( 'url' ) ) ) {
                 content += [
-                    '<track srclang="en" label="English"kind="subtitles" src="',
+                    '<track srclang="en" label="English" kind="subtitles" src="',
                     attachment.get( 'url' ),
                     '" />'

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

@@ -153 +153 @@
     }
 
-    // Remove the content of view wrappers from HTML string
-    function emptyViews( content ) {
-        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, '' );
+    function resetViewsCallback( match, viewText ) {
+        return '<p>' + window.decodeURIComponent( viewText ) + '</p>';
+    }
+
+    // Replace the view tags with the view string
+    function resetViews( content ) {
+        return content.replace( /<div[^>]+data-wpview-text="([^"]+)"[^>]*>(?:[\s\S]+?wpview-selection-after[^>]+>[^<>]*<\/p>\s*|\.)<\/div>/g, resetViewsCallback )
+            .replace( /<p [^>]*?data-wpview-marker="([^"]+)"[^>]*>[\s\S]*?<\/p>/g, resetViewsCallback );
     }
 
@@ -165 +166 @@
     editor.on( 'BeforeAddUndo', function( event ) {
         if ( event.level.content ) {
-            event.level.content = emptyViews( event.level.content );
+            event.level.content = resetViews( event.level.content );
         }
     });
@@ -349 +350 @@
     });
 
-    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 ) );
-            }
+    // Empty the wpview wrap and marker nodes
+    function emptyViewNodes( rootNode ) {
+        $( 'div[data-wpview-text], p[data-wpview-marker]', rootNode ).each( function( i, node ) {
+            node.innerHTML = '.';
         });
-
-        // Remove marker attributes
-        $( 'p[data-wpview-marker]', rootNode ).attr( 'data-wpview-marker', null );
-    }
-
+    }
+
+    // Run that before the DOM cleanup
     editor.on( 'PreProcess', function( event ) {
-        // Replace the view nodes with their text in the DOM clone.
-        resetViews( event.node );
+        emptyViewNodes( event.node );
     }, true );
 
     editor.on( 'hide', function() {
-        // Replace the view nodes with their text directly in the editor body.
         wp.mce.views.unbind();
         deselect();
-        resetViews( editor.getBody() );
+        emptyViewNodes();
+    });
+
+    editor.on( 'PostProcess', function( event ) {
+        if ( event.content ) {
+            event.content = event.content.replace( /<div [^>]*?data-wpview-text="([^"]+)"[^>]*>[\s\S]*?<\/div>/g, resetViewsCallback )
+                .replace( /<p [^>]*?data-wpview-marker="([^"]+)"[^>]*>[\s\S]*?<\/p>/g, resetViewsCallback );
+        }
     });