BubbleMenu: arrow option does not apply middlewareData.arrow coordinates to position the arrow element #7964

Affected Packages

extension-bubble-menu

Version(s)

3.27.1

Bug Description

The BubbleMenu (and FloatingMenu) plugin accepts an arrow option that feeds the @floating-ui/dom arrow middleware. However, after computePosition resolves, the plugin never reads middlewareData.arrow to position the arrow element (see https://floating-ui.com/docs/arrow#usage).

This means passing arrow: { element: myArrowEl } only affects placement calculations (preventing the floating element from overlapping the arrow), but the arrow element itself is never repositioned and stays at its initial CSS position.

Suggested fix

After applying x/y to the floating element, apply arrow coordinates:

if (middlewareData.arrow && this.floatingUIOptions.arrow) {
  const { x: arrowX, y: arrowY } = middlewareData.arrow
  const arrowEl = this.floatingUIOptions.arrow?.element

  if (arrowEl instanceof HTMLElement) {
    arrowEl.style.left = arrowX != null ? `${arrowX}px` : ''
    arrowEl.style.top = arrowY != null ? `${arrowY}px` : ''
  }
}

Additionally, the @tiptap/react package could export a convenience component that wraps FloatingArrow from @floating-ui/react, but that would require exposing the Floating UI context.

Browser Used

Other

Code Example URL

No response

Expected Behavior

The arrow element should be positioned using middlewareData.arrow.x / middlewareData.arrow.y after each computePosition call, similar to what FloatingArrow from @floating-ui/react does internally.

Additional Context (Optional)

No response

Dependency Updates

• Yes, I've updated all my dependencies.