Merge branch 'big-emojis-fix' into 'develop'

Big emojis: ignore mentions

See merge request soapbox-pub/soapbox-fe!592

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) });
     }
   }
 

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');

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;

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;
     }
   }
 }