✨ Koenig - Added drag-n-drop upload/replace support in image card

refs TryGhost/Ghost#9623
- do not process drop in `{{koenig-editor}}` if the drop happened on a card and the card's  `handlesDragDrop` property is true
- allow `dragover` events on cards to bubble up to Ember's event handler in `{{koenig-editor}}`
- handle drag/drop in `{{koenig-card-image}}`
    - show different overlays when dragging files over the card to indicate an upload or replace action
    - start upload when a file is dropped on the card

lib/koenig-editor/addon/components/koenig-card-image.js

@@ -23,6 +23,9 @@ export default Component.extend({
     imageExtensions: IMAGE_EXTENSIONS,
     imageMimeTypes: IMAGE_MIME_TYPES,
 
+    // properties
+    handlesDragDrop: true,
+
     // closure actions
     selectCard() {},
     deselectCard() {},
@@ -149,6 +152,38 @@ export default Component.extend({
         }
     },
 
+    dragOver(event) {
+        if (!event.dataTransfer) {
+            return;
+        }
+
+        // this is needed to work around inconsistencies with dropping files
+        // from Chrome's downloads bar
+        if (navigator.userAgent.indexOf('Chrome') > -1) {
+            let eA = event.dataTransfer.effectAllowed;
+            event.dataTransfer.dropEffect = (eA === 'move' || eA === 'linkMove') ? 'move' : 'copy';
+        }
+
+        event.stopPropagation();
+        event.preventDefault();
+
+        this.set('isDraggedOver', true);
+    },
+
+    dragLeave(event) {
+        event.preventDefault();
+        this.set('isDraggedOver', false);
+    },
+
+    drop(event) {
+        event.preventDefault();
+        this.set('isDraggedOver', false);
+
+        if (event.dataTransfer.files) {
+            this.set('files', [event.dataTransfer.files[0]]);
+        }
+    },
+
     _changeImageStyle(imageStyle) {
         this._updatePayloadAttr('imageStyle', imageStyle);
     },

lib/koenig-editor/addon/components/koenig-editor.js

@@ -851,7 +851,7 @@ export default Component.extend({
     },
 
     handleDragOver(event) {
-        if (!event.dataTransfer) {
+        if (!event.dataTransfer || event.target.closest('.__mobiledoc-card')) {
             return;
         }
 
@@ -878,7 +878,7 @@ export default Component.extend({
         if (cardElem) {
             let cardId = cardElem.firstChild.id;
             let card = this.componentCards.findBy('destinationElementId', cardId);
-            if (card.isEditing) {
+            if (card.isEditing || card.handlesDragDrop) {
                 return;
             }
         }
@@ -898,7 +898,6 @@ export default Component.extend({
     /* Ember event handlers ------------------------------------------------- */
 
     // disable dragging
-    // TODO: needs testing for how this interacts with cards that have drag behaviour
     dragStart(event) {
         event.preventDefault();
     },

lib/koenig-editor/addon/templates/components/koenig-card-image.hbs

@@ -26,6 +26,13 @@
         <div class="relative bg-whitegrey-l2">
             {{#if (or previewSrc payload.src)}}
                 <img src={{or previewSrc payload.src}} class="{{kg-style kgImgStyle sidebar=ui.hasSideNav}}" alt={{payload.alt}}>
+                {{#if isDraggedOver}}
+                    <div class="absolute absolute--fill flex items-center bg-black-60 pe-none">
+                        <span class="db center sans-serif fw7 f7 white">
+                            Drop to replace image
+                        </span>
+                    </div>
+                {{/if}}
             {{/if}}
 
             {{#if (or uploader.errors uploader.isUploading (not payload.src))}}
@@ -36,7 +43,11 @@
                         </span>
                     {{/if}}
 
-                    {{#if uploader.isUploading}}
+                    {{#if isDraggedOver}}
+                        <span class="db center sans-serif fw7 f7 middarkgrey">
+                            Drop it like it's hot 🔥
+                        </span>
+                    {{else if uploader.isUploading}}
                         {{uploader.progressBar}}
                     {{else if (not previewSrc payload.src)}}
                         <button class="flex flex-column items-center center btn-base sans-serif fw4 f7 middarkgrey" onclick={{action "triggerFileDialog"}}>