feat(front): add placeholder extension to Tiptap component and update Navbar styles for improved UI

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: {

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() ?? '')

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",