From 5f7746705f439da24a1d223819f9f427f95cd1ed Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 20 Jan 2026 20:11:14 +0000
Subject: [PATCH] fix(editor): add dragover handler to enable file
 drag-and-drop

The drag-and-drop wasn't working because we need to handle dragover
events and call preventDefault() to signal that drops are allowed.

Changes:
- Add handleDOMEvents with dragover handler to FileDropHandler
- Check for Files type in dataTransfer
- Set dropEffect to 'copy' for visual feedback
- Call preventDefault() to allow drops

Without this, the browser blocks all drops by default and handleDrop
never fires. This is a standard requirement for HTML5 drag-and-drop API.
---
 src/components/editor/MentionEditor.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/components/editor/MentionEditor.tsx b/src/components/editor/MentionEditor.tsx
index 559dd12..f701d9a 100644
--- a/src/components/editor/MentionEditor.tsx
+++ b/src/components/editor/MentionEditor.tsx
@@ -500,6 +500,19 @@ const FileDropHandler = Extension.create({
         key: new PluginKey("fileDropHandler"),
 
         props: {
+          handleDOMEvents: {
+            // Need to handle dragover to allow drops
+            dragover: (_view, event) => {
+              // Check if files are being dragged
+              if (event.dataTransfer?.types.includes("Files")) {
+                event.preventDefault();
+                event.dataTransfer.dropEffect = "copy";
+                return true;
+              }
+              return false;
+            },
+          },
+
           handleDrop: (_view, event) => {
             // Check if this is a file drop
             const files = event.dataTransfer?.files;