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.
This commit is contained in:
Claude
2026-01-20 20:11:14 +00:00
parent c3b0eae4d8
commit 5f7746705f

View File

@@ -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;