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;
}