Add "edit" mode for [embed] and URL media previews.

See #28532.

Built from https://develop.svn.wordpress.org/trunk@28752


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

wp-includes/js/mce-view.js

@@ -810,11 +810,47 @@ window.wp = window.wp || {};
 		}
 	} );
 
-	wp.mce.views.register( 'embed', {
-		View: wp.mce.embedView
-	} );
+	wp.mce.embedMixin = {
+		View: wp.mce.embedView,
+		edit: function( node ) {
+			var embed = media.embed,
+				self = this,
+				frame,
+				data,
+				isURL = 'embedURL' === this.shortcode;
 
-	wp.mce.views.register( 'embedURL', {
+			$( document ).trigger( 'media:edit' );
+
+			data = window.decodeURIComponent( $( node ).attr('data-wpview-text') );
+			frame = embed.edit( data, isURL );
+			frame.on( 'close', function() {
+				frame.detach();
+			} );
+			frame.state( 'embed' ).props.on( 'change:url', function (model, url) {
+				if ( ! url ) {
+					return;
+				}
+				frame.state( 'embed' ).metadata = model.toJSON();
+			} );
+			frame.state( 'embed' ).on( 'select', function() {
+				var shortcode;
+
+				if ( isURL ) {
+					shortcode = frame.state( 'embed' ).metadata.url;
+				} else {
+					shortcode = embed.shortcode( frame.state( 'embed' ).metadata ).string();
+				}
+				$( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) );
+				wp.mce.views.refreshView( self, shortcode );
+				frame.detach();
+			} );
+			frame.open();
+		}
+	};
+
+	wp.mce.views.register( 'embed', _.extend( {}, wp.mce.embedMixin ) );
+
+	wp.mce.views.register( 'embedURL', _.extend( {}, wp.mce.embedMixin, {
 		toView: function( content ) {
 			var re = /(?:^|<p>)(https?:\/\/[^\s"]+?)(?:<\/p>\s*|$)/gi,
 				match = re.exec( tinymce.trim( content ) );
@@ -830,8 +866,7 @@ window.wp = window.wp || {};
 					url: match[1]
 				}
 			};
-		},
-		View: wp.mce.embedView
-	} );
+		}
+	} ) );
 
 }(jQuery));

wp-includes/js/media-editor.js

@@ -298,6 +298,60 @@
 		}
 	};
 
+	wp.media.embed = {
+		coerce : wp.media.coerce,
+
+		defaults : {
+			url : '',
+			width: '',
+			height: ''
+		},
+
+		edit : function( data, isURL ) {
+			var frame, props = {}, shortcode;
+
+			if ( isURL ) {
+				props.url = data.replace(/<[^>]+>/g, '');
+			} else {
+				shortcode = wp.shortcode.next( 'embed', data ).shortcode;
+
+				props = _.defaults( shortcode.attrs.named, this.defaults );
+				if ( shortcode.content ) {
+					props.url = shortcode.content;
+				}
+			}
+
+			frame = wp.media({
+				frame: 'post',
+				state: 'embed',
+				metadata: props
+			});
+
+			return frame;
+		},
+
+		shortcode : function( model ) {
+			var self = this, content;
+
+			_.each( this.defaults, function( value, key ) {
+				model[ key ] = self.coerce( model, key );
+
+				if ( value === model[ key ] ) {
+					delete model[ key ];
+				}
+			});
+
+			content = model.url;
+			delete model.url;
+
+			return new wp.shortcode({
+				tag: 'embed',
+				attrs: model,
+				content: content
+			});
+		}
+	};
+
 	wp.media.collection = function(attributes) {
 		var collections = {};
 

wp-includes/js/media-views.js

@@ -1402,15 +1402,17 @@
 
 			priority: 120,
 			type:     'link',
-			url:      ''
+			url:      '',
+			metadata: {}
 		},
 
 		// The amount of time used when debouncing the scan.
 		sensitivity: 200,
 
-		initialize: function() {
+		initialize: function(options) {
+			this.metadata = options.metadata;
 			this.debouncedScan = _.debounce( _.bind( this.scan, this ), this.sensitivity );
-			this.props = new Backbone.Model({ url: '' });
+			this.props = new Backbone.Model( this.metadata || { url: '' });
 			this.props.on( 'change:url', this.debouncedScan, this );
 			this.props.on( 'change:url', this.refresh, this );
 			this.on( 'scan', this.scanImage, this );
@@ -2278,7 +2280,8 @@
 			_.defaults( this.options, {
 				multiple:  true,
 				editing:   false,
-				state:    'insert'
+				state:    'insert',
+				metadata:  {}
 			});
 			/**
 			 * call 'initialize' directly on the parent class
@@ -2330,7 +2333,7 @@
 				}),
 
 				// Embed states.
-				new media.controller.Embed(),
+				new media.controller.Embed( { metadata: options.metadata } ),
 
 				new media.controller.EditImage( { model: options.editImage } ),
 
@@ -6440,13 +6443,21 @@
 		},
 
 		initialize: function() {
-			this.$input = $('<input id="embed-url-field" />').attr( 'type', 'text' ).val( this.model.get('url') );
+			var self = this;
+
+			this.$input = $('<input id="embed-url-field" type="text" />').val( this.model.get('url') );
 			this.input = this.$input[0];
 
 			this.spinner = $('<span class="spinner" />')[0];
 			this.$el.append([ this.input, this.spinner ]);
 
 			this.model.on( 'change:url', this.render, this );
+
+			if ( this.model.get( 'url' ) ) {
+				_.delay( function () {
+					self.model.trigger( 'change:url' );
+				}, 500 );
+			}
 		},
 		/**
 		 * @returns {wp.media.view.EmbedUrl} Returns itself to allow chaining