When using a multi-column layout, the drag icon cannot be displayed.

[iamouyang21]

Affected Packages

@tiptap/extension-drag-handle

Version(s)

3.4.2

Bug Description

When the page uses a multi-column layout the drag icon cannot be displayed; the layout is shown below:

After debugging the source I found the problem in the following code inside DragHandlePlugin:

const nodeData = findElementNextToCoords({
  x,
  y,
  direction: 'right',
  editor,
})

// Skip if there is no node next to coords
if (!nodeData.resultElement) {
  return
}

When the layout is multi-column, nodeData.resultElement is always null.

Drilling into findElementNextToCoords, I found the issue here:

export const findElementNextToCoords = (options: FindElementNextToCoords) => {
  const { x, y, direction = 'right', editor, bandHeight = 5 } = options

  const rect = {
    top: y - bandHeight,
    bottom: y + bandHeight,
    left: direction === 'right' ? x : 0,
    right: direction === 'right' ? window.innerWidth - x : x,
  }

  const root = editor.view.dom as HTMLElement

  const candidates = [...root.querySelectorAll<HTMLElement>('*')]
    // ...
    .filter(candidate => {
      const candidateRect = candidate.getBoundingClientRect()
      return !(
        candidateRect.bottom < rect.top ||
        candidateRect.top > rect.bottom ||
        candidateRect.right < rect.left ||
        candidateRect.left > rect.right
      )
    })

  if (!candidates || candidates.length === 0) {
    return { resultElement: null, resultNode: null, pos: null }
  }
  // ...
}

The x and y passed in are the mouse coordinates relative to the viewport’s top-left corner.

rect is a collision-detection region, and its right value is calculated incorrectly. right should be the distance from the left edge of the window, not the distance from the right edge. As written, the code conflicts with the candidateRect.left > rect.right check.

Browser Used

Chrome

Code Example URL

No response

Expected Behavior

The drag icon can be displayed normally in multi-column layout

Additional Context (Optional)

No response

Dependency Updates

• Yes, I've updated all my dependencies.

[bdbch]

Thanks for reporting this! We'll look into it soon