diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue index 9d3132c540..1f87b3ebcf 100644 --- a/packages/frontend/src/components/MkEmojiPickerDialog.vue +++ b/packages/frontend/src/components/MkEmojiPickerDialog.vue @@ -31,20 +31,21 @@ SPDX-License-Identifier: AGPL-3.0-only diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue index d163ea2487..0421fa4d62 100644 --- a/packages/frontend/src/components/MkPostForm.vue +++ b/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) { diff --git a/packages/frontend/src/scripts/reaction-picker.ts b/packages/frontend/src/scripts/reaction-picker.ts index 19e1bfba2c..2b37802dd1 100644 --- a/packages/frontend/src/scripts/reaction-picker.ts +++ b/packages/frontend/src/scripts/reaction-picker.ts @@ -9,6 +9,7 @@ import { popup } from '@/os.js'; class ReactionPicker { private src: Ref = 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; }