fix(EmojiPicker): 投稿フォームで絵文字ボタンを押すと従来通り絵文字ピッカーのウィンドウが開くように (MisskeyIO#296)

+ お知らせの絵文字ボタンでも同じ挙動になるように

packages/frontend/src/components/MkEmojiPickerWindow.vue

@@ -13,18 +13,25 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:front="true"
 	@closed="emit('closed')"
 >
-	<MkEmojiPicker :showPinned="showPinned" :asReactionPicker="asReactionPicker" asWindow :class="$style.picker" @chosen="chosen"/>
+	<MkEmojiPicker
+		:class="$style.picker"
+		:showPinned="showPinned"
+		:pinnedEmojis="pinnedEmojis"
+		:asReactionPicker="asReactionPicker"
+		asWindow
+		@chosen="chosen"
+	/>
 </MkWindow>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
 import MkWindow from '@/components/MkWindow.vue';
 import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
 
 withDefaults(defineProps<{
 	src?: HTMLElement;
 	showPinned?: boolean;
+	pinnedEmojis?: string[],
 	asReactionPicker?: boolean;
 }>(), {
 	showPinned: true,

packages/frontend/src/components/MkPostForm.vue

@@ -860,15 +860,10 @@ function insertMention() {
 async function insertEmoji(ev: MouseEvent) {
 	textAreaReadOnly.value = true;
 
-	emojiPicker.show(
+	os.openEmojiPicker(
-		ev.currentTarget ?? ev.target,
+		(ev.currentTarget ?? ev.target) as HTMLElement,
-		emoji => {
+		{ asReactionPicker: false },
-			insertTextAtCursor(textareaEl.value, emoji);
+		textareaEl.value
-		},
-		() => {
-			textAreaReadOnly.value = false;
-			nextTick(() => focus());
-		},
 	);
 }
 

packages/frontend/src/os.ts

@@ -12,6 +12,7 @@ import { EventEmitter } from 'eventemitter3';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import * as Misskey from 'misskey-js';
 import { i18n } from '@/i18n.js';
+import { defaultStore } from '@/store.js';
 import MkPostFormDialog from '@/components/MkPostFormDialog.vue';
 import MkWaitingDialog from '@/components/MkWaitingDialog.vue';
 import MkPageWindow from '@/components/MkPageWindow.vue';
@@ -533,6 +534,7 @@ export async function openEmojiPicker(src?: HTMLElement, opts, initialTextarea:
 
 	openingEmojiPicker = await popup(MkEmojiPickerWindow, {
 		src,
+		pinnedEmojis: opts?.asReactionPicker ? defaultStore.reactiveState.reactions : defaultStore.reactiveState.pinnedEmojis,
 		...opts,
 	}, {
 		chosen: emoji => {

packages/frontend/src/pages/admin/announcements.vue

@@ -131,7 +131,11 @@ function editUser(announcement): void {
 }
 
 function insertEmoji(ev: MouseEvent): void {
-	os.openEmojiPicker((ev.currentTarget ?? ev.target) as HTMLElement, {}, announceTitleEl.value);
+	os.openEmojiPicker(
+		(ev.currentTarget ?? ev.target) as HTMLElement,
+		{ asReactionPicker: false },
+		announceTitleEl.value
+	);
 }
 
 function add() {