Table drag and drop

han199401 · June 1, 2021, 9:58am

I try to implement a drag and drop table

When I drop the target is null, and the dropPoint method will copy the table.

ProseMirror/prosemirror-dropcursor/blob/607e4861c273c0c0897301605d49f7a6f8b60e47/src/dropcursor.js#L113

    
      
            clearTimeout(this.timeout)
            this.timeout = setTimeout(() => this.setCursor(null), timeout)
          }
          
          
dragover(event) {
            if (!this.editorView.editable) return
            let pos = this.editorView.posAtCoords({left: event.clientX, top: event.clientY})
            if (pos) {
              let target = pos.pos
              if (this.editorView.dragging && this.editorView.dragging.slice) {
                target = dropPoint(this.editorView.state.doc, target, this.editorView.dragging.slice)
                if (target == null) return this.setCursor(null)
              }
              this.setCursor(target)
              this.scheduleRemoval(5000)
            }
          }
          
          
dragend() {
            this.scheduleRemoval(20)
          }

Hope you can give me some suggestions,Thank You

pierre-lgb · April 14, 2022, 10:40am

From what I think I have understood :

When a drag-and-drop is performed, it creates a clone of the selection at the dropPoint position, and deletes the previous selection. The problem is that by default, a NodeSelection of a table is converted into a CellSelection containing all the cells of the table, but deleting a CellSelection does only clear the content of the table (it doesn’t delete the whole table itself).

To solve this I just had to toggle this option when registering the tableEditing plugin :

tableEditing({ allowTableNodeSelection: true })

remorses · November 15, 2023, 3:38pm

Thank you, you saved me a lot of time