Ticket #15490: 15490.4.diff

src/wp-admin/includes/ajax-actions.php

@@ -2311 +2311 @@
  * @since 3.5.0
  */
 function wp_ajax_send_link_to_editor() {
+        global $post, $wp_embed;
+
         check_ajax_referer( 'media-send-to-editor', 'nonce' );
 
         if ( ! $src = wp_unslash( $_POST['src'] ) )
@@ -2325 +2327 @@
         if ( ! $title = trim( wp_unslash( $_POST['title'] ) ) )
                 $title = wp_basename( $src );
 
-        $html = '';
-        if ( $title )
+        $post = get_post( isset( $_POST['post_id'] ) ? $_POST['post_id'] : 0 );
+        // ping WordPress for an embed
+        $check_embed = $wp_embed->run_shortcode( '[embed]'. $src .'[/embed]' );
+        // fallback that WordPress creates when no oEmbed was found
+        $fallback = $wp_embed->maybe_make_link( $src );
+
+        if ( $check_embed !== $fallback ) {
+                // TinyMCE view for [embed] will parse this
+                $html = '[embed]' . $src . '[/embed]';
+        } elseif ( $title ) {
                 $html = '<a href="' . esc_url( $src ) . '">' . $title . '</a>';
+        } else {
+                $html = '';
+        }
 
         // Figure out what filter to run:
         $type = 'file';

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

@@ -6144 +6144 @@
                 },
 
                 initialize: function() {
-                        this.$input = $('<input/>').attr( 'type', 'text' ).val( this.model.get('url') );
+                        this.$input = $('<input id="embed-url-field" />').attr( 'type', 'text' ).val( this.model.get('url') );
                         this.input = this.$input[0];
 
                         this.spinner = $('<span class="spinner" />')[0];
@@ -6200 +6200 @@
          */
         media.view.EmbedLink = media.view.Settings.extend({
                 className: 'embed-link-settings',
-                template:  media.template('embed-link-settings')
+                template:  media.template('embed-link-settings'),
+
+                initialize: function() {
+                        this.spinner = $('<span class="spinner" />');
+                        this.$el.append( this.spinner[0] );
+                        this.listenTo( this.model, 'change:url', this.updateoEmbed );
+                },
+
+                updateoEmbed: function() {
+                        var url = this.model.get( 'url' );
+
+                        this.$('.setting.title').show();
+                        // clear out previous results
+                        this.$('.embed-container').hide().find('.embed-preview').html('');
+
+                        // only proceed with embed if the field contains more than 6 characters
+                        if ( url && url.length < 6 ) {
+                                return;
+                        }
+
+                        this.spinner.show();
+
+                        setTimeout( _.bind( this.fetch, this ), 500 );
+                },
+
+                fetch: function() {
+                        // check if they haven't typed in 500 ms
+                        if ( $('#embed-url-field').val() !== this.model.get('url') ) {
+                                return;
+                        }
+
+                        wp.ajax.send( 'filter-content', {
+                                data : {
+                                        post_ID: media.view.settings.post.id,
+                                        content: this.model.get('url')
+                                }
+                        } ).done( _.bind( this.renderoEmbed, this ) );
+                },
+
+                renderoEmbed: function(html) {
+                        this.spinner.hide();
+
+                        this.$('.setting.title').hide();
+                        this.$('.embed-container').show().find('.embed-preview').html( html );
+                }
         });
 
         /**

src/wp-includes/media-template.php

@@ -546 +546 @@
         </script>
 
         <script type="text/html" id="tmpl-embed-link-settings">
-                <label class="setting">
-                        <span><?php _e('Title'); ?></span>
+                <label class="setting title">
+                        <span><?php _e( 'Title' ); ?></span>
                         <input type="text" class="alignment" data-setting="title" />
                 </label>
+                <div class="embed-container" style="display: none;">
+                        <div class="embed-preview"></div>
+                </div>
         </script>
 
         <script type="text/html" id="tmpl-embed-image-settings">

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

@@ -1602 +1602 @@
         overflow: auto;
 }
 
+.embed-preview img, .embed-preview iframe, .embed-preview embed {
+        max-width: 100%;
+}
+
+.embed-preview img {
+        height: auto;
+}
+
 .image-details .media-modal {
         left: 140px;
         right: 140px;