add react demo (WIP) to bubble menu

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

@@ -0,0 +1,23 @@
+import React from 'react'
+import { useEditor, EditorContent } from '@tiptap/react'
+import { defaultExtensions } from '@tiptap/starter-kit'
+import './styles.scss'
+
+export default () => {
+  const editor = useEditor({
+    extensions: [
+      ...defaultExtensions(),
+    ],
+    content: `
+      <p>
+        Hey, try to select some text here. There will popup a menu for selecting some inline styles. Remember: you have full control about content and styling of this menu.
+      </p>
+    `,
+  })
+
+  return (
+    <div>
+      <EditorContent editor={editor} />
+    </div>
+  )
+}

docs/src/demos/Extensions/BubbleMenu/React/styles.scss

@@ -0,0 +1,5 @@
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}

docs/src/docPages/api/extensions/bubble-menu.md

@@ -35,5 +35,8 @@ new Editor({
 })
 ```
 
-## Vue
+## Using a framework
-<demo name="Extensions/BubbleMenu" />
+<demos :items="{
+  Vue: 'Extensions/BubbleMenu/Vue',
+  React: 'Extensions/BubbleMenu/React',
+}" />

packages/vue-2/package.json

@@ -26,7 +26,7 @@
     "vue": "^2.6.12"
   },
   "dependencies": {
-    "@tiptap/extension-bubble-menu": "^2.0.0-beta.1",
+    "@tiptap/extension-bubble-menu": "^2.0.0-beta.0",
     "prosemirror-view": "^1.18.2"
   }
 }