Ticket #19845: 19845.4.diff

src/wp-admin/css/edit.css

@@ -594 +594 @@
 
 .edit-form-section {
         margin-bottom: 20px;
+}
+
+.wp-editor-wrap {
         position: relative;
 }
 
@@ -604 +607 @@
         left: 0;
         width: 100%;
         height: 100%;
-        z-index: 250000;
+        z-index: 99998;
         display: none;
         text-align: center;
 }

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

@@ -2807 +2807 @@
                 className: 'uploader-editor',
                 template:  media.template( 'uploader-editor' ),
 
-                events: {
-                        'drop': 'drop',
-                        'dragover': 'dropzoneDragover',
-                        'dragleave': 'dropzoneDragleave'
-                },
-
                 initialize: function() {
+                        this.$document = $(document);
+                        this.dropzones = [];
                         this.files = [];
-                        this.$document = $(document);
+
+                        this.$document.on( 'drop', '.uploader-editor', _.bind( this.drop, this ) );
+                        this.$document.on( 'dragover', '.uploader-editor', _.bind( this.dropzoneDragover, this ) );
+                        this.$document.on( 'dragleave', '.uploader-editor', _.bind( this.dropzoneDragleave, this ) );
+
                         this.$document.on( 'dragover', _.bind( this.containerDragover, this ) );
                         this.$document.on( 'dragleave', _.bind( this.containerDragleave, this ) );
+
                         return this;
                 },
 
                 refresh: function() {
-                        // Hide the dropzone only if dragging has left the screen.
-                        return this.$el.toggle( this.overContainer || this.overDropzone );
+                        for ( dropzone_id in this.dropzones ) {
+                                // Hide the dropzones only if dragging has left the screen.
+                                this.dropzones[ dropzone_id ].toggle( this.overContainer || this.overDropzone );
+                        }
+                        return this;
                 },
 
                 render: function() {
                         media.View.prototype.render.apply( this, arguments );
-                        $( '.edit-form-section' ).append( this.$el );
+                        $( '.wp-editor-wrap' ).each( _.bind( this.attach, this ) );
                         return this;
                 },
 
+                attach: function( index, editor ) {
+                        // Attach a dropzone to an editor.
+                        var dropzone = this.$el.clone();
+                        this.dropzones.push( dropzone );
+                        $( editor ).append( dropzone );
+                        return this;
+                },
+
                 drop: function( event ) {
+                        var $wrap = null;
+
                         this.files = event.originalEvent.dataTransfer.files;
                         if ( this.files.length < 1 )
                                 return;
 
-                        this.containerDragleave();
-                        this.dropzoneDragleave();
+                        this.containerDragleave( event );
+                        this.dropzoneDragleave( event );
 
+                        // Set the active editor to the drop target.
+                        $wrap = $( event.target ).parents( '.wp-editor-wrap' );
+                        if ( $wrap.length > 0 ) {
+                                window.wpActiveEditor = $wrap[0].id.slice( 3, -5 );
+                        }
+
                         if ( ! this.workflow ) {
                                 this.workflow = wp.media.editor.open( 'content', {
                                         frame:    'post',
@@ -2877 +2897 @@
                         _.delay( _.bind( this.refresh, this ), 50 );
                 },
 
-                dropzoneDragover: function() {
-                        this.$el.addClass( 'droppable' );
+                dropzoneDragover: function( e ) {
+                        $( e.target ).addClass( 'droppable' );
                         this.overDropzone = true;
                         _.defer( _.bind( this.refresh, this ) );
                         return false;
                 },
 
-                dropzoneDragleave: function() {
-                        this.$el.removeClass( 'droppable' );
+                dropzoneDragleave: function( e ) {
+                        $( e.target ).removeClass( 'droppable' );
                         this.overDropzone = false;
                         this.refresh();
                 }