Merge branch 'develop' into matthew/twemoji

src/components/structures/MessagePanel.js

@@ -24,6 +24,7 @@ import {wantsDateSeparator} from '../../DateUtils';
 import sdk from '../../index';
 
 import MatrixClientPeg from '../../MatrixClientPeg';
+import SettingsStore from '../../settings/SettingsStore';
 
 const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
 const continuedTypes = ['m.sticker', 'm.room.message'];
@@ -248,6 +249,10 @@ module.exports = React.createClass({
             return false; // ignored = no show (only happens if the ignore happens after an event was received)
         }
 
+        if (SettingsStore.getValue("showHiddenEventsInTimeline")) {
+            return true;
+        }
+
         const EventTile = sdk.getComponent('rooms.EventTile');
         if (!EventTile.haveTileForEvent(mxEv)) {
             return false; // no tile = no show
@@ -450,14 +455,10 @@ module.exports = React.createClass({
 
     _getTilesForEvent: function(prevEvent, mxEv, last) {
         const EventTile = sdk.getComponent('rooms.EventTile');
-        const MessageEditor = sdk.getComponent('elements.MessageEditor');
         const DateSeparator = sdk.getComponent('messages.DateSeparator');
         const ret = [];
 
-        if (this.props.editEvent && this.props.editEvent.getId() === mxEv.getId()) {
-            return [<MessageEditor key={mxEv.getId()} event={mxEv} />];
-        }
-
+        const isEditing = this.props.editEvent && this.props.editEvent.getId() === mxEv.getId();
         // is this a continuation of the previous message?
         let continuation = false;
 
@@ -527,6 +528,7 @@ module.exports = React.createClass({
                     continuation={continuation}
                     isRedacted={mxEv.isRedacted()}
                     replacingEventId={mxEv.replacingEventId()}
+                    isEditing={isEditing}
                     onHeightChanged={this._onHeightChanged}
                     readReceipts={readReceipts}
                     readReceiptMap={this._readReceiptMap}

src/components/views/elements/MemberEventListSummary.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -13,11 +14,13 @@ 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.
 */
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import sdk from '../../../index';
-const MemberAvatar = require('../avatars/MemberAvatar.js');
+import MemberAvatar from '../avatars/MemberAvatar';
 import { _t } from '../../../languageHandler';
+import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
 
 module.exports = React.createClass({
     displayName: 'MemberEventListSummary',
@@ -105,7 +108,7 @@ module.exports = React.createClass({
                 );
             });
 
-            const desc = this._renderCommaSeparatedList(descs);
+            const desc = formatCommaSeparatedList(descs);
 
             return _t('%(nameList)s %(transitionList)s', { nameList: nameList, transitionList: desc });
         });
@@ -128,7 +131,7 @@ module.exports = React.createClass({
      * included before "and [n] others".
      */
     _renderNameList: function(users) {
-        return this._renderCommaSeparatedList(users, this.props.summaryLength);
+        return formatCommaSeparatedList(users, this.props.summaryLength);
     },
 
     /**
@@ -279,35 +282,6 @@ module.exports = React.createClass({
         return res;
     },
 
-    /**
-     * Constructs a written English string representing `items`, with an optional limit on
-     * the number of items included in the result. If specified and if the length of
-     *`items` is greater than the limit, the string "and n others" will be appended onto
-     * the result.
-     * If `items` is empty, returns the empty string. If there is only one item, return
-     * it.
-     * @param {string[]} items the items to construct a string from.
-     * @param {number?} itemLimit the number by which to limit the list.
-     * @returns {string} a string constructed by joining `items` with a comma between each
-     * item, but with the last item appended as " and [lastItem]".
-     */
-    _renderCommaSeparatedList(items, itemLimit) {
-        const remaining = itemLimit === undefined ? 0 : Math.max(
-            items.length - itemLimit, 0,
-        );
-        if (items.length === 0) {
-            return "";
-        } else if (items.length === 1) {
-            return items[0];
-        } else if (remaining > 0) {
-            items = items.slice(0, itemLimit);
-            return _t("%(items)s and %(count)s others", { items: items.join(', '), count: remaining } );
-        } else {
-            const lastItem = items.pop();
-            return _t("%(items)s and %(lastItem)s", { items: items.join(', '), lastItem: lastItem });
-        }
-    },
-
     _renderAvatars: function(roomMembers) {
         const avatars = roomMembers.slice(0, this.props.avatarsMaxLength).map((m) => {
             return (

src/components/views/elements/MessageEditor.js

@@ -107,10 +107,12 @@ export default class MessageEditor extends React.Component {
         } else if (event.key === "Enter") {
             this._sendEdit();
             event.preventDefault();
+        } else if (event.key === "Escape") {
+            this._cancelEdit();
         }
     }
 
-    _onCancelClicked = () => {
+    _cancelEdit = () => {
         dis.dispatch({action: "edit_event", event: null});
     }
 
@@ -185,7 +187,7 @@ export default class MessageEditor extends React.Component {
                     ref={ref => this._editorRef = ref}
                 ></div>
                 <div className="mx_MessageEditor_buttons">
-                    <AccessibleButton kind="secondary" onClick={this._onCancelClicked}>{_t("Cancel")}</AccessibleButton>
+                    <AccessibleButton kind="secondary" onClick={this._cancelEdit}>{_t("Cancel")}</AccessibleButton>
                     <AccessibleButton kind="primary" onClick={this._sendEdit}>{_t("Save")}</AccessibleButton>
                 </div>
             </div>;

src/components/views/messages/MessageEvent.js

@@ -90,6 +90,7 @@ module.exports = React.createClass({
             tileShape={this.props.tileShape}
             maxImageHeight={this.props.maxImageHeight}
             replacingEventId={this.props.replacingEventId}
+            isEditing={this.props.isEditing}
             onHeightChanged={this.props.onHeightChanged} />;
     },
 });

src/components/views/messages/ReactionsRowButtonTooltip.js

@@ -21,6 +21,7 @@ import MatrixClientPeg from '../../../MatrixClientPeg';
 import sdk from '../../../index';
 import { unicodeToShortcode } from '../../../HtmlUtils';
 import { _t } from '../../../languageHandler';
+import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
 
 export default class ReactionsRowButtonTooltip extends React.PureComponent {
     static propTypes = {
@@ -54,7 +55,7 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent {
                 {
                     reactors: () => {
                         return <div className="mx_ReactionsRowButtonTooltip_senders">
-                            {senders.join(", ")}
+                            {formatCommaSeparatedList(senders, 6)}
                         </div>;
                     },
                     reactedWith: (sub) => {

src/components/views/messages/TextualBody.js

@@ -89,7 +89,9 @@ module.exports = React.createClass({
 
     componentDidMount: function() {
         this._unmounted = false;
-        this._applyFormatting();
+        if (!this.props.isEditing) {
+            this._applyFormatting();
+        }
     },
 
     _applyFormatting() {
@@ -128,11 +130,14 @@ module.exports = React.createClass({
     },
 
     componentDidUpdate: function(prevProps) {
-        const messageWasEdited = prevProps.replacingEventId !== this.props.replacingEventId;
-        if (messageWasEdited) {
-            this._applyFormatting();
+        if (!this.props.isEditing) {
+            const stoppedEditing = prevProps.isEditing && !this.props.isEditing;
+            const messageWasEdited = prevProps.replacingEventId !== this.props.replacingEventId;
+            if (messageWasEdited || stoppedEditing) {
+                this._applyFormatting();
+            }
+            this.calculateUrlPreview();
         }
-        this.calculateUrlPreview();
     },
 
     componentWillUnmount: function() {
@@ -148,6 +153,7 @@ module.exports = React.createClass({
                 nextProps.replacingEventId !== this.props.replacingEventId ||
                 nextProps.highlightLink !== this.props.highlightLink ||
                 nextProps.showUrlPreview !== this.props.showUrlPreview ||
+                nextProps.isEditing !== this.props.isEditing ||
                 nextState.links !== this.state.links ||
                 nextState.editedMarkerHovered !== this.state.editedMarkerHovered ||
                 nextState.widgetHidden !== this.state.widgetHidden);
@@ -463,6 +469,10 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        if (this.props.isEditing) {
+            const MessageEditor = sdk.getComponent('elements.MessageEditor');
+            return <MessageEditor event={this.props.mxEvent} />;
+        }
         const mxEvent = this.props.mxEvent;
         const content = mxEvent.getContent();
 

src/components/views/messages/ViewSourceEvent.js

@@ -0,0 +1,67 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+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.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export default class ViewSourceEvent extends React.PureComponent {
+    static propTypes = {
+        /* the MatrixEvent to show */
+        mxEvent: PropTypes.object.isRequired,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            expanded: false,
+        };
+    }
+
+    onToggle = (ev) => {
+        ev.preventDefault();
+        const { expanded } = this.state;
+        this.setState({
+            expanded: !expanded,
+        });
+    }
+
+    render() {
+        const { mxEvent } = this.props;
+        const { expanded } = this.state;
+
+        let content;
+        if (expanded) {
+            content = <pre>{JSON.stringify(mxEvent, null, 4)}</pre>;
+        } else {
+            content = <code>{`{ "type": ${mxEvent.getType()} }`}</code>;
+        }
+
+        const classes = classNames("mx_ViewSourceEvent mx_EventTile_content", {
+            mx_ViewSourceEvent_expanded: expanded,
+        });
+
+        return <span className={classes}>
+            {content}
+            <a
+                className="mx_ViewSourceEvent_toggle"
+                href="#"
+                onClick={this.onToggle}
+            />
+        </span>;
+    }
+}

src/components/views/rooms/EventTile.js

@@ -520,7 +520,10 @@ module.exports = withMatrixClient(React.createClass({
             eventType !== 'm.room.message' && eventType !== 'm.sticker' && eventType != 'm.room.create'
         );
 
-        const tileHandler = getHandlerTile(this.props.mxEvent);
+        let tileHandler = getHandlerTile(this.props.mxEvent);
+        if (!tileHandler && SettingsStore.getValue("showHiddenEventsInTimeline")) {
+            tileHandler = "messages.ViewSourceEvent";
+        }
         // This shouldn't happen: the caller should check we support this type
         // before trying to instantiate us
         if (!tileHandler) {
@@ -540,6 +543,7 @@ module.exports = withMatrixClient(React.createClass({
 
         const classes = classNames({
             mx_EventTile: true,
+            mx_EventTile_isEditing: this.props.isEditing,
             mx_EventTile_info: isInfoMessage,
             mx_EventTile_12hr: this.props.isTwelveHour,
             mx_EventTile_encrypting: this.props.eventSendStatus === 'encrypting',
@@ -617,14 +621,14 @@ module.exports = withMatrixClient(React.createClass({
         }
 
         const MessageActionBar = sdk.getComponent('messages.MessageActionBar');
-        const actionBar = <MessageActionBar
+        const actionBar = !this.props.isEditing ? <MessageActionBar
             mxEvent={this.props.mxEvent}
             reactions={this.state.reactions}
             permalinkCreator={this.props.permalinkCreator}
             getTile={this.getTile}
             getReplyThread={this.getReplyThread}
             onFocusChange={this.onActionBarFocusChange}
-        />;
+        /> : undefined;
 
         const timestamp = this.props.mxEvent.getTs() ?
             <MessageTimestamp showTwelveHour={this.props.isTwelveHour} ts={this.props.mxEvent.getTs()} /> : null;
@@ -779,6 +783,7 @@ module.exports = withMatrixClient(React.createClass({
                             <EventTileType ref="tile"
                                            mxEvent={this.props.mxEvent}
                                            replacingEventId={this.props.replacingEventId}
+                                           isEditing={this.props.isEditing}
                                            highlights={this.props.highlights}
                                            highlightLink={this.props.highlightLink}
                                            showUrlPreview={this.props.showUrlPreview}

src/components/views/settings/tabs/user/LabsUserSettingsTab.js

@@ -52,6 +52,7 @@ export default class LabsUserSettingsTab extends React.Component {
                 <div className="mx_SettingsTab_section">
                     {flags}
                     <SettingsFlag name={"enableWidgetScreenshots"} level={SettingLevel.ACCOUNT} />
+                    <SettingsFlag name={"showHiddenEventsInTimeline"} level={SettingLevel.DEVICE} />
                 </div>
             </div>
         );