TinyMCE wpView: preserve HTML wrapped in shortcodes.

Props iseulde, azaozz. Fixes #32078 for 4.2.
Built from https://develop.svn.wordpress.org/branches/4.2@33316


git-svn-id: http://core.svn.wordpress.org/branches/4.2@33288 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/js/mce-view.js

@@ -93,8 +93,7 @@ window.wp = window.wp || {};
 		setMarkers: function( content ) {
 			var pieces = [ { content: content } ],
 				self = this,
-				instance,
-				current;
+				instance, current;
 
 			_.each( views, function( view, type ) {
 				current = pieces.slice();
@@ -102,7 +101,7 @@ window.wp = window.wp || {};
 
 				_.each( current, function( piece ) {
 					var remaining = piece.content,
-						result;
+						result, text;
 
 					// Ignore processed pieces, but retain their location.
 					if ( piece.processed ) {
@@ -119,10 +118,11 @@ window.wp = window.wp || {};
 						}
 
 						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
 						} );
 
@@ -138,7 +138,8 @@ window.wp = window.wp || {};
 				} );
 			} );
 
-			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,7 +418,7 @@ window.wp = window.wp || {};
 		 */
 		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;
 				}

wp-includes/js/media-audiovideo.js

@@ -704,7 +704,7 @@ VideoDetails = MediaDetails.extend({
 
 			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' ),
 					'" />'
 				].join('');

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

@@ -152,19 +152,20 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 		};
 	}
 
-	// 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>';
-		});
+	function resetViewsCallback( match, viewText ) {
+		return '<p>' + window.decodeURIComponent( viewText ) + '</p>';
+	}
 
-		return content.replace( / data-wpview-marker="[^"]+"/g, '' );
+	// 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 );
 	}
 
 	// Prevent adding undo levels on changes inside a view wrapper
 	editor.on( 'BeforeAddUndo', function( event ) {
 		if ( event.level.content ) {
-			event.level.content = emptyViews( event.level.content );
+			event.level.content = resetViews( event.level.content );
 		}
 	});
 
@@ -348,31 +349,29 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 		}
 	});
 
-	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 );
+		}
 	});
 
 	// Excludes arrow keys, delete, backspace, enter, space bar.