feat(fullstack): Add contact form

legalconsenthub/app/components/ContactEditor.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="bg-white dark:bg-white rounded-md border border-gray-200 dark:border-gray-200 overflow-hidden">
+    <UEditor
+      v-slot="{ editor }"
+      v-model="content"
+      content-type="html"
+      :editable="!props.disabled"
+      :placeholder="props.placeholder"
+      :ui="{
+        content: 'bg-white dark:bg-white',
+        base: 'min-h-[200px] p-3 bg-white dark:bg-white'
+      }"
+      class="w-full"
+    >
+      <UEditorToolbar
+        :editor="editor"
+        :items="toolbarItems"
+        class="border-b border-muted sticky top-0 inset-x-0 px-3 py-2 z-50 bg-default overflow-x-auto"
+      />
+    </UEditor>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue: string
+  disabled?: boolean
+  placeholder?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const content = computed({
+  get: () => props.modelValue,
+  set: (newValue: string) => {
+    emit('update:modelValue', newValue)
+  }
+})
+
+const toolbarItems = [
+  [
+    { kind: 'undo', icon: 'i-lucide-undo' },
+    { kind: 'redo', icon: 'i-lucide-redo' }
+  ],
+  [
+    { kind: 'mark', mark: 'bold', icon: 'i-lucide-bold' },
+    { kind: 'mark', mark: 'italic', icon: 'i-lucide-italic' },
+    { kind: 'mark', mark: 'underline', icon: 'i-lucide-underline' }
+  ],
+  [
+    { kind: 'bulletList', icon: 'i-lucide-list' },
+    { kind: 'orderedList', icon: 'i-lucide-list-ordered' }
+  ],
+  [{ kind: 'link', icon: 'i-lucide-link' }]
+]
+</script>