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>