Replies

src/HtmlUtils.js

@@ -17,6 +17,8 @@ limitations under the License.
 
 'use strict';
 
+import ReplyThread from "./components/views/elements/ReplyThread";
+
 const React = require('react');
 const sanitizeHtml = require('sanitize-html');
 const highlight = require('highlight.js');
@@ -184,6 +186,7 @@ const sanitizeHtmlParams = {
     ],
     allowedAttributes: {
         // custom ones first:
+        blockquote: ['data-mx-reply'], // for reply fallback
         font: ['color', 'data-mx-bg-color', 'data-mx-color', 'style'], // custom to matrix
         span: ['data-mx-bg-color', 'data-mx-color', 'style'], // custom to matrix
         a: ['href', 'name', 'target', 'rel'], // remote target: custom to matrix
@@ -408,12 +411,14 @@ class TextHighlighter extends BaseHighlighter {
      *
      * opts.highlightLink: optional href to add to highlighted words
      * opts.disableBigEmoji: optional argument to disable the big emoji class.
+     * 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");
+    let isHtml = content.format === "org.matrix.custom.html" && content.formatted_body;
 
     let bodyHasEmoji = false;
 
+    let strippedBody;
     let safeBody;
     // 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
@@ -431,17 +436,22 @@ export function bodyToHtml(content, highlights, opts={}) {
             };
         }
 
-        bodyHasEmoji = containsEmoji(isHtml ? content.formatted_body : content.body);
+        let formattedBody = content.formatted_body;
+        if (opts.stripReplyFallback && formattedBody) formattedBody = ReplyThread.stripHTMLReply(formattedBody);
+        strippedBody = opts.stripReplyFallback ? ReplyThread.stripPlainReply(content.body) : content.body;
+
+        bodyHasEmoji = containsEmoji(isHtml ? formattedBody : content.body);
+
 
         // Only generate safeBody if the message was sent as org.matrix.custom.html
         if (isHtml) {
-            safeBody = sanitizeHtml(content.formatted_body, sanitizeHtmlParams);
+            safeBody = sanitizeHtml(formattedBody, sanitizeHtmlParams);
         } else {
             // ... or if there are emoji, which we insert as HTML alongside the
             // escaped plaintext body.
             if (bodyHasEmoji) {
                 isHtml = true;
-                safeBody = sanitizeHtml(escape(content.body), sanitizeHtmlParams);
+                safeBody = sanitizeHtml(escape(strippedBody), sanitizeHtmlParams);
             }
         }
 
@@ -458,7 +468,7 @@ export function bodyToHtml(content, highlights, opts={}) {
     let emojiBody = false;
     if (!opts.disableBigEmoji && bodyHasEmoji) {
         EMOJI_REGEX.lastIndex = 0;
-        const contentBodyTrimmed = content.body !== undefined ? content.body.trim() : '';
+        const contentBodyTrimmed = strippedBody !== undefined ? strippedBody.trim() : '';
         const match = EMOJI_REGEX.exec(contentBodyTrimmed);
         emojiBody = match && match[0] && match[0].length === contentBodyTrimmed.length;
     }
@@ -469,9 +479,11 @@ export function bodyToHtml(content, highlights, opts={}) {
         'markdown-body': isHtml,
     });
 
-    return isHtml ?
-        <span className={className} dangerouslySetInnerHTML={{ __html: safeBody }} dir="auto" /> :
-        <span className={className} dir="auto">{ content.body }</span>;
+    if (isHtml) {
+        return <span className={className} dangerouslySetInnerHTML={{ __html: safeBody }} dir="auto" />;
+    }
+
+    return <span className={className} dir="auto">{ strippedBody }</span>;
 }
 
 export function emojifyText(text) {

src/components/structures/RoomView.js

@@ -45,6 +45,7 @@ import { KeyCode, isOnlyCtrlOrCmdKeyEvent } from '../../Keyboard';
 import RoomViewStore from '../../stores/RoomViewStore';
 import RoomScrollStateStore from '../../stores/RoomScrollStateStore';
 import SettingsStore from "../../settings/SettingsStore";
+import Reply from "../views/elements/ReplyThread";
 
 const DEBUG = false;
 let debuglog = function() {};
@@ -916,9 +917,13 @@ module.exports = React.createClass({
 
         ContentMessages.sendContentToRoom(
             file, this.state.room.roomId, MatrixClientPeg.get(),
-        ).catch((error) => {
+        ).done(() => {
+            dis.dispatch({
+                action: 'message_sent',
+            });
+        }, (error) => {
             if (error.name === "UnknownDeviceError") {
-                // Let the staus bar handle this
+                // Let the status bar handle this
                 return;
             }
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");