diff --git a/src/element/live-chat.tsx b/src/element/live-chat.tsx
index 503ff32..86723cb 100644
--- a/src/element/live-chat.tsx
+++ b/src/element/live-chat.tsx
@@ -7,6 +7,7 @@ import { useLiveChatFeed } from "hooks/live-chat";
import AsyncButton from "./async-button";
import { Profile } from "./profile";
import { Icon } from "./icon";
+import { Text } from "./text";
import Spinner from "./spinner";
import { useLogin } from "hooks/login";
import { useUserProfile } from "@snort/system-react";
@@ -96,9 +97,7 @@ function ChatMessage({ ev, link }: { ev: TaggedRawEvent, link: NostrLink }) {
return (
);
}
diff --git a/src/element/text.css b/src/element/text.css
new file mode 100644
index 0000000..d8364ab
--- /dev/null
+++ b/src/element/text.css
@@ -0,0 +1,5 @@
+.custom-emoji {
+ width: 21px;
+ height: 21px;
+ display: inline-block;
+}
diff --git a/src/element/text.tsx b/src/element/text.tsx
new file mode 100644
index 0000000..91984b4
--- /dev/null
+++ b/src/element/text.tsx
@@ -0,0 +1,25 @@
+import "./text.css";
+import { useMemo } from "react";
+import { TaggedRawEvent } from "@snort/system";
+
+type Emoji = [string, string];
+
+function replaceEmoji(content: string, emoji: Emoji[]) {
+ return content.split(/:(\w+):/g).map((i) => {
+ const t = emoji.find((a) => a[0] === i);
+ if (t) {
+ return ;
+ } else {
+ return i;
+ }
+ });
+}
+
+export function Text({ ev }: { ev: TaggedRawEvent }) {
+ const emojis = useMemo(() => {
+ return ev.tags
+ .filter((t) => t.at(0) === "emoji")
+ .map((t) => t.slice(1) as Emoji);
+ }, [ev]);
+ return {replaceEmoji(ev.content, emojis)};
+}