From 82d40a6cb74862ee268a934edfb3bd2cbb9d56c3 Mon Sep 17 00:00:00 2001
From: Benjamin VIELLARD <gbicou@gmail.com>
Date: Fri, 31 Mar 2023 15:05:01 +0200
Subject: [PATCH] fix: bubble menu

close #11
---
 src/tiptap-editor.vue | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/tiptap-editor.vue b/src/tiptap-editor.vue
index ac2ae51..b2abaca 100644
--- a/src/tiptap-editor.vue
+++ b/src/tiptap-editor.vue
@@ -1,5 +1,17 @@
 <template>
   <div class="tiptap-editor" :class="{ disabled: props.disabled }">
+    <bubble-menu class="tiptap-editor__bubble" :editor="editor" :tippy-options="{ duration: 100 }">
+      <v-chip x-small @click="editor.chain().focus().toggleBold().run()" :outlined="!editor.isActive('bold')">
+        {{ t("wysiwyg_options.bold").toLowerCase() }}
+      </v-chip>
+      <v-chip x-small @click="editor.chain().focus().toggleItalic().run()" :outlined="!editor.isActive('italic')">
+        {{ t("wysiwyg_options.italic").toLowerCase() }}
+      </v-chip>
+      <v-chip x-small @click="editor.chain().focus().toggleStrike().run()" :outlined="!editor.isActive('strike')">
+        {{ t("wysiwyg_options.strikethrough").toLowerCase() }}
+      </v-chip>
+    </bubble-menu>
+
     <div class="tiptap-editor__toolbar">
       <!-- marks -->
 
@@ -269,6 +281,17 @@
     }
   }
 
+  &__bubble {
+    .v-chip {
+      margin-left: 2px;
+      cursor: pointer;
+
+      &.outlined {
+        background-color: var(--background-page);
+      }
+    }
+  }
+
   &__content {
     font-family: var(--family-sans-serif);
     font-weight: 400;
@@ -291,7 +314,7 @@
 </style>
 
 <script setup lang="ts">
-import { Editor, EditorContent } from "@tiptap/vue-3";
+import { Editor, EditorContent, BubbleMenu } from "@tiptap/vue-3";
 import { onBeforeUnmount, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { translateShortcut } from "./utils/translate-shortcut";