natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

fix: 🐛 properly apply unicode for skin tone selector

This commit is contained in:
ThatOneCalculator 2023-06-24 19:38:55 -07:00
parent e5315db92c
commit 41c65a4623
No known key found for this signature in database
GPG Key ID: 8703CACD01000000
2 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/client/src/components/MkEmojiPicker.section.vue
View File

@ -14,7 +14,7 @@
<button <button
v-for="skinTone in props.skinTones" v-for="skinTone in props.skinTones"
class="_button" class="_button"
@click.prevent=" @click.stop="
applyUnicodeSkinTone( applyUnicodeSkinTone(
props.skinTones.indexOf(skinTone) + 1 props.skinTones.indexOf(skinTone) + 1
) )
@ -43,7 +43,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watch, onMounted } from "vue"; import { ref, watch, onMounted } from "vue";
import { addSkinTone } from "@/scripts/emojilist"; import { addSkinTone } from "@/scripts/emojilist";
import emojiComponents from "unicode-emoji-json/data-emoji-components.json";
const props = defineProps<{ const props = defineProps<{
emojis: string[]; emojis: string[];
@ -56,17 +55,6 @@ const localEmojis = ref([...props.emojis]);
function applyUnicodeSkinTone(custom?: number) { function applyUnicodeSkinTone(custom?: number) {
for (let i = 0; i < localEmojis.value.length; i++) { 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); localEmojis.value[i] = addSkinTone(localEmojis.value[i], custom);
} }
} }

15
packages/client/src/scripts/emojilist.ts
View File

@ -45,6 +45,8 @@ export const unicodeEmojiSkinTones = [
]; ];
export function addSkinTone(emoji: string, skinTone?: number) { export function addSkinTone(emoji: string, skinTone?: number) {
const individualData = import("unicode-emoji-json/data-by-emoji.json");
const chosenSkinTone = skinTone || defaultStore.state.reactionPickerSkinTone; const chosenSkinTone = skinTone || defaultStore.state.reactionPickerSkinTone;
const skinToneModifiers = [ const skinToneModifiers = [
"", "",
@ -54,7 +56,18 @@ export function addSkinTone(emoji: string, skinTone?: number) {
emojiComponents.medium_dark_skin_tone, emojiComponents.medium_dark_skin_tone,
emojiComponents.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 = [ const unicodeFifteenEmojis = [