refactor: sort compsables

README.md

@@ -1,6 +1,6 @@
 # Introduction
 
-A Pleroma/Mastodon client, focus on editing experience (WIP 🏗️), developed by [@seviche@kongwoo.icu](https://kongwoo.icu/seviche)
+A Pleroma/Mastodon client, focus on editing experience (WIP 🏗️)
 
 - [Codeberg](https://codeberg.org/Sevichecc/Seigwai)
 - [Github](https://github.com/Sevichecc/Seigwai)

components.d.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    BubbleMenu: typeof import('./src/components/tiptap/BubbleMenu.vue')['default']
+    CommandsList: typeof import('./src/components/tiptap/CommandsList.vue')['default']
+    Editor: typeof import('./src/components/tiptap/Editor.vue')['default']
+  }
+}

package.json

@@ -11,22 +11,20 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@egoist/tailwindcss-icons": "^1.0.7",
-    "@prosemirror-adapter/vue": "^0.2.3",
-    "@tiptap/core": "2.0.0-beta.220",
-    "@tiptap/extension-bubble-menu": "2.0.0-beta.220",
+    "@prosemirror-adapter/vue": "^0.2.4",
+    "@tiptap/core": "^2.0.1",
+    "@tiptap/extension-bubble-menu": "^2.0.1",
     "@tiptap/extension-bullet-list": "^2.0.1",
-    "@tiptap/extension-character-count": "2.0.0-beta.220",
+    "@tiptap/extension-character-count": "^2.0.1",
     "@tiptap/extension-code-block-lowlight": "^2.0.1",
-    "@tiptap/extension-highlight": "^2.0.0",
-    "@tiptap/extension-link": "2.0.0-beta.220",
+    "@tiptap/extension-highlight": "^2.0.1",
+    "@tiptap/extension-link": "^2.0.1",
     "@tiptap/extension-placeholder": "^2.0.1",
-    "@tiptap/extension-typography": "2.0.0-beta.220",
-    "@tiptap/pm": "2.0.0-beta.220",
-    "@tiptap/starter-kit": "2.0.0-beta.220",
-    "@tiptap/suggestion": "^2.0.0",
-    "@tiptap/vue-3": "2.0.0-beta.220",
-    "daisyui": "^2.51.5",
+    "@tiptap/extension-typography": "^2.0.1",
+    "@tiptap/pm": "^2.0.1",
+    "@tiptap/starter-kit": "^2.0.1",
+    "@tiptap/suggestion": "^2.0.1",
+    "@tiptap/vue-3": "^2.0.1",
     "highlight.js": "^11.7.0",
     "lowlight": "^2.8.1",
     "masto": "^5.10.0",
@@ -35,17 +33,20 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.37.0",
-    "@iconify-json/tabler": "^1.1.68",
+    "@egoist/tailwindcss-icons": "^1.0.7",
+    "@iconify-json/tabler": "^1.1.70",
     "@tailwindcss/typography": "^0.5.9",
     "@vitejs/plugin-vue": "^4.1.0",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.36.0",
+    "daisyui": "^2.51.5",
+    "eslint": "^8.37.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.0",
     "postcss": "^8.4.21",
     "sass": "^1.60.0",
     "tailwindcss": "^3.3.1",
     "typescript": "^5.0.3",
+    "unplugin-vue-components": "^0.24.1",
     "vite": "^4.2.1",
     "vue-tsc": "^1.2.0"
   },

src/ composables/tiptap/suggestion.js

@@ -3,13 +3,13 @@
 import { VueRenderer } from '@tiptap/vue-3'
 import tippy from 'tippy.js'
 
-import CommandsList from './CommandsList.vue'
+import CommandsList from '../../components/tiptap/CommandsList.vue'
 
 export default {
   items: ({ query }) => {
     return [
       {
-        title: 'H1',
+        title: 'Heading 1',
         icon: 'i-tabler-h-1',
         command: ({ editor, range }) => {
           editor
@@ -21,7 +21,7 @@ export default {
         },
       },
       {
-        title: 'H2',
+        title: 'Heading 2',
         icon: 'i-tabler-h-2',
         command: ({ editor, range }) => {
           editor
@@ -33,7 +33,7 @@ export default {
         },
       },
       {
-        title: 'H3',
+        title: 'Heading 3',
         icon: 'i-tabler-h-3',
         command: ({ editor, range }) => {
           editor

src/App.vue

@@ -1,7 +1,3 @@
-<script setup lang="ts">
-import Editor from './components/Tiptap/Editor.vue'
-</script>
-
 <template>
   <Editor />
 </template>

src/components/Tiptap/CommandsList.vue

@@ -69,52 +69,15 @@ export default {
 </script>
 
 <template>
-  <div class="items">
-    <template v-if="items.length">
-      <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 }}
-      </div>
-    </template>
-    <div v-else class="item">
-      No result
-    </div>
+  <div v-if="items.length" class="menu menu-compact bg-white w-44 p-1 rounded-lg shadow-lg  border-slate-200 border ">
+    <li
+      v-for="(item, index) in items"
+      :key="index"
+      class="rounded-lg"
+      :class="{ 'active bg-slate-200': index === selectedIndex }"
+      @click="selectItem(index)"
+    >
+      <a class="hover:bg-slate-200 text-slate-900 active:bg-slate-300"><span :class="item.icon" class="h-4 w-4" />{{ item.title }}</a>
+    </li>
   </div>
 </template>
-
-<style lang="scss">
-.items {
-  padding: 0.2rem;
-  position: relative;
-  border-radius: 0.5rem;
-  background: #FFF;
-  color: rgba(0, 0, 0, 0.8);
-  overflow: hidden;
-  font-size: 0.9rem;
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.05),
-    0px 10px 20px rgba(0, 0, 0, 0.1),
-  ;
-}
-
-.item {
-  display: block;
-  margin: 0;
-  width: 100%;
-  text-align: left;
-  background: transparent;
-  border-radius: 0.4rem;
-  border: 1px solid transparent;
-  padding: 0.2rem 0.4rem;
-
-  &.is-selected {
-    border-color: #000;
-  }
-}
-</style>

src/components/Tiptap/Editor.vue

@@ -20,9 +20,8 @@ import scss from 'highlight.js/lib/languages/scss'
 import go from 'highlight.js/lib/languages/go'
 import rust from 'highlight.js/lib/languages/rust'
 
-import suggestion from './suggestion'
-import BubbleMenu from './BubbleMenu.vue'
-import Commands from './commands'
+import Commands from '../../ composables/tiptap/commands'
+import suggestion from '../../ composables/tiptap/suggestion'
 
 lowlight.registerLanguage('html', html)
 lowlight.registerLanguage('css', css)
@@ -75,8 +74,6 @@ const editor = useEditor({
       },
     }),
     Placeholder.configure({
-      // Use different placeholders depending on the node type:
-      // placeholder: 'Write something …'
       placeholder: ({ node }) => {
         if (node.type.name === 'heading') {
           switch (node.attrs.level) {
@@ -108,13 +105,6 @@ const editor = useEditor({
 </template>
 
 <style lang="scss">
-/* Basic editor styles */
-.ProseMirror {
-  > * + * {
-    margin-top: 0.75em;
-  }
-}
-
 /* Placeholder (at the top) */
 .ProseMirror p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);

tailwind.config.ts

@@ -13,4 +13,7 @@ export default {
       collections: getIconCollections(['tabler']),
     }),
   ],
+  daisyui: {
+    themes: false,
+  },
 } satisfies Config

vite.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import Components from 'unplugin-vue-components/vite'
 import tailwindcss from 'tailwindcss'
 import autoprefixer from 'autoprefixer'
 import tailwindConfig from './tailwind.config'
@@ -11,5 +12,10 @@ export default defineConfig({
       plugins: [tailwindcss(tailwindConfig), autoprefixer()],
     },
   },
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    Components({
+      dts: true,
+    }),
+  ],
 })