TinyMCE: Allow pasting in image captions. Remove blocks and insert `<br>` tags instead, also remove elements that would break the caption like other images, video, audio, etc.

See #36211.
Built from https://develop.svn.wordpress.org/trunk@38756


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

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

@@ -1,6 +1,6 @@
 /* global tinymce */
 tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
-	var toolbar, serializer, touchOnImage,
+	var toolbar, serializer, touchOnImage, pasteInCaption,
 		each = tinymce.each,
 		trim = tinymce.trim,
 		iOS = tinymce.Env.iOS;
@@ -859,17 +859,61 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 		}
 	});
 
+	editor.on( 'pastePostProcess', function( event ) {
+		// Pasting in a caption node.
+		if ( editor.dom.getParent( editor.selection.getNode(), 'dd.wp-caption-dd' ) ) {
+			// Remove "non-block" elements that should not be in captions.
+			editor.$( 'img, audio, video, object, embed, iframe, script, style', event.node ).remove();
+
+			editor.$( '*', event.node ).each( function( i, node ) {
+				if ( editor.dom.isBlock( node ) ) {
+					// Insert <br> where the blocks used to be. Makes it look better after pasting in the caption.
+					if ( tinymce.trim( node.textContent || node.innerText ) ) {
+						editor.dom.insertAfter( editor.dom.create( 'br' ), node );
+						editor.dom.remove( node, true );
+					} else {
+						editor.dom.remove( node );
+					}
+				}
+			});
+
+			// Trim <br> tags.
+			editor.$( 'br',  event.node ).each( function( i, node ) {
+				if ( ! node.nextSibling || node.nextSibling.nodeName === 'BR' ||
+					! node.previousSibling || node.previousSibling.nodeName === 'BR' ) {
+
+					editor.dom.remove( node );
+				}
+			} );
+
+			// Pasted HTML is cleaned up for inserting in the caption.
+			pasteInCaption = true;
+		}
+	});
+
 	editor.on( 'BeforeExecCommand', function( event ) {
-		var node, p, DL, align, replacement,
+		var node, p, DL, align, replacement, captionParent,
 			cmd = event.command,
 			dom = editor.dom;
 
 		if ( cmd === 'mceInsertContent' ) {
-			// When inserting content, if the caret is inside a caption create new paragraph under
+			node = editor.selection.getNode();
-			// and move the caret there
+			captionParent = dom.getParent( node, 'div.mceTemp' );
-			if ( node = dom.getParent( editor.selection.getNode(), 'div.mceTemp' ) ) {
+
+			if ( captionParent ) {
+				if ( pasteInCaption ) {
+					pasteInCaption = false;
+					// We are in the caption element, and in 'paste' context,
+					// and the pasted HTML was cleaned up on 'pastePostProcess' above.
+					// Let it be pasted in the caption.
+					return;
+				}
+
+				// The paste is somewhere else in the caption DL element.
+				// Prevent pasting in there as it will break the caption.
+				// Make new paragraph under the caption DL and move the caret there.
 				p = dom.create( 'p' );
-				dom.insertAfter( p, node );
+				dom.insertAfter( p, captionParent );
 				editor.selection.setCursorLocation( p, 0 );
 				editor.nodeChanged();
 			}

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.7-alpha-38755';
+$wp_version = '4.7-alpha-38756';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.