From 943c922fc5aaa5129805a617b14987129868db1a Mon Sep 17 00:00:00 2001
From: Lhc_fl <linca@discourse.org>
Date: Wed, 18 Sep 2024 12:45:36 +0800
Subject: [PATCH] ux: change cwInput to textarea

---
 packages/frontend/src/components/MkPostForm.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index b2d80c100..a4d7421ea 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -65,7 +65,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 	</div>
 	<MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
-	<input v-show="useCw" ref="cwInputEl" v-model="cw" :class="$style.cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown" @keyup="onKeyup" @compositionend="onCompositionEnd">
+	<textarea v-show="useCw" ref="cwInputEl" v-model="cw" :class="$style.cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown"/>
 	<div :class="[$style.textOuter, { [$style.withCw]: useCw }]">
 		<div v-if="channel" :class="$style.colorBar" :style="{ background: channel.color }"></div>
 		<textarea ref="textareaEl" v-model="text" :class="[$style.text]" :disabled="posting || posted" :readonly="textAreaReadOnly" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @keyup="onKeyup" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
@@ -163,7 +163,7 @@ const emit = defineEmits<{
 }>();
 
 const textareaEl = shallowRef<HTMLTextAreaElement | null>(null);
-const cwInputEl = shallowRef<HTMLInputElement | null>(null);
+const cwInputEl = shallowRef<HTMLTextAreaElement | null>(null);
 const hashtagsInputEl = shallowRef<HTMLInputElement | null>(null);
 const visibilityButton = shallowRef<HTMLElement>();
 
@@ -321,6 +321,10 @@ watch(text, () => {
 	checkMissingMention();
 }, { immediate: true });
 
+watch(cw, () => {
+	nextTick(() => cwInputEl.value && autosize.update(cwInputEl.value));
+});
+
 watch(visibility, () => {
 	checkMissingMention();
 }, { immediate: true });
@@ -1121,6 +1125,7 @@ onMounted(() => {
 
 		nextTick(() => watchForDraft());
 		nextTick(() => textareaEl.value && autosize(textareaEl.value));
+		nextTick(() => cwInputEl.value && autosize(cwInputEl.value));
 	});
 });
 
@@ -1355,6 +1360,8 @@ html[data-color-scheme=light] .preview {
 	z-index: 1;
 	padding-bottom: 8px;
 	border-bottom: solid 0.5px var(--MI_THEME-divider);
+	resize: vertical;
+	min-height: 2rem;
 }
 
 .hashtags {