Parse custom emoji

src/components/ParsedNote/ParsedNote.tsx

@@ -3,6 +3,7 @@ import { hexToNpub } from '../../lib/keys';
 import {
   getLinkPreview,
   isAppleMusic,
+  isCustomEmoji,
   isHashtag,
   isImage,
   isInterpunction,
@@ -341,6 +342,12 @@ const ParsedNote: Component<{
       return;
     }
 
+    if (isCustomEmoji(token)) {
+      lastSignificantContent = 'emoji';
+      updateContent(content, 'emoji', token);
+      return;
+    }
+
     lastSignificantContent = 'text';
     updateContent(content, 'text', token);
     return;
@@ -878,6 +885,28 @@ const ParsedNote: Component<{
     </For>
   };
 
+  const renderEmoji = (item: NoteContent) => {
+    return <For each={item.tokens}>
+      {(token) => {
+        if (isNoteTooLong()) return;
+
+        setWordsDisplayed(w => w + 1);
+
+        const emoji = token.split(':')[1];
+
+        const tag = props.note.post.tags.find(t => t[0] === 'emoji' && t[1] === emoji);
+
+        if (tag === undefined || tag.length === 0) return <>{token}</>;
+
+        const image = tag[2];
+
+        return image ?
+          <span><img height={15} width={15} src={image} alt={`emoji: ${emoji}`} /></span> :
+          <>{token}</>;
+      }}
+    </For>
+  };
+
   const renderContent = (item: NoteContent) => {
 
     const renderers: Record<string, (item: NoteContent) => JSXElement> = {
@@ -897,6 +926,7 @@ const ParsedNote: Component<{
       usermention: renderUserMention,
       tagmention: renderTagMention,
       hashtag: renderHashtag,
+      emoji: renderEmoji,
     }
 
     return renderers[item.type] ?

src/constants.ts

@@ -248,6 +248,7 @@ export const urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9\u00F0-\u02AF@:%._\+~#=]{
 export const urlRegexG = /https?:\/\/(www\.)?[-a-zA-Z0-9\u00F0-\u02AF@:%._\+~#=]{1,256}\.[a-zA-Z0-9\u00F0-\u02AF()]{1,8}\b([-a-zA-Z0-9\u00F0-\u02AF()@:%_\+.~#?&//=]*)/ig;
 export const urlExtractRegex = /https?:\/\/\S+\.[^()]+(?:\([^)]*\))*/;
 export const interpunctionRegex = /^(\.|,|;|\?|\!)$/;
+export const emojiRegex = /(?:\s|^)\:\w+\:/;
 
 export const hashtagRegex = /(?:\s|^)#[^\s!@#$%^&*(),.?":{}|<>]+/i;
 export const linebreakRegex = /(\r\n|\r|\n)/ig;

src/lib/notes.tsx

@@ -2,7 +2,7 @@
 import { Relay } from "nostr-tools";
 import { createStore } from "solid-js/store";
 import LinkPreview from "../components/LinkPreview/LinkPreview";
-import { appleMusicRegex, hashtagRegex, interpunctionRegex, Kind, linebreakRegex, mixCloudRegex, nostrNestsRegex, noteRegex, profileRegex, soundCloudRegex, spotifyRegex, tagMentionRegex, twitchRegex, urlRegex, urlRegexG, wavlakeRegex, youtubeRegex } from "../constants";
+import { appleMusicRegex, emojiRegex, hashtagRegex, interpunctionRegex, Kind, linebreakRegex, mixCloudRegex, nostrNestsRegex, noteRegex, profileRegex, soundCloudRegex, spotifyRegex, tagMentionRegex, twitchRegex, urlRegex, urlRegexG, wavlakeRegex, youtubeRegex } from "../constants";
 import { sendMessage, subscribeTo } from "../sockets";
 import { MediaSize, NostrRelays, NostrRelaySignedEvent, PrimalNote, SendNoteResult } from "../types/primal";
 import { getMediaUrl as getMediaUrlDefault } from "./media";
@@ -57,6 +57,7 @@ export const isTagMention = (url: string) => tagMentionRegex.test(url);
 export const isNoteMention = (url: string) => noteRegex.test(url);
 export const isUserMention = (url: string) => profileRegex.test(url);
 export const isInterpunction = (url: string) => interpunctionRegex.test(url);
+export const isCustomEmoji = (url: string) => emojiRegex.test(url);
 
 export const isImage = (url: string) => ['.jpg', '.jpeg', '.webp', '.png', '.gif', '.format=png'].some(x => url.includes(x));
 export const isMp4Video = (url: string) => ['.mp4', '.mov'].some(x => url.includes(x));