add menububble react component

packages/react/src/BubbleMenu.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect, useRef } from 'react'
+import { BubbleMenuPlugin, BubbleMenuPluginKey, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
+
+export type BubbleMenuProps = Omit<BubbleMenuPluginProps, 'element'>
+
+export const BubbleMenu: React.FC<BubbleMenuProps> = (props) => {
+  const element = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const { editor, keepInBounds } = props
+
+    editor.registerPlugin(BubbleMenuPlugin({
+      editor,
+      element: element.current as HTMLElement,
+      keepInBounds,
+    }))
+
+    return () => {
+      editor.unregisterPlugin(BubbleMenuPluginKey)
+    }
+  }, [])
+
+  return (
+    <div ref={element}>
+      {props.children}
+    </div>
+  )
+}

packages/react/src/index.ts

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