From 41c65a4623d3b7c003e7bf1043d7b71a67066495 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Sat, 24 Jun 2023 19:38:55 -0700
Subject: [PATCH] fix: :bug: properly apply unicode for skin tone selector

---
 .../src/components/MkEmojiPicker.section.vue      | 14 +-------------
 packages/client/src/scripts/emojilist.ts          | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/client/src/components/MkEmojiPicker.section.vue b/packages/client/src/components/MkEmojiPicker.section.vue
index ffe891a0b9..c6052c60ee 100644
--- a/packages/client/src/components/MkEmojiPicker.section.vue
+++ b/packages/client/src/components/MkEmojiPicker.section.vue
@@ -14,7 +14,7 @@
 				<button
 					v-for="skinTone in props.skinTones"
 					class="_button"
-					@click.prevent="
+					@click.stop="
 						applyUnicodeSkinTone(
 							props.skinTones.indexOf(skinTone) + 1
 						)
@@ -43,7 +43,6 @@
 <script lang="ts" setup>
 import { ref, watch, onMounted } from "vue";
 import { addSkinTone } from "@/scripts/emojilist";
-import emojiComponents from "unicode-emoji-json/data-emoji-components.json";
 
 const props = defineProps<{
 	emojis: string[];
@@ -56,17 +55,6 @@ const localEmojis = ref([...props.emojis]);
 
 function applyUnicodeSkinTone(custom?: number) {
 	for (let i = 0; i < localEmojis.value.length; i++) {
-		if (
-			[
-				emojiComponents.light_skin_tone,
-				emojiComponents.medium_light_skin_tone,
-				emojiComponents.medium_skin_tone,
-				emojiComponents.medium_dark_skin_tone,
-				emojiComponents.dark_skin_tone,
-			].some((v) => localEmojis.value[i].endsWith(v))
-		) {
-			localEmojis.value[i] = localEmojis.value[i].slice(0, -1);
-		}
 		localEmojis.value[i] = addSkinTone(localEmojis.value[i], custom);
 	}
 }
diff --git a/packages/client/src/scripts/emojilist.ts b/packages/client/src/scripts/emojilist.ts
index a5ad7e3685..5ae8bce3bd 100644
--- a/packages/client/src/scripts/emojilist.ts
+++ b/packages/client/src/scripts/emojilist.ts
@@ -45,6 +45,8 @@ export const unicodeEmojiSkinTones = [
 ];
 
 export function addSkinTone(emoji: string, skinTone?: number) {
+	const individualData = import("unicode-emoji-json/data-by-emoji.json");
+
 	const chosenSkinTone = skinTone || defaultStore.state.reactionPickerSkinTone;
 	const skinToneModifiers = [
 		"",
@@ -54,7 +56,18 @@ export function addSkinTone(emoji: string, skinTone?: number) {
 		emojiComponents.medium_dark_skin_tone,
 		emojiComponents.dark_skin_tone,
 	];
-	return emoji + (skinToneModifiers[chosenSkinTone - 1] || "");
+	if (individualData[emoji]?.skin_tone_support === false) {
+		return emoji;
+	}
+	return (
+		emoji.replace(
+			new RegExp(
+				`(${skinToneModifiers.slice(1).join("|")})`,
+				"gi",
+			),
+			"",
+		) + (skinToneModifiers[chosenSkinTone - 1] || "")
+	);
 }
 
 const unicodeFifteenEmojis = [