feat: support markdown for the feedback body

assets/css/tailwind.css

@@ -42,3 +42,9 @@
         @apply border-border;
     }
 }
+
+@layer components {
+    .prose :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+        @apply my-0;
+    }
+}

components/FeedbackCreateForm.vue

@@ -85,7 +85,10 @@ const onSubmit = form.handleSubmit(async (body) => {
                 <FormLabel>Message</FormLabel>
 
                 <FormControl>
-                    <Textarea type="text" v-bind="componentField" rows="5" />
+                    <MarkdownTextarea
+                        placeholder="You can use markdown here"
+                        v-bind="componentField"
+                    />
                 </FormControl>
 
                 <FormMessage />

components/FeedbackViewer.vue

@@ -32,9 +32,10 @@ defineProps<Props>()
                 {{ feedback.reporterName }} ({{ feedback.reporterEmail }})
             </div>
 
-            <div class="mt-6 text-slate-800">
-                {{ feedback.body }}
-            </div>
+            <div
+                class="mt-6 text-slate-800 prose"
+                v-html="feedback.body"
+            />
         </div>
     </div>
 </template>

components/ui/textarea/MarkdownTextarea.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { EditorContent, useEditor } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import { cn } from '~/utils'
+
+const props = defineProps<{
+    class?: HTMLAttributes['class']
+    defaultValue?: string
+    modelValue?: string
+    placeholder: string
+}>()
+
+const emits = defineEmits<{
+    (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+    passive: true,
+    defaultValue: props.defaultValue,
+})
+
+const editor = useEditor({
+    content: modelValue.value,
+    editorProps: {
+        attributes: {
+            'class': 'focus:outline-none',
+            'data-placeholder': props.placeholder,
+        },
+    },
+    extensions: [
+        StarterKit,
+    ],
+    onUpdate({ editor }) {
+        modelValue.value = editor.getHTML()
+    },
+})
+</script>
+
+<template>
+    <EditorContent
+        :class="cn('prose prose-sm min-h-40 rounded-md border border-input bg-background px-3 py-2 ring-offset-background focus-within:outline-none focus-within:ring-1 focus-within:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+        :editor="editor"
+    />
+</template>
+
+<style scoped>
+:deep(.ProseMirror:has(> p:only-child > br:only-child):before) {
+    @apply text-slate-400 float-left pointer-events-none h-0;
+    content: attr(data-placeholder);
+}
+</style>

components/ui/textarea/index.ts

@@ -1 +1 @@
-export { default as Textarea } from './Textarea.vue'
+export { default as MarkdownTextarea } from './MarkdownTextarea.vue'

package.json

@@ -15,6 +15,9 @@
         "test": "vitest --silent"
     },
     "dependencies": {
+        "@tiptap/pm": "^2.4.0",
+        "@tiptap/starter-kit": "^2.4.0",
+        "@tiptap/vue-3": "^2.4.0",
         "@vee-validate/zod": "^4.12.8",
         "@zodyac/zod-mongoose": "^1.1.2",
         "class-variance-authority": "^0.7.0",
@@ -37,6 +40,7 @@
         "@nuxtjs/google-fonts": "^3.2.0",
         "@nuxtjs/tailwindcss": "^6.12.0",
         "@pinia/nuxt": "^0.5.1",
+        "@tailwindcss/typography": "^0.5.13",
         "@testing-library/vue": "^8.1.0",
         "@vite-pwa/nuxt": "^0.7.0",
         "@vueuse/nuxt": "^10.9.0",