Refactor BubbleMenu

package.json

@@ -1,12 +1,14 @@
 {
   "name": "seigwai",
-  "private": true,
-  "version": "0.0.0",
   "type": "module",
+  "version": "0.0.0",
+  "private": true,
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
   },
   "dependencies": {
     "@egoist/tailwindcss-icons": "^1.0.7",
@@ -24,6 +26,7 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.37.0",
+    "@iconify-json/tabler": "^1.1.68",
     "@tailwindcss/typography": "^0.5.9",
     "@vitejs/plugin-vue": "^4.1.0",
     "autoprefixer": "^10.4.14",

pnpm-lock.yaml

@@ -16,9 +16,6 @@ dependencies:
   '@tiptap/extension-character-count':
     specifier: 2.0.0-beta.220
     version: 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220)
-  '@tiptap/extension-history':
-    specifier: 2.0.0-beta.220
-    version: 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220)
   '@tiptap/extension-typography':
     specifier: 2.0.0-beta.220
     version: 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)
@@ -45,6 +42,9 @@ devDependencies:
   '@antfu/eslint-config':
     specifier: ^0.37.0
     version: 0.37.0(eslint@8.36.0)(typescript@5.0.2)
+  '@iconify-json/tabler':
+    specifier: ^1.1.68
+    version: 1.1.68
   '@tailwindcss/typography':
     specifier: ^0.5.9
     version: 0.5.9(tailwindcss@3.2.7)
@@ -497,6 +497,12 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
+  /@iconify-json/tabler@1.1.68:
+    resolution: {integrity: sha512-HejD5fXGC+HjaAxQQrwihg3ehMm5iNVSS9AOabSviVJUEojwF19ceQQJRcNBWaT2A6dLE+2ejcKb5YeJ9w8RFg==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
   /@iconify/json@2.2.40:
     resolution: {integrity: sha512-I6RVi9Y7xt1AXjJ4JKt3dnS5f/Jep1LyPUwDcc7ZlTgW5u7kcDoIjyAlE+ax5bBqxiR60s9qVVufMmjLSq5iUA==}
     dependencies:
@@ -506,7 +512,6 @@ packages:
 
   /@iconify/types@2.0.0:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
-    dev: false
 
   /@iconify/utils@2.1.5:
     resolution: {integrity: sha512-6MvDI+I6QMvXn5rK9KQGdpEE4mmLTcuQdLZEiX5N+uZB+vc4Yw9K1OtnOgkl8mp4d9X0UrILREyZgF1NUwUt+Q==}

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>

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,44 +13,8 @@ const editor = useEditor({
 </script>
 
 <template>
-  <div>
   <BubbleMenu
     v-if="editor"
-      :editor="editor"
+    :editor="editor" />
-      :tippy-options="{ duration: 100 }"
-      class="flex text-gray-700 bg-slate-50 rounded-md"
-    >
-      <button
-        class="btn btn-sm btn-ghost"
-        @click="editor?.chain().focus().toggleBold().run()"
-      >
-        bold
-      </button>
-      <button
-        class="btn btn-sm btn-ghost"
-        @click="editor?.chain().focus().toggleItalic().run()"
-      >
-        italic
-      </button>
-      <button
-        class="btn btn-sm btn-ghost"
-        @click="editor?.chain().focus().toggleStrike().run()"
-      >
-        strike
-      </button>
-      <button
-        class="btn btn-sm btn-ghost"
-        @click="editor?.chain().focus().toggleCode().run()"
-      >
-        Code
-      </button>
-      <button
-        class="btn btn-sm btn-ghost"
-        @click="editor?.chain().focus().toggleBlockquote().run()"
-      >
-        Quote
-      </button>
-    </BubbleMenu>
   <EditorContent :editor="editor" />
-  </div>
 </template>

tailwind.config.cjs

@@ -10,7 +10,7 @@ module.exports = {
     require('@tailwindcss/typography'),
     require('daisyui'),
     iconsPlugin({
-      collections: getIconCollections(['mdi', 'lucide']),
+      collections: getIconCollections(['tabler']),
     }),
   ],
 }