diff options
Diffstat (limited to 'app/assets/javascripts/content_editor/components/bubble_menus/bubble_menu.vue')
-rw-r--r-- | app/assets/javascripts/content_editor/components/bubble_menus/bubble_menu.vue | 60 |
1 files changed, 60 insertions, 0 deletions
diff --git a/app/assets/javascripts/content_editor/components/bubble_menus/bubble_menu.vue b/app/assets/javascripts/content_editor/components/bubble_menus/bubble_menu.vue new file mode 100644 index 00000000000..3891274e35e --- /dev/null +++ b/app/assets/javascripts/content_editor/components/bubble_menus/bubble_menu.vue @@ -0,0 +1,60 @@ +<script> +import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu'; + +export default { + name: 'BubbleMenu', + inject: ['tiptapEditor'], + props: { + pluginKey: { + type: String, + required: true, + }, + shouldShow: { + type: Function, + required: true, + }, + tippyOptions: { + type: Object, + required: false, + default: () => ({}), + }, + }, + data() { + return { + menuVisible: false, + }; + }, + async mounted() { + await this.$nextTick(); + + this.tiptapEditor.registerPlugin( + BubbleMenuPlugin({ + pluginKey: this.pluginKey, + editor: this.tiptapEditor, + element: this.$el, + shouldShow: this.shouldShow, + tippyOptions: { + ...this.tippyOptions, + onShow: (...args) => { + this.$emit('show', ...args); + this.menuVisible = true; + }, + onHidden: (...args) => { + this.$emit('hidden', ...args); + this.menuVisible = false; + }, + }, + }), + ); + }, + + beforeDestroy() { + this.tiptapEditor.unregisterPlugin(this.pluginKey); + }, +}; +</script> +<template> + <div> + <slot v-if="menuVisible"></slot> + </div> +</template> |