From 9181eb277ea2a04a52eb53e8e3a81c8de9bbbce4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
 <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Tue, 30 Jul 2024 17:28:08 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20emojiPicker=E3=82=92=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E3=81=97=E3=81=A6=E7=B5=B5=E6=96=87=E5=AD=97=E3=82=92?=
 =?UTF-8?q?=E6=8C=BF=E5=85=A5=E3=81=99=E3=82=8B=E9=9A=9B=E3=80=81ref?=
 =?UTF-8?q?=E3=81=AB=E7=9B=B4=E6=8E=A5=E6=8C=BF=E5=85=A5=E3=81=99=E3=82=8B?=
 =?UTF-8?q?=E3=82=88=E3=81=86=E3=81=AB=20(#14282)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(frontend): emojiPickerを使用して絵文字を挿入する際、refに直接挿入するように

* add comment
---
 packages/frontend/src/components/MkPostForm.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index fa3e2b90b..51ec941c9 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -906,10 +906,23 @@ async function insertEmoji(ev: MouseEvent) {
 	textAreaReadOnly.value = true;
 	const target = ev.currentTarget ?? ev.target;
 	if (target == null) return;
+
+	// emojiPickerはダイアログが閉じずにtextareaとやりとりするので、
+	// focustrapをかけているとinsertTextAtCursorが効かない
+	// そのため、投稿フォームのテキストに直接注入する
+	// See: https://github.com/misskey-dev/misskey/pull/14282
+	//      https://github.com/misskey-dev/misskey/issues/14274
+
+	let pos = textareaEl.value?.selectionStart ?? 0;
+	let posEnd = textareaEl.value?.selectionEnd ?? text.value.length;
 	emojiPicker.show(
 		target as HTMLElement,
 		emoji => {
-			insertTextAtCursor(textareaEl.value, emoji);
+			const textBefore = text.value.substring(0, pos);
+			const textAfter = text.value.substring(posEnd);
+			text.value = textBefore + emoji + textAfter;
+			pos += emoji.length;
+			posEnd += emoji.length;
 		},
 		() => {
 			textAreaReadOnly.value = false;