add bubble menu to vue-3
This commit is contained in:
47
packages/vue-3/src/BubbleMenu.ts
Normal file
47
packages/vue-3/src/BubbleMenu.ts
Normal 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?.())
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user