@tiptap/extension-drag-handle 2.24.1 → 3.0.0-beta.10

package/src/drag-handle-plugin.ts

@@ -1,13 +1,14 @@
-import { Editor } from '@tiptap/core'
+import { type ComputePositionConfig, computePosition } from '@floating-ui/dom'
+import type { Editor } from '@tiptap/core'
 import { isChangeOrigin } from '@tiptap/extension-collaboration'
-import { Node } from '@tiptap/pm/model'
+import type { Node } from '@tiptap/pm/model'
+import { type EditorState, type Transaction, Plugin, PluginKey } from '@tiptap/pm/state'
+import type { EditorView } from '@tiptap/pm/view'
 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'
+  absolutePositionToRelativePosition,
+  relativePositionToAbsolutePosition,
+  ySyncPluginKey,
+} from '@tiptap/y-tiptap'
 
 import { dragHandler } from './helpers/dragHandler.js'
 import { findElementNextToCoords } from './helpers/findNextElementFromCursor.js'
@@ -15,8 +16,8 @@ import { getOuterNode, getOuterNodePos } from './helpers/getOuterNode.js'
 import { removeNode } from './helpers/removeNode.js'
 
 type PluginState = {
-  locked: boolean;
-};
+  locked: boolean
+}
 
 const getRelativePos = (state: EditorState, absolutePos: number) => {
   const ystate = ySyncPluginKey.getState(state)
@@ -28,6 +29,7 @@ const getRelativePos = (state: EditorState, absolutePos: number) => {
   return absolutePositionToRelativePosition(absolutePos, ystate.type, ystate.binding.mapping)
 }
 
+// biome-ignore lint/suspicious/noExplicitAny: y-prosemirror (and y-tiptap by extension) does not have types for relative positions
 const getAbsolutePos = (state: EditorState, relativePos: any) => {
   const ystate = ySyncPluginKey.getState(state)
 
@@ -42,7 +44,7 @@ const getOuterDomNode = (view: EditorView, domNode: HTMLElement) => {
   let tmpDomNode = domNode
 
   // Traverse to top level node.
-  while (tmpDomNode && tmpDomNode.parentNode) {
+  while (tmpDomNode?.parentNode) {
     if (tmpDomNode.parentNode === view.dom) {
       break
     }
@@ -54,11 +56,11 @@ const getOuterDomNode = (view: EditorView, domNode: HTMLElement) => {
 }
 
 export interface DragHandlePluginProps {
-  pluginKey?: PluginKey | string;
-  editor: Editor;
-  element: HTMLElement;
-  onNodeChange?: (data: { editor: Editor; node: Node | null; pos: number }) => void;
-  tippyOptions?: Partial<TippyProps>;
+  pluginKey?: PluginKey | string
+  editor: Editor
+  element: HTMLElement
+  onNodeChange?: (data: { editor: Editor; node: Node | null; pos: number }) => void
+  computePositionConfig?: ComputePositionConfig
 }
 
 export const dragHandlePluginDefaultKey = new PluginKey('dragHandle')
@@ -67,17 +69,54 @@ export const DragHandlePlugin = ({
   pluginKey = dragHandlePluginDefaultKey,
   element,
   editor,
-  tippyOptions,
+  computePositionConfig,
   onNodeChange,
 }: DragHandlePluginProps) => {
   const wrapper = document.createElement('div')
-  let popup: Instance | null = null
   let locked = false
   let currentNode: Node | null = null
   let currentNodePos = -1
+  // biome-ignore lint/suspicious/noExplicitAny: See above - relative positions in y-prosemirror are not typed
   let currentNodeRelPos: any
 
-  element.addEventListener('dragstart', e => {
+  function hideHandle() {
+    if (!element) {
+      return
+    }
+
+    element.style.visibility = 'hidden'
+    element.style.pointerEvents = 'none'
+  }
+
+  function showHandle() {
+    if (!element) {
+      return
+    }
+
+    if (!editor.isEditable) {
+      hideHandle()
+      return
+    }
+
+    element.style.visibility = ''
+    element.style.pointerEvents = 'auto'
+  }
+
+  function repositionDragHandle(dom: Element) {
+    const virtualElement = {
+      getBoundingClientRect: () => dom.getBoundingClientRect(),
+    }
+
+    computePosition(virtualElement, element, computePositionConfig).then(val => {
+      Object.assign(element.style, {
+        position: val.strategy,
+        left: `${val.x}px`,
+        top: `${val.y}px`,
+      })
+    })
+  }
+
+  function onDragStart(e: DragEvent) {
     // 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
@@ -88,283 +127,241 @@ export const DragHandlePlugin = ({
         element.style.pointerEvents = 'none'
       }
     }, 0)
-  })
+  }
 
-  element.addEventListener('dragend', () => {
+  function onDragEnd() {
+    hideHandle()
     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()
+  element.addEventListener('dragstart', onDragStart)
+  element.addEventListener('dragend', onDragEnd)
 
-          locked = false
-          currentNode = null
-          currentNodePos = -1
+  wrapper.appendChild(element)
 
-          onNodeChange?.({ editor, node: null, pos: -1 })
+  return {
+    unbind() {
+      element.removeEventListener('dragstart', onDragStart)
+      element.removeEventListener('dragend', onDragEnd)
+    },
+    plugin: new Plugin({
+      key: typeof pluginKey === 'string' ? new PluginKey(pluginKey) : pluginKey,
 
-          return value
-        }
+      state: {
+        init() {
+          return { locked: false }
+        },
+        apply(tr: Transaction, value: PluginState, _oldState: EditorState, state: EditorState) {
+          const isLocked = tr.getMeta('lockDragHandle')
+          const hideDragHandle = tr.getMeta('hideDragHandle')
 
-        // 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 (isLocked !== undefined) {
+            locked = isLocked
+          }
 
-            if (newPos !== currentNodePos) {
-              // Set the new position for our current node.
-              currentNodePos = newPos
+          if (hideDragHandle) {
+            hideHandle()
 
-              // 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)
+            locked = false
+            currentNode = null
+            currentNodePos = -1
 
-            if (newPos !== currentNodePos) {
-              // TODO: Remove
-              // console.log('Position has changed …', { old: currentNodePos, new: newPos }, tr);
+            onNodeChange?.({ editor, node: null, pos: -1 })
 
-              // Set the new position for our current node.
-              currentNodePos = newPos
+            return value
+          }
 
-              // Memorize relative position to retrieve absolute position in case of collaboration
-              currentNodeRelPos = getRelativePos(state, currentNodePos)
+          // Something has changed and drag handler is visible…
+          if (tr.docChanged && currentNodePos !== -1 && element) {
+            // 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)
 
-              // We will get the outer node with data and position in views update method.
-            }
-          }
-        }
+              if (newPos !== currentNodePos) {
+                // Set the new position for our current node.
+                currentNodePos = newPos
 
-        return value
-      },
-    },
+                // 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)
 
-    view: view => {
-      element.draggable = true
-      element.style.pointerEvents = 'auto'
+              if (newPos !== currentNodePos) {
+                // TODO: Remove
+                // console.log('Position has changed …', { old: currentNodePos, new: newPos }, tr);
 
-      editor.view.dom.parentElement?.appendChild(wrapper)
+                // Set the new position for our current node.
+                currentNodePos = newPos
 
-      wrapper.appendChild(element)
-      wrapper.style.pointerEvents = 'none'
-      wrapper.style.position = 'absolute'
-      wrapper.style.top = '0'
-      wrapper.style.left = '0'
+                // Memorize relative position to retrieve absolute position in case of collaboration
+                currentNodeRelPos = getRelativePos(state, currentNodePos)
 
-      return {
-        update(_, oldState) {
-          if (!element) {
-            return
+                // We will get the outer node with data and position in views update method.
+              }
+            }
           }
 
-          if (!editor.isEditable) {
-            popup?.destroy()
-            popup = null
-            return
-          }
+          return value
+        },
+      },
 
-          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,
-            })
-          }
+      view: view => {
+        element.draggable = true
+        element.style.pointerEvents = 'auto'
 
-          // Prevent element being draggend while being open.
-          if (locked) {
-            element.draggable = false
-          } else {
-            element.draggable = true
-          }
+        editor.view.dom.parentElement?.appendChild(wrapper)
 
-          // Do not close on updates (e.g. changing padding of a section or collaboration events)
-          // popup?.hide();
+        wrapper.style.pointerEvents = 'none'
+        wrapper.style.position = 'absolute'
+        wrapper.style.top = '0'
+        wrapper.style.left = '0'
 
-          // Recalculate popup position if doc has changend and drag handler is visible.
-          if (view.state.doc.eq(oldState.doc) || currentNodePos === -1) {
-            return
-          }
+        return {
+          update(_, oldState) {
+            if (!element) {
+              return
+            }
 
-          // Get domNode from (new) position.
-          let domNode = view.nodeDOM(currentNodePos) as HTMLElement
+            if (!editor.isEditable) {
+              hideHandle()
+              return
+            }
 
-          // 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)
+            // Prevent element being draggend while being open.
+            if (locked) {
+              element.draggable = false
+            } else {
+              element.draggable = true
+            }
 
-          // Skip if domNode is editor dom.
-          if (domNode === view.dom) {
-            return
-          }
+            // Recalculate popup position if doc has changend and drag handler is visible.
+            if (view.state.doc.eq(oldState.doc) || currentNodePos === -1) {
+              return
+            }
 
-          // We only want `Element`.
-          if (domNode?.nodeType !== 1) {
-            return
-          }
+            // Get domNode from (new) position.
+            let domNode = view.nodeDOM(currentNodePos) as HTMLElement
 
-          const domNodePos = view.posAtDOM(domNode, 0)
-          const outerNode = getOuterNode(editor.state.doc, domNodePos)
-          const outerNodePos = getOuterNodePos(editor.state.doc, domNodePos) // TODO: needed?
+            // 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)
 
-          currentNode = outerNode
-          currentNodePos = outerNodePos
+            // Skip if domNode is editor dom.
+            if (domNode === view.dom) {
+              return
+            }
 
-          // Memorize relative position to retrieve absolute position in case of collaboration
-          currentNodeRelPos = getRelativePos(view.state, currentNodePos)
+            // We only want `Element`.
+            if (domNode?.nodeType !== 1) {
+              return
+            }
 
-          // TODO: Remove
-          // console.log('View has updated: callback with new data and repositioning of popup …', {
-          //   domNode,
-          //   currentNodePos,
-          //   currentNode,
-          //   rect: (domNode as Element).getBoundingClientRect(),
-          // });
+            const domNodePos = view.posAtDOM(domNode, 0)
+            const outerNode = getOuterNode(editor.state.doc, domNodePos)
+            const outerNodePos = getOuterNodePos(editor.state.doc, domNodePos) // TODO: needed?
 
-          onNodeChange?.({ editor, node: currentNode, pos: currentNodePos })
+            currentNode = outerNode
+            currentNodePos = outerNodePos
 
-          // Update Tippys getReferenceClientRect since domNode might have changed.
-          popup.setProps({
-            getReferenceClientRect: () => (domNode as Element).getBoundingClientRect(),
-          })
-        },
+            // Memorize relative position to retrieve absolute position in case of collaboration
+            currentNodeRelPos = getRelativePos(view.state, currentNodePos)
 
-        // TODO: Kills even on hot reload
-        destroy() {
-          popup?.destroy()
+            onNodeChange?.({ editor, node: currentNode, pos: currentNodePos })
 
-          if (element) {
-            removeNode(wrapper)
-          }
-        },
-      }
-    },
+            repositionDragHandle(domNode as Element)
+          },
 
-    props: {
-      handleDOMEvents: {
-        mouseleave(_view, e) {
-          // Do not hide open popup on mouseleave.
-          if (locked) {
-            return false
-          }
+          // TODO: Kills even on hot reload
+          destroy() {
+            if (element) {
+              removeNode(wrapper)
+            }
+          },
+        }
+      },
 
-          // If e.target is not inside the wrapper, hide.
-          if (e.target && !wrapper.contains(e.relatedTarget as HTMLElement)) {
-            popup?.hide()
+      props: {
+        handleDOMEvents: {
+          mouseleave(_view, e) {
+            // Do not hide open popup on mouseleave.
+            if (locked) {
+              return false
+            }
 
-            currentNode = null
-            currentNodePos = -1
+            // If e.target is not inside the wrapper, hide.
+            if (e.target && !wrapper.contains(e.relatedTarget as HTMLElement)) {
+              hideHandle()
 
-            onNodeChange?.({ editor, node: null, pos: -1 })
-          }
+              currentNode = null
+              currentNodePos = -1
 
-          return false
-        },
+              onNodeChange?.({ editor, node: null, pos: -1 })
+            }
 
-        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,
-          })
+          mousemove(view, e) {
+            // Do not continue if popup is not initialized or open.
+            if (!element || locked) {
+              return false
+            }
 
-          // Skip if there is no node next to coords
-          if (!nodeData.resultElement) {
-            return false
-          }
+            const nodeData = findElementNextToCoords({
+              x: e.clientX,
+              y: e.clientY,
+              direction: 'right',
+              editor,
+            })
 
-          let domNode = nodeData.resultElement as HTMLElement
+            // Skip if there is no node next to coords
+            if (!nodeData.resultElement) {
+              return false
+            }
 
-          domNode = getOuterDomNode(view, domNode)
+            let domNode = nodeData.resultElement as HTMLElement
 
-          // Skip if domNode is editor dom.
-          if (domNode === view.dom) {
-            return false
-          }
+            domNode = getOuterDomNode(view, domNode)
 
-          // We only want `Element`.
-          if (domNode?.nodeType !== 1) {
-            return false
-          }
+            // Skip if domNode is editor dom.
+            if (domNode === view.dom) {
+              return false
+            }
 
-          const domNodePos = view.posAtDOM(domNode, 0)
-          const outerNode = getOuterNode(editor.state.doc, domNodePos)
+            // We only want `Element`.
+            if (domNode?.nodeType !== 1) {
+              return false
+            }
 
-          if (outerNode !== currentNode) {
-            const outerNodePos = getOuterNodePos(editor.state.doc, domNodePos)
+            const domNodePos = view.posAtDOM(domNode, 0)
+            const outerNode = getOuterNode(editor.state.doc, domNodePos)
 
-            currentNode = outerNode
-            currentNodePos = outerNodePos
+            if (outerNode !== currentNode) {
+              const outerNodePos = getOuterNodePos(editor.state.doc, domNodePos)
 
-            // Memorize relative position to retrieve absolute position in case of collaboration
-            currentNodeRelPos = getRelativePos(view.state, currentNodePos)
+              currentNode = outerNode
+              currentNodePos = outerNodePos
 
-            // TODO: Remove
-            // console.log('Mousemove with changed node / node data …', {
-            //   domNode,
-            //   currentNodePos,
-            //   currentNode,
-            //   rect: (domNode as Element).getBoundingClientRect(),
-            // });
+              // Memorize relative position to retrieve absolute position in case of collaboration
+              currentNodeRelPos = getRelativePos(view.state, currentNodePos)
 
-            onNodeChange?.({ editor, node: currentNode, pos: currentNodePos })
+              onNodeChange?.({ editor, node: currentNode, pos: currentNodePos })
 
-            // Set nodes clientRect.
-            popup.setProps({
-              getReferenceClientRect: () => (domNode as Element).getBoundingClientRect(),
-            })
+              // Set nodes clientRect.
+              repositionDragHandle(domNode as Element)
 
-            popup.show()
-          }
+              showHandle()
+            }
 
-          return false
+            return false
+          },
         },
       },
-    },
-  })
+    }),
+  }
 }