Replies

res/css/_components.scss

@@ -53,7 +53,7 @@
 @import "./views/elements/_InlineSpinner.scss";
 @import "./views/elements/_MemberEventListSummary.scss";
 @import "./views/elements/_ProgressBar.scss";
-@import "./views/elements/_Quote.scss";
+@import "./views/elements/_ReplyThread.scss";
 @import "./views/elements/_RichText.scss";
 @import "./views/elements/_RoleButton.scss";
 @import "./views/elements/_Spinner.scss";
@@ -89,7 +89,7 @@
 @import "./views/rooms/_PinnedEventTile.scss";
 @import "./views/rooms/_PinnedEventsPanel.scss";
 @import "./views/rooms/_PresenceLabel.scss";
-@import "./views/rooms/_QuotePreview.scss";
+@import "./views/rooms/_ReplyPreview.scss";
 @import "./views/rooms/_RoomDropTarget.scss";
 @import "./views/rooms/_RoomHeader.scss";
 @import "./views/rooms/_RoomList.scss";

res/css/views/elements/_Quote.scss → res/css/views/elements/_ReplyThread.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2017 Vector Creations Ltd
+Copyright 2018 Vector Creations Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,13 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_Quote .mx_DateSeparator {
+.mx_ReplyThread .mx_DateSeparator {
     font-size: 1em !important;
     margin-bottom: 0;
     padding-bottom: 1px;
     bottom: -5px;
 }
 
-.mx_Quote_show {
+.mx_ReplyThread_show {
     cursor: pointer;
 }
+
+blockquote.mx_ReplyThread {
+    margin-left: 0;
+    padding-left: 10px;
+    border-left: 4px solid $blockquote-bar-color;
+}

res/css/views/rooms/_EventTile.scss

@@ -84,7 +84,7 @@ limitations under the License.
     position: absolute;
 }
 
-.mx_EventTile_line {
+.mx_EventTile_line, .mx_EventTile_reply {
     position: relative;
     /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
     margin-right: 110px;
@@ -96,7 +96,7 @@ limitations under the License.
     line-height: 22px;
 }
 
-.mx_EventTile_quote {
+.mx_EventTile_reply {
     margin-right: 10px;
 }
 
@@ -119,7 +119,7 @@ limitations under the License.
     background-color: $event-selected-color;
 }
 
-.mx_EventTile:hover .mx_EventTile_line:not(.mx_EventTile_quote),
+.mx_EventTile:hover .mx_EventTile_line,
 .mx_EventTile.menu .mx_EventTile_line
 {
     background-color: $event-selected-color;
@@ -157,7 +157,8 @@ limitations under the License.
     color: $event-notsent-color;
 }
 
-.mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody {
+.mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody,
+.mx_EventTile_redacted .mx_EventTile_reply .mx_UnknownBody {
     display: block;
     width: 100%;
     height: 22px;
@@ -202,10 +203,10 @@ limitations under the License.
     text-decoration: none;
 }
 
-.mx_EventTile_last .mx_MessageTimestamp,
-.mx_EventTile:hover .mx_MessageTimestamp,
-.mx_EventTile.menu .mx_MessageTimestamp
-{
+// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
+.mx_EventTile_last > div > a > .mx_MessageTimestamp,
+.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
+.mx_EventTile.menu > div > a > .mx_MessageTimestamp {
     visibility: visible;
 }
 
@@ -235,12 +236,7 @@ limitations under the License.
 }
 
 .mx_EventTile:hover .mx_EventTile_editButton,
-.mx_EventTile.menu .mx_EventTile_editButton
-{
-    visibility: visible;
-}
-
-.mx_EventTile.menu .mx_MessageTimestamp {
+.mx_EventTile.menu .mx_EventTile_editButton {
     visibility: visible;
 }
 
@@ -358,8 +354,9 @@ limitations under the License.
     border-left: $e2e-unverified-color 5px solid;
 }
 
-.mx_EventTile:hover.mx_EventTile_verified .mx_MessageTimestamp,
-.mx_EventTile:hover.mx_EventTile_unverified .mx_MessageTimestamp {
+// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp,
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp {
     left: 3px;
     width: auto;
 }
@@ -370,8 +367,9 @@ limitations under the License.
 }
 */
 
-.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_e2eIcon,
-.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_e2eIcon {
+// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon,
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon {
     display: block;
     left: 41px;
 }
@@ -466,7 +464,7 @@ limitations under the License.
         // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
         padding-top: 0px;
         font-size: 13px;
-        .mx_EventTile_line {
+        .mx_EventTile_line, .mx_EventTile_reply {
             line-height: 20px;
         }
         .mx_EventTile_avatar {
@@ -484,21 +482,21 @@ limitations under the License.
         .mx_EventTile_avatar {
             top: 2px;
         }
-        .mx_EventTile_line {
+        .mx_EventTile_line, .mx_EventTile_reply {
             padding-top: 0px;
             padding-bottom: 1px;
         }
     }
 
     .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
         padding-top: 0;
-        .mx_EventTile_line {
+        .mx_EventTile_line, .mx_EventTile_reply {
             padding-top: 0px;
             padding-bottom: 0px;
         }
     }
 
-    .mx_EventTile_line {
+    .mx_EventTile_line, .mx_EventTile_reply {
         padding-top: 0px;
         padding-bottom: 0px;
     }

res/css/views/rooms/_ReplyPreview.scss

@@ -0,0 +1,52 @@
+/*
+Copyright 2018 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_ReplyPreview {
+    position: absolute;
+    bottom: 0;
+    z-index: 1000;
+    width: 100%;
+    border: 1px solid $primary-hairline-color;
+    background: $primary-bg-color;
+    border-bottom: none;
+    border-radius: 4px 4px 0 0;
+    max-height: 50vh;
+    overflow: auto
+}
+
+.mx_ReplyPreview_section {
+    border-bottom: 1px solid $primary-hairline-color;
+}
+
+.mx_ReplyPreview_header {
+    margin: 12px;
+    color: $primary-fg-color;
+    font-weight: 400;
+    opacity: 0.4;
+}
+
+.mx_ReplyPreview_title {
+    float: left;
+}
+
+.mx_ReplyPreview_cancel {
+    float: right;
+    cursor: pointer;
+}
+
+.mx_ReplyPreview_clear {
+    clear: both;
+}

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'], // used to allow explicit removal of a reply fallback blockquote, value ignored
         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;
     }
@@ -471,7 +481,7 @@ export function bodyToHtml(content, highlights, opts={}) {
 
     return isHtml ?
         <span className={className} dangerouslySetInnerHTML={{ __html: safeBody }} dir="auto" /> :
-        <span className={className} dir="auto">{ content.body }</span>;
+        <span className={className} dir="auto">{ strippedBody }</span>;
 }
 
 export function emojifyText(text) {

src/components/structures/RoomView.js

@@ -908,17 +908,17 @@ module.exports = React.createClass({
         this.setState({ draggingFile: false });
     },
 
-    uploadFile: function(file) {
+    uploadFile: async function(file) {
         if (MatrixClientPeg.get().isGuest()) {
             dis.dispatch({action: 'view_set_mxid'});
             return;
         }
 
-        ContentMessages.sendContentToRoom(
-            file, this.state.room.roomId, MatrixClientPeg.get(),
-        ).catch((error) => {
+        try {
+            await ContentMessages.sendContentToRoom(file, this.state.room.roomId, MatrixClientPeg.get());
+        } catch (error) {
             if (error.name === "UnknownDeviceError") {
-                // Let the staus bar handle this
+                // Let the status bar handle this
                 return;
             }
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
@@ -928,6 +928,14 @@ module.exports = React.createClass({
                 description: ((error && error.message)
                     ? error.message : _t("Server may be unavailable, overloaded, or the file too big")),
             });
+
+            // bail early to avoid calling the dispatch below
+            return;
+        }
+
+        // Send message_sent callback, for things like _checkIfAlone because after all a file is still a message.
+        dis.dispatch({
+            action: 'message_sent',
         });
     },