fix(front): integrate VeeValidate rules in MarkdownInputField and enhance Tiptap styling for better user experience

front/app.vue

@@ -1,5 +1,10 @@
 <!-- app.vue -->
 <script setup lang="ts">
+import { defineRule } from 'vee-validate';
+import { all } from '@vee-validate/rules';
+Object.entries(all).forEach(([name, rule]) => {
+  defineRule(name, rule);
+});
 // @ts-check
 const { $serwist } = useNuxtApp();
 $serwist?.addEventListener("installed", () => {

front/components/Field/MarkdownInputField.vue

@@ -1,5 +1,5 @@
 <template>
-    <Field :name="name" v-slot="{ field }">
+    <Field :name="name" v-slot="{ field }" :rules="rules">
         <Tiptap :modelValue="field.value" @update:modelValue="field.onChange" v-bind="$attrs" />
     </Field>
 </template>
@@ -9,5 +9,6 @@ import Tiptap from '@/components/Tiptap.vue'
 
 const props = defineProps<{
     name: string
+    rules?: string
 }>()
 </script>

front/components/Tiptap.vue

@@ -1,5 +1,5 @@
 <template>
-    <editor-content :editor="editor" class="prose prose-sm bg-white/50 rounded-md p-2 [&>*]:outline-none" />
+    <editor-content :editor="editor" class="prose prose-sm bg-white/50 rounded-md p-2 [&>*]:outline-none prose-p:my-1" />
 </template>
 
 <script setup lang="ts">

front/package.json

@@ -25,6 +25,7 @@
     "@tiptap/vue-3": "^2.11.7",
     "@types/lodash-es": "^4.17.12",
     "@vee-validate/nuxt": "^4.15.0",
+    "@vee-validate/rules": "^4.15.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lodash-es": "^4.17.21",
@@ -38,6 +39,7 @@
     "tailwindcss": "^4.1.3",
     "tiptap-markdown": "^0.8.10",
     "tw-animate-css": "^1.2.5",
+    "vaul-vue": "^0.4.1",
     "vue": "latest",
     "vue-router": "latest"
   },