From d33f117a82342982f9ae57a3b991b0a117bfd997 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Mon, 26 Jun 2023 11:37:34 -0700
Subject: [PATCH] fix(chat): fix missing alt tags on custom emoji. Closes #3106

---
 core/chat/events/events.go                        |  8 ++++----
 core/chat/messageRendering_test.go                | 15 ++++++---------
 .../chat/ChatTextField/ChatTextField.tsx          |  2 +-
 web/components/chat/ChatTextField/EmojiPicker.tsx |  2 +-
 .../chat/ChatUserMessage/ChatUserMessage.tsx      |  1 +
 5 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/core/chat/events/events.go b/core/chat/events/events.go
index 8483c642d..56a642e70 100644
--- a/core/chat/events/events.go
+++ b/core/chat/events/events.go
@@ -125,9 +125,9 @@ func RenderMarkdown(raw string) string {
 }
 
 var (
-	_sanitizeReSrcMatch      = regexp.MustCompile(`(?i)^/img/emoji/[^\.%]*.[A-Z]*$`)
-	_sanitizeReAltTitleMatch = regexp.MustCompile(`:\S+:`)
-	_sanitizeReClassMatch    = regexp.MustCompile(`(?i)^(emoji)[A-Z_]*?$`)
+	_sanitizeReSrcMatch    = regexp.MustCompile(`(?i)^/img/emoji/[^\.%]*.[A-Z]*$`)
+	_sanitizeReClassMatch  = regexp.MustCompile(`(?i)^(emoji)[A-Z_]*?$`)
+	_sanitizeNonEmptyMatch = regexp.MustCompile(`^.+$`)
 )
 
 func sanitize(raw string) string {
@@ -153,7 +153,7 @@ func sanitize(raw string) string {
 
 	// Allow img tags from the the local emoji directory only
 	p.AllowAttrs("src").Matching(_sanitizeReSrcMatch).OnElements("img")
-	p.AllowAttrs("alt", "title").Matching(_sanitizeReAltTitleMatch).OnElements("img")
+	p.AllowAttrs("alt", "title").Matching(_sanitizeNonEmptyMatch).OnElements("img")
 	p.AllowAttrs("class").Matching(_sanitizeReClassMatch).OnElements("img")
 
 	// Allow bold
diff --git a/core/chat/messageRendering_test.go b/core/chat/messageRendering_test.go
index effa9777a..0a2895394 100644
--- a/core/chat/messageRendering_test.go
+++ b/core/chat/messageRendering_test.go
@@ -10,17 +10,14 @@ import (
 // and fully rendered HTML out of it.
 func TestRenderAndSanitize(t *testing.T) {
 	messageContent := `
-  Test one two three!  I go to http://yahoo.com and search for _sports_ and **answers**.
-  Here is an iframe <iframe src="http://yahoo.com"></iframe>
-
-  ## blah blah blah
-  [test link](http://owncast.online)
-  <img class="emoji" alt="bananadance.gif" width="600px" src="/img/emoji/bananadance.gif">
-  <script src="http://hackers.org/hack.js"></script>
-  `
+Test one two three!  I go to http://yahoo.com and search for _sports_ and **answers**.
+Here is an iframe<iframe src="http://yahoo.com"></iframe>
+## blah blah blah
+[test link](http://owncast.online)
+<img class="emoji" src="/img/emoji/bananadance.gif">`
 
 	expected := `Test one two three!  I go to <a href="http://yahoo.com" rel="nofollow noreferrer noopener" target="_blank">http://yahoo.com</a> and search for <em>sports</em> and <strong>answers</strong>.
-Here is an iframe 
+Here is an iframe
 blah blah blah
 <a href="http://owncast.online" rel="nofollow noreferrer noopener" target="_blank">test link</a>
 <img class="emoji" src="/img/emoji/bananadance.gif">`
diff --git a/web/components/chat/ChatTextField/ChatTextField.tsx b/web/components/chat/ChatTextField/ChatTextField.tsx
index f04ecc497..865bcaba2 100644
--- a/web/components/chat/ChatTextField/ChatTextField.tsx
+++ b/web/components/chat/ChatTextField/ChatTextField.tsx
@@ -179,7 +179,7 @@ export const ChatTextField: FC<ChatTextFieldProps> = ({ defaultText, enabled, fo
 
   // Custom emoji images
   const onCustomEmojiSelect = (name: string, emoji: string) => {
-    const html = `<img src="${emoji}" alt="${name}" title=${name} class="emoji" />`;
+    const html = `<img src="${emoji}" alt="${name}" title="${name}" class="emoji" />`;
     insertTextAtCursor(html);
   };
 
diff --git a/web/components/chat/ChatTextField/EmojiPicker.tsx b/web/components/chat/ChatTextField/EmojiPicker.tsx
index c34725198..844b73e2c 100644
--- a/web/components/chat/ChatTextField/EmojiPicker.tsx
+++ b/web/components/chat/ChatTextField/EmojiPicker.tsx
@@ -43,7 +43,7 @@ export const EmojiPicker: FC<EmojiPickerProps> = ({ onEmojiSelect, onCustomEmoji
     });
     picker.addEventListener('emoji:select', event => {
       if (event.url) {
-        onCustomEmojiSelect(event.name, event.url);
+        onCustomEmojiSelect(event.label, event.url);
       } else {
         onEmojiSelect(event.emoji);
       }
diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
index 0fe581201..829601035 100644
--- a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
+++ b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
@@ -81,6 +81,7 @@ export const ChatUserMessage: FC<ChatUserMessageProps> = ({
   if (isAuthorBot) {
     badgeNodes.push(<BotUserBadge key="bot" userColor={displayColor} />);
   }
+
   return (
     <div
       className={cn(