🐛 Fixed overly small file drop area in beta editor (#17682)

closes https://github.com/TryGhost/Product/issues/3449

- added drop handler to the whole editor pane area (to match previous editor) that uses the external API plugin to pass files through to the editor when dropped
- allows images/files to be dropped outside of the main editor canvas which is especially helpful when creating images in a new post

ghost/admin/app/components/gh-koenig-editor-lexical.hbs

@@ -5,6 +5,8 @@
         class="gh-koenig-editor-pane flex flex-column mih-100"
         {{on "mousedown" this.trackMousedown}}
         {{on "mouseup" this.focusEditor}}
+        {{on "dragover" this.editorPaneDragover}}
+        {{on "drop" this.editorPaneDrop}}
     >
         <GhEditorFeatureImage
             @image={{@featureImage}}

ghost/admin/app/components/gh-koenig-editor-lexical.js

@@ -40,6 +40,19 @@ export default class GhKoenigEditorReactComponent extends Component {
         this.mousedownY = event.clientY;
     }
 
+    @action
+    editorPaneDragover(event) {
+        event.preventDefault();
+    }
+
+    @action
+    editorPaneDrop(event) {
+        if (event.dataTransfer.files.length > 0) {
+            event.preventDefault();
+            this.editorAPI?.insertFiles(Array.from(event.dataTransfer.files));
+        }
+    }
+
     // Title actions -----------------------------------------------------------
 
     @action

ghost/admin/app/components/koenig-lexical-editor.js

@@ -244,7 +244,7 @@ export default class KoenigLexicalEditor extends Component {
             const collectionPostsEndpoint = this.ghostPaths.url.api('posts');
             const {posts} = await this.ajax.request(collectionPostsEndpoint, {
                 data: {
-                    collection: collectionSlug, 
+                    collection: collectionSlug,
                     limit: 12
                 }
             });