add bubble menu to vue-3

This commit is contained in:
Philipp Kühn
2021-03-31 11:52:36 +02:00
parent e0895926bd
commit 2b0a0dad0f
2 changed files with 48 additions and 0 deletions

View File

@@ -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<BubbleMenuPluginProps['editor']>,
required: true,
},
keepInBounds: {
type: Boolean as PropType<BubbleMenuPluginProps['keepInBounds']>,
default: true,
},
},
setup({ editor, keepInBounds }, { slots }) {
const root = ref<HTMLElement | null>(null)
onMounted(() => {
editor.registerPlugin(BubbleMenuPlugin({
editor,
element: root.value as HTMLElement,
keepInBounds,
}))
})
onBeforeUnmount(() => {
editor.unregisterPlugin(BubbleMenuPluginKey)
})
return () => h('div', { ref: root }, slots.default?.())
},
})