add basic floating menu

packages/vue-2/src/FloatingMenu.ts

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

packages/vue-2/src/index.ts

@@ -2,6 +2,7 @@ export * from '@tiptap/core'
 export * from './BubbleMenu'
 export { Editor } from './Editor'
 export * from './EditorContent'
+export * from './FloatingMenu'
 export * from './VueRenderer'
 export * from './VueNodeViewRenderer'
 export * from './NodeViewWrapper'