add doc page for bubble menu

packages/vue-2/package.json

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

packages/vue-2/src/BubbleMenu.ts

@@ -0,0 +1,45 @@
+import Vue, { PropType } from 'vue'
+import { BubbleMenuPlugin, BubbleMenuPluginKey, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
+
+export const BubbleMenu = Vue.extend({
+  name: 'BubbleMenu',
+
+  props: {
+    editor: {
+      type: Object as PropType<BubbleMenuPluginProps['editor']>,
+      required: true,
+    },
+
+    keepInBounds: {
+      type: Boolean as PropType<BubbleMenuPluginProps['keepInBounds']>,
+      default: true,
+    },
+  },
+
+  watch: {
+    editor: {
+      immediate: true,
+      handler(editor: BubbleMenuPluginProps['editor']) {
+        if (!editor) {
+          return
+        }
+
+        this.$nextTick(() => {
+          editor.registerPlugin(BubbleMenuPlugin({
+            editor,
+            element: this.$el as HTMLElement,
+            keepInBounds: this.keepInBounds,
+          }))
+        })
+      },
+    },
+  },
+
+  render(createElement) {
+    return createElement('div', {}, this.$slots.default)
+  },
+
+  beforeDestroy() {
+    this.editor.unregisterPlugin(BubbleMenuPluginKey)
+  },
+})

packages/vue-2/src/index.ts

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