[PRO]: DragHandle extension conflicts with BubbleMenu

[howardah]

Affected Packages

vue-3, extension-bubble-menu, extension-drag-handle

Version(s)

2.11.5

Description of the Bug

There seems to be a conflict between tippy instances when using the BubbleMenu and DragHandle Extensions together.

They work as expected individually, but when put together in the same editor, the BubbleMenu tippy instance destroys the DragHandle tippy instance on initiation (rending the DragHandle non-functional).

I've tried changing the 'appendTo' element in the tippy options for one or both extensions, to no avail.

If this is a known issue with an available workaround, I would love to know how to solve it.

Thank you!

Browser Used

Chrome

Code Example (Preferred)

https://codesandbox.io/p/devbox/kjtnn7

Expected Behavior

I would expect the two tippy instances to coexist without conflict.

Additional Context (Optional)

I have only tried this with the vue-3 BubbleMenu component. Maybe this isn't an issue with react or vanilla implementations.

Dependency Updates

• Yes, I've updated all my dependencies.

[howardah]

Just a note that there's no issue if I use the BubbleMenu with the plain js implementation:

import { Editor } from '@tiptap/core'
import StarterKit from "@tiptap/starter-kit";
import BubbleMenu from '@tiptap/extension-bubble-menu'
import DragHandle from "@tiptap-pro/extension-drag-handle";

new Editor({
  extensions: [
    StarterKit,
    BubbleMenu.configure({
      element: document.querySelector('.bubble-menu'),
    }),
    DragHandle
  ],
})

and add my vue component in the <div class="bubble-menu"></div> element.

So there is no conflict, it seems between the DragHandle and the BubbleMenu extensions (so I can carry on without issue myself) but it is worth noting that you cannot use, it would seem, the Vue component BubbleMenu with the DragHandle extension.