README.md

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

components.d.ts

@@ -1,16 +0,0 @@
-/* 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,20 +11,22 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@prosemirror-adapter/vue": "^0.2.4",
+    "@egoist/tailwindcss-icons": "^1.0.7",
-    "@tiptap/core": "^2.0.1",
+    "@prosemirror-adapter/vue": "^0.2.3",
-    "@tiptap/extension-bubble-menu": "^2.0.1",
+    "@tiptap/core": "2.0.0-beta.220",
+    "@tiptap/extension-bubble-menu": "2.0.0-beta.220",
     "@tiptap/extension-bullet-list": "^2.0.1",
-    "@tiptap/extension-character-count": "^2.0.1",
+    "@tiptap/extension-character-count": "2.0.0-beta.220",
     "@tiptap/extension-code-block-lowlight": "^2.0.1",
-    "@tiptap/extension-highlight": "^2.0.1",
+    "@tiptap/extension-highlight": "^2.0.0",
-    "@tiptap/extension-link": "^2.0.1",
+    "@tiptap/extension-link": "2.0.0-beta.220",
     "@tiptap/extension-placeholder": "^2.0.1",
-    "@tiptap/extension-typography": "^2.0.1",
+    "@tiptap/extension-typography": "2.0.0-beta.220",
-    "@tiptap/pm": "^2.0.1",
+    "@tiptap/pm": "2.0.0-beta.220",
-    "@tiptap/starter-kit": "^2.0.1",
+    "@tiptap/starter-kit": "2.0.0-beta.220",
-    "@tiptap/suggestion": "^2.0.1",
+    "@tiptap/suggestion": "^2.0.0",
-    "@tiptap/vue-3": "^2.0.1",
+    "@tiptap/vue-3": "2.0.0-beta.220",
+    "daisyui": "^2.51.5",
     "highlight.js": "^11.7.0",
     "lowlight": "^2.8.1",
     "masto": "^5.10.0",
@@ -33,20 +35,17 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.37.0",
-    "@egoist/tailwindcss-icons": "^1.0.7",
+    "@iconify-json/tabler": "^1.1.68",
-    "@iconify-json/tabler": "^1.1.70",
     "@tailwindcss/typography": "^0.5.9",
     "@vitejs/plugin-vue": "^4.1.0",
     "autoprefixer": "^10.4.14",
-    "daisyui": "^2.51.5",
+    "eslint": "^8.36.0",
-    "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/App.vue

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

src/components/Tiptap/CommandsList.vue

@@ -69,15 +69,52 @@ export default {
 </script>
 
 <template>
-  <div v-if="items.length" class="menu menu-compact bg-white w-44 p-1 rounded-lg shadow-lg  border-slate-200 border ">
+  <div class="items">
-    <li
+    <template v-if="items.length">
+      <div
         v-for="(item, index) in items"
         :key="index"
-      class="rounded-lg"
+        class="item"
-      :class="{ 'active bg-slate-200': index === selectedIndex }"
+        :class="{ 'is-selected': 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>
+        <span :class="item.icon" />
-    </li>
+        {{ item.title }}
+      </div>
+    </template>
+    <div v-else class="item">
+      No result
+    </div>
   </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,8 +20,9 @@ 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 Commands from '../../ composables/tiptap/commands'
+import suggestion from './suggestion'
-import suggestion from '../../ composables/tiptap/suggestion'
+import BubbleMenu from './BubbleMenu.vue'
+import Commands from './commands'
 
 lowlight.registerLanguage('html', html)
 lowlight.registerLanguage('css', css)
@@ -74,6 +75,8 @@ 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) {
@@ -105,6 +108,13 @@ 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);

src/components/Tiptap/suggestion.js

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

tailwind.config.ts

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

vite.config.ts

@@ -1,6 +1,5 @@
 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'
@@ -12,10 +11,5 @@ export default defineConfig({
       plugins: [tailwindcss(tailwindConfig), autoprefixer()],
     },
   },
-  plugins: [
+  plugins: [vue()],
-    vue(),
-    Components({
-      dts: true,
-    }),
-  ],
 })