Persisting `<track>` elements as the body of a `[video]` shortcode in MCE Views:

* When generating the view's HTML, ensure that the shortcode's `content` is added to the model
* Add a `PostProcess` event in the `wpview` plugin to properly return the shortcode when the editor mode is toggled, ensuring that elements in the body are not dropped.

Props azaozz, wonderboymusic.
See #27915.




git-svn-id: https://develop.svn.wordpress.org/trunk@28183 602fd350-edb4-49c9-b593-d223f7449a82

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

@@ -483,11 +483,13 @@ window.wp = window.wp || {};
 		 * @returns {string}
 		 */
 		getHtml: function() {
-			var attrs = _.defaults(
-				this.shortcode.attrs.named,
-				wp.media[ this.shortcode.tag ].defaults
-			);
-			return this.template({ model: attrs });
+			var attrs = this.shortcode.attrs.named;
+			attrs.content = this.shortcode.content;
+
+			return this.template({ model: _.defaults(
+				attrs,
+				wp.media[ this.shortcode.tag ].defaults )
+			});
 		},
 
 		unbind: function() {

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

@@ -332,17 +332,24 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
 		tinymce.each( dom.select( 'div[data-wpview-text]', event.node ), function( node ) {
 			// Empty the wrap node
 			if ( 'textContent' in node ) {
-				node.textContent = '';
+				node.textContent = '\u00a0';
 			} else {
-				node.innerText = '';
+				node.innerText = '\u00a0';
 			}
-
-			// This makes all views into block tags (as we use <div>).
-			// Can use 'PostProcess' and a regex instead.
-			dom.replace( dom.create( 'p', null, window.decodeURIComponent( dom.getAttrib( node, 'data-wpview-text' ) ) ), node );
 		});
     });
 
+    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
+			});
+		}
+	});
+
 	editor.on( 'keydown', function( event ) {
 		var keyCode = event.keyCode,
 			body = editor.getBody(),