versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 03:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: ⬆️ Upgrade to new @versia/client

Browse source
This commit is contained in:
Jesse Wierzbinski 2025-05-26 11:19:15 +02:00
parent 0a157d06f6
commit f807b05784
No known key found for this signature in database
71 changed files with 451 additions and 492 deletions
Download patch file Download diff file Expand all files Collapse all files

91
plugins/EmojiRenderer.ts
View file

@ -1,53 +1,60 @@
import type { Emoji } from "@versia/client/types";
import type { CustomEmoji } from "@versia/client/schemas";
import type { z } from "zod";
const emojisRegex =
/\p{RI}\p{RI}|\p{Emoji}(\p{EMod}|\uFE0F\u20E3?|[\u{E0020}-\u{E007E}]+\u{E007F})?(\u200D(\p{RI}\p{RI}|\p{Emoji}(\p{EMod}|\uFE0F\u20E3?|[\u{E0020}-\u{E007E}]+\u{E007F})?))*/gu;
const incorrectEmojisRegex = /^[#*0-9©®]$/;
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.directive<HTMLElement, Emoji[]>("render-emojis", {
beforeMount(el, binding) {
// Replace emoji shortcodes with images
if (preferences.custom_emojis.value) {
el.innerHTML = el.innerHTML.replace(
/:([a-zA-Z0-9_-]+):/g,
(match, emoji) => {
const emojiData = binding.value.find(
(e) => e.shortcode === emoji,
);
nuxtApp.vueApp.directive<HTMLElement, z.infer<typeof CustomEmoji>[]>(
"render-emojis",
{
beforeMount(el, binding) {
// Replace emoji shortcodes with images
if (preferences.custom_emojis.value) {
el.innerHTML = el.innerHTML.replace(
/:([a-zA-Z0-9_-]+):/g,
(match, emoji) => {
const emojiData = binding.value.find(
(e) => e.shortcode === emoji,
);
if (!emojiData) {
return match;
}
if (!emojiData) {
return match;
}
const image = document.createElement("img");
image.src = emojiData.url;
image.alt = `:${emoji}:`;
image.title = emojiData.shortcode;
image.className =
"h-[1lh] align-middle inline not-prose hover:scale-110 transition-transform duration-75 ease-in-out";
return image.outerHTML;
},
);
}
if (preferences.emoji_theme.value !== "native") {
el.innerHTML = el.innerHTML.replace(emojisRegex, (match) => {
if (incorrectEmojisRegex.test(match)) {
return match;
}
return `<img src="/emojis/${preferences.emoji_theme.value}/${match}.svg" alt="${match}" class="h-[1em] inline not-prose hover:scale-110 transition-transform duration-75 ease-in-out">`;
});
}
// Make all links that don't open to the same origin open in a new tab
for (const link of el.querySelectorAll("a")) {
if (link.hostname !== location.hostname) {
link.target = "_blank";
link.rel = "noopener noreferrer";
const image = document.createElement("img");
image.src = emojiData.url;
image.alt = `:${emoji}:`;
image.title = emojiData.shortcode;
image.className =
"h-[1lh] align-middle inline not-prose hover:scale-110 transition-transform duration-75 ease-in-out";
return image.outerHTML;
},
);
}
}
if (preferences.emoji_theme.value !== "native") {
el.innerHTML = el.innerHTML.replace(
emojisRegex,
(match) => {
if (incorrectEmojisRegex.test(match)) {
return match;
}
return `<img src="/emojis/${preferences.emoji_theme.value}/${match}.svg" alt="${match}" class="h-[1em] inline not-prose hover:scale-110 transition-transform duration-75 ease-in-out">`;
},
);
}
// Make all links that don't open to the same origin open in a new tab
for (const link of el.querySelectorAll("a")) {
if (link.hostname !== location.hostname) {
link.target = "_blank";
link.rel = "noopener noreferrer";
}
}
},
},
});
);
});