fix: icons could not render

pnpm-lock.yaml

@@ -93,6 +93,9 @@ devDependencies:
   postcss:
     specifier: ^8.4.21
     version: 8.4.21
+  postcss-import:
+    specifier: ^15.1.0
+    version: 15.1.0(postcss@8.4.21)
   sass:
     specifier: ^1.60.0
     version: 1.60.0
@@ -3623,6 +3626,18 @@ packages:
       read-cache: 1.0.0
       resolve: 1.22.1
 
+  /postcss-import@15.1.0(postcss@8.4.21):
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      postcss: 8.4.21
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.1
+    dev: true
+
   /postcss-js@4.0.1(postcss@8.4.21):
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
     engines: {node: ^12 || ^14 || >= 16}

src/components/Tiptap/CommandsList.vue

@@ -71,15 +71,16 @@ export default {
 <template>
   <div class="items">
     <template v-if="items.length">
-      <button
+      <div
         v-for="(item, index) in items"
         :key="index"
         class="item"
         :class="{ 'is-selected': index === selectedIndex }"
         @click="selectItem(index)"
       >
+        <span :class="item.icon" />
         {{ item.title }}
-      </button>
+      </div>
     </template>
     <div v-else class="item">
       No result

src/components/Tiptap/suggestion.js

@@ -10,6 +10,7 @@ export default {
     return [
       {
         title: 'H1',
+        icon: 'i-tabler-h-1',
         command: ({ editor, range }) => {
           editor
             .chain()
@@ -21,6 +22,7 @@ export default {
       },
       {
         title: 'H2',
+        icon: 'i-tabler-h-2',
         command: ({ editor, range }) => {
           editor
             .chain()
@@ -32,6 +34,7 @@ export default {
       },
       {
         title: 'H3',
+        icon: 'i-tabler-h-3',
         command: ({ editor, range }) => {
           editor
             .chain()
@@ -43,30 +46,35 @@ export default {
       },
       {
         title: 'Code block',
+        icon: 'i-tabler-terminal',
         command: ({ editor, range }) => {
           editor.chain().focus().deleteRange(range).setCodeBlock().run()
         },
       },
       {
         title: 'Blockquote',
+        icon: 'i-tabler-blockquote',
         command: ({ editor, range }) => {
           editor.chain().focus().deleteRange(range).toggleBlockquote().run()
         },
       },
       {
         title: 'Divider',
+        icon: 'i-tabler-separator',
         command: ({ editor, range }) => {
           editor.chain().focus().deleteRange(range).setHorizontalRule().run()
         },
       },
       {
         title: 'Bullet List',
+        icon: 'i-tabler-list',
         command: ({ editor, range }) => {
           editor.chain().focus().deleteRange(range).toggleBulletList().run()
         },
       },
       {
         title: 'Ordered List',
+        icon: 'i-tabler-list-numbers',
         command: ({ editor, range }) => {
           editor.chain().focus().deleteRange(range).toggleOrderedList().run()
         },

tailwind.config.ts

@@ -4,11 +4,8 @@ import typography from '@tailwindcss/typography'
 import daisyui from 'daisyui'
 
 export default {
-  content: ['**/*.tsx', '**/*.ts', '**/*.vue', '**/*.html'],
+  content: ['**/*.{js,ts,jsx,tsx}', '**/*.vue', '**/*.html'],
   darkMode: 'class',
-  theme: {
-    extend: {},
-  },
   plugins: [
     typography,
     daisyui,