fix: fixed emojis in embeds and add support for Nuxt 3

skyra-project · Apr 20, 2024 · 7965fd3 · 7965fd3
1 parent ec034d3
commit 7965fd3
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 12 deletions.
diff --git a/packages/core/src/components/discord-embed-field/DiscordEmbedField.ts b/packages/core/src/components/discord-embed-field/DiscordEmbedField.ts
@@ -3,6 +3,7 @@ import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { getGlobalEmojiUrl } from '../../util.js';
+import '../discord-custom-emoji/DiscordCustomEmoji.js';
 import { messagesLightTheme } from '../discord-messages/DiscordMessages.js';
 import type { Emoji, LightTheme } from '../../types.js';
 
@@ -41,6 +42,19 @@ export class DiscordEmbedField extends LitElement implements LightTheme {
 	@property({ reflect: true, attribute: 'field-title' })
 	public accessor fieldTitle!: string;
 
+	/**
+	 * An emoji that is prefixed to {@link DiscordEmbedField.fieldTitle fieldTitle}.
+	 *
+	 * This should be keyed as `{ key: { emojiData } }` wherein `key`
+	 * should occur in the {@link DiscordEmbedField.fieldTitle fieldTitle}.
+	 *
+	 * By default this component will use the global emojis from
+	 * {@link getGlobalEmojiUrl}, however on SSR frameworks like Nuxt 3 global config doesn't
+	 * work so we provide this as an alternative method.
+	 */
+	@property({ attribute: false })
+	public accessor embedFieldEmojisMap: { [key: string]: Emoji } = {};
+
 	/**
 	 * Whether this field should be displayed inline or not.
 	 */
@@ -80,15 +94,11 @@ export class DiscordEmbedField extends LitElement implements LightTheme {
 
 		const words = title.split(' ');
 		return words.map((word: string, idx: number) => {
-			const emoji = getGlobalEmojiUrl(word) ?? ({} as Emoji);
+			const emoji = getGlobalEmojiUrl(word) ?? this.embedFieldEmojisMap[word] ?? ({} as Emoji);
 			let el: string | ReturnType<typeof html>;
 
 			if (emoji.name) {
-				el = html`
-					<span class="discord-embed-custom-emoji">
-						<img src="${ifDefined(emoji.url)}" alt="${emoji.name}" class="discord-embed-custom-emoji-image" />
-					</span>
-				`;
+				el = html`<discord-custom-emoji name=${emoji.name} url=${ifDefined(emoji.url)} embed-emoji></discord-custom-emoji>`;
 			} else {
 				el = idx < words.length - 1 ? `${word} ` : word;
 			}

diff --git a/packages/core/src/components/discord-embed/DiscordEmbed.ts b/packages/core/src/components/discord-embed/DiscordEmbed.ts
@@ -5,6 +5,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { getGlobalEmojiUrl } from '../../util.js';
+import '../discord-custom-emoji/DiscordCustomEmoji.js';
 import { messagesLightTheme } from '../discord-messages/DiscordMessages.js';
 import type { Emoji, DiscordEmbedProps, LightTheme } from '../../types.js';
 
@@ -248,6 +249,19 @@ export class DiscordEmbed extends LitElement implements DiscordEmbedProps, Light
 	@property({ attribute: 'embed-title' })
 	public accessor embedTitle: string;
 
+	/**
+	 * An emoji that is prefixed to {@link DiscordEmbed.embedTitle embedTitle}.
+	 *
+	 * This should be keyed as `{ key: { emojiData } }` wherein `key`
+	 * should occur in the {@link DiscordEmbed.embedTitle embedTitle}.
+	 *
+	 * By default this component will use the global emojis from
+	 * {@link getGlobalEmojiUrl}, however on SSR frameworks like Nuxt 3 global config doesn't
+	 * work so we provide this as an alternative method.
+	 */
+	@property({ attribute: false })
+	public accessor embedEmojisMap: { [key: string]: Emoji } = {};
+
 	/**
 	 * The URL to open when you click on the embed title.
 	 */
@@ -354,14 +368,10 @@ export class DiscordEmbed extends LitElement implements DiscordEmbedProps, Light
 		const words = title.split(' ');
 
 		return words.map((word: string, idx: number) => {
-			const emoji = getGlobalEmojiUrl(word) ?? ({} as Emoji);
+			const emoji = getGlobalEmojiUrl(word) ?? this.embedEmojisMap[word] ?? ({} as Emoji);
 			let el;
 			if (emoji.name) {
-				el = html`
-					<span class="discord-embed-custom-emoji">
-						<img src="${ifDefined(emoji.url)}" alt="${emoji.name}" class="discord-embed-custom-emoji-image" />
-					</span>
-				`;
+				el = html`<discord-custom-emoji name=${emoji.name} url=${ifDefined(emoji.url)} embed-emoji></discord-custom-emoji>`;
 			} else {
 				el = idx < words.length - 1 ? `${word} ` : word;
 			}