Make inline emojis bigger

Author: rkfg

res/css/views/rooms/_EventTile.scss

@@ -145,6 +145,11 @@ $left-gutter: 64px;
     margin-right: 10px;
 }
 
+.mx_EventTile_Emoji {
+    font-size: 2rem;
+    vertical-align: bottom;
+}
+
 /* HACK to override line-height which is already marked important elsewhere */
 .mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
     font-size: 48px !important;

src/HtmlUtils.tsx

@@ -361,6 +361,46 @@ interface IOpts {
     ref?: React.Ref<any>;
 }
 
+/**
+ * Wraps emojis in <span> to style them separately from the rest of message. Consecutive emojis (and modifiers) are wrapped
+ * in the same <span>.
+ * @param {string} message the text to format
+ * @param {boolean} isHtmlMessage whether the message contains HTML
+ * @returns if isHtmlMessage is true, returns an array of strings, otherwise return an array of React Elements for emojis
+ * and plain text for everything else
+ */
+function formatEmojis(message: string, isHtmlMessage: boolean): (JSX.Element | string)[] {
+    const emojiToSpan = isHtmlMessage ? (emoji: string) => `<span class='mx_EventTile_Emoji'>${emoji}</span>` :
+        (emoji: string, key: number) => <span key={key} className='mx_EventTile_Emoji'>{emoji}</span>;
+    const result: (JSX.Element | string)[] = [];
+    let text = '';
+    let emojis = '';
+    let key = 0;
+    for (const char of message) {
+        if (mightContainEmoji(char)) {
+            if (text) {
+                result.push(text);
+                text = '';
+            }
+            emojis += char;
+        } else {
+            if (emojis) {
+                result.push(emojiToSpan(emojis, key));
+                key++;
+                emojis = '';
+            }
+            text += char;
+        }
+    }
+    if (text) {
+        result.push(text);
+    }
+    if (emojis) {
+        result.push(emojiToSpan(emojis, key));
+    }
+    return result;
+}
+
 /* turn a matrix event body into html
  *
  * content: 'content' of the MatrixEvent
@@ -414,6 +454,9 @@ export function bodyToHtml(content: IContent, highlights: string[], opts: IOpts
         if (isHtmlMessage) {
             isDisplayedWithHtml = true;
             safeBody = sanitizeHtml(formattedBody, sanitizeParams);
+            if (bodyHasEmoji) {
+                safeBody = formatEmojis(safeBody, true).join('');
+            }
         }
     } finally {
         delete sanitizeParams.textFilter;
@@ -455,14 +498,21 @@ export function bodyToHtml(content: IContent, highlights: string[], opts: IOpts
         'markdown-body': isHtmlMessage && !emojiBody,
     });
 
+    let emojiBodyElements: JSX.Element[];
+    if (!isDisplayedWithHtml && bodyHasEmoji && !emojiBody) {
+        emojiBodyElements = formatEmojis(strippedBody, false) as JSX.Element[];
+    }
+
     return isDisplayedWithHtml ?
         <span
             key="body"
             ref={opts.ref}
             className={className}
             dangerouslySetInnerHTML={{ __html: safeBody }}
             dir="auto"
-        /> : <span key="body" ref={opts.ref} className={className} dir="auto">{ strippedBody }</span>;
+        /> : <span key="body" ref={opts.ref} className={className} dir="auto">
+            {emojiBodyElements || strippedBody}
+        </span>;
 }
 
 /**