From 5ddf275f3dfa39c580de8910eb935e9236579f40 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sun, 21 Jul 2024 22:23:35 +0200
Subject: [PATCH] fix: :bug: Correctly render emojis in profile fields

---
 components/social-elements/users/Account.vue  |  2 +-
 components/social-elements/users/UserCard.vue |  2 +-
 composables/ParsedContent.ts                  | 42 +++++++++----------
 3 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/components/social-elements/users/Account.vue b/components/social-elements/users/Account.vue
index 2dd57a2..67f6b13 100644
--- a/components/social-elements/users/Account.vue
+++ b/components/social-elements/users/Account.vue
@@ -85,7 +85,7 @@
         </div>
 
         <div v-if="!skeleton && fields && fields.length > 0" class="mt-4 px-4 flex-col flex space-y-3">
-            <div v-for="field of fields" :key="field.name" class="flex flex-col gap-1">
+            <div v-for="field of fields" :key="field.name ?? ''" class="flex flex-col gap-1">
                 <span class="text-primary-500 font-semibold" v-html="field.name"></span>
                 <span class="text-gray-200 prose prose-invert break-all" v-html="field.value"></span>
             </div>
diff --git a/components/social-elements/users/UserCard.vue b/components/social-elements/users/UserCard.vue
index 73b22a9..cb8bde7 100644
--- a/components/social-elements/users/UserCard.vue
+++ b/components/social-elements/users/UserCard.vue
@@ -70,7 +70,7 @@
                     </div>
 
                     <div v-if="fields && fields.length > 0" class="mt-4 px-4 flex-col flex space-y-3">
-                        <div v-for="field of fields" :key="field.name" class="flex flex-col gap-1">
+                        <div v-for="field of fields" :key="field.name ?? ''" class="flex flex-col gap-1">
                             <span class="text-primary-500 font-semibold" v-html="field.name"></span>
                             <span class="text-gray-200 prose prose-invert prose-sm break-all"
                                 v-html="field.value"></span>
diff --git a/composables/ParsedContent.ts b/composables/ParsedContent.ts
index 91044af..72d6581 100644
--- a/composables/ParsedContent.ts
+++ b/composables/ParsedContent.ts
@@ -32,28 +32,24 @@ export const useParsedContent = (
 
             // Replace emoji shortcodes with images
             if (shouldRenderEmoji) {
-                const paragraphs = contentHtml.querySelectorAll("p");
-
-                for (const paragraph of paragraphs) {
-                    paragraph.innerHTML = paragraph.innerHTML.replace(
-                        /:([a-zA-Z0-9_-]+):/g,
-                        (match, emoji) => {
-                            const emojiData = toValue(emojis).find(
-                                (e) => e.shortcode === emoji,
-                            );
-                            if (!emojiData) {
-                                return match;
-                            }
-                            const image = document.createElement("img");
-                            image.src = emojiData.url;
-                            image.alt = `:${emoji}:`;
-                            image.title = emojiData.shortcode;
-                            image.className =
-                                "h-6 align-text-bottom inline not-prose hover:scale-110 transition-transform duration-75 ease-in-out";
-                            return image.outerHTML;
-                        },
-                    );
-                }
+                contentHtml.innerHTML = contentHtml.innerHTML.replace(
+                    /:([a-zA-Z0-9_-]+):/g,
+                    (match, emoji) => {
+                        const emojiData = toValue(emojis).find(
+                            (e) => e.shortcode === emoji,
+                        );
+                        if (!emojiData) {
+                            return match;
+                        }
+                        const image = document.createElement("img");
+                        image.src = emojiData.url;
+                        image.alt = `:${emoji}:`;
+                        image.title = emojiData.shortcode;
+                        image.className =
+                            "h-[1.6em] mt-[-0.2ex] mx-1 mb-[0.2ex] align-middle inline not-prose hover:scale-110 transition-transform duration-75 ease-in-out";
+                        return image.outerHTML;
+                    },
+                );
             }
 
             // Replace links containing mentions with interactive mentions
@@ -104,6 +100,8 @@ export const useParsedAccount = (
     const parsedFields = computed(() =>
         fields.value.map((field) => ({
             ...field,
+            name: useParsedContent(field.name, emojis, undefined, settings)
+                .value,
             value: useParsedContent(field.value, emojis, undefined, settings)
                 .value,
         })),