From f983e930903e9567148f286c5fc496207e30bba9 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@ghost.org>
Date: Thu, 10 Aug 2023 17:36:06 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20overly=20small=20file=20?=
 =?UTF-8?q?drop=20area=20in=20beta=20editor=20(#17682)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../app/components/gh-koenig-editor-lexical.hbs     |  2 ++
 .../app/components/gh-koenig-editor-lexical.js      | 13 +++++++++++++
 ghost/admin/app/components/koenig-lexical-editor.js |  2 +-
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/ghost/admin/app/components/gh-koenig-editor-lexical.hbs b/ghost/admin/app/components/gh-koenig-editor-lexical.hbs
index 793d188691..f6ca17b1c7 100644
--- a/ghost/admin/app/components/gh-koenig-editor-lexical.hbs
+++ b/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}}
diff --git a/ghost/admin/app/components/gh-koenig-editor-lexical.js b/ghost/admin/app/components/gh-koenig-editor-lexical.js
index c6c6c3434a..ec7e0dd29e 100644
--- a/ghost/admin/app/components/gh-koenig-editor-lexical.js
+++ b/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
diff --git a/ghost/admin/app/components/koenig-lexical-editor.js b/ghost/admin/app/components/koenig-lexical-editor.js
index e7043e4dce..597654e4e7 100644
--- a/ghost/admin/app/components/koenig-lexical-editor.js
+++ b/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
                 }
             });