feat: autocomplete custom emoji

src/element/text.tsx

@@ -1,25 +1,14 @@
-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;
-    }
-  });
-}
+import { type EmojiTag, Emojify } from "./emoji";
 
 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);
+    return ev.tags.filter((t) => t.at(0) === "emoji").map((t) => t as EmojiTag);
   }, [ev]);
-  return <span>{replaceEmoji(ev.content, emojis)}</span>;
+  return (
+    <span>
+      <Emojify content={ev.content} emoji={emojis} />
+    </span>
+  );
 }