From 5213069bb460eb667b9a38f08a664a47949a2963 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 30 Mar 2021 14:24:52 +0200
Subject: [PATCH] add react demo (WIP) to bubble menu

---
 .../Extensions/BubbleMenu/React/index.jsx     | 23 +++++++++++++++++++
 .../Extensions/BubbleMenu/React/styles.scss   |  5 ++++
 .../Extensions/BubbleMenu/{ => Vue}/index.vue |  0
 .../docPages/api/extensions/bubble-menu.md    |  7 ++++--
 packages/vue-2/package.json                   |  2 +-
 5 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 docs/src/demos/Extensions/BubbleMenu/React/index.jsx
 create mode 100644 docs/src/demos/Extensions/BubbleMenu/React/styles.scss
 rename docs/src/demos/Extensions/BubbleMenu/{ => Vue}/index.vue (100%)

diff --git a/docs/src/demos/Extensions/BubbleMenu/React/index.jsx b/docs/src/demos/Extensions/BubbleMenu/React/index.jsx
new file mode 100644
index 00000000..0fc08921
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/docs/src/demos/Extensions/BubbleMenu/React/styles.scss b/docs/src/demos/Extensions/BubbleMenu/React/styles.scss
new file mode 100644
index 00000000..12c87298
--- /dev/null
+++ b/docs/src/demos/Extensions/BubbleMenu/React/styles.scss
@@ -0,0 +1,5 @@
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
diff --git a/docs/src/demos/Extensions/BubbleMenu/index.vue b/docs/src/demos/Extensions/BubbleMenu/Vue/index.vue
similarity index 100%
rename from docs/src/demos/Extensions/BubbleMenu/index.vue
rename to docs/src/demos/Extensions/BubbleMenu/Vue/index.vue
diff --git a/docs/src/docPages/api/extensions/bubble-menu.md b/docs/src/docPages/api/extensions/bubble-menu.md
index b66305c4..25f356fe 100644
--- a/docs/src/docPages/api/extensions/bubble-menu.md
+++ b/docs/src/docPages/api/extensions/bubble-menu.md
@@ -35,5 +35,8 @@ new Editor({
 })
 ```
 
-## Vue
-<demo name="Extensions/BubbleMenu" />
+## Using a framework
+<demos :items="{
+  Vue: 'Extensions/BubbleMenu/Vue',
+  React: 'Extensions/BubbleMenu/React',
+}" />
diff --git a/packages/vue-2/package.json b/packages/vue-2/package.json
index a067ef15..b0c2519d 100644
--- a/packages/vue-2/package.json
+++ b/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"
   }
 }