feat: MessageInput コンポーネントにテキストエリアのサイズ変更イベントを追加し、ボタン表示の条件を更新

Author: reiroop

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

@@ -38,6 +38,9 @@
       <message-input-text-area
         ref="textareaComponentRef"
         v-model="state.text"
+        v-model:show-is-input-text-area-expanded-button="
+          showIsInputTextAreaExpandedButton
+        "
         :channel-id="channelId"
         :is-posting="isPosting"
         :shrink-to-one-line="
@@ -114,7 +117,7 @@ const { channelsMap } = useChannelsStore()
 const isLeftControlsExpanded = ref(false)
 const isPreviewShown = ref(false)
 const isInputTextAreaExpanded = ref(true)
-const showIsInputTextAreaExpandedButton = ref(true)
+const showIsInputTextAreaExpandedButton = ref(false)
 
 const isArchived = computed(
   () => channelsMap.value.get(props.channelId)?.archived ?? false

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

@@ -21,6 +21,7 @@
       @focus="onFocus"
       @blur="onBlur"
       @paste="onPaste"
+      @resized="onResize"
     />
     <div :class="$style.over" />
     <dropdown-suggester
@@ -146,6 +147,24 @@ const scollbarWidth = getScrollbarWidth()
 const style = {
   '--input-scrollbar-width': `${scollbarWidth}px`
 }
+
+const showIsInputTextAreaExpandedButton = defineModel<boolean>(
+  'showIsInputTextAreaExpandedButton',
+  {
+    default: false
+  }
+)
+
+const onResize = () => {
+  if (textareaRef.value) {
+    const height = textareaRef.value.scrollHeight
+    if (isMobile.value) {
+      showIsInputTextAreaExpandedButton.value = height >= 70
+    } else {
+      showIsInputTextAreaExpandedButton.value = height >= 160
+    }
+  }
+}
 </script>
 
 <style lang="scss" module>

src/components/UI/TextareaAutosize.vue

@@ -18,8 +18,8 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, ref, toRef, watch, nextTick } from 'vue'
 import autosize from 'autosize'
+import { nextTick, onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue'
 import useTextModelSyncer from '/@/composables/useTextModelSyncer'
 
 const props = defineProps<{
@@ -39,6 +39,7 @@ const emit = defineEmits<{
   (e: 'focus'): void
   (e: 'blur'): void
   (e: 'paste', _val: ClipboardEvent): void
+  (e: 'resized'): void
 }>()
 
 const { value, onInput } = useTextModelSyncer(props, emit)
@@ -52,6 +53,9 @@ const focus = () => {
 onMounted(() => {
   if (textareaEle.value) {
     autosize(textareaEle.value)
+    textareaEle.value.addEventListener('autosize:resized', () => {
+      emit('resized')
+    })
   }
 })
 watch(toRef(props, 'modelValue'), async () => {
@@ -62,6 +66,9 @@ watch(toRef(props, 'modelValue'), async () => {
 })
 onBeforeUnmount(() => {
   if (textareaEle.value) {
+    textareaEle.value.removeEventListener('autosize:resized', () => {
+      emit('resized')
+    })
     autosize.destroy(textareaEle.value)
   }
 })