From e90ad095516bfd6c363596c9262f4269359d48c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8A=E3=81=95=E3=82=80=E3=81=AE=E3=81=B2=E3=81=A8?=
 <46447427+samunohito@users.noreply.github.com>
Date: Mon, 4 Dec 2023 18:12:14 +0900
Subject: [PATCH] =?UTF-8?q?fix=20(frontend):=20=E7=B5=B5=E6=96=87=E5=AD=97?=
 =?UTF-8?q?=E3=83=94=E3=83=83=E3=82=AB=E3=83=BC=E7=B5=8C=E7=94=B1=E3=81=A7?=
 =?UTF-8?q?=E6=8A=95=E7=A8=BF=E6=AC=84=E3=81=AB=E7=B5=B5=E6=96=87=E5=AD=97?=
 =?UTF-8?q?=E3=82=92=E5=85=A5=E3=82=8C=E3=81=9F=E9=9A=9B=E3=80=81=E3=82=BD?=
 =?UTF-8?q?=E3=83=95=E3=83=88=E3=82=A6=E3=82=A7=E3=82=A2=E3=82=AD=E3=83=BC?=
 =?UTF-8?q?=E3=83=9C=E3=83=BC=E3=83=89=E3=81=8C=E7=AB=8B=E3=81=A1=E4=B8=8A?=
 =?UTF-8?q?=E3=81=8C=E3=82=89=E3=81=AA=E3=81=84=E3=82=88=E3=81=86=E3=81=AB?=
 =?UTF-8?q?=E3=81=99=E3=82=8B=20(#12561)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 0445536ae5..13b615d104 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -67,7 +67,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<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">
 	<div :class="[$style.textOuter, { [$style.withCw]: useCw }]">
-		<textarea ref="textareaEl" v-model="text" :class="[$style.text]" :disabled="posting || posted" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
+		<textarea ref="textareaEl" v-model="text" :class="[$style.text]" :disabled="posting || posted" :readonly="textAreaReadOnly" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
 		<div v-if="maxTextLength - textLength < 100" :class="['_acrylic', $style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
 	</div>
 	<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="$style.hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
@@ -98,7 +98,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { inject, watch, nextTick, onMounted, defineAsyncComponent, provide } from 'vue';
+import { inject, watch, nextTick, onMounted, defineAsyncComponent, provide, ref } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import insertTextAtCursor from 'insert-text-at-cursor';
@@ -195,6 +195,7 @@ let hasNotSpecifiedMentions = $ref(false);
 let recentHashtags = $ref(JSON.parse(miLocalStorage.getItem('hashtags') ?? '[]'));
 let imeText = $ref('');
 let showingOptions = $ref(false);
+const textAreaReadOnly = ref(false);
 
 const draftKey = $computed((): string => {
 	let key = props.channel ? `channel:${props.channel.id}` : '';
@@ -846,12 +847,15 @@ function insertMention() {
 }
 
 async function insertEmoji(ev: MouseEvent) {
+	textAreaReadOnly.value = true;
+
 	emojiPicker.show(
 		ev.currentTarget ?? ev.target,
 		emoji => {
 			insertTextAtCursor(textareaEl, emoji);
 		},
 		() => {
+			textAreaReadOnly.value = false;
 			focus();
 		},
 	);