From ca6e21d4977d265e99f0116692a3917fc0d79e88 Mon Sep 17 00:00:00 2001
From: Konrad Mohrfeldt <konrad.mohrfeldt@farbdev.org>
Date: Thu, 8 Feb 2024 19:09:42 +0100
Subject: [PATCH] feat: add new HTML WYSIWYG editor into show and note pages
refs #116
---
src/Pages/ShowBasicData.vue | 33 ++++----------
.../shows/NoteDescriptionEditor.vue | 43 ++++++++-----------
2 files changed, 25 insertions(+), 51 deletions(-)
diff --git a/src/Pages/ShowBasicData.vue b/src/Pages/ShowBasicData.vue
index 8ec0a0b1..ecea3111 100644
--- a/src/Pages/ShowBasicData.vue
+++ b/src/Pages/ShowBasicData.vue
@@ -34,35 +34,25 @@
</FormGroup>
<FormGroup
- v-slot="attrs"
+ v-slot="{ id }"
:label="t('show.fields.shortDescription')"
:is-saving="shortDescription.isSaving"
:errors="shortDescription.errors"
class="tw-col-span-2"
+ custom-control
>
- <textarea
- ref="shortDescriptionEl"
- v-bind="attrs"
- v-model="shortDescription.value"
- class="tw-min-h-[4rem] tw-resize-none"
- @blur="shortDescription.save"
- />
+ <AHTMLEditor :id="id" v-model="shortDescription.value" @blur="shortDescription.save()" />
</FormGroup>
<FormGroup
- v-slot="attrs"
+ v-slot="{ id }"
:label="t('show.fields.description')"
:is-saving="description.isSaving"
:errors="description.errors"
class="tw-col-span-2"
+ custom-control
>
- <textarea
- ref="descriptionEl"
- v-bind="attrs"
- v-model="description.value"
- class="tw-min-h-[6rem] tw-resize-none"
- @blur="description.save"
- />
+ <AHTMLEditor :id="id" v-model="description.value" @blur="shortDescription.save()" />
</FormGroup>
<hr class="tw-col-span-full tw-w-full" />
@@ -113,8 +103,7 @@
</template>
<script lang="ts" setup>
-import { useTextareaAutosize } from '@vueuse/core'
-import { computed, toRef } from 'vue'
+import { computed } from 'vue'
import { useI18n } from '@/i18n'
import { Show } from '@/types'
@@ -133,6 +122,7 @@ import AHousekeeping from '@/components/shows/AHousekeeping.vue'
import ADescription from '@/components/generic/ADescription.vue'
import SafeHTML from '@/components/generic/SafeHTML'
import ALinkCollectionEditor from '@/components/generic/ALinkCollectionEditor.vue'
+import AHTMLEditor from '@/components/generic/AHTMLEditor.vue'
const props = defineProps<{
show: Show
@@ -147,13 +137,6 @@ const shortDescription = useAPIObjectFieldCopy(showStore, show, 'shortDescriptio
const description = useAPIObjectFieldCopy(showStore, show, 'description', { debounce: 2 })
const links = useAPIObjectFieldCopy(showStore, show, 'links', { debounce: 2 })
-const { textarea: descriptionEl } = useTextareaAutosize({
- input: toRef(description, 'value'),
-})
-const { textarea: shortDescriptionEl } = useTextareaAutosize({
- input: toRef(shortDescription, 'value'),
-})
-
useBreadcrumbs(() => [
{ title: t('navigation.shows'), route: { name: 'shows' } },
{ title: props.show.name, route: { name: 'show', params: { showId: props.show.id.toString() } } },
diff --git a/src/components/shows/NoteDescriptionEditor.vue b/src/components/shows/NoteDescriptionEditor.vue
index 841d747e..ec9dc910 100644
--- a/src/components/shows/NoteDescriptionEditor.vue
+++ b/src/components/shows/NoteDescriptionEditor.vue
@@ -16,39 +16,33 @@
</FormGroup>
<FormGroup
+ v-slot="{ id }"
:label="t('noteEditor.summary')"
:errors="summary.errors"
:is-saving="summary.isSaving"
+ custom-control
>
- <template #default="attrs">
- <textarea
- ref="summaryEl"
- v-model="summary.value"
- class="tw-resize-none tw-overflow-hidden tw-min-h-[3.55rem]"
- :placeholder="t('noteEditor.summaryPlaceholder')"
- v-bind="attrs"
- @blur="summary.save()"
- />
- </template>
+ <AHTMLEditor
+ :id="id"
+ v-model="summary.value"
+ :placeholder="t('noteEditor.summaryPlaceholder')"
+ @blur="summary.save()"
+ />
</FormGroup>
<FormGroup
+ v-slot="{ id }"
:label="t('noteEditor.content')"
:errors="content.errors"
:is-saving="content.isSaving"
+ custom-control
>
- <template #default="attrs">
- <textarea
- ref="contentEl"
- v-model="content.value"
- class="tw-resize-none tw-overflow-hidden tw-min-h-[8rem]"
- rows="6"
- :placeholder="t('noteEditor.contentPlaceholder')"
- required
- v-bind="attrs"
- @blur="content.save()"
- />
- </template>
+ <AHTMLEditor
+ :id="id"
+ v-model="content.value"
+ :placeholder="t('noteEditor.contentPlaceholder')"
+ @blur="content.save()"
+ />
</FormGroup>
<FormGroup
@@ -102,7 +96,6 @@
</template>
<script lang="ts" setup>
-import { useTextareaAutosize } from '@vueuse/core'
import { computed } from 'vue'
import { useI18n } from '@/i18n'
@@ -120,6 +113,7 @@ import {
} from '@/form'
import FormTable from '@/components/generic/FormTable.vue'
import ALinkCollectionEditor from '@/components/generic/ALinkCollectionEditor.vue'
+import AHTMLEditor from '@/components/generic/AHTMLEditor.vue'
defineOptions({ compatConfig: { MODE: 3 } })
@@ -144,7 +138,4 @@ const links = useAPIObjectFieldCopy(noteStore, note, 'links', { debounce: 2 })
const contributors = useRelationList(noteStore, note, 'contributorIds', hostStore)
const languages = useRelationList(noteStore, note, 'languageIds', languageStore)
const topics = useRelationList(noteStore, note, 'topicIds', topicStore)
-
-const { textarea: summaryEl } = useTextareaAutosize({ watch: () => note.value.summary })
-const { textarea: contentEl } = useTextareaAutosize({ watch: () => note.value.content })
</script>
--
GitLab