From 263ef17816598bed203f609f3b88315a79aeecd9 Mon Sep 17 00:00:00 2001
From: sfr <sol@solfisher.com>
Date: Sun, 26 Jun 2022 17:51:13 +0000
Subject: [PATCH] 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   | 20 ++++++++++++++++++++
 src/components/attachment/attachment.scss | 15 ++++++++++++++-
 src/components/attachment/attachment.vue  |  9 +++++----
 src/components/gallery/gallery.vue        |  1 -
 4 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index d62a4adc..65301e84 100644
--- a/src/components/attachment/attachment.js
+++ b/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)
     }
   }
 }
diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index b2dea98d..9c787e09 100644
--- a/src/components/attachment/attachment.scss
+++ b/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,
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 2a89886d..f2354524 100644
--- a/src/components/attachment/attachment.vue
+++ b/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>
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index ccf6e3e2..3e0d23b6 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -171,7 +171,6 @@
 
       .gallery-item {
         margin: 0;
-        height: 200px;
       }
     }
   }