TinyMCE: add image based placeholders for audio and video shortcodes. Props wonderboymusic, see #27016.

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

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

@@ -1,53 +1,73 @@
 /* global tinymce */
 tinymce.PluginManager.add('wpgallery', function( editor ) {
 
-	function parseGallery( content ) {
-		return content.replace( /\[gallery([^\]]*)\]/g, function( match, attr ) {
-			var data = tinymce.DOM.encode( attr );
+	function replaceGalleryShortcodes( content ) {
+		return content.replace( /\[gallery([^\]]*)\]/g, function( match ) {
+			var data = window.encodeURIComponent( match );
 
-			return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-gallery mceItem" ' +
-				'title="gallery' + data + '" data-mce-resize="false" data-mce-placeholder="1" />';
+			return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-media wp-gallery mceItem" ' +
+				'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" />';
 		});
 	}
 
-	function getGallery( content ) {
+	function replaceAVShortcodes( content ) {
+		return content.replace( /\[(audio|video)[^\]]*\][\s\S]*?\[\/\1\]/g, function( match, type ) {
+			var data = window.encodeURIComponent( match ),
+				cls = 'wp-media mceItem wp-' + type;
+
+			return '<img src="' + tinymce.Env.transparentSrc + '" class="' + cls + '" ' +
+				'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" />';
+		});
+	}
+
+	function restoreMediaShortcodes( content ) {
 		function getAttr( str, name ) {
-			name = new RegExp( name + '=\"([^\"]+)\"', 'g' ).exec( str );
-			return name ? tinymce.DOM.decode( name[1] ) : '';
+			name = new RegExp( name + '=\"([^\"]+)\"' ).exec( str );
+			return name ? window.decodeURIComponent( name[1] ) : '';
 		}
 
-		return content.replace( /(?:<p[^>]*>)*(<img[^>]+>)(?:<\/p>)*/g, function( match, image ) {
-			var cls = getAttr( image, 'class' );
+		return content.replace( /(?:<p(?: [^>]+)?>)*(<img [^>]+>)(?:<\/p>)*/g, function( match, image ) {
+			var data = getAttr( image, 'data-wp-media' );
 
-			if ( cls.indexOf('wp-gallery') !== -1 ) {
-				return '<p>['+ tinymce.trim( getAttr( image, 'title' ) ) +']</p>';
+			if ( data ) {
+				return '<p>' + data + '</p>';
 			}
 
 			return match;
 		});
 	}
 
-	// Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('...');
-	editor.addCommand( 'WP_Gallery', function() {
-		var gallery, frame, node;
+	function editMedia( node ) {
+		var gallery, frame, data;
+
+		if ( node.nodeName !== 'IMG' ) {
+			return;
+		}
 
 		// Check if the `wp.media.gallery` API exists.
 		if ( typeof wp === 'undefined' || ! wp.media || ! wp.media.gallery ) {
 			return;
 		}
 
-		node = editor.selection.getNode();
-		gallery = wp.media.gallery;
-
 		// Make sure we've selected a gallery node.
-		if ( node.nodeName === 'IMG' && editor.dom.hasClass( node, 'wp-gallery' ) ) {
-			frame = gallery.edit( '[' + editor.dom.getAttrib( node, 'title' ) + ']' );
+		if ( editor.dom.hasClass( node, 'wp-gallery' ) ) {
+			gallery = wp.media.gallery;
+			data = window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) );
+			frame = gallery.edit( data );
 
 			frame.state('gallery-edit').on( 'update', function( selection ) {
-				var shortcode = gallery.shortcode( selection ).string().slice( 1, -1 );
-				editor.dom.setAttrib( node, 'title', shortcode );
+				var shortcode = gallery.shortcode( selection ).string();
+				editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
 			});
+		} else {
+			// temp
+			window.console && console.log( 'Edit AV shortcode ' + window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) ) );
 		}
+	}
+
+	// Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('...');
+	editor.addCommand( 'WP_Gallery', function() {
+		editMedia( editor.selection.getNode() );
 	});
 /*
 	editor.on( 'init', function( e ) {
@@ -68,44 +88,49 @@ tinymce.PluginManager.add('wpgallery', function( editor ) {
 		}
 	});
 */
-	editor.on( 'mouseup', function( e ) {
-		if ( e.target.nodeName === 'IMG' && editor.dom.hasClass( e.target, 'wp-gallery' ) ) {
+	editor.on( 'mouseup', function( event ) {
+		var dom = editor.dom,
+			node = event.target;
+
+		if ( node.nodeName === 'IMG' && dom.getAttrib( node, 'data-wp-media' ) ) {
 			// Don't trigger on right-click
-			if ( e.button !== 2 ) {
-				if ( editor.dom.hasClass( e.target, 'wp-gallery-selected' ) ) {
-					editor.execCommand('WP_Gallery');
-					editor.dom.removeClass( e.target, 'wp-gallery-selected' );
+			if ( event.button !== 2 ) {
+				if ( dom.hasClass( node, 'wp-media-selected' ) ) {
+					editMedia( node );
+					dom.removeClass( node, 'wp-media-selected' );
 				} else {
-					editor.dom.addClass( e.target, 'wp-gallery-selected' );
+					dom.addClass( node, 'wp-media-selected' );
 				}
 			}
 		} else {
-			editor.dom.removeClass( editor.dom.select( 'img.wp-gallery-selected' ), 'wp-gallery-selected' );
+			dom.removeClass( dom.select( 'img.wp-media-selected' ), 'wp-media-selected' );
 		}
 	});
 
-	// Display 'gallery' instead of img in element path
-	editor.on( 'ResolveName', function( e ) {
+	// Display gallery, audio or video instead of img in the element path
+	editor.on( 'ResolveName', function( event ) {
 		var dom = editor.dom,
-			target = e.target;
+			node = event.target;
 
-		if ( target.nodeName === 'IMG' && dom.hasClass( target, 'wp-gallery' ) ) {
-			e.name = 'gallery';
+		if ( node.nodeName === 'IMG' && dom.getAttrib( node, 'data-wp-media' ) ) {
+			if ( dom.hasClass( node, 'wp-gallery' ) ) {
+				event.name = 'gallery';
+			} else if ( dom.hasClass( node, 'wp-video' ) ) {
+				event.name = 'video';
+			} else if ( dom.hasClass( node, 'wp-audio' ) ) {
+				event.name = 'audio';
+			}
 		}
 	});
 
-	editor.on( 'BeforeSetContent', function( e ) {
-		e.content = parseGallery( e.content );
+	editor.on( 'BeforeSetContent', function( event ) {
+		event.content = replaceGalleryShortcodes( event.content );
+		event.content = replaceAVShortcodes( event.content );
 	});
 
-	editor.on( 'PostProcess', function( e ) {
-		if ( e.get ) {
-			e.content = getGallery( e.content );
+	editor.on( 'PostProcess', function( event ) {
+		if ( event.get ) {
+			event.content = restoreMediaShortcodes( event.content );
 		}
 	});
-
-	return {
-		_do_gallery: parseGallery,
-		_get_gallery: getGallery
-	};
 });

src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

@@ -108,15 +108,41 @@ img::selection {
     border-top: 3px dotted #bbb;
 }
 
-.mce-content-body img.wp-gallery {
-	border: 1px dashed #888;
-	background: #f2f2f2 url("images/gallery.png") no-repeat scroll center center;
+/* Gallery, audio, vudeo placeholders */
+.mce-content-body img.wp-media {
+	border: 1px solid #aaa;
+	background-color: #f2f2f2;
+	background-repeat: no-repeat;
+	background-position: center center;
 	width: 99%;
 	height: 250px;
 	outline: 0;
 	cursor: pointer;
 }
 
+.mce-content-body img.wp-media:hover {
+	background-color: #ededed;
+	border-color: #777;
+}
+
+.mce-content-body img.wp-media.wp-media-selected {
+	background-color: #d8d8d8;
+	border-color: #777;
+}
+
+.mce-content-body img.wp-media.wp-gallery {
+	background-image: url("images/gallery.png");
+}
+
+.mce-content-body img.wp-media.wp-video {
+	background-image: url("images/video.png");
+}
+
+.mce-content-body img.wp-media.wp-audio {
+	height: 70px;
+	background-image: url("images/audio.png");
+}
+
 #wp-image-toolbar {
 	position: absolute;
 }
@@ -157,16 +183,6 @@ img::selection {
 	outline: 1px solid #777;
 }
 
-.mce-content-body img.wp-gallery:hover {
-	background-color: #ededed;
-	border-style: solid;
-}
-
-.mce-content-body img.wp-gallery.wp-gallery-selected {
-	background-color: #d8d8d8;
-	border-style: solid;
-}
-
 img.wp-oembed {
 	border: 1px dashed #888;
 	background: #f7f5f2 url("images/embedded.png") no-repeat scroll center center;