fix(client): use colorizeEmoji when unicodeEmojisMap.get

3 files changed, 10 insertions, 4 deletions

diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue
index 061afa66ac..e8ad351a23 100644
--- a/packages/frontend/src/components/MkEmojiPicker.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.vue
@@ -114,6 +114,7 @@ import {
 	unicodeEmojiCategories as categories,
 	getEmojiName,
 	CustomEmojiFolderTree,
+	getUnicodeEmoji,
 } from '@/scripts/emojilist.js';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import * as os from '@/os.js';
@@ -382,7 +383,7 @@ function getDef(emoji: string) {
 	if (emoji.includes(':')) {
 		return customEmojisMap.get(emoji.replace(/:/g, ''))!;
 	} else {
-		return unicodeEmojisMap.get(emoji)!;
+		return getUnicodeEmoji(emoji)!;
 	}
 }
 
diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
index bccee5109d..acfc37ebb7 100644
--- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
@@ -34,7 +34,7 @@ import { i18n } from '@/i18n.js';
 import * as sound from '@/scripts/sound.js';
 import { checkReactionPermissions } from '@/scripts/check-reaction-permissions.js';
 import { customEmojisMap } from '@/custom-emojis.js';
-import { unicodeEmojisMap } from '@/scripts/emojilist.js';
+import { getUnicodeEmoji, unicodeEmojisMap } from '@/scripts/emojilist.js';
 
 const props = defineProps<{
 	reaction: string;
@@ -52,7 +52,7 @@ const emit = defineEmits<{
 const buttonEl = shallowRef<HTMLElement>();
 
 const emojiName = computed(() => props.reaction.replace(/:/g, '').replace(/@\./, ''));
-const emoji = computed(() => customEmojisMap.get(emojiName.value) ?? unicodeEmojisMap.get(props.reaction));
+const emoji = computed(() => customEmojisMap.get(emojiName.value) ?? getUnicodeEmoji(props.reaction));
 
 const canToggle = computed(() => {
 	return !props.reaction.match(/@\w/) && $i && emoji.value && checkReactionPermissions($i, props.note, emoji.value);
diff --git a/packages/frontend/src/scripts/emojilist.ts b/packages/frontend/src/scripts/emojilist.ts
index 2a6120f3ba..d31e49c53d 100644
--- a/packages/frontend/src/scripts/emojilist.ts
+++ b/packages/frontend/src/scripts/emojilist.ts
@@ -21,7 +21,7 @@ export const emojilist: UnicodeEmojiDef[] = _emojilist.map(x => ({
 }));
 
 export const unicodeEmojisMap = new Map<string, UnicodeEmojiDef>(
-	emojilist.map(x => [x.char, x])
+	emojilist.map(x => [x.char, x]),
 );
 
 const _indexByChar = new Map<string, number>();
@@ -39,6 +39,11 @@ for (let i = 0; i < emojilist.length; i++) {
 
 export const emojiCharByCategory = _charGroupByCategory;
 
+export function getUnicodeEmoji(char: string): UnicodeEmojiDef | null {
+	// Colorize it because emojilist.json assumes that
+	return unicodeEmojisMap.get(colorizeEmoji(char)) ?? null;
+}
+
 export function getEmojiName(char: string): string | null {
 	// Colorize it because emojilist.json assumes that
 	const idx = _indexByChar.get(colorizeEmoji(char));