From 011b5dd19b7c0d3d668667462c37dd3cd75ca397 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 9 Jul 2021 18:39:05 -0500
Subject: [PATCH] Big emojis: ignore mentions

---
 app/soapbox/components/status_content.js                 | 2 +-
 .../features/chats/components/chat_message_list.js       | 2 +-
 app/soapbox/utils/rich_content.js                        | 9 ++++++++-
 app/styles/components/status.scss                        | 2 +-
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/components/status_content.js b/app/soapbox/components/status_content.js
index b08acc805..16e9134a8 100644
--- a/app/soapbox/components/status_content.js
+++ b/app/soapbox/components/status_content.js
@@ -92,7 +92,7 @@ class StatusContent extends React.PureComponent {
 
   setOnlyEmoji = () => {
     if (this.node && this.state.onlyEmoji === undefined) {
-      this.setState({ onlyEmoji: onlyEmoji(this.node, BIG_EMOJI_LIMIT) });
+      this.setState({ onlyEmoji: onlyEmoji(this.node, BIG_EMOJI_LIMIT, true) });
     }
   }
 
diff --git a/app/soapbox/features/chats/components/chat_message_list.js b/app/soapbox/features/chats/components/chat_message_list.js
index a72e49421..d904bc4e8 100644
--- a/app/soapbox/features/chats/components/chat_message_list.js
+++ b/app/soapbox/features/chats/components/chat_message_list.js
@@ -124,7 +124,7 @@ class ChatMessageList extends ImmutablePureComponent {
       link.setAttribute('target', '_blank');
     });
 
-    if (onlyEmoji(c, BIG_EMOJI_LIMIT)) {
+    if (onlyEmoji(c, BIG_EMOJI_LIMIT, false)) {
       c.classList.add('chat-message__bubble--onlyEmoji');
     } else {
       c.classList.remove('chat-message__bubble--onlyEmoji');
diff --git a/app/soapbox/utils/rich_content.js b/app/soapbox/utils/rich_content.js
index dae13fb0c..256450a29 100644
--- a/app/soapbox/utils/rich_content.js
+++ b/app/soapbox/utils/rich_content.js
@@ -1,6 +1,13 @@
 // Returns `true` if the node contains only emojis, up to a limit
-export const onlyEmoji = (node, limit = 1) => {
+export const onlyEmoji = (node, limit = 1, ignoreMentions = true) => {
   if (!node) return false;
+
+  // Remove mentions before checking content
+  if (ignoreMentions) {
+    node = node.cloneNode(true);
+    node.querySelectorAll('a.mention').forEach(m => m.parentNode.removeChild(m));
+  }
+
   if (node.textContent.replaceAll(' ', '') !== '') return false;
   const emojis = Array.from(node.querySelectorAll('img.emojione'));
   if (emojis.length === 0) return false;
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index 9d4ba404a..c3a975bee 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -68,12 +68,12 @@
   }
 
   &--big {
-    font-size: 32px !important;
     line-height: normal !important;
 
     img.emojione {
       width: 36px;
       height: 36px;
+      padding: 5px;
     }
   }
 }