1
import type { Editor } from "@tiptap/react";
2
import { clearDraggedBlockPreview, setDraggedBlockPreview } from "../extensions/block-drag-drop";
3
 
4
let transparentImg: HTMLCanvasElement | null = null;
5
 
6
function getTransparentImg() {
7
  if (!transparentImg) {
8
    transparentImg = document.createElement("canvas");
9
    transparentImg.width = 1;
10
    transparentImg.height = 1;
11
  }
12
 
13
  return transparentImg;
14
}
15
 
16
export function prepareBlockDragPreview(editor: Editor, pos: number, dataTransfer: DataTransfer): boolean {
17
  const dom = editor.view.nodeDOM(pos);
18
  const node = editor.state.doc.nodeAt(pos);
19
  const sourceBid = node && typeof node.attrs.bid === "string" ? node.attrs.bid : null;
20
  if (!(dom instanceof HTMLElement) || !node || !sourceBid) return false;
21
 
22
  const transparent = getTransparentImg();
23
  const originalSetDragImage = dataTransfer.setDragImage.bind(dataTransfer);
24
  originalSetDragImage(transparent, 0, 0);
25
  dataTransfer.setDragImage = () => originalSetDragImage(transparent, 0, 0);
26
 
27
  const cleanup = () => {
28
    clearDraggedBlockPreview(editor.view);
29
    document.removeEventListener("dragend", cleanup);
30
    document.removeEventListener("drop", cleanup);
31
  };
32
 
33
  setDraggedBlockPreview(editor.view, dom, sourceBid, pos, pos + node.nodeSize);
34
  document.addEventListener("dragend", cleanup);
35
  document.addEventListener("drop", cleanup);
36
  return true;
37
}