From 58e671e640251ccc7eda049f978a09e6e996eef2 Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Wed, 31 Aug 2022 17:18:35 -0700
Subject: [PATCH] Upload dropped images

---
 web/components/editor.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/web/components/editor.tsx b/web/components/editor.tsx
index 5f056f8b..d7836c34 100644
--- a/web/components/editor.tsx
+++ b/web/components/editor.tsx
@@ -108,10 +108,7 @@ export function useTextEditor(props: {
   editor?.setOptions({
     editorProps: {
       handlePaste(view, event) {
-        const imageFiles = Array.from(event.clipboardData?.files ?? []).filter(
-          (file) => file.type.startsWith('image')
-        )
-
+        const imageFiles = getImages(event.clipboardData)
         if (imageFiles.length) {
           event.preventDefault()
           upload.mutate(imageFiles)
@@ -126,6 +123,13 @@ export function useTextEditor(props: {
 
         return // Otherwise, use default paste handler
       },
+      handleDrop(_view, event, _slice, moved) {
+        // if dragged from outside
+        if (!moved) {
+          event.preventDefault()
+          upload.mutate(getImages(event.dataTransfer))
+        }
+      },
     },
   })
 
@@ -136,6 +140,9 @@ export function useTextEditor(props: {
   return { editor, upload }
 }
 
+const getImages = (data: DataTransfer | null) =>
+  Array.from(data?.files ?? []).filter((file) => file.type.startsWith('image'))
+
 function isValidIframe(text: string) {
   return /^<iframe.*<\/iframe>$/.test(text)
 }