From 0ec7e5e11674d9bd230142ad9610f73c721b3c5a Mon Sep 17 00:00:00 2001
From: Paul Makles <paulmakles@gmail.com>
Date: Sun, 10 Jul 2022 13:53:19 +0100
Subject: [PATCH] feat: try to load any 'valid' emoji

---
 external/lang                             |  2 +-
 src/components/markdown/plugins/emoji.tsx | 30 +++++++++++++++++------
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/external/lang b/external/lang
index 58408da6..8a5984ed 160000
--- a/external/lang
+++ b/external/lang
@@ -1 +1 @@
-Subproject commit 58408da6c4090dd3a7808a663eaa95b8b1da7603
+Subproject commit 8a5984ed8f336637e9aa60ef3934e2bc5b9023e9
diff --git a/src/components/markdown/plugins/emoji.tsx b/src/components/markdown/plugins/emoji.tsx
index 033af2de..15ca52e4 100644
--- a/src/components/markdown/plugins/emoji.tsx
+++ b/src/components/markdown/plugins/emoji.tsx
@@ -1,5 +1,7 @@
 import styled from "styled-components";
 
+import { useState } from "preact/hooks";
+
 import { emojiDictionary } from "../../../assets/emojis";
 import { clientController } from "../../../controllers/client/ClientController";
 import { parseEmoji } from "../../common/Emoji";
@@ -12,34 +14,48 @@ const Emoji = styled.img`
     width: var(--emoji-size);
     margin: 0 0.05em 0 0.1em;
     vertical-align: -0.2em;
+
+    img:before {
+        content: " ";
+        display: block;
+        position: absolute;
+        height: 50px;
+        width: 50px;
+        background-image: url(ishere.jpg);
+    }
 `;
 
 export function RenderEmoji({ match }: CustomComponentProps) {
+    const [fail, setFail] = useState(false);
     const url =
         match in emojiDictionary
             ? parseEmoji(emojiDictionary[match as keyof typeof emojiDictionary])
-            : clientController.getAvailableClient().emojis!.get(match)!
-                  .imageURL;
+            : `${
+                  clientController.getAvailableClient().configuration?.features
+                      .autumn.url
+              }/emojis/${match}`;
+
+    if (fail) return <span>{`:${match}:`}</span>;
 
     return (
         <Emoji
-            alt={match}
+            alt={`:${match}:`}
             loading="lazy"
             className="emoji"
             draggable={false}
             src={url}
+            onError={() => setFail(true)}
         />
     );
 }
 
-const RE_EMOJI = /:([a-zA-Z0-9_]+):/g;
+const RE_EMOJI = /:([a-zA-Z0-9_+]+):/g;
+const RE_ULID = /^[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}$/;
 
 export const remarkEmoji = createComponent(
     "emoji",
     RE_EMOJI,
-    (match) =>
-        match in emojiDictionary ||
-        clientController.getAvailableClient().emojis?.has(match),
+    (match) => match in emojiDictionary || RE_ULID.test(match),
 );
 
 export function isOnlyEmoji(text: string) {