💄 feat: MessageInputTextAreaに縦の伸長を追加

src/components/Main/MainView/MessageElement/MessageEditor.vue

@@ -12,6 +12,7 @@
         :class="$style.inputTextArea"
         :is-posting="isPostingAttachment"
         simple-padding
+        disable-height-limit
         @add-attachments="onAddAttachments"
         @modifier-key-down="onModifierKeyDown"
         @modifier-key-up="onModifierKeyUp"

src/components/Main/MainView/MessageInput/MessageInput.vue

@@ -37,6 +37,7 @@
         :channel-id="channelId"
         :is-posting="isPosting"
         :shrink-to-one-line="isMobile && isLeftControlsExpanded"
+        is-stretchable-on-focus
         @focus="onFocus"
         @blur="onBlur"
         @add-attachments="onAddAttachments"

src/components/Main/MainView/MessageInput/MessageInputTextArea.vue

@@ -10,6 +10,8 @@
       rows="1"
       :data-simple-padding="simplePadding"
       :data-shrink-to-one-line="shrinkToOneLine"
+      :data-disable-height-limit="disableHeightLimit"
+      :data-is-stretchable-on-focus="isStretchableOnFocus"
       :data-is-mobile="isMobile"
       :data-is-firefox="firefoxFlag"
       data-testid="message-input-textarea"
@@ -53,13 +55,17 @@ const props = withDefaults(
     isPosting?: boolean
     simplePadding?: boolean
     shrinkToOneLine?: boolean
+    disableHeightLimit?: boolean
+    isStretchableOnFocus?: boolean
   }>(),
   {
     modelValue: '',
     channelId: '',
     isPosting: false,
     simplePadding: false,
-    shrinkToOneLine: false
+    shrinkToOneLine: false,
+    disableHeightLimit: false,
+    isStretchableOnFocus: false
   }
 )
 
@@ -162,14 +168,26 @@ $vertical-padding: 8px;
   padding: $vertical-padding 16px;
   // 左から、余白、スタンプパレットボタン、余白、送信ボタン、スクロールバー
   padding-right: calc(8px + 24px + 8px + 24px + var(--input-scrollbar-width));
-  max-height: 160px;
+  &[data-disable-height-limit='false'] {
+    &[data-is-mobile='true'] {
+      max-height: 70px;
+    }
+    &[data-is-mobile='false'] {
+      max-height: 160px;
+    }
+    &[data-is-stretchable-on-focus='true']:focus {
+      max-height: calc(
+        100% * 2
+      ); // 320px if mobile = false, 140px if mobile = true
+    }
+  }
+  &[data-disable-height-limit='true'] {
+    max-height: none;
+  }
   &[readonly] {
     @include color-ui-secondary-inactive;
     cursor: wait;
   }
-  &[data-is-mobile='true'] {
-    max-height: 70px;
-  }
   &[data-simple-padding='true'] {
     padding-right: 16px;
   }