feat: add tooltip component

components.d.ts

@@ -259,6 +259,7 @@ declare module 'vue' {
     TagsInputItemDelete: typeof import('./src/shared/components/ui/tags-input/TagsInputItemDelete.vue')['default']
     TagsInputItemText: typeof import('./src/shared/components/ui/tags-input/TagsInputItemText.vue')['default']
     Textarea: typeof import('./src/shared/components/ui/textarea/Textarea.vue')['default']
+    TiptapEditor: typeof import('./src/shared/components/ui/editor/TiptapEditor.vue')['default']
     Toast: typeof import('./src/shared/components/ui/toast/Toast.vue')['default']
     ToastAction: typeof import('./src/shared/components/ui/toast/ToastAction.vue')['default']
     ToastClose: typeof import('./src/shared/components/ui/toast/ToastClose.vue')['default']

package.json

@@ -27,6 +27,9 @@
     "@tanstack/vue-query": "5.74.6",
     "@tanstack/vue-query-devtools": "5.74.6",
     "@techmely/es-toolkit": "^1.7.0",
+    "@tiptap/pm": "^3.0.0-beta.5",
+    "@tiptap/starter-kit": "^3.0.0-beta.5",
+    "@tiptap/vue-3": "^3.0.0-beta.5",
     "@unovis/ts": "^1.5.1",
     "@unovis/vue": "^1.5.1",
     "@vee-validate/zod": "^4.15.0",
@@ -58,6 +61,7 @@
     "@antfu/eslint-config": "^4.12.0",
     "@faker-js/faker": "9.7.0",
     "@sentry/wizard": "^4.8.0",
+    "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "^4.1.4",
     "@tanstack/eslint-plugin-query": "^5.73.3",
     "@testing-library/jest-dom": "^6.6.3",

src/assets/index.css

@@ -2,6 +2,8 @@
 
 @import 'tw-animate-css';
 
+@plugin "@tailwindcss/typography";
+
 @custom-variant dark (&:is(.dark *));
 
 @import './themes.css';

src/modules/account/components/TopNavbar.vue

@@ -7,7 +7,7 @@ const { user } = storeToRefs(useUserStore())
 </script>
 
 <template>
-  <header class="flex justify-between w-full py-4 px-32">
+  <header class="flex justify-between w-full py-4 container mx-auto">
     <div class="flex items-center">
       <a href="/">
         <Avatar>

src/pages/index.vue

@@ -12,7 +12,7 @@ const { data: postTrending, isLoading: isLoadingPostTrending } = usePostTrending
 </script>
 
 <template>
-  <main class="container mx-auto px-4 py-8">
+  <main class="container mx-auto py-8">
     <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
       <div class="md:col-span-2 space-y-8">
         <div v-if="isLoadingPostHighlight">

src/pages/posts/create.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { TiptapEditor } from '@/shared/components/ui/editor'
+
+const content = ref('')
+
+const handleSavePost = () => {
+  console.log(content.value)
+}
+
+</script>
+
+<template>
+  <div class="container mx-auto">
+    <h1>Create Post</h1>
+    <TiptapEditor v-model="content" />
+
+    <Button @click="handleSavePost">
+      Save post
+    </Button>
+  </div>
+</template>

src/shared/components/ui/editor/TiptapEditor.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+  import { useEditor, EditorContent } from '@tiptap/vue-3'
+  import StarterKit from '@tiptap/starter-kit'
+
+  const emits = defineEmits<{
+    (e: 'update:modelValue', value: string): void
+  }>()
+
+  const editor = useEditor({
+    content: "<p>I'm running Tiptap with Vue.js. 🎉</p>",
+    extensions: [
+      StarterKit,
+    ],
+    editorProps: {
+      attributes: {
+        class: 'prose prose-sm sm:prose-base lg:prose-lg xl:prose-2xl m-5 focus:outline-none',
+      },
+    },
+  })
+
+  onMounted(() => {
+    editor.value?.on('update', ({ editor }) => {
+      emits('update:modelValue', editor.getHTML())
+    })
+  })
+
+</script>
+
+<template>
+  <editor-content :editor="editor" class="border border-blue-500 rounded-md" />
+</template>
+

src/shared/components/ui/editor/index.ts

@@ -0,0 +1 @@
+export { default as TiptapEditor } from './TiptapEditor.vue'

typed-router.d.ts

@@ -25,5 +25,6 @@ declare module 'vue-router/auto-routes' {
     '/partnerships/[id]': RouteRecordInfo<'/partnerships/[id]', '/partnerships/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/posts/': RouteRecordInfo<'/posts/', '/posts', Record<never, never>, Record<never, never>>,
     '/posts/[slug]': RouteRecordInfo<'/posts/[slug]', '/posts/:slug', { slug: ParamValue<true> }, { slug: ParamValue<false> }>,
+    '/posts/create': RouteRecordInfo<'/posts/create', '/posts/create', Record<never, never>, Record<never, never>>,
   }
 }