General block dragging feature

[holtwick]

Dragging content blocks like headers, paragraphs, list items is a quite popular and useful feature. On hovering a block element a drag handle would show up to allow to initiate the drag operation.

Question: Is it planned to add such a feature to TipTap?

Some examples

Recently the great nuclino project (based on Prosemirror as well) added such a feature: https://blog.nuclino.com/bringing-drag-and-drop-to-the-nuclino-editor

Notion is making heavy use of this feature: https://www.notion.so/

[philippkuehn]

There is a draggable option in the ProseMirror schema, so it's already possible. I added such a feature to Scrumpy a few weeks ago.
https://scrumpy.io/blog/copy-and-paste-all-your-tasks

[holtwick]

Great. So I guess you did it via the ideas presented here? https://discuss.prosemirror.net/t/make-only-part-of-a-nodeview-draggable/1145/5?u=holtwick

I just wondered if there would be a more general approach.

[philippkuehn]

I have chosen a much more pragmatic solution. By default all of a node view is draggable if you set draggable to true. Except for child nodes (text node in this case). You can see this behavior here:

It's also possible to overwrite the stopEvent for nodes so you could do something more specific.

[holtwick]

I see, that makes sense. Thanks a lot!

[philippkuehn]

@holtwick you can define a drag handle with data-drag-handle inside your node view now.

[holtwick]

@philippkuehn This is awesome! Thanks!

I have also spent about a day to get this working and followed a different approach. My goal has been to make any block level element draggable by showing a drag handle in front of the line, as the mentioned examples of Nuclino and Notion do.

The problem with just setting e.g. "paragraph" to draggable has been, that in Safari / WKWebKit the line was not selectable anymore. Therefore, I chose to create a plugin that uses a global drag handle and places it in front of the block the mouse is close to.

Video: https://holtwick.de/download/20190628-094238-drag.mov

I'll share my current code here in case you would like to proceed on this approach (it uses some custom DOM routines, but I think the general picture will become clear):

import { absoluteRect, dom, removeNode } from '@/lib/utils/dom'
import { NodeSelection } from 'prosemirror-state'
import { serializeForClipboard } from 'prosemirror-view/src/clipboard'
import { Extension, Plugin } from 'tiptap'

export default class Drop extends Extension {

  get name() {
    return 'drop'
  }

  get plugins() {
 
    const brokenClipboardAPI = false // (browser.ie && browser.ie_version < 15) || (browser.ios && browser.webkit_version < 604)
   
    function blockPosAtCoords(coords, view) {
      let pos = view.posAtCoords(coords)
      let node = view.domAtPos(pos.pos)

      node = node.node
      while (node && node.parentNode) {
        if (node.parentNode.classList.contains('ProseMirror')) { // todo
          break
        }
        node = node.parentNode
      }

      if (node && node.nodeType === 1) {
        let desc = view.docView.nearestDesc(node, true)
        if (!(!desc || desc === view.docView)) {
          return desc.posBefore
        }
      }
      return null
    }

    function dragStart(e, view) {
      if (!e.dataTransfer) return

      let coords = { left: e.clientX + 50, top: e.clientY }
      let pos = blockPosAtCoords(coords, view)
      if (pos != null) {
        view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos)))

        let slice = view.state.selection.content()
        let { dom, text } = serializeForClipboard(view, slice)

        e.dataTransfer.clearData()
        e.dataTransfer.setData(brokenClipboardAPI ? 'Text' : 'text/html', dom.innerHTML)
        if (!brokenClipboardAPI) e.dataTransfer.setData('text/plain', text)

        view.dragging = { slice, move: true }
      }
    }

    let dropElement
    const WIDTH = 24

    return [
      new Plugin({
        view(editorView) {
          dropElement = dom('div', {
            draggable: 'true',
            class: 'noteDragHandle',
            ondragstart: e => dragStart(e, editorView),
          }, ['⠿'])
          document.body.appendChild(dropElement)
          return {
            update(view, prevState) {
            },
            destroy() {
              removeNode(dropElement)
              dropElement = null
            },
          }
        },
        props: {
          handleDOMEvents: {
            drop(view, event) {
              setTimeout(() => {
                let node = document.querySelector('.ProseMirror-hideselection')
                if (node) {
                  node.classList.remove('ProseMirror-hideselection')
                }
              }, 50)
            },
            mousemove(view, event) {
              let coords = { left: event.clientX + WIDTH + 10, top: event.clientY }
              let pos = view.posAtCoords(coords)
              let node = view.domAtPos(pos.pos)

              node = node.node
              while (node && node.parentNode) {
                if (node.parentNode.classList.contains('ProseMirror')) { // todo
                  break
                }
                node = node.parentNode
              }

              let rect = absoluteRect(node)
              let win = node.ownerDocument.defaultView
              rect.top += win.pageYOffset
              rect.left += win.pageXOffset
              rect.width = WIDTH + 'px'

              dropElement.style.left = -WIDTH + rect.left + 'px'
              dropElement.style.top = rect.top + 'px'
            },
          },
        },
      }),
    ]
  }

}

Thanks for all the great work!

[philippkuehn]

@holtwick this looks great. thanks for sharing!

[jonasdumas]

Hi @holtwick
Thanks for sharing your module. Very interesting. Would it be possible to share also your DOM routines (absoluteRect, dom, removeNode )?

[holtwick]

Sure, absoluteRect just returns some real world position info of an element:

export function createRect(rect) {
  if (rect == null) {
    return null
  }
  let newRect = {
    left: rect.left + document.body.scrollLeft,
    top: rect.top + document.body.scrollTop,
    width: rect.width,
    height: rect.height,
    bottom: 0,
    right: 0,
  }
  newRect.bottom = newRect.top + newRect.height
  newRect.right = newRect.left + newRect.width 
  return newRect
}

export function absoluteRect(element: HTMLElement): ?ClientRect {
  return createRect(element.getBoundingClientRect())
}

removeNode is a helper to remove a DOM node:

export function removeNode(node) {
  if (node && node.parentNode) {
    node.parentNode.removeChild(node)
  }
}

And dom is just an abstraction for the follwing code:

let dropElement = document.createElement('div')
dropElement.setAttribute('draggable', 'true')
dropElement.className = 'noteDragHandle'
dropElement.addEventListener(e => dragStart(e, editorView))
dropElement.textContent = '⠿'

Hope this helps.

[jonasdumas]

Thank you so much ! Very helpful!

[RomainLanz]

Hey all 👋

I didn't really get how to allow to drag all elements (also the one comming from tiptap-extensions) ?