reaction-picker.ts を戻し、今回の対応を入れた emoji-picker.ts を新たに作成

packages/frontend/src/boot/main-boot.ts

@@ -19,6 +19,7 @@ import { claimAchievement, claimedAchievements } from '@/scripts/achievements.js
 import { mainRouter } from '@/router.js';
 import { initializeSw } from '@/scripts/initialize-sw.js';
 import { deckStore } from '@/ui/deck/deck-store.js';
+import { emojiPicker } from '@/scripts/emoji-picker.js';
 
 export async function mainBoot() {
 	const { isClientUpdated } = await common(() => createApp(
@@ -30,6 +31,7 @@ export async function mainBoot() {
 	));
 
 	reactionPicker.init();
+	emojiPicker.init();
 
 	if (isClientUpdated && $i) {
 		popup(defineAsyncComponent(() => import('@/components/MkUpdated.vue')), {}, {}, 'closed');

packages/frontend/src/components/MkPostForm.vue

@@ -124,7 +124,7 @@ import { deepClone } from '@/scripts/clone.js';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import { miLocalStorage } from '@/local-storage.js';
 import { claimAchievement } from '@/scripts/achievements.js';
-import { reactionPicker } from '@/scripts/reaction-picker.js';
+import { emojiPicker } from '@/scripts/emoji-picker.js';
 
 const modal = inject('modal');
 
@@ -846,15 +846,14 @@ function insertMention() {
 }
 
 async function insertEmoji(ev: MouseEvent) {
-	reactionPicker.show(
+	emojiPicker.show(
 		ev.currentTarget ?? ev.target,
-		reaction => {
+		emoji => {
-			insertTextAtCursor(textareaEl, reaction);
+			insertTextAtCursor(textareaEl, emoji);
 		},
 		() => {
 			focus();
 		},
-		false,
 	);
 }
 

packages/frontend/src/scripts/emoji-picker.ts

@@ -0,0 +1,57 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { defineAsyncComponent, Ref, ref } from 'vue';
+import { popup } from '@/os.js';
+
+/**
+ * 絵文字ピッカーを表示する。
+ * 類似の機能として{@link ReactionPicker}が存在しているが、この機能とは動きが異なる。
+ * 投稿フォームなどで絵文字を選択する時など、絵文字ピックアップ後でもダイアログが消えずに残り、
+ * 一度表示したダイアログを連続で使用できることが望ましいシーンでの利用が想定される。
+ */
+class EmojiPicker {
+	private src: Ref<HTMLElement | null> = ref(null);
+	private manualShowing = ref(false);
+	private onChosen?: (emoji: string) => void;
+	private onClosed?: () => void;
+
+	constructor() {
+		// nop
+	}
+
+	public async init() {
+		await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
+			src: this.src,
+			asReactionPicker: true,
+			manualShowing: this.manualShowing,
+			choseAndClose: false,
+		}, {
+			done: emoji => {
+				if (this.onChosen) this.onChosen(emoji);
+			},
+			close: () => {
+				this.manualShowing.value = false;
+			},
+			closed: () => {
+				this.src.value = null;
+				if (this.onClosed) this.onClosed();
+			},
+		});
+	}
+
+	public show(
+		src: HTMLElement,
+		onChosen: EmojiPicker['onChosen'],
+		onClosed: EmojiPicker['onClosed'],
+	) {
+		this.src.value = src;
+		this.manualShowing.value = true;
+		this.onChosen = onChosen;
+		this.onClosed = onClosed;
+	}
+}
+
+export const emojiPicker = new EmojiPicker();

packages/frontend/src/scripts/reaction-picker.ts

@@ -9,7 +9,6 @@ import { popup } from '@/os.js';
 class ReactionPicker {
 	private src: Ref<HTMLElement | null> = ref(null);
 	private manualShowing = ref(false);
-	private choseAndClose = ref(true);
 	private onChosen?: (reaction: string) => void;
 	private onClosed?: () => void;
 
@@ -22,7 +21,6 @@ class ReactionPicker {
 			src: this.src,
 			asReactionPicker: true,
 			manualShowing: this.manualShowing,
-			choseAndClose: this.choseAndClose,
 		}, {
 			done: reaction => {
 				this.onChosen!(reaction);
@@ -37,15 +35,9 @@ class ReactionPicker {
 		});
 	}
 
-	public show(
+	public show(src: HTMLElement, onChosen: ReactionPicker['onChosen'], onClosed: ReactionPicker['onClosed']) {
-		src: HTMLElement,
-		onChosen: ReactionPicker['onChosen'],
-		onClosed: ReactionPicker['onClosed'],
-		choseAndClose = true,
-	) {
 		this.src.value = src;
 		this.manualShowing.value = true;
-		this.choseAndClose.value = choseAndClose;
 		this.onChosen = onChosen;
 		this.onClosed = onClosed;
 	}