fix pasting files, global window drag&drop

This commit is contained in:
starmorph
2025-05-20 14:26:09 -07:00
parent 3b01d7293b
commit be73c9424e

View File

@@ -99,28 +99,10 @@ export function useFileUpload({
} }
} }
}; };
const handleWindowDrop = (e: DragEvent) => { const handleWindowDrop = async (e: DragEvent) => {
dragCounter.current = 0;
setDragOver(false);
};
const handleWindowDragEnd = (e: DragEvent) => {
dragCounter.current = 0;
setDragOver(false);
};
window.addEventListener("dragenter", handleWindowDragEnter);
window.addEventListener("dragleave", handleWindowDragLeave);
window.addEventListener("drop", handleWindowDrop);
window.addEventListener("dragend", handleWindowDragEnd);
const handleDragOver = (e: DragEvent) => {
e.preventDefault();
e.stopPropagation();
setDragOver(true);
};
const handleDrop = async (e: DragEvent) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
dragCounter.current = 0;
setDragOver(false); setDragOver(false);
if (!e.dataTransfer) return; if (!e.dataTransfer) return;
@@ -155,34 +137,52 @@ export function useFileUpload({
: []; : [];
setContentBlocks((prev) => [...prev, ...newBlocks]); setContentBlocks((prev) => [...prev, ...newBlocks]);
}; };
const handleWindowDragEnd = (e: DragEvent) => {
dragCounter.current = 0;
setDragOver(false);
};
window.addEventListener("dragenter", handleWindowDragEnter);
window.addEventListener("dragleave", handleWindowDragLeave);
window.addEventListener("drop", handleWindowDrop);
window.addEventListener("dragend", handleWindowDragEnd);
// Prevent default browser behavior for dragover globally
const handleWindowDragOver = (e: DragEvent) => {
e.preventDefault();
e.stopPropagation();
};
window.addEventListener("dragover", handleWindowDragOver);
// Remove element-specific drop event (handled globally)
const handleDragOver = (e: DragEvent) => {
e.preventDefault();
e.stopPropagation();
setDragOver(true);
};
const handleDragEnter = (e: DragEvent) => { const handleDragEnter = (e: DragEvent) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
setDragOver(true); setDragOver(true);
}; };
const handleDragLeave = (e: DragEvent) => { const handleDragLeave = (e: DragEvent) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
setDragOver(false); setDragOver(false);
}; };
const element = dropRef.current; const element = dropRef.current;
element.addEventListener("dragover", handleDragOver); element.addEventListener("dragover", handleDragOver);
element.addEventListener("drop", handleDrop);
element.addEventListener("dragenter", handleDragEnter); element.addEventListener("dragenter", handleDragEnter);
element.addEventListener("dragleave", handleDragLeave); element.addEventListener("dragleave", handleDragLeave);
return () => { return () => {
element.removeEventListener("dragover", handleDragOver); element.removeEventListener("dragover", handleDragOver);
element.removeEventListener("drop", handleDrop);
element.removeEventListener("dragenter", handleDragEnter); element.removeEventListener("dragenter", handleDragEnter);
element.removeEventListener("dragleave", handleDragLeave); element.removeEventListener("dragleave", handleDragLeave);
window.removeEventListener("dragenter", handleWindowDragEnter); window.removeEventListener("dragenter", handleWindowDragEnter);
window.removeEventListener("dragleave", handleWindowDragLeave); window.removeEventListener("dragleave", handleWindowDragLeave);
window.removeEventListener("drop", handleWindowDrop); window.removeEventListener("drop", handleWindowDrop);
window.removeEventListener("dragend", handleWindowDragEnd); window.removeEventListener("dragend", handleWindowDragEnd);
window.removeEventListener("dragover", handleWindowDragOver);
dragCounter.current = 0; dragCounter.current = 0;
}; };
}, [contentBlocks]); }, [contentBlocks]);
@@ -200,6 +200,7 @@ export function useFileUpload({
const handlePaste = async ( const handlePaste = async (
e: React.ClipboardEvent<HTMLTextAreaElement | HTMLInputElement>, e: React.ClipboardEvent<HTMLTextAreaElement | HTMLInputElement>,
) => { ) => {
e.preventDefault();
const items = e.clipboardData.items; const items = e.clipboardData.items;
if (!items) return; if (!items) return;
const files: File[] = []; const files: File[] = [];