Using 3rd party UI library with drag functionality

1

Hi,

I have been struggling to implement a drag functionality for lists using sortable.js https://github.com/SortableJS/Sortable. I am using the following NodeView. I have tried various things however none seem to work. I presume this has something to do with prosemirror interfering (although I can’t pinpoint where exactly - I have also used stopEvent)? What is the canonical way to implement this? Or is there some way to “suspend” prosemirror and handle the interaction/transactions by the nodeview - for example when a "li" item is clicked/dragged?

In the schema list_items are set as {draggable: true, selectable: true}

Implemented for ordered_list:

class SortView {
  constructor(node, view, getPos) {
    this.dom = document.createElement("ol")
    this.dom.src = node.attrs.src
    this.sortable = Sortable.create(this.dom)
    this.contentDOM = this.dom
  }

  stopEvent() { return true }
}

I have also tried, in addition, using NodeView with stopEvent() { return true } for list_item and paragraph but that also doesn’t work.

Any help is greatly appreciated

2

It is likely the library is directly manipulating the editor content DOM, and ProseMirror is noticing these mutations and re-syncing the DOM to its state.

4

I also noticed that the drag events don’t seem to fire on the “li” elements, only on the “ol”…any idea what may cause that?

5

I also tried adding ignoreMutation⁠(e) { return true } but that never gets called. I did notice only mousedown and mouseup events are fired. Any idea why drag events would not fire :confused: ?

6

ignoreMutation on a node view can only catch mutations inside that node view. This drag library is likely mutating the DOM outside of it. Similarly, I guess the drag DOM events aren’t being fired on the node itself, but on a parent.

7

ok understood, thank you for your replies