feat(front): enhance Tiptap component with additional extensions and update styles for improved text editing experience

front/assets/css/main.css

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

front/components/Tiptap.vue

@@ -1,10 +1,11 @@
 <template>
-    <editor-content :editor="editor" />
+    <editor-content :editor="editor" class="prose prose-sm bg-white/50 rounded-md p-2 [&>*]:outline-none" />
 </template>
 
 <script setup lang="ts">
 import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
+import { Markdown } from 'tiptap-markdown';
 
 const props = defineProps<{
     modelValue: string
@@ -17,10 +18,10 @@ const editor = ref<Editor | undefined>(undefined)
 onMounted(() => {
   editor.value = new Editor({
     content: props.modelValue,
-    extensions: [StarterKit],
+    extensions: [StarterKit, Markdown],
     onUpdate: () => {
         // HTML
-        emit('update:modelValue', editor.value?.getHTML() ?? '')
+        emit('update:modelValue', editor.value?.storage?.markdown?.getMarkdown() ?? '')
       }
   })
 })

front/package.json

@@ -12,6 +12,13 @@
   "dependencies": {
     "@tailwindcss/postcss": "^4.1.3",
     "@tailwindcss/vite": "^4.1.3",
+    "@tiptap/extension-blockquote": "^2.11.7",
+    "@tiptap/extension-bold": "^2.11.7",
+    "@tiptap/extension-heading": "^2.11.7",
+    "@tiptap/extension-italic": "^2.11.7",
+    "@tiptap/extension-paragraph": "^2.11.7",
+    "@tiptap/extension-strike": "^2.11.7",
+    "@tiptap/extension-text": "^2.11.7",
     "@tiptap/pm": "^2.11.7",
     "@tiptap/starter-kit": "^2.11.7",
     "@tiptap/vue-3": "^2.11.7",
@@ -28,6 +35,7 @@
     "shadcn-nuxt": "2.0.1",
     "tailwind-merge": "^3.2.0",
     "tailwindcss": "^4.1.3",
+    "tiptap-markdown": "^0.8.10",
     "tw-animate-css": "^1.2.5",
     "vue": "latest",
     "vue-router": "latest"
@@ -38,6 +46,7 @@
     "@serwist/build": "^9.0.12",
     "@serwist/nuxt": "^9.0.12",
     "@serwist/vite": "^9.0.12",
+    "@tailwindcss/typography": "^0.5.16",
     "@vueuse/core": "^13.0.0",
     "@vueuse/nuxt": "^13.0.0",
     "serwist": "^9.0.12"