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 fa3e2b90b0..51ec941c97 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;