@tiptap/extension-drag-handle 3.27.1 → 3.27.3

package/src/helpers/findNextElementFromCursor.ts

@@ -14,7 +14,22 @@ export type FindElementNextToCoords = {
 }
 
 /**
- * Finds the draggable block element that is a direct child of view.dom
+ * ProseMirror attaches a `pmViewDesc` to every DOM node it manages. Element view
+ * descriptions for document nodes expose a `node`; widget decorations (such as
+ * the Pages page-chrome overlay, which renders as a zero-height first child of
+ * the editor) have a view description but no associated document node.
+ */
+interface ElementWithViewDesc extends Element {
+  pmViewDesc?: { node?: unknown }
+}
+
+/**
+ * Finds the draggable block element that is a direct child of view.dom.
+ *
+ * Direct children that are widget decorations rather than document content are
+ * skipped — they are not draggable blocks, and treating them as such would
+ * align the drag handle to the decoration (e.g. the page header) instead of the
+ * actual first block on the page.
  */
 export function findClosestTopLevelBlock(
   element: Element,
@@ -26,7 +41,16 @@ export function findClosestTopLevelBlock(
     current = current.parentElement
   }
 
-  return current?.parentElement === view.dom ? (current as HTMLElement) : undefined
+  if (current?.parentElement !== view.dom) {
+    return undefined
+  }
+
+  // Skip widget decorations (no associated document node).
+  if (!(current as ElementWithViewDesc).pmViewDesc?.node) {
+    return undefined
+  }
+
+  return current as HTMLElement
 }
 
 /**
@@ -43,6 +67,33 @@ function isValidRect(rect: DOMRect): boolean {
   )
 }
 
+/**
+ * Returns the bounding rect of the first or last child of `container` that has
+ * a valid (non-zero) layout box.
+ *
+ * Some extensions insert zero-size widget decorations as the first/last child
+ * of the editor — for example the Pages extension anchors its page-chrome
+ * overlay in a zero-height `<div>` as the first child. Reading `firstElementChild`
+ * / `lastElementChild` directly would yield an invalid rect and abort clamping,
+ * so we skip over any edge children without a valid box.
+ */
+export function edgeBlockRect(container: Element, edge: 'first' | 'last'): DOMRect | null {
+  let current: Element | null =
+    edge === 'first' ? container.firstElementChild : container.lastElementChild
+
+  while (current) {
+    const rect = current.getBoundingClientRect()
+
+    if (isValidRect(rect)) {
+      return rect
+    }
+
+    current = edge === 'first' ? current.nextElementSibling : current.previousElementSibling
+  }
+
+  return null
+}
+
 /**
  * Clamps coordinates to content bounds with O(1) layout reads
  */
@@ -58,19 +109,12 @@ function clampToContent(
   }
 
   const container = view.dom
-  const firstBlock = container.firstElementChild
-  const lastBlock = container.lastElementChild
-
-  if (!firstBlock || !lastBlock) {
-    return null
-  }
 
-  // Clamp Y between first and last block
-  const topRect = firstBlock.getBoundingClientRect()
-  const botRect = lastBlock.getBoundingClientRect()
+  // Clamp Y between the first and last children that actually have a layout box.
+  const topRect = edgeBlockRect(container, 'first')
+  const botRect = edgeBlockRect(container, 'last')
 
-  // Validate bounding rects have finite values
-  if (!isValidRect(topRect) || !isValidRect(botRect)) {
+  if (!topRect || !botRect) {
     return null
   }
 

package/src/helpers/nodeRangeDrop.ts

@@ -6,6 +6,53 @@ export interface ActiveDragRange {
   anchorPos: number
   nodeCount: number
   depth: number
+  // Yjs relative position for remapping the drop anchor across isChangeOrigin rebuilds.
+  // biome-ignore lint/suspicious/noExplicitAny: y-prosemirror relative positions are untyped
+  relativeAnchorPos?: any
+}
+
+interface MapPendingRestoreAnchorOptions {
+  isChangeOrigin: boolean
+  getAbsolutePos: (relativePos: unknown) => number
+}
+
+// Remaps the drop anchor while a restore is pending. Returns null when the anchor
+// can no longer be resolved.
+export function mapPendingRestoreAnchor(
+  pendingRestore: ActiveDragRange,
+  tr: {
+    docChanged: boolean
+    mapping: { mapResult: (pos: number, bias: number) => { deleted: boolean; pos: number } }
+  },
+  options: MapPendingRestoreAnchorOptions,
+): ActiveDragRange | null {
+  if (!tr.docChanged) {
+    return pendingRestore
+  }
+
+  if (options.isChangeOrigin && pendingRestore.relativeAnchorPos != null) {
+    const newPos = options.getAbsolutePos(pendingRestore.relativeAnchorPos)
+
+    if (!Number.isFinite(newPos) || newPos <= 0) {
+      return null
+    }
+
+    return {
+      ...pendingRestore,
+      anchorPos: newPos,
+    }
+  }
+
+  const mappedResult = tr.mapping.mapResult(pendingRestore.anchorPos, 1)
+
+  if (mappedResult.deleted) {
+    return null
+  }
+
+  return {
+    ...pendingRestore,
+    anchorPos: mappedResult.pos,
+  }
 }
 
 interface DroppedBlockRange {