add floating menu to vue 3 and react

packages/vue-3/package.json

@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.3",
+    "@tiptap/extension-floating-menu": "^2.0.0-beta.0",
     "prosemirror-state": "^1.3.4",
     "prosemirror-view": "^1.18.2",
     "vue": "^3.0.0"

packages/vue-3/src/FloatingMenu.ts

@@ -0,0 +1,41 @@
+import {
+  h,
+  ref,
+  PropType,
+  onMounted,
+  onBeforeUnmount,
+  defineComponent,
+} from 'vue'
+import {
+  FloatingMenuPlugin,
+  FloatingMenuPluginKey,
+  FloatingMenuPluginProps,
+} from '@tiptap/extension-floating-menu'
+
+export const FloatingMenu = defineComponent({
+  name: 'FloatingMenu',
+
+  props: {
+    editor: {
+      type: Object as PropType<FloatingMenuPluginProps['editor']>,
+      required: true,
+    },
+  },
+
+  setup({ editor }, { slots }) {
+    const root = ref<HTMLElement | null>(null)
+
+    onMounted(() => {
+      editor.registerPlugin(FloatingMenuPlugin({
+        editor,
+        element: root.value as HTMLElement,
+      }))
+    })
+
+    onBeforeUnmount(() => {
+      editor.unregisterPlugin(FloatingMenuPluginKey)
+    })
+
+    return () => h('div', { ref: root }, slots.default?.())
+  },
+})

packages/vue-3/src/index.ts

@@ -2,6 +2,7 @@ export * from '@tiptap/core'
 export * from './BubbleMenu'
 export { Editor } from './Editor'
 export * from './EditorContent'
+export * from './FloatingMenu'
 export * from './useEditor'
 export * from './VueRenderer'
 export * from './VueNodeViewRenderer'