Ticket #28532: 28532.2.diff

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

@@ -810 +810 @@
                 }
         } );
 
-        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 +866 @@
                                         url: match[1]
                                 }
                         };
-                },
-                View: wp.mce.embedView
-        } );
+                }
+        } ) );
 
 }(jQuery));

src/wp-includes/js/media-editor.js

@@ -298 +298 @@
                 }
         };
 
+        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 = {};
 

src/wp-includes/js/media-views.js

@@ -1402 +1402 @@
 
                         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 +2280 @@
                         _.defaults( this.options, {
                                 multiple:  true,
                                 editing:   false,
-                                state:    'insert'
+                                state:    'insert',
+                                metadata:  {}
                         });
                         /**
                          * call 'initialize' directly on the parent class
@@ -2330 +2333 @@
                                 }),
 
                                 // Embed states.
-                                new media.controller.Embed(),
+                                new media.controller.Embed( { metadata: options.metadata } ),
 
                                 new media.controller.EditImage( { model: options.editImage } ),
 
@@ -6440 +6443 @@
                 },
 
                 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];
@@ -6447 +6452 @@
                         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