feat(fullstack): Replace TITLE_BODY element with rich text editor

2025-12-21 17:59:53 +01:00
parent 54570fae4f
commit 374c8d8905
11 changed files with 1838 additions and 1054 deletions
--- a/legalconsenthub/app/components/formelements/TheEditor.vue
+++ b/legalconsenthub/app/components/formelements/TheEditor.vue
@@ -0,0 +1,106 @@
+<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="htmlContent"
+      content-type="html"
+      :editable="!props.disabled"
+      :placeholder="t('applicationForms.formElements.richTextPlaceholder')"
+      :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"
+      />
+      <UEditorSuggestionMenu :editor="editor" :items="suggestionItems" />
+      <UEditorMentionMenu :editor="editor" :items="mentionItems" />
+      <UEditorDragHandle :editor="editor" />
+    </UEditor>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { EmployeeDataCategory, ProcessingPurpose, type FormOptionDto } from '~~/.api-client'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  formOptions: FormOptionDto[]
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:formOptions', value: FormOptionDto[]): void
+}>()
+
+const htmlContent = computed({
+  get: () => props.formOptions[0]?.value ?? '',
+  set: (newValue: string) => {
+    const updatedOptions: FormOptionDto[] = [...props.formOptions]
+    if (updatedOptions.length === 0) {
+      const createdOption: FormOptionDto = {
+        value: newValue,
+        label: '',
+        processingPurpose: ProcessingPurpose.None,
+        employeeDataCategory: EmployeeDataCategory.None
+      }
+      updatedOptions.push(createdOption)
+    } else {
+      const firstOption = updatedOptions[0]!
+      updatedOptions[0] = { ...firstOption, value: newValue }
+    }
+    emit('update:formOptions', updatedOptions)
+  }
+})
+
+const toolbarItems = [
+  [
+    { kind: 'undo', icon: 'i-lucide-undo' },
+    { kind: 'redo', icon: 'i-lucide-redo' }
+  ],
+  [
+    { kind: 'heading', level: 1, icon: 'i-lucide-heading-1', label: 'H1' },
+    { kind: 'heading', level: 2, icon: 'i-lucide-heading-2', label: 'H2' },
+    { kind: 'heading', level: 3, icon: 'i-lucide-heading-3', label: 'H3' }
+  ],
+  [
+    { 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: 'mark', mark: 'strike', icon: 'i-lucide-strikethrough' }
+  ],
+  [
+    { kind: 'bulletList', icon: 'i-lucide-list' },
+    { kind: 'orderedList', icon: 'i-lucide-list-ordered' }
+  ],
+  [
+    { kind: 'blockquote', icon: 'i-lucide-quote' },
+    { kind: 'codeBlock', icon: 'i-lucide-code' }
+  ],
+  [{ kind: 'link', icon: 'i-lucide-link' }]
+]
+
+const suggestionItems = [
+  [
+    { kind: 'heading', level: 1, label: 'Überschrift 1', icon: 'i-lucide-heading-1' },
+    { kind: 'heading', level: 2, label: 'Überschrift 2', icon: 'i-lucide-heading-2' },
+    { kind: 'heading', level: 3, label: 'Überschrift 3', icon: 'i-lucide-heading-3' }
+  ],
+  [
+    { kind: 'bulletList', label: 'Aufzählung', icon: 'i-lucide-list' },
+    { kind: 'orderedList', label: 'Nummerierung', icon: 'i-lucide-list-ordered' }
+  ],
+  [
+    { kind: 'blockquote', label: 'Zitat', icon: 'i-lucide-quote' },
+    { kind: 'codeBlock', label: 'Code Block', icon: 'i-lucide-code' },
+    { kind: 'horizontalRule', label: 'Trennlinie', icon: 'i-lucide-separator-horizontal' }
+  ]
+]
+
+const mentionItems: Array<{ label: string; avatar?: { src: string } }> = []
+</script>