feat: add text component

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 (
     <div className={`message${link.author === ev.pubkey ? " streamer" : ""}`}>
       <Profile pubkey={ev.pubkey} />
-      <span>
-        {ev.content}
-      </span>
+      <Text ev={ev} />
     </div>
   );
 }

src/element/text.css

@@ -0,0 +1,5 @@
+.custom-emoji {
+  width: 21px;
+  height: 21px;
+  display: inline-block;
+}

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 <img alt={t[0]} src={t[1]} className="custom-emoji" />;
+    } 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 <span>{replaceEmoji(ev.content, emojis)}</span>;
+}