Support displaying custom emojis

src/components/CustomEmoji.tsx

@@ -0,0 +1,22 @@
+import { css } from "@shadow-panda/styled-system/css";
+
+type CustomEmojiProps = {
+  imgUrl: string;
+  shortcode: string;
+};
+
+export const CustomEmoji = ({ imgUrl, shortcode }: CustomEmojiProps) => {
+  return (
+    <img
+      className={css({
+        display: "inline-block",
+        height: "1lh",
+        maxWidth: "100%",
+        objectFit: "contain",
+        verticalAlign: "middle",
+      })}
+      src={imgUrl}
+      alt={shortcode}
+    />
+  );
+};

src/components/MusicStatusView.tsx

@@ -19,7 +19,7 @@ export const MusicStatusView = ({ content, linkUrl }: MusicStatusViewProps) => {
         },
       })}
     >
-      <span>{content}</span>
+      <span className={css({ verticalAlign: "middle" })}>{content}</span>
       {linkUrl && <ExternalLink href={linkUrl} size={token("fontSizes.sm")} />}
     </p>
   );

src/components/UserStatusCard.tsx

@@ -4,10 +4,13 @@ import { icon } from "@shadow-panda/styled-system/recipes";
 import { useAtomValue } from "jotai";
 import { MoreHorizontal } from "lucide-react";
 import { useEffect, useState } from "react";
+import type { NostrEvent } from "../nostr";
+import { eventContentPartKey, parseEventContent } from "../nostr";
 import { userProfileAtomFamily, userStatusAtomFamily } from "../states/nostr";
 import { type UserProfile, UserStatus } from "../states/nostrModels";
 import { currUnixtime } from "../utils";
 import { AppAvatar } from "./AppAvatar";
+import { CustomEmoji } from "./CustomEmoji";
 import { ExternalLink } from "./ExternalLink";
 import { MusicStatusView } from "./MusicStatusView";
 import { StatusDetailsView } from "./StatusDetailsView";
@@ -87,10 +90,10 @@ export const UserStatusCard: React.FC<UserStatusCardProps> = ({ pubkey }) => {
     >
       <div>
         {/* status */}
-        <GeneralStatus content={status.general?.content} linkUrl={status.general?.linkUrl} />
+        <GeneralStatus srcEvent={status.general?.srcEvent} linkUrl={status.general?.linkUrl} />
 
         {/* now playing  */}
-        {status.music?.content && <MusicStatusView content={status.music.content} linkUrl={status.music.linkUrl} />}
+        {status.music && <MusicStatusView content={status.music.content} linkUrl={status.music.linkUrl} />}
       </div>
 
       {/* profile */}
@@ -143,21 +146,33 @@ export const UserStatusCard: React.FC<UserStatusCardProps> = ({ pubkey }) => {
 };
 
 type GeneralStatusProps = {
-  content?: string;
+  srcEvent?: NostrEvent;
   linkUrl?: string;
 };
 
-const GeneralStatus = ({ content, linkUrl }: GeneralStatusProps) => {
-  const text = content ?? "";
+const GeneralStatus = ({ srcEvent, linkUrl }: GeneralStatusProps) => {
+  const parts = parseEventContent(srcEvent);
 
-  return text !== "" ? (
+  return parts.length > 0 ? (
     <p
       className={css({
         textStyle: "main-status",
         wordBreak: "break-all",
       })}
     >
-      <span>{text}</span>
+      {parts.map((part) => {
+        const key = eventContentPartKey(part);
+        switch (part.type) {
+          case "text":
+            return (
+              <span key={key} className={css({ verticalAlign: "middle" })}>
+                {part.text}
+              </span>
+            );
+          case "custom-emoji":
+            return <CustomEmoji key={key} imgUrl={part.imgUrl} shortcode={part.shortcode} />;
+        }
+      })}
       {linkUrl && <ExternalLink href={linkUrl} />}
     </p>
   ) : (

src/nostr.ts

@@ -1,4 +1,5 @@
 import type { NostrEvent } from "nostr-fetch";
+export type { NostrEvent };
 import { nip19 } from "nostr-tools";
 
 /* primitives */
@@ -12,6 +13,68 @@ export const getTagsByName = (ev: NostrEvent, name: string): string[][] => ev.ta
 export const getTagValuesByName = (ev: NostrEvent, name: string): string[] =>
   ev.tags.filter((t) => t[0] === name).map((t) => t[1] ?? "");
 
+/* parsing content */
+const contentRefPattern = /(:[_a-zA-Z0-9]+:)/;
+
+export type EventContentPart =
+  | {
+      type: "text";
+      text: string;
+    }
+  | {
+      type: "custom-emoji";
+      imgUrl: string;
+      shortcode: string;
+    };
+
+export const eventContentPartKey = (part: EventContentPart): string => {
+  switch (part.type) {
+    case "text":
+      return `text-${part.text}`;
+    case "custom-emoji":
+      return `emoji-${part.imgUrl}`;
+  }
+};
+
+export const parseEventContent = (ev?: NostrEvent): EventContentPart[] => {
+  if (ev === undefined) {
+    return [];
+  }
+
+  return ev.content
+    .split(contentRefPattern)
+    .filter((s) => s !== undefined && s.length > 0)
+    .map((part) => {
+      // custom emoji
+      if (part.startsWith(":") && part.endsWith(":")) {
+        return parseCustomEmoji(part, ev);
+      }
+      return {
+        type: "text",
+        text: part,
+      };
+    });
+};
+
+const getEmojiImgUrlByShortcode = (ev: NostrEvent, shortcode: string): string | undefined =>
+  ev.tags.find((t) => t[0] === "emoji" && t[1] === shortcode)?.[2];
+
+const parseCustomEmoji = (part: string, ev: NostrEvent): EventContentPart => {
+  const shortcode = part.slice(1, -1);
+  const imgUrl = getEmojiImgUrlByShortcode(ev, shortcode);
+  if (imgUrl === undefined) {
+    return {
+      type: "text",
+      text: part,
+    };
+  }
+  return {
+    type: "custom-emoji",
+    imgUrl,
+    shortcode,
+  };
+};
+
 /* parsing relay list */
 export type RelayList = Record<string, { read: boolean; write: boolean }>;