From 4d598803659621452b1178feb7f05cd273b22628 Mon Sep 17 00:00:00 2001
From: keven1024 <keven@fudaoyuan.icu>
Date: Sun, 13 Apr 2025 22:06:54 +0800
Subject: [PATCH] feat(front): enhance Tiptap component with additional
 extensions and update styles for improved text editing experience

---
 front/assets/css/main.css   | 1 +
 front/components/Tiptap.vue | 7 ++++---
 front/package.json          | 9 +++++++++
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/front/assets/css/main.css b/front/assets/css/main.css
index 210000b..865137d 100644
--- a/front/assets/css/main.css
+++ b/front/assets/css/main.css
@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@plugin "@tailwindcss/typography";
 
 @custom-variant dark (&:is(.dark *));
 
diff --git a/front/components/Tiptap.vue b/front/components/Tiptap.vue
index 2669abd..738107e 100644
--- a/front/components/Tiptap.vue
+++ b/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() ?? '')
       }
   })
 })
diff --git a/front/package.json b/front/package.json
index a53865e..ee58826 100644
--- a/front/package.json
+++ b/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"