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

refs #116

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() } } },

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>