Use textarea instead of input for composing alt text (#15)

Reviewed-on: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/15
Co-authored-by: sfr <sol@solfisher.com>
Co-committed-by: sfr <sol@solfisher.com>

src/components/attachment/attachment.js

@@ -199,6 +199,26 @@ const Attachment = {
       const width = image.naturalWidth
       const height = image.naturalHeight
       this.$emit('naturalSizeLoad', { id: this.attachment.id, width, height })
+    },
+    resize (e) {
+      const target = e.target || e
+      if (!(target instanceof window.Element)) { return }
+
+      // Reset to default height for empty form, nothing else to do here.
+      if (target.value === '') {
+        target.style.height = null
+        this.$emit('resize')
+        return
+      }
+
+      const paddingString = getComputedStyle(target)['padding']
+      // remove -px suffix
+      const padding = Number(paddingString.substring(0, paddingString.length - 2))
+
+      target.style.height = 'auto'
+      const newHeight = Math.floor(target.scrollHeight - padding * 2)
+      target.style.height = `${newHeight}px`
+      this.$emit('resize', newHeight)
     }
   }
 }

src/components/attachment/attachment.scss

@@ -16,7 +16,7 @@
 
   .attachment-wrapper {
     flex: 1 1 auto;
-    height: 100%;
+    height: 200px;
     position: relative;
     overflow: hidden;
   }
@@ -52,6 +52,19 @@
   .description-field {
     flex: 1;
     min-width: 0;
+
+    box-sizing: content-box;
+    overflow: hidden;
+    transition: min-height 200ms 100ms;
+
+    padding-bottom: var(--_padding);
+    height: calc(var(--post-line-height) * 1em);
+    min-height: calc(var(--post-line-height) * 1em);
+    resize: none;
+
+    &.scrollable-form {
+      overflow-y: auto;
+    }
   }
 
   & .placeholder-container,

src/components/attachment/attachment.vue

@@ -248,14 +248,15 @@
       class="description-container"
       :class="{ '-static': !edit }"
     >
-      <input
+      <textarea
         v-if="edit"
         v-model="localDescription"
-        type="text"
         class="description-field"
         :placeholder="$t('post_status.media_description')"
-        @keydown.enter.prevent=""
+        rows="1"
-      >
+        cols="1"
+        @input="resize"
+      />
       <p v-else>
         {{ localDescription }}
       </p>

src/components/gallery/gallery.vue

@@ -171,7 +171,6 @@
 
       .gallery-item {
         margin: 0;
-        height: 200px;
       }
     }
   }