Drop not Working due to Missing Content in Slice

on the mouseover event I am adding a widget and node decoration to the editor at the specified position.

I set a data-drag-handle and dragging appears to work but it does not allow me to drop.

Here is the code:

import {Extension, Plugin} from "tiptap"
import { Decoration, DecorationSet } from 'prosemirror-view'

class DecorationState {
    private static _instance: DecorationState
    private _decorations:DecorationSet

    protected constructor() {
        this._decorations = DecorationSet.empty

     private static get Instance () :DecorationState {
        if(!DecorationState._instance) {
            DecorationState._instance = new DecorationState()

        return DecorationState._instance

     public static get decorations ():DecorationSet {
        return DecorationState.Instance._decorations

    public static update(decoration:DecorationSet): void {
        DecorationState.Instance._decorations = decoration


function getPos(view,{target})  {
    const pos = view.posAtDOM(target)
    const { doc } = view.state
    const re = doc.resolve(pos)
    return {before: re.before(), after: re.after()}


const prop = {
    "draggable": "true"

const dragPlugin = new Plugin({
props: {

    handleDOMEvents: {
        mouseover (view,event) {
            if (event.target.className.includes('ProseMirror')) return 
            const {before, after} = getPos(view,event)
            const decorations: Array<Decoration> = []
            const handler = document.createElement('div')

            handler.setAttribute('style', 'width:10px; height: 10px; background:black;')
            decorations.push(Decoration.node(before,after, prop))
            decorations.push(Decoration.widget(before+1, handler))

            const set = DecorationSet.create(view.state.doc, decorations)


     decorations () {
         return DecorationState.decorations

export default class DragHandler extends Extension {
    get name() {
        return 'drag_handler'
    get plugins(): Array<any> {
        return [dragPlugin]

For some reason the slice content that would normally be present on the drop event is missing and I don’t understand why.

Here is some of PM’s code. It seems the selection is empty somehow: image

sel.empty returns true

The screencast doesn’t make it quite clear, since all list items are empty, but are you expecting the decoration to be part of the dragged content?

Sorry, they aren’t list items but paragraphs I wish I clarified. I put the numbers to show that they aren’t being reordered. Yeah i’m trying to create drag handles dynamically for all elements so I use a widget and node decoration to create them.

The hierarchy is this


the node decor creates the div around the p and the widget is made within the content. I couldn’t figure out how to align the widget outside the p content. I sort of want to drag the p element with the widget and node decor and then when it drops it should go away is my hope

It looks like you’re creating a draggable decoration. So that’s what’s being dragged, not the paragraph, right?

You’re absolutely correct. I did assume from the dragging that the whole object was being dragged. When I checked the outer HTML from the drag start event I get this

'<div data-type="drag_item" draggable="true"><p><div style="width:10px; height: 10px; background:black;" data-drag-handle="" contenteditable="false" class="ProseMirror-widget"></div>This is the text here</p></div>'

Is there another way to do this that would work within PM?

No, the built-in drag/drop handling doesn’t really cover this use case.