blob: 03a32358121dd57b226fd932c3decb42a938a275 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
import React, { useRef, useCallback, useEffect, useContext } from "react";
import { useEditor } from "tldraw";
import DragContext, { DragContextType } from "./lib/context";
import { handleExternalDroppedContent } from "./lib/createEmbeds";
const stripHtmlTags = (html: string): string => {
const div = document.createElement("div");
div.innerHTML = html;
return div.textContent || div.innerText || "";
};
const useDrag = (): DragContextType => {
const context = useContext(DragContext);
if (!context) {
throw new Error('useCounter must be used within a CounterProvider');
}
return context;
};
function DropZone() {
const dropRef = useRef<HTMLDivElement | null>(null);
const {isDraggingOver, setIsDraggingOver} = useDrag();
const editor = useEditor();
const handleDrop = useCallback((event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault();
setIsDraggingOver(false);
const dt = event.dataTransfer;
const items = dt.items;
for (let i = 0; i < items.length; i++) {
if (items[i]!.kind === "file" && items[i]!.type.startsWith("image/")) {
const file = items[i]!.getAsFile();
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
if (e.target) {
// setDroppedImage(e.target.result as string);
}
};
reader.readAsDataURL(file);
}
} else if (items[i]!.kind === "string") {
items[i]!.getAsString((data) => {
const cleanText = stripHtmlTags(data);
handleExternalDroppedContent({editor,text:cleanText})
});
}
}
}, []);
useEffect(() => {
const divElement = dropRef.current;
if (divElement) {
// @ts-ignore
divElement.addEventListener("drop", handleDrop);
}
return () => {
if (divElement) {
// @ts-ignore
divElement.removeEventListener("drop", handleDrop);
}
};
}, []);
return (
<div
className={`h-full w-full absolute top-0 left-0 z-[100000] pointer-events-none ${isDraggingOver && "bg-[#2C3439] pointer-events-auto"}`}
ref={dropRef}
></div>
);
}
export default DropZone;
|