add menububble react component

docs/src/demos/Extensions/BubbleMenu/React/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useEditor, EditorContent } from '@tiptap/react'
+import { useEditor, EditorContent, BubbleMenu } from '@tiptap/react'
 import { defaultExtensions } from '@tiptap/starter-kit'
 import './styles.scss'
 
@@ -16,7 +16,27 @@ export default () => {
   })
 
   return (
-    <div>
+    <div style={{ position: 'relative' }}>
+      {editor && <BubbleMenu editor={editor}>
+        <button
+          onClick={() => editor.chain().focus().toggleBold().run()}
+          className={editor.isActive('bold') ? 'is-active' : ''}
+        >
+          bold
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+          className={editor.isActive('italic') ? 'is-active' : ''}
+        >
+          italic
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleCode().run()}
+          className={editor.isActive('code') ? 'is-active' : ''}
+        >
+          code
+        </button>
+      </BubbleMenu>}
       <EditorContent editor={editor} />
     </div>
   )

packages/react/package.json

@@ -27,6 +27,7 @@
     "react-dom": "^17.0.1"
   },
   "dependencies": {
+    "@tiptap/extension-bubble-menu": "^2.0.0-beta.0",
     "prosemirror-view": "^1.18.2"
   },
   "devDependencies": {

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'