Today I’ll share how I implement drag and drop in ProseMirror. I am using Tiptap for the most part as an additional layer on top of ProseMirror that has handy utility functions/extensions.

Background

Frameworks I’ve tried to enable custom dnd in prosemirror:

1. dndkit

2. react-dnd

3. Atlassian Pragmatic Dnd

I started out with using react-dnd a long time ago (2 years ago at the time of writing). It is a much better experience than atlassian’s previous react-beautiful-dnd package.

I find that react-dnd allows for much more control over how I want to render custom dnd components (custom drag preview, drop listener, etc).

However, react-dnd does not have fancy functionalities like ability to move the components when you hover a draggable item over drop areas out of the box. You need to implement this your own and it can be tough if you are not familiar with dnd systems in general.

dndkit

Let’s talk about dndkit. I really like their developer experience. I find that integrating dndkit to existing system is very straightforward and similar to react-dnd but with a big fundamental difference: It does not support HTML5 Dnd Backend!

This means that you cannot do cross browser/window drag and drop. This is a dealbreaker for us because we need dnd into an iframe.

I spent 2 full days trying to get dndkit to work with iframe. It all mainly comes down to 1 issue: the iframe that I’m trying to drop items into needs to be full screen, otherwise it won’t be able to locate the drop areas properly. I still haven’t figured out how to do this.

So I didn’t continue working on dndkit with Tiptap.

react-dnd

I have more experience with react-dnd. I was able to work on the drag and drop components pretty quickly and it works without the Tiptap editor. There are 2 main problems with this:

1. Not able to modify DataTransfer object when drag is happening. This means that Prosemirror cannot handle the drop event.

2. The DndProvider from react-dnd seems to clash with prosemirrors’ dnd setup. If I use DndProvider with prosemirror in the same DOM, the dnd in prosemirror will not work

So with these 2 problems, we won’t be moving forward with this.

Atlassian Pragmatic Dnd

First time using pragmatic dnd, but since I’ve developed dnd features before, it was not that difficult to use this library. It seems like it works with prosemirror because the library works by exposing low level event listener instead of creating an abstraction layer on top.

Of course, this library has a bigger learning curve because it requires you to have solid understanding of how dnd works in browsers. It does give you a lot of useful utilities for dnd.