入力フォームでもリアクション選択時に使用するピッカーを使うようにしたい

CHANGELOG.md

@@ -22,6 +22,7 @@
 ### Client
 - Enhance: プラグインでエラーが発生した場合のハンドリングを強化
 - Enhance: 細かなUIのブラッシュアップ
+- Enhance: 投稿フォームの絵文字ピッカーをリアクション時に使用するものと同じのを使用するように #12336
 - Fix: 効果音が再生されるとデバイスで再生している動画や音声が停止する問題を修正 #12339
 - Fix: デッキに表示されたチャンネルの表示先チャンネルを切り替えた際、即座に反映されない問題を修正 #12236
 - Fix: プラグインでノートの表示を書き換えられない問題を修正

packages/frontend/src/components/MkEmojiPickerDialog.vue

@@ -31,20 +31,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { shallowRef } from 'vue';
 import MkModal from '@/components/MkModal.vue';
 import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
 import { defaultStore } from '@/store.js';
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
 	manualShowing?: boolean | null;
 	src?: HTMLElement;
 	showPinned?: boolean;
 	asReactionPicker?: boolean;
+  choseAndClose?: boolean;
 }>(), {
 	manualShowing: null,
 	showPinned: true,
 	asReactionPicker: false,
+	choseAndClose: true,
 });
 
 const emit = defineEmits<{
@@ -53,21 +54,23 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const modal = shallowRef<InstanceType<typeof MkModal>>();
-const picker = shallowRef<InstanceType<typeof MkEmojiPicker>>();
+const modal = $shallowRef<InstanceType<typeof MkModal>>();
+const picker = $shallowRef<InstanceType<typeof MkEmojiPicker>>();
 
 function chosen(emoji: any) {
 	emit('done', emoji);
-	modal.value?.close();
+	if (props.choseAndClose) {
+		modal?.close();
+	}
 }
 
 function opening() {
-	picker.value?.reset();
-	picker.value?.focus();
+	picker?.reset();
+	picker?.focus();
 
 	// 何故かちょっと待たないとフォーカスされない
 	setTimeout(() => {
-		picker.value?.focus();
+		picker?.focus();
 	}, 10);
 }
 </script>

packages/frontend/src/components/MkPostForm.vue

@@ -124,6 +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';
 
 const modal = inject('modal');
 
@@ -845,7 +846,16 @@ function insertMention() {
 }
 
 async function insertEmoji(ev: MouseEvent) {
-	os.openEmojiPicker(ev.currentTarget ?? ev.target, {}, textareaEl);
+	reactionPicker.show(
+		ev.currentTarget ?? ev.target,
+		reaction => {
+			insertTextAtCursor(textareaEl, reaction);
+		},
+		() => {
+			focus();
+		},
+		false,
+	);
 }
 
 function showActions(ev) {

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

@@ -9,6 +9,7 @@ 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;
 
@@ -21,6 +22,7 @@ class ReactionPicker {
 			src: this.src,
 			asReactionPicker: true,
 			manualShowing: this.manualShowing,
+			choseAndClose: this.choseAndClose,
 		}, {
 			done: reaction => {
 				this.onChosen!(reaction);
@@ -35,9 +37,15 @@ class ReactionPicker {
 		});
 	}
 
-	public show(src: HTMLElement, onChosen: ReactionPicker['onChosen'], onClosed: ReactionPicker['onClosed']) {
+	public show(
+		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;
 	}