Skip to content
Snippets Groups Projects
Commit ca6e21d4 authored by Konrad Mohrfeldt's avatar Konrad Mohrfeldt :koala:
Browse files

feat: add new HTML WYSIWYG editor into show and note pages

refs #116
parent 16b6cee8
No related branches found
No related tags found
No related merge requests found
Pipeline #7384 passed
......@@ -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() } } },
......
......@@ -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>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment