From 2eeb79c92fc60ea3e6c7e81377559b989b04f41d Mon Sep 17 00:00:00 2001
From: hzrd149 <github@hzrd149.com>
Date: Fri, 16 Jun 2023 20:46:41 -0500
Subject: [PATCH] display custom emojis

---
 .changeset/happy-cats-arrive.md       |  5 +++++
 src/components/embed-types/emoji.tsx  | 23 +++++++++++++++++++++++
 src/components/embed-types/index.ts   |  1 +
 src/components/note/note-contents.tsx |  2 ++
 4 files changed, 31 insertions(+)
 create mode 100644 .changeset/happy-cats-arrive.md
 create mode 100644 src/components/embed-types/emoji.tsx

diff --git a/.changeset/happy-cats-arrive.md b/.changeset/happy-cats-arrive.md
new file mode 100644
index 000000000..3f2257978
--- /dev/null
+++ b/.changeset/happy-cats-arrive.md
@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Display custom emojis
diff --git a/src/components/embed-types/emoji.tsx b/src/components/embed-types/emoji.tsx
new file mode 100644
index 000000000..cc37491f2
--- /dev/null
+++ b/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",
+  });
+}
diff --git a/src/components/embed-types/index.ts b/src/components/embed-types/index.ts
index 953877606..ee47dcdca 100644
--- a/src/components/embed-types/index.ts
+++ b/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";
diff --git a/src/components/note/note-contents.tsx b/src/components/note/note-contents.tsx
index c4bb64a6b..d47bd5336 100644
--- a/src/components/note/note-contents.tsx
+++ b/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;
 }