Drop not Working due to Missing Content in Slice

1

1RKcLw07uw
1RKcLw07uw491×959 39.1 KB

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 = {
    "data-type":"drag_item",
    "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;')
            handler.setAttribute('data-drag-handle','')
            decorations.push(Decoration.node(before,after, prop))
            decorations.push(Decoration.widget(before+1, handler))
           

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

                   }
 
     },

     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

2

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?

3

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

<div>
<p>
<widget>
1 
</p>
<div>

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

4

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

5

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>'
6

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

7

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