From 4a9f4ba5eb889be78bba574ef8c3ea6269ef1775 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonas=20Sch=C3=BCrmann?= <jonasschuermann@aol.de>
Date: Thu, 17 May 2018 20:12:51 +0200
Subject: [PATCH] Fix vector-im/riot-web#6523 Emoji rendering destroys
 paragraphs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This regression was probably introduced in
4f4441fb07dcdfb831e4b54b9f8d7e611c172f29 and is caused by the fact that
the variable `isHtml` conflates two different meanings:

- The event contains an HTML message
- The event message is displayed using HTML

This is an important difference. Plain text messages that contain
emojies are rendered with an HTML string and thus have to be sanitized
etc. But they must not use the MarkDown CSS styles for HTML messages.

The MarkDown CSS styles include `whitespace: normal` because HTML events
use `<br/>`-tags for line breaks. Plain text messages with emojies
obviously don't use `<br/>`-tags, so these styles must not be applied.

Signed-off-by: Jonas Schürmann <jonasschuermann@aol.de>
---
 src/HtmlUtils.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/HtmlUtils.js b/src/HtmlUtils.js
index 58572cf144..7ca404be31 100644
--- a/src/HtmlUtils.js
+++ b/src/HtmlUtils.js
@@ -413,12 +413,13 @@ class TextHighlighter extends BaseHighlighter {
      * opts.stripReplyFallback: optional argument specifying the event is a reply and so fallback needs removing
      */
 export function bodyToHtml(content, highlights, opts={}) {
-    let isHtml = content.format === "org.matrix.custom.html" && content.formatted_body;
+    const isHtmlMessage = content.format === "org.matrix.custom.html" && content.formatted_body;
 
     let bodyHasEmoji = false;
 
     let strippedBody;
     let safeBody;
+    let isDisplayedWithHtml;
     // XXX: We sanitize the HTML whilst also highlighting its text nodes, to avoid accidentally trying
     // to highlight HTML tags themselves.  However, this does mean that we don't highlight textnodes which
     // are interrupted by HTML tags (not that we did before) - e.g. foo<span/>bar won't get highlighted
@@ -439,17 +440,18 @@ export function bodyToHtml(content, highlights, opts={}) {
         if (opts.stripReplyFallback && formattedBody) formattedBody = ReplyThread.stripHTMLReply(formattedBody);
         strippedBody = opts.stripReplyFallback ? ReplyThread.stripPlainReply(content.body) : content.body;
 
-        bodyHasEmoji = containsEmoji(isHtml ? formattedBody : content.body);
+        bodyHasEmoji = containsEmoji(isHtmlMessage ? formattedBody : content.body);
 
 
         // Only generate safeBody if the message was sent as org.matrix.custom.html
-        if (isHtml) {
+        if (isHtmlMessage) {
+            isDisplayedWithHtml = true;
             safeBody = sanitizeHtml(formattedBody, sanitizeHtmlParams);
         } else {
             // ... or if there are emoji, which we insert as HTML alongside the
             // escaped plaintext body.
             if (bodyHasEmoji) {
-                isHtml = true;
+                isDisplayedWithHtml = true;
                 safeBody = sanitizeHtml(escape(strippedBody), sanitizeHtmlParams);
             }
         }
@@ -475,10 +477,10 @@ export function bodyToHtml(content, highlights, opts={}) {
     const className = classNames({
         'mx_EventTile_body': true,
         'mx_EventTile_bigEmoji': emojiBody,
-        'markdown-body': isHtml,
+        'markdown-body': isHtmlMessage,
     });
 
-    return isHtml ?
+    return isDisplayedWithHtml ?
         <span className={className} dangerouslySetInnerHTML={{ __html: safeBody }} dir="auto" /> :
         <span className={className} dir="auto">{ strippedBody }</span>;
 }