integration issues with @atlaskit/pragmatic-drag-and-drop

[almeraikhi]

Hello!

I am trying to setup @atlaskit/pragmatic-drag-and-drop with my react node views in tiptap.

Reason I am using that library is because the rest of the app uses it, and I want to be able to drag and drop items between the tiptap editor and other components.

The Issue

Using pragmatic-drag-and-drop in a tiptap react node view doesn't work.

CleanShot.2024-11-06.at.10.07.14.mp4

Minimal Reproduction

https://codesandbox.io/p/sandbox/9xqv5d

I wrapped the DND logic in a <Draggable/> component,
and used it as a NodeView for an extended Paragraph plugin as such:

const ParagraphNode = () => {
  return (
    <NodeViewWrapper>
      <Draggable>
        <NodeViewContent />
      </Draggable>
    </NodeViewWrapper>
  );
};

Using the same <Draggable/> component outside of tiptap's context will work:

const DndExample = () => {
  return <Draggable>Item To Drag</Draggable>;
};

CleanShot.2024-11-06.at.10.08.57.mp4

Would highly appreciate figuring out a solution to this issue 🙏

How the dnd library works

I think it's worthwhile to explain how it works since it's a bit of an uncommon implementation.

Setting up the dnd functionality requires:

• getting a ref of the element I want to drag
• using that ref in the provided draggable function in the cleanup of useEffect

import { useRef, useEffect } from "react";
import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";

const DraggableItem = () => {
  const ref = useRef(null);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;

    return draggable({
      element: el,
    });
  }, []);

  return <div ref={ref}>Draggable Item</div>;
};