add bubble menu to vue-3

packages/vue-3/src/BubbleMenu.ts

@@ -0,0 +1,47 @@
+import {
+  h,
+  ref,
+  PropType,
+  onMounted,
+  onBeforeUnmount,
+  defineComponent,
+} from 'vue'
+import {
+  BubbleMenuPlugin,
+  BubbleMenuPluginKey,
+  BubbleMenuPluginProps,
+} from '@tiptap/extension-bubble-menu'
+
+export const BubbleMenu = defineComponent({
+  name: 'BubbleMenu',
+
+  props: {
+    editor: {
+      type: Object as PropType<BubbleMenuPluginProps['editor']>,
+      required: true,
+    },
+
+    keepInBounds: {
+      type: Boolean as PropType<BubbleMenuPluginProps['keepInBounds']>,
+      default: true,
+    },
+  },
+
+  setup({ editor, keepInBounds }, { slots }) {
+    const root = ref<HTMLElement | null>(null)
+
+    onMounted(() => {
+      editor.registerPlugin(BubbleMenuPlugin({
+        editor,
+        element: root.value as HTMLElement,
+        keepInBounds,
+      }))
+    })
+
+    onBeforeUnmount(() => {
+      editor.unregisterPlugin(BubbleMenuPluginKey)
+    })
+
+    return () => h('div', { ref: root }, slots.default?.())
+  },
+})

packages/vue-3/src/index.ts

@@ -1,4 +1,5 @@
 export * from '@tiptap/core'
+export * from './BubbleMenu'
 export { Editor } from './Editor'
 export * from './EditorContent'
 export * from './useEditor'