107 lines
3.5 KiB
Vue
107 lines
3.5 KiB
Vue
<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>
|