versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 16:38:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 🐛 Correctly render emojis in profile fields

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-07-21 22:23:35 +02:00
parent 0f22f94355
commit 5ddf275f3d
No known key found for this signature in database
3 changed files with 22 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/social-elements/users/Account.vue
View file

@ -85,7 +85,7 @@
</div> </div>
<div v-if="!skeleton && fields && fields.length > 0" class="mt-4 px-4 flex-col flex space-y-3"> <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-primary-500 font-semibold" v-html="field.name"></span>
<span class="text-gray-200 prose prose-invert break-all" v-html="field.value"></span> <span class="text-gray-200 prose prose-invert break-all" v-html="field.value"></span>
</div> </div>

2
components/social-elements/users/UserCard.vue
View file

@ -70,7 +70,7 @@
</div> </div>
<div v-if="fields && fields.length > 0" class="mt-4 px-4 flex-col flex space-y-3"> <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-primary-500 font-semibold" v-html="field.name"></span>
<span class="text-gray-200 prose prose-invert prose-sm break-all" <span class="text-gray-200 prose prose-invert prose-sm break-all"
v-html="field.value"></span> v-html="field.value"></span>

10
composables/ParsedContent.ts
View file

@ -32,10 +32,7 @@ export const useParsedContent = (
// Replace emoji shortcodes with images // Replace emoji shortcodes with images
if (shouldRenderEmoji) { if (shouldRenderEmoji) {
const paragraphs = contentHtml.querySelectorAll("p"); contentHtml.innerHTML = contentHtml.innerHTML.replace(
for (const paragraph of paragraphs) {
paragraph.innerHTML = paragraph.innerHTML.replace(
/:([a-zA-Z0-9_-]+):/g, /:([a-zA-Z0-9_-]+):/g,
(match, emoji) => { (match, emoji) => {
const emojiData = toValue(emojis).find( const emojiData = toValue(emojis).find(
@ -49,12 +46,11 @@ export const useParsedContent = (
image.alt = `:${emoji}:`; image.alt = `:${emoji}:`;
image.title = emojiData.shortcode; image.title = emojiData.shortcode;
image.className = image.className =
"h-6 align-text-bottom inline not-prose hover:scale-110 transition-transform duration-75 ease-in-out"; "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; return image.outerHTML;
}, },
); );
} }
}
// Replace links containing mentions with interactive mentions // Replace links containing mentions with interactive mentions
const links = contentHtml.querySelectorAll("a"); const links = contentHtml.querySelectorAll("a");
@ -104,6 +100,8 @@ export const useParsedAccount = (
const parsedFields = computed(() => const parsedFields = computed(() =>
fields.value.map((field) => ({ fields.value.map((field) => ({
...field, ...field,
name: useParsedContent(field.name, emojis, undefined, settings)
.value,
value: useParsedContent(field.value, emojis, undefined, settings) value: useParsedContent(field.value, emojis, undefined, settings)
.value, .value,
})), })),