How to drag and drop a node/element from outside the editor into the editor?

[jonathanmach]

Hi, I hope everyone is safe!

How can I drag and drop a node representation from outside the editor into the editor?
I wonder if someone would be able to point me in the right direction.

Suppose I have a few elements outside the editor (like in the picture below) and I want the ability to drag and drop them into the editor. All it would need to do is simply create a <h1> or <p> node with a random text.

I'm using the Vue 2 library.

[jonathanmach]

Is there an onDrop() event handler I could interact with (similar to the one in Tiptap 1.x Image extension)?

[matkinjuliectrl]

Is this relevant? https://dev.to/jordypereira/how-to-drag-a-tag-into-an-editor-a-simple-solution-after-lots-of-iteration-5bbc

Doesn't look like it's dragging a node but a whole editor, but the writeup might give you some inspiration?

[Benny739]

Have you found a solution?

[sereneinserenade]

You can try using the https://github.com/sereneinserenade/tiptap-snippets-extension . In your case, the snippet might contain predefined content for respective node-insert-button, everything else could be the same

[Gregory-Gerard]

Here's a simple implementation to handle drag & drop of mentions (or variables) from outside a TipTap editor:

const editor = useEditor({
  onDrop: (event) => {
    const variable = event.dataTransfer?.getData('variable');

    if (!variable) {
      return;
    }

    const position = editor?.view.posAtCoords({ top: event.clientY, left: event.clientX });

    if (!position) {
      return;
    }

    editor?.commands.insertContentAt(position.pos, {
      type: 'mention',
      attrs: {
        id: variable,
        label: variable,
      },
    });
  },
});

The draggable component needs to set the data while dragging:

function Variable({ name }: { name: string }) {
  return (
    <p
      draggable
      onDragStart={(event) => {
        event.dataTransfer.setData('variable', name);
      }}
    >
      {name}
    </p>
  );
}

This can be registered as a plugin for better reusability.