diff --git a/packages/vue-3/src/BubbleMenu.ts b/packages/vue-3/src/BubbleMenu.ts new file mode 100644 index 00000000..bfea8dc3 --- /dev/null +++ b/packages/vue-3/src/BubbleMenu.ts @@ -0,0 +1,47 @@ +import { + h, + ref, + PropType, + onMounted, + onBeforeUnmount, + defineComponent, +} from 'vue' +import { + BubbleMenuPlugin, + BubbleMenuPluginKey, + BubbleMenuPluginProps, +} from '@tiptap/extension-bubble-menu' + +export const BubbleMenu = defineComponent({ + name: 'BubbleMenu', + + props: { + editor: { + type: Object as PropType, + required: true, + }, + + keepInBounds: { + type: Boolean as PropType, + default: true, + }, + }, + + setup({ editor, keepInBounds }, { slots }) { + const root = ref(null) + + onMounted(() => { + editor.registerPlugin(BubbleMenuPlugin({ + editor, + element: root.value as HTMLElement, + keepInBounds, + })) + }) + + onBeforeUnmount(() => { + editor.unregisterPlugin(BubbleMenuPluginKey) + }) + + return () => h('div', { ref: root }, slots.default?.()) + }, +}) diff --git a/packages/vue-3/src/index.ts b/packages/vue-3/src/index.ts index cf5e2718..03030195 100644 --- a/packages/vue-3/src/index.ts +++ b/packages/vue-3/src/index.ts @@ -1,4 +1,5 @@ export * from '@tiptap/core' +export * from './BubbleMenu' export { Editor } from './Editor' export * from './EditorContent' export * from './useEditor'