Refactor the style of editor

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",
@@ -35,4 +38,4 @@
     "vite": "^4.2.1",
     "vue-tsc": "^1.2.0"
   }
-}
+}

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/Editor.vue

@@ -17,39 +17,50 @@ const editor = useEditor({
       v-if="editor"
       :editor="editor"
       :tippy-options="{ duration: 100 }"
-      class="flex text-gray-700 bg-slate-50 rounded-md"
+      class="flex text-gray-700 bg-white grass rounded-md p-[2px] shadow-xl border-slate-100 border"
     >
       <button
-        class="btn btn-sm btn-ghost"
+        class="menu-btn"
+        placement="bold"
         @click="editor?.chain().focus().toggleBold().run()"
       >
-        bold
+        <span class="i-tabler-bold" />
       </button>
       <button
-        class="btn btn-sm btn-ghost"
+        class="menu-btn"
         @click="editor?.chain().focus().toggleItalic().run()"
       >
-        italic
+        <span class="i-tabler-italic" />
       </button>
       <button
-        class="btn btn-sm btn-ghost"
+        class="menu-btn"
         @click="editor?.chain().focus().toggleStrike().run()"
       >
-        strike
+        <span class="i-tabler-strikethrough" />
       </button>
       <button
-        class="btn btn-sm btn-ghost"
+        class="menu-btn"
         @click="editor?.chain().focus().toggleCode().run()"
       >
-        Code
+        <span class="i-tabler-code" />
       </button>
       <button
-        class="btn btn-sm btn-ghost"
+        class="menu-btn"
         @click="editor?.chain().focus().toggleBlockquote().run()"
       >
-        Quote
+        <span class="i-tabler-quote" />
       </button>
     </BubbleMenu>
     <EditorContent :editor="editor" />
   </div>
 </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>

tailwind.config.cjs

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