add floating menu to vue 3 and react

packages/react/package.json

@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.3",
+    "@tiptap/extension-floating-menu": "^2.0.0-beta.0",
     "prosemirror-view": "^1.18.2"
   },
   "devDependencies": {

packages/react/src/FloatingMenu.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useRef } from 'react'
+import { FloatingMenuPlugin, FloatingMenuPluginKey, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
+
+export type FloatingMenuProps = Omit<FloatingMenuPluginProps, 'element'> & {
+  className?: string,
+}
+
+export const FloatingMenu: React.FC<FloatingMenuProps> = props => {
+  const element = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const { editor } = props
+
+    editor.registerPlugin(FloatingMenuPlugin({
+      editor,
+      element: element.current as HTMLElement,
+    }))
+
+    return () => {
+      editor.unregisterPlugin(FloatingMenuPluginKey)
+    }
+  }, [])
+
+  return (
+    <div ref={element} className={props.className}>
+      {props.children}
+    </div>
+  )
+}

packages/react/src/index.ts

@@ -1,6 +1,7 @@
 export * from '@tiptap/core'
 export * from './BubbleMenu'
 export { Editor } from './Editor'
+export * from './FloatingMenu'
 export * from './useEditor'
 export * from './ReactRenderer'
 export * from './ReactNodeViewRenderer'