display custom emojis

.changeset/happy-cats-arrive.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Display custom emojis

src/components/embed-types/emoji.tsx

@@ -0,0 +1,23 @@
+import { Image } from "@chakra-ui/react";
+import { EmbedableContent, embedJSX } from "../../helpers/embeds";
+import { DraftNostrEvent, NostrEvent } from "../../types/nostr-event";
+
+export function embedEmoji(content: EmbedableContent, note: NostrEvent | DraftNostrEvent) {
+  return embedJSX(content, {
+    regexp: /:([a-zA-Z0-9]+):/i,
+    render: (match) => {
+      console.log(match);
+
+      const emojiTag = note.tags.find(
+        (tag) => tag[0] === "emoji" && tag[1].toLowerCase() === match[1].toLowerCase() && tag[2]
+      );
+      if (emojiTag) {
+        return (
+          <Image src={emojiTag[2]} height="1.5em" display="inline-block" verticalAlign="middle" title={match[1]} />
+        );
+      }
+      return null;
+    },
+    name: "emoji",
+  });
+}

src/components/embed-types/index.ts

@@ -4,3 +4,4 @@ export * from "./music";
 export * from "./common";
 export * from "./youtube";
 export * from "./nostr";
+export * from "./emoji";

src/components/note/note-contents.tsx

@@ -18,6 +18,7 @@ import {
   renderSpotifyUrl,
   renderTidalUrl,
   renderVideoUrl,
+  embedEmoji,
 } from "../embed-types";
 import { ImageGalleryProvider } from "../image-gallery";
 import { useTrusted } from "./trust";
@@ -47,6 +48,7 @@ function buildContents(event: NostrEvent | DraftNostrEvent, trusted = false) {
   content = embedNostrLinks(content);
   content = embedNostrMentions(content, event);
   content = embedNostrHashtags(content, event);
+  content = embedEmoji(content, event);
 
   return content;
 }