diff --git a/src/app/molecules/message/Message.jsx b/src/app/molecules/message/Message.jsx index b9db3aa..054f60b 100644 --- a/src/app/molecules/message/Message.jsx +++ b/src/app/molecules/message/Message.jsx @@ -172,13 +172,42 @@ const MessageBody = React.memo(({ // if body is not string it is a React element. if (typeof body !== 'string') return
{body}
; - const content = isCustomHTML + let content = isCustomHTML ? twemojify(sanitizeCustomHtml(body), undefined, true, false) - :

{twemojify(body, undefined, true)}

; + : twemojify(body, undefined, true); + + // Determine if this message should render with large emojis + // Criteria: + // - Contains only emoji + // - Contains no more than 10 emoji + let emojiOnly = false; + if (content.type === 'img') { + // If this messages contains only a single (inline) image + emojiOnly = true; + } else if (content.constructor.name === 'Array') { + // Otherwise, it might be an array of images / texb + + // Count the number of emojis + const nEmojis = content.filter((e) => e.type === 'img').length; + + // Make sure there's no text besides whitespace + if (nEmojis <= 10 && content.every((element) => ( + (typeof element === 'object' && element.type === 'img') + || (typeof element === 'string' && /^\s*$/g.test(element)) + ))) { + emojiOnly = true; + } + } + + if (!isCustomHTML) { + // If this is a plaintext message, wrap it in a

element (automatically applying + // white-space: pre-wrap) in order to preserve newlines + content = (

{content}

); + } return (
-
+
{ msgType === 'm.emote' && ( <> {'* '} diff --git a/src/app/molecules/message/Message.scss b/src/app/molecules/message/Message.scss index c72a0b7..8f9c0b4 100644 --- a/src/app/molecules/message/Message.scss +++ b/src/app/molecules/message/Message.scss @@ -198,6 +198,7 @@ opacity: 0; } } + .data-mx-spoiler--visible { background-color: var(--bg-surface-active) !important; color: inherit !important;