feat: adding the possibility to use emoji default of system (#497)

* fix: add component path

* add span tag and verification string

* adding more verification to emoji string

* add span tag and verification string

* Update package.json

Author: eumarciel404

packages/core/src/components/discord-reaction/DiscordReaction.ts

@@ -2,6 +2,7 @@ import { consume } from '@lit/context';
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { when } from 'lit/directives/when.js';
 import type { LightTheme } from '../../types.js';
 import { messagesLightTheme } from '../discord-messages/DiscordMessages.js';
 
@@ -131,7 +132,11 @@ export class DiscordReaction extends LitElement implements LightTheme {
 
 	protected override render() {
 		return html`<div class="discord-reaction-inner" @click=${this.handleReactionClick} @keydown=${this.handleReactionClick}>
-			<img src=${ifDefined(this.emoji)} alt=${ifDefined(this.name)} draggable="false" />
+			${when(
+				this.emoji.includes('http') || this.emoji.startsWith('/') || this.emoji.startsWith('./'),
+				() => html`<img src=${ifDefined(this.emoji)} alt=${ifDefined(this.name)} draggable="false" />`,
+				() => html`<span>${this.emoji}</span>`
+			)}
 			<span class="discord-reaction-count">${this.count}</span>
 		</div>`;
 	}

packages/core/src/components/discord-string-select-menu-option/DiscordStringSelectMenuOption.ts

@@ -98,15 +98,18 @@ export class DiscordStringSelectMenuOption extends LitElement implements LightTh
 
 		return html`
 			<label>
-				${when(
-					this.emoji,
-					() =>
-						html`<img
-							src=${this.emoji}
-							alt=${ifDefined(this.emojiName)}
-							draggable="true"
-							class="discord-string-select-menu-option-emoji"
-						/>`
+				${when(this.emoji, () =>
+					when(
+						this.emoji.includes('http') || this.emoji.startsWith('/') || this.emoji.startsWith('./'),
+						() =>
+							html`<img
+								src=${this.emoji}
+								alt=${ifDefined(this.emojiName)}
+								draggable="true"
+								class="discord-string-select-menu-option-emoji"
+							/>`,
+						() => html`<span class="discord-string-select-menu-option-emoji">${this.emoji}</span>`
+					)
 				)}
 				<div class="discord-string-select-menu-option-ellipsis-text">
 					<div class="discord-string-select-menu-option-ellipsis-text">