From d2f26c1f64f01ff268ab42d81effb47e926c45be Mon Sep 17 00:00:00 2001
From: Seviche <me@seviche.cc>
Date: Tue, 28 Mar 2023 22:32:47 +0800
Subject: [PATCH] Refactor BubbleMenu

---
 src/components/Tiptap/BubbleMenu.vue | 59 ++++++++++++++++++++++++++++
 src/components/Tiptap/Editor.vue     | 58 +++------------------------
 2 files changed, 65 insertions(+), 52 deletions(-)
 create mode 100644 src/components/Tiptap/BubbleMenu.vue

diff --git a/src/components/Tiptap/BubbleMenu.vue b/src/components/Tiptap/BubbleMenu.vue
new file mode 100644
index 0000000..567c582
--- /dev/null
+++ b/src/components/Tiptap/BubbleMenu.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { Editor
+} from '@tiptap/vue-3';
+ 
+import { BubbleMenu } from '@tiptap/vue-3'
+
+const { editor } = defineProps<{ editor: Editor }>()
+
+</script>
+
+<template>
+  <BubbleMenu
+    :editor="editor"
+    :tippy-options="{ duration: 100 }"
+    class="flex text-gray-700 bg-white grass rounded-md p-[2px] shadow-xl border-slate-100 border"
+  >
+    <button
+      class="menu-btn"
+      placement="bold"
+      @click="editor.chain().focus().toggleBold().run()"
+    >
+      <span class="i-tabler-bold" />
+    </button>
+    <button
+      class="menu-btn"
+      @click="editor.chain().focus().toggleItalic().run()"
+    >
+      <span class="i-tabler-italic" />
+    </button>
+    <button
+      class="menu-btn"
+      @click="editor.chain().focus().toggleStrike().run()"
+    >
+      <span class="i-tabler-strikethrough" />
+    </button>
+    <button
+      class="menu-btn"
+      @click="editor.chain().focus().toggleCode().run()"
+    >
+      <span class="i-tabler-code" />
+    </button>
+    <button
+      class="menu-btn"
+      @click="editor.chain().focus().toggleBlockquote().run()"
+    >
+      <span class="i-tabler-quote" />
+    </button>
+  </BubbleMenu>
+</template>
+
+<style lang="pcss">
+.menu-btn {
+    @apply btn btn-ghost btn-sm hover:bg-slate-200 rounded-md p-2;
+}
+
+.menu-btn > span {
+  @apply w-4;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Tiptap/Editor.vue b/src/components/Tiptap/Editor.vue
index fe973d3..fffbb15 100644
--- a/src/components/Tiptap/Editor.vue
+++ b/src/components/Tiptap/Editor.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { BubbleMenu, EditorContent, useEditor } from '@tiptap/vue-3'
+import { EditorContent, useEditor } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Typography from '@tiptap/extension-typography'
+import BubbleMenu from './BubbleMenu.vue'
 
 const editor = useEditor({
   content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
@@ -12,55 +13,8 @@ const editor = useEditor({
 </script>
 
 <template>
-  <div>
-    <BubbleMenu
-      v-if="editor"
-      :editor="editor"
-      :tippy-options="{ duration: 100 }"
-      class="flex text-gray-700 bg-white grass rounded-md p-[2px] shadow-xl border-slate-100 border"
-    >
-      <button
-        class="menu-btn"
-        placement="bold"
-        @click="editor?.chain().focus().toggleBold().run()"
-      >
-        <span class="i-tabler-bold" />
-      </button>
-      <button
-        class="menu-btn"
-        @click="editor?.chain().focus().toggleItalic().run()"
-      >
-        <span class="i-tabler-italic" />
-      </button>
-      <button
-        class="menu-btn"
-        @click="editor?.chain().focus().toggleStrike().run()"
-      >
-        <span class="i-tabler-strikethrough" />
-      </button>
-      <button
-        class="menu-btn"
-        @click="editor?.chain().focus().toggleCode().run()"
-      >
-        <span class="i-tabler-code" />
-      </button>
-      <button
-        class="menu-btn"
-        @click="editor?.chain().focus().toggleBlockquote().run()"
-      >
-        <span class="i-tabler-quote" />
-      </button>
-    </BubbleMenu>
-    <EditorContent :editor="editor" />
-  </div>
+  <BubbleMenu
+    v-if="editor"
+    :editor="editor" />
+  <EditorContent :editor="editor" />
 </template>
-
-<style lang="pcss">
-.menu-btn {
-    @apply btn btn-ghost btn-sm hover:bg-slate-200 rounded-md p-2;
-}
-
-.menu-btn > span {
-  @apply w-5;
-}
-</style>