Merge branches 'develop' and 't3chguy/prop-types' of github.com:matrix-org/matrix-react-sdk into t3chguy/prop-types

# Conflicts:
#	test/components/structures/MessagePanel-test.js

src/components/structures/RoomView.js

@@ -27,8 +27,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import Promise from 'bluebird';
-import filesize from 'filesize';
 import classNames from 'classnames';
+import {Room} from "matrix-js-sdk";
 import { _t } from '../../languageHandler';
 import {RoomPermalinkCreator} from '../../matrix-to';
 
@@ -64,6 +64,12 @@ if (DEBUG) {
     debuglog = console.log.bind(console);
 }
 
+const RoomContext = PropTypes.shape({
+    canReact: PropTypes.bool.isRequired,
+    canReply: PropTypes.bool.isRequired,
+    room: PropTypes.instanceOf(Room),
+});
+
 module.exports = React.createClass({
     displayName: 'RoomView',
     propTypes: {
@@ -88,7 +94,7 @@ module.exports = React.createClass({
         //  * name (string) The room's name
         //  * avatarUrl (string) The mxc:// avatar URL for the room
         //  * inviterName (string) The display name of the person who
-        //  *                      invited us tovthe room
+        //  *                      invited us to the room
         oobData: PropTypes.object,
 
         // is the RightPanel collapsed?
@@ -156,6 +162,24 @@ module.exports = React.createClass({
             // We load this later by asking the js-sdk to suggest a version for us.
             // This object is the result of Room#getRecommendedVersion()
             upgradeRecommendation: null,
+
+            canReact: false,
+            canReply: false,
+        };
+    },
+
+    childContextTypes: {
+        room: RoomContext,
+    },
+
+    getChildContext: function() {
+        const {canReact, canReply, room} = this.state;
+        return {
+            room: {
+                canReact,
+                canReply,
+                room,
+            },
         };
     },
 
@@ -165,6 +189,7 @@ module.exports = React.createClass({
         MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
         MatrixClientPeg.get().on("Room.name", this.onRoomName);
         MatrixClientPeg.get().on("Room.accountData", this.onRoomAccountData);
+        MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
         MatrixClientPeg.get().on("RoomState.members", this.onRoomStateMember);
         MatrixClientPeg.get().on("Room.myMembership", this.onMyMembership);
         MatrixClientPeg.get().on("accountData", this.onAccountData);
@@ -672,6 +697,7 @@ module.exports = React.createClass({
         this._loadMembersIfJoined(room);
         this._calculateRecommendedVersion(room);
         this._updateE2EStatus(room);
+        this._updatePermissions(room);
     },
 
     _calculateRecommendedVersion: async function(room) {
@@ -795,6 +821,15 @@ module.exports = React.createClass({
         }
     },
 
+    onRoomStateEvents: function(ev, state) {
+        // ignore if we don't have a room yet
+        if (!this.state.room || this.state.room.roomId !== state.roomId) {
+            return;
+        }
+
+        this._updatePermissions(this.state.room);
+    },
+
     onRoomStateMember: function(ev, state, member) {
         // ignore if we don't have a room yet
         if (!this.state.room) {
@@ -813,6 +848,17 @@ module.exports = React.createClass({
         if (room.roomId === this.state.roomId) {
             this.forceUpdate();
             this._loadMembersIfJoined(room);
+            this._updatePermissions(room);
+        }
+    },
+
+    _updatePermissions: function(room) {
+        if (room) {
+            const me = MatrixClientPeg.get().getUserId();
+            const canReact = room.getMyMembership() === "join" && room.currentState.maySendEvent("m.reaction", me);
+            const canReply = room.maySendMessage();
+
+            this.setState({canReact, canReply});
         }
     },
 
@@ -1916,3 +1962,5 @@ module.exports = React.createClass({
         );
     },
 });
+
+module.exports.RoomContext = RoomContext;

src/components/views/messages/MessageActionBar.js

@@ -24,7 +24,7 @@ import dis from '../../../dispatcher';
 import Modal from '../../../Modal';
 import { createMenu } from '../../structures/ContextualMenu';
 import { isContentActionable, canEditContent } from '../../../utils/EventUtils';
-import MatrixClientPeg from "../../../MatrixClientPeg";
+import {RoomContext} from "../../structures/RoomView";
 
 export default class MessageActionBar extends React.PureComponent {
     static propTypes = {
@@ -37,44 +37,16 @@ export default class MessageActionBar extends React.PureComponent {
         onFocusChange: PropTypes.func,
     };
 
-    constructor(props, context) {
-        super(props, context);
-
-        this.state = {
-            canReact: true,
-            canReply: true,
+    static contextTypes = {
+        room: RoomContext,
     };
-    }
 
     componentDidMount() {
         this.props.mxEvent.on("Event.decrypted", this.onDecrypted);
-        const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
-        if (room) {
-            room.on("RoomMember.powerLevel", this.onPermissionsChange);
-            room.on("RoomMember.membership", this.onPermissionsChange);
-            this.onPermissionsChange();
-        }
     }
 
     componentWillUnmount() {
         this.props.mxEvent.removeListener("Event.decrypted", this.onDecrypted);
-        const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
-        if (room) {
-            room.removeListener("RoomMember.powerLevel", this.onPermissionsChange);
-            room.removeListener("RoomMember.membership", this.onPermissionsChange);
-        }
-    }
-
-    onPermissionsChange() {
-        const cli = MatrixClientPeg.get();
-        const room = cli.getRoom(this.props.mxEvent.getRoomId());
-        if (room) {
-            const me = cli.getUserId();
-            const canReact = room.getMyMembership() === "join" && room.currentState.maySendEvent("m.reaction", me);
-            const canReply = room.maySendMessage();
-
-            this.setState({canReact, canReply});
-        }
     }
 
     onDecrypted = () => {
@@ -173,10 +145,10 @@ export default class MessageActionBar extends React.PureComponent {
         let editButton;
 
         if (isContentActionable(this.props.mxEvent)) {
-            if (this.state.canReact) {
+            if (this.context.room.canReact) {
                 reactButton = this.renderReactButton();
             }
-            if (this.state.canReply) {
+            if (this.context.room.canReply) {
                 replyButton = <span className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
                     title={_t("Reply")}
                     onClick={this.onReplyClick}

src/utils/MessageDiffUtils.js

@@ -219,6 +219,32 @@ function renderDifferenceInDOM(originalRootNode, diff, diffMathPatch) {
     }
 }
 
+function routeIsEqual(r1, r2) {
+    return r1.length === r2.length && !r1.some((e, i) => e !== r2[i]);
+}
+
+// workaround for https://github.com/fiduswriter/diffDOM/issues/90
+function filterCancelingOutDiffs(originalDiffActions) {
+    const diffActions = originalDiffActions.slice();
+
+    for (let i = 0; i < diffActions.length; ++i) {
+        const diff = diffActions[i];
+        if (diff.action === "removeTextElement") {
+            const nextDiff = diffActions[i + 1];
+            const cancelsOut = nextDiff &&
+                nextDiff.action === "addTextElement" &&
+                nextDiff.text === diff.text &&
+                routeIsEqual(nextDiff.route, diff.route);
+
+            if (cancelsOut) {
+                diffActions.splice(i, 2);
+            }
+        }
+    }
+
+    return diffActions;
+}
+
 /**
  * Renders a message with the changes made in an edit shown visually.
  * @param {object} originalContent the content for the base message
@@ -233,7 +259,9 @@ export function editBodyDiffToHtml(originalContent, editContent) {
     // diffActions is an array of objects with at least a `action` and `route`
     // property. `action` tells us what the diff object changes, and `route` where.
     // `route` is a path on the DOM tree expressed as an array of indices.
-    const diffActions = dd.diff(originalBody, editBody);
+    const originaldiffActions = dd.diff(originalBody, editBody);
+    // work around https://github.com/fiduswriter/diffDOM/issues/90
+    const diffActions = filterCancelingOutDiffs(originaldiffActions);
     // for diffing text fragments
     const diffMathPatch = new DiffMatchPatch();
     // parse the base html message as a DOM tree, to which we'll apply the differences found.

test/components/structures/MessagePanel-test.js

@@ -42,11 +42,16 @@ const room = new Matrix.Room();
 const WrappedMessagePanel = React.createClass({
     childContextTypes: {
         matrixClient: PropTypes.object,
+        room: PropTypes.object,
     },
 
     getChildContext: function() {
         return {
             matrixClient: client,
+            room: {
+                canReact: true,
+                canReply: true,
+            },
         };
     },