From 740e1800d41628941be434477998cf3fa51c394e Mon Sep 17 00:00:00 2001
From: keven1024 <keven@fudaoyuan.icu>
Date: Sun, 20 Apr 2025 19:04:03 +0800
Subject: [PATCH] feat(front): add placeholder extension to Tiptap component
 and update Navbar styles for improved UI

---
 front/components/Navbar.vue | 2 +-
 front/components/Tiptap.vue | 7 +++++--
 front/package.json          | 1 +
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/front/components/Navbar.vue b/front/components/Navbar.vue
index adc3093..065a789 100644
--- a/front/components/Navbar.vue
+++ b/front/components/Navbar.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="flex flex-row bg-white/50 backdrop-blur-xl p-2 rounded-full">
         <div v-for="item in routes" :key="item.key" 
-        class="flex flex-row items-center gap-2 text-sm px-4 py-2 font-bold rounded-full cursor-pointer relative select-none"
+        class="flex flex-row items-center gap-2 text-sm px-4 py-2 font-bold rounded-full relative select-none cursor-pointer"
         @click="()=>{
             router.push({
                 query: {
diff --git a/front/components/Tiptap.vue b/front/components/Tiptap.vue
index 6064f10..ebf3594 100644
--- a/front/components/Tiptap.vue
+++ b/front/components/Tiptap.vue
@@ -6,9 +6,10 @@
 import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import { Markdown } from 'tiptap-markdown';
-
+import Placeholder from '@tiptap/extension-placeholder'
 const props = defineProps<{
     modelValue: string
+    placeholder?: string
 }>()
 const emit = defineEmits<{
   (e: 'update:modelValue', value: string): void
@@ -18,7 +19,9 @@ const editor = ref<Editor | undefined>(undefined)
 onMounted(() => {
   editor.value = new Editor({
     content: props.modelValue,
-    extensions: [StarterKit, Markdown],
+    extensions: [StarterKit, Markdown, Placeholder.configure({
+      placeholder: props.placeholder ?? ''
+    })],
     onUpdate: () => {
         // HTML
         emit('update:modelValue', editor.value?.storage?.markdown?.getMarkdown() ?? '')
diff --git a/front/package.json b/front/package.json
index f654707..5938ddb 100644
--- a/front/package.json
+++ b/front/package.json
@@ -18,6 +18,7 @@
     "@tiptap/extension-heading": "^2.11.7",
     "@tiptap/extension-italic": "^2.11.7",
     "@tiptap/extension-paragraph": "^2.11.7",
+    "@tiptap/extension-placeholder": "^2.11.7",
     "@tiptap/extension-strike": "^2.11.7",
     "@tiptap/extension-text": "^2.11.7",
     "@tiptap/pm": "^2.11.7",