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

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,24 @@ 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) {
+	console.log(`chosen : ${props.choseAndClose}`);
 	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;
 	}