@tiptap/extension-drag-handle 2.22.0

package/src/drag-handle-plugin.ts

@@ -0,0 +1,370 @@
+import { Editor } from '@tiptap/core'
+import { isChangeOrigin } from '@tiptap/extension-collaboration'
+import { Node } from '@tiptap/pm/model'
+import {
+  EditorState, Plugin, PluginKey,
+  Transaction,
+} from '@tiptap/pm/state'
+import { EditorView } from '@tiptap/pm/view'
+import tippy, { Instance, Props as TippyProps } from 'tippy.js'
+import { absolutePositionToRelativePosition, relativePositionToAbsolutePosition, ySyncPluginKey } from 'y-prosemirror'
+
+import { dragHandler } from './helpers/dragHandler.js'
+import { findElementNextToCoords } from './helpers/findNextElementFromCursor.js'
+import { getOuterNode, getOuterNodePos } from './helpers/getOuterNode.js'
+import { removeNode } from './helpers/removeNode.js'
+
+type PluginState = {
+  locked: boolean;
+};
+
+const getRelativePos = (state: EditorState, absolutePos: number) => {
+  const ystate = ySyncPluginKey.getState(state)
+
+  if (!ystate) {
+    return null
+  }
+
+  return absolutePositionToRelativePosition(absolutePos, ystate.type, ystate.binding.mapping)
+}
+
+const getAbsolutePos = (state: EditorState, relativePos: any) => {
+  const ystate = ySyncPluginKey.getState(state)
+
+  if (!ystate) {
+    return -1
+  }
+
+  return relativePositionToAbsolutePosition(ystate.doc, ystate.type, relativePos, ystate.binding.mapping) || 0
+}
+
+const getOuterDomNode = (view: EditorView, domNode: HTMLElement) => {
+  let tmpDomNode = domNode
+
+  // Traverse to top level node.
+  while (tmpDomNode && tmpDomNode.parentNode) {
+    if (tmpDomNode.parentNode === view.dom) {
+      break
+    }
+
+    tmpDomNode = tmpDomNode.parentNode as HTMLElement
+  }
+
+  return tmpDomNode
+}
+
+export interface DragHandlePluginProps {
+  pluginKey?: PluginKey | string;
+  editor: Editor;
+  element: HTMLElement;
+  onNodeChange?: (data: { editor: Editor; node: Node | null; pos: number }) => void;
+  tippyOptions?: Partial<TippyProps>;
+}
+
+export const dragHandlePluginDefaultKey = new PluginKey('dragHandle')
+
+export const DragHandlePlugin = ({
+  pluginKey = dragHandlePluginDefaultKey,
+  element,
+  editor,
+  tippyOptions,
+  onNodeChange,
+}: DragHandlePluginProps) => {
+  const wrapper = document.createElement('div')
+  let popup: Instance | null = null
+  let locked = false
+  let currentNode: Node | null = null
+  let currentNodePos = -1
+  let currentNodeRelPos: any
+
+  element.addEventListener('dragstart', e => {
+    // Push this to the end of the event cue
+    // Fixes bug where incorrect drag pos is returned if drag handle has position: absolute
+    // @ts-ignore
+    dragHandler(e, editor)
+
+    setTimeout(() => {
+      if (element) {
+        element.style.pointerEvents = 'none'
+      }
+    }, 0)
+  })
+
+  element.addEventListener('dragend', () => {
+    if (element) {
+      element.style.pointerEvents = 'auto'
+    }
+  })
+
+  return new Plugin({
+    key: typeof pluginKey === 'string' ? new PluginKey(pluginKey) : pluginKey,
+
+    state: {
+      init() {
+        return { locked: false }
+      },
+      apply(tr: Transaction, value: PluginState, oldState: EditorState, state: EditorState) {
+        const isLocked = tr.getMeta('lockDragHandle')
+        const hideDragHandle = tr.getMeta('hideDragHandle')
+
+        if (isLocked !== undefined) {
+          locked = isLocked
+        }
+
+        if (hideDragHandle && popup) {
+          popup.hide()
+
+          locked = false
+          currentNode = null
+          currentNodePos = -1
+
+          onNodeChange?.({ editor, node: null, pos: -1 })
+
+          return value
+        }
+
+        // Something has changed and drag handler is visible…
+        if (tr.docChanged && currentNodePos !== -1 && element && popup) {
+          // Yjs replaces the entire document on every incoming change and needs a special handling.
+          // If change comes from another user …
+          if (isChangeOrigin(tr)) {
+            // https://discuss.yjs.dev/t/y-prosemirror-mapping-a-single-relative-position-when-doc-changes/851/3
+            const newPos = getAbsolutePos(state, currentNodeRelPos)
+
+            if (newPos !== currentNodePos) {
+              // Set the new position for our current node.
+              currentNodePos = newPos
+
+              // We will get the outer node with data and position in views update method.
+            }
+          } else {
+            // … otherwise use ProseMirror mapping to update the position.
+            const newPos = tr.mapping.map(currentNodePos)
+
+            if (newPos !== currentNodePos) {
+              // TODO: Remove
+              // console.log('Position has changed …', { old: currentNodePos, new: newPos }, tr);
+
+              // Set the new position for our current node.
+              currentNodePos = newPos
+
+              // Memorize relative position to retrieve absolute position in case of collaboration
+              currentNodeRelPos = getRelativePos(state, currentNodePos)
+
+              // We will get the outer node with data and position in views update method.
+            }
+          }
+        }
+
+        return value
+      },
+    },
+
+    view: view => {
+      element.draggable = true
+      element.style.pointerEvents = 'auto'
+
+      editor.view.dom.parentElement?.appendChild(wrapper)
+
+      wrapper.appendChild(element)
+      wrapper.style.pointerEvents = 'none'
+      wrapper.style.position = 'absolute'
+      wrapper.style.top = '0'
+      wrapper.style.left = '0'
+
+      return {
+        update(_, oldState) {
+          if (!element) {
+            return
+          }
+
+          if (!editor.isEditable) {
+            popup?.destroy()
+            popup = null
+            return
+          }
+
+          if (!popup) {
+            popup = tippy(view.dom, {
+              getReferenceClientRect: null,
+              interactive: true,
+              trigger: 'manual',
+              placement: 'left-start',
+              hideOnClick: false,
+              duration: 100,
+              popperOptions: {
+                modifiers: [
+                  { name: 'flip', enabled: false },
+                  {
+                    name: 'preventOverflow',
+                    options: {
+                      rootBoundary: 'document',
+                      mainAxis: false,
+                    },
+                  },
+                ],
+              },
+              ...tippyOptions,
+              appendTo: wrapper,
+              content: element,
+            })
+          }
+
+          // Prevent element being draggend while being open.
+          if (locked) {
+            element.draggable = false
+          } else {
+            element.draggable = true
+          }
+
+          // Do not close on updates (e.g. changing padding of a section or collaboration events)
+          // popup?.hide();
+
+          // Recalculate popup position if doc has changend and drag handler is visible.
+          if (view.state.doc.eq(oldState.doc) || currentNodePos === -1) {
+            return
+          }
+
+          // Get domNode from (new) position.
+          let domNode = view.nodeDOM(currentNodePos) as HTMLElement
+
+          // Since old element could have been wrapped, we need to find
+          // the outer node and take its position and node data.
+          domNode = getOuterDomNode(view, domNode)
+
+          // Skip if domNode is editor dom.
+          if (domNode === view.dom) {
+            return
+          }
+
+          // We only want `Element`.
+          if (domNode?.nodeType !== 1) {
+            return
+          }
+
+          const domNodePos = view.posAtDOM(domNode, 0)
+          const outerNode = getOuterNode(editor.state.doc, domNodePos)
+          const outerNodePos = getOuterNodePos(editor.state.doc, domNodePos) // TODO: needed?
+
+          currentNode = outerNode
+          currentNodePos = outerNodePos
+
+          // Memorize relative position to retrieve absolute position in case of collaboration
+          currentNodeRelPos = getRelativePos(view.state, currentNodePos)
+
+          // TODO: Remove
+          // console.log('View has updated: callback with new data and repositioning of popup …', {
+          //   domNode,
+          //   currentNodePos,
+          //   currentNode,
+          //   rect: (domNode as Element).getBoundingClientRect(),
+          // });
+
+          onNodeChange?.({ editor, node: currentNode, pos: currentNodePos })
+
+          // Update Tippys getReferenceClientRect since domNode might have changed.
+          popup.setProps({
+            getReferenceClientRect: () => (domNode as Element).getBoundingClientRect(),
+          })
+        },
+
+        // TODO: Kills even on hot reload
+        destroy() {
+          popup?.destroy()
+
+          if (element) {
+            removeNode(wrapper)
+          }
+        },
+      }
+    },
+
+    props: {
+      handleDOMEvents: {
+        mouseleave(_view, e) {
+          // Do not hide open popup on mouseleave.
+          if (locked) {
+            return false
+          }
+
+          // If e.target is not inside the wrapper, hide.
+          if (e.target && !wrapper.contains(e.relatedTarget as HTMLElement)) {
+            popup?.hide()
+
+            currentNode = null
+            currentNodePos = -1
+
+            onNodeChange?.({ editor, node: null, pos: -1 })
+          }
+
+          return false
+        },
+
+        mousemove(view, e) {
+          // Do not continue if popup is not initialized or open.
+          if (!element || !popup || locked) {
+            return false
+          }
+
+          const nodeData = findElementNextToCoords({
+            x: e.clientX,
+            y: e.clientY,
+            direction: 'right',
+            editor,
+          })
+
+          // Skip if there is no node next to coords
+          if (!nodeData.resultElement) {
+            return false
+          }
+
+          let domNode = nodeData.resultElement as HTMLElement
+
+          domNode = getOuterDomNode(view, domNode)
+
+          // Skip if domNode is editor dom.
+          if (domNode === view.dom) {
+            return false
+          }
+
+          // We only want `Element`.
+          if (domNode?.nodeType !== 1) {
+            return false
+          }
+
+          const domNodePos = view.posAtDOM(domNode, 0)
+          const outerNode = getOuterNode(editor.state.doc, domNodePos)
+
+          if (outerNode !== currentNode) {
+            const outerNodePos = getOuterNodePos(editor.state.doc, domNodePos)
+
+            currentNode = outerNode
+            currentNodePos = outerNodePos
+
+            // Memorize relative position to retrieve absolute position in case of collaboration
+            currentNodeRelPos = getRelativePos(view.state, currentNodePos)
+
+            // TODO: Remove
+            // console.log('Mousemove with changed node / node data …', {
+            //   domNode,
+            //   currentNodePos,
+            //   currentNode,
+            //   rect: (domNode as Element).getBoundingClientRect(),
+            // });
+
+            onNodeChange?.({ editor, node: currentNode, pos: currentNodePos })
+
+            // Set nodes clientRect.
+            popup.setProps({
+              getReferenceClientRect: () => (domNode as Element).getBoundingClientRect(),
+            })
+
+            popup.show()
+          }
+
+          return false
+        },
+      },
+    },
+  })
+}

package/src/drag-handle.ts

@@ -0,0 +1,92 @@
+import { Editor, Extension } from '@tiptap/core'
+import { Node } from '@tiptap/pm/model'
+import { Props } from 'tippy.js'
+
+import { DragHandlePlugin } from './drag-handle-plugin.js'
+
+export interface DragHandleOptions {
+  /**
+   * Renders an element that is positioned with tippy.js
+   */
+  render (): HTMLElement,
+  /**
+   * Options for tippy.js
+   */
+  tippyOptions?: Partial<Props>,
+  /**
+   * Locks the draghandle in place and visibility
+   */
+  locked?: boolean,
+  /**
+   * Returns a node or null when a node is hovered over
+   */
+  onNodeChange?: (options: { node: Node | null, editor: Editor }) => void,
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    dragHandle: {
+      /**
+       * Locks the draghandle in place and visibility
+       */
+      lockDragHandle: () => ReturnType,
+      /**
+       * Unlocks the draghandle
+       */
+      unlockDragHandle: () => ReturnType,
+      /**
+       * Toggle draghandle lock state
+       */
+      toggleDragHandle: () => ReturnType,
+    }
+  }
+}
+
+export const DragHandle = Extension.create<DragHandleOptions>({
+  name: 'dragHandle',
+
+  addOptions() {
+    return {
+      render() {
+        const element = document.createElement('div')
+
+        element.classList.add('drag-handle')
+
+        return element
+      },
+      tippyOptions: {},
+      locked: false,
+      onNodeChange: () => { return null },
+    }
+  },
+
+  addCommands() {
+    return {
+      lockDragHandle: () => ({ editor }) => {
+        this.options.locked = true
+        return editor.commands.setMeta('lockDragHandle', this.options.locked)
+      },
+      unlockDragHandle: () => ({ editor }) => {
+        this.options.locked = false
+        return editor.commands.setMeta('lockDragHandle', this.options.locked)
+      },
+      toggleDragHandle: () => ({ editor }) => {
+        this.options.locked = !this.options.locked
+        return editor.commands.setMeta('lockDragHandle', this.options.locked)
+      },
+    }
+  },
+
+  addProseMirrorPlugins() {
+    const element = this.options.render()
+
+    return [
+      DragHandlePlugin({
+        tippyOptions: this.options.tippyOptions,
+        element,
+        editor: this.editor,
+        onNodeChange: this.options.onNodeChange,
+      }),
+    ]
+  },
+})

package/src/helpers/cloneElement.ts

@@ -0,0 +1,22 @@
+function getCSSText(element: Element) {
+  let value = ''
+  const style = getComputedStyle(element)
+
+  for (let i = 0; i < style.length; i += 1) {
+    value += `${style[i]}:${style.getPropertyValue(style[i])};`
+  }
+
+  return value
+}
+
+export function cloneElement(node: HTMLElement) {
+  const clonedNode = node.cloneNode(true) as HTMLElement
+  const sourceElements = [node, ...Array.from(node.getElementsByTagName('*'))] as HTMLElement[]
+  const targetElements = [clonedNode, ...Array.from(clonedNode.getElementsByTagName('*'))] as HTMLElement[]
+
+  sourceElements.forEach((sourceElement, index) => {
+    targetElements[index].style.cssText = getCSSText(sourceElement)
+  })
+
+  return clonedNode
+}

package/src/helpers/dragHandler.ts

@@ -0,0 +1,102 @@
+import { Editor } from '@tiptap/core'
+import { getSelectionRanges, NodeRangeSelection } from '@tiptap/extension-node-range'
+import { SelectionRange } from '@tiptap/pm/state'
+
+import { cloneElement } from './cloneElement.js'
+import { findElementNextToCoords } from './findNextElementFromCursor.js'
+import { getInnerCoords } from './getInnerCoords.js'
+import { removeNode } from './removeNode.js'
+
+function getDragHandleRanges(event: DragEvent, editor: Editor): SelectionRange[] {
+  const { doc } = editor.view.state
+
+  const result = findElementNextToCoords({
+    editor, x: event.clientX, y: event.clientY, direction: 'right',
+  })
+
+  if (!result.resultNode || result.pos === null) {
+    return []
+  }
+
+  const x = event.clientX
+
+  // @ts-ignore
+  const coords = getInnerCoords(editor.view, x, event.clientY)
+  const posAtCoords = editor.view.posAtCoords(coords)
+
+  if (!posAtCoords) {
+    return []
+  }
+
+  const { pos } = posAtCoords
+  const nodeAt = doc.resolve(pos).parent
+
+  if (!nodeAt) {
+    return []
+  }
+
+  const $from = doc.resolve(result.pos)
+  const $to = doc.resolve(result.pos + 1)
+
+  return getSelectionRanges($from, $to, 0)
+}
+
+export function dragHandler(event: DragEvent, editor: Editor) {
+  const { view } = editor
+
+  if (!event.dataTransfer) {
+    return
+  }
+
+  const { empty, $from, $to } = view.state.selection
+
+  const dragHandleRanges = getDragHandleRanges(event, editor)
+
+  const selectionRanges = getSelectionRanges($from, $to, 0)
+  const isDragHandleWithinSelection = selectionRanges.some(range => {
+    return dragHandleRanges.find(dragHandleRange => {
+      return dragHandleRange.$from === range.$from
+        && dragHandleRange.$to === range.$to
+    })
+  })
+
+  const ranges = empty || !isDragHandleWithinSelection
+    ? dragHandleRanges
+    : selectionRanges
+
+  if (!ranges.length) {
+    return
+  }
+
+  const { tr } = view.state
+  const wrapper = document.createElement('div')
+  const from = ranges[0].$from.pos
+  const to = ranges[ranges.length - 1].$to.pos
+
+  const selection = NodeRangeSelection.create(view.state.doc, from, to)
+  const slice = selection.content()
+
+  ranges.forEach(range => {
+    const element = view.nodeDOM(range.$from.pos) as HTMLElement
+    const clonedElement = cloneElement(element)
+
+    wrapper.append(clonedElement)
+  })
+
+  wrapper.style.position = 'absolute'
+  wrapper.style.top = '-10000px'
+  document.body.append(wrapper)
+
+  event.dataTransfer.clearData()
+  event.dataTransfer.setDragImage(wrapper, 0, 0)
+
+  // tell ProseMirror the dragged content
+  view.dragging = { slice, move: true }
+
+  tr.setSelection(selection)
+
+  view.dispatch(tr)
+
+  // clean up
+  document.addEventListener('drop', () => removeNode(wrapper), { once: true })
+}

package/src/helpers/findNextElementFromCursor.ts

@@ -0,0 +1,55 @@
+import { Editor } from '@tiptap/core'
+import { Node } from '@tiptap/pm/model'
+
+export type FindElementNextToCoords = {
+  x: number
+  y: number
+  direction?: 'left' | 'right'
+  editor: Editor
+}
+
+export const findElementNextToCoords = (options: FindElementNextToCoords) => {
+  const {
+    x, y, direction, editor,
+  } = options
+  let resultElement: HTMLElement | null = null
+  let resultNode: Node | null = null
+  let pos: number | null = null
+
+  let currentX = x
+
+  while (resultNode === null && currentX < window.innerWidth && currentX > 0) {
+    const allElements = document.elementsFromPoint(currentX, y)
+    const prosemirrorIndex = allElements.findIndex(element => element.classList.contains('ProseMirror'))
+    const filteredElements = allElements.slice(0, prosemirrorIndex)
+
+    if (filteredElements.length > 0) {
+      const target = filteredElements[0]
+
+      resultElement = target as HTMLElement
+      pos = editor.view.posAtDOM(target, 0)
+
+      if (pos >= 0) {
+        resultNode = editor.state.doc.nodeAt(Math.max(pos - 1, 0))
+
+        if (resultNode?.isText) {
+          resultNode = editor.state.doc.nodeAt(Math.max(pos - 1, 0))
+        }
+
+        if (!resultNode) {
+          resultNode = editor.state.doc.nodeAt(Math.max(pos, 0))
+        }
+
+        break
+      }
+    }
+
+    if (direction === 'left') {
+      currentX -= 1
+    } else {
+      currentX += 1
+    }
+  }
+
+  return { resultElement, resultNode, pos: pos ?? null }
+}

package/src/helpers/getComputedStyle.ts

@@ -0,0 +1,5 @@
+export function getComputedStyle(node: Element, property: keyof CSSStyleDeclaration): any {
+  const style = window.getComputedStyle(node)
+
+  return style[property]
+}

package/src/helpers/getInnerCoords.ts

@@ -0,0 +1,22 @@
+import { EditorView } from '@tiptap/pm/view'
+
+import { getComputedStyle } from './getComputedStyle.js'
+import { minMax } from './minMax.js'
+
+export function getInnerCoords(view: EditorView, x: number, y: number): { left: number, top: number } {
+  const paddingLeft = parseInt(getComputedStyle(view.dom, 'paddingLeft'), 10)
+  const paddingRight = parseInt(getComputedStyle(view.dom, 'paddingRight'), 10)
+  const borderLeft = parseInt(getComputedStyle(view.dom, 'borderLeftWidth'), 10)
+  const borderRight = parseInt(getComputedStyle(view.dom, 'borderLeftWidth'), 10)
+  const bounds = view.dom.getBoundingClientRect()
+  const coords = {
+    left: minMax(
+      x,
+      bounds.left + paddingLeft + borderLeft,
+      bounds.right - paddingRight - borderRight,
+    ),
+    top: y,
+  }
+
+  return coords
+}

package/src/helpers/getOuterNode.ts

@@ -0,0 +1,34 @@
+import { Node } from '@tiptap/pm/model'
+
+export const getOuterNodePos = (doc: Node, pos: number): number => {
+  const resolvedPos = doc.resolve(pos)
+  const { depth } = resolvedPos
+
+  if (depth === 0) {
+    return pos
+  }
+
+  const a = resolvedPos.pos - resolvedPos.parentOffset
+
+  return a - 1
+}
+
+export const getOuterNode = (doc: Node, pos: number): Node | null => {
+  const node = doc.nodeAt(pos)
+  const resolvedPos = doc.resolve(pos)
+
+  let { depth } = resolvedPos
+  let parent = node
+
+  while (depth > 0) {
+    const currentNode = resolvedPos.node(depth)
+
+    depth -= 1
+
+    if (depth === 0) {
+      parent = currentNode
+    }
+  }
+
+  return parent
+}