Merge branch 'develop' into luke/fix-rte-inline-code-format

src/components/views/messages/TextualBody.js

@@ -30,6 +30,8 @@ import SdkConfig from '../../../SdkConfig';
 import dis from '../../../dispatcher';
 import { _t } from '../../../languageHandler';
 import UserSettingsStore from "../../../UserSettingsStore";
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import {RoomMember} from 'matrix-js-sdk';
 
 linkifyMatrix(linkify);
 
@@ -80,6 +82,10 @@ module.exports = React.createClass({
     componentDidMount: function() {
         this._unmounted = false;
 
+        // pillifyLinks BEFORE linkifyElement because plain room/user URLs in the composer
+        // are still sent as plaintext URLs. If these are ever pillified in the composer,
+        // we should be pillify them here by doing the linkifying BEFORE the pillifying.
+        this.pillifyLinks(this.refs.content.children);
         linkifyElement(this.refs.content, linkifyMatrix.options);
         this.calculateUrlPreview();
 
@@ -162,6 +168,55 @@ module.exports = React.createClass({
         }
     },
 
+    pillifyLinks: function(nodes) {
+        const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+        const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            if (node.tagName === "A" && node.getAttribute("href")) {
+                const href = node.getAttribute("href");
+                // HtmlUtils transforms `matrix.to` links to local links, so match against
+                // user or room app links.
+                const match = /^#\/(user|room)\/(.*)$/.exec(href) || [];
+                const resourceType = match[1]; // "user" or "room"
+                const resourceId = match[2]; // user ID or room ID
+                if (match && resourceType && resourceId) {
+                    let avatar;
+                    let roomId;
+                    let room;
+                    let member;
+                    switch (resourceType) {
+                        case "user":
+                            roomId = this.props.mxEvent.getRoomId();
+                            room = MatrixClientPeg.get().getRoom(roomId);
+                            member = room.getMember(resourceId) ||
+                                new RoomMember(null, resourceId);
+                            avatar = <MemberAvatar member={member} width={16} height={16} name={resourceId}/>;
+                        break;
+                        case "room":
+                            room = resourceId[0] === '#' ?
+                                MatrixClientPeg.get().getRooms().find((r) => {
+                                    return r.getCanonicalAlias() === resourceId;
+                                }) : MatrixClientPeg.get().getRoom(resourceId);
+                            if (room) {
+                                avatar = <RoomAvatar room={room} width={16} height={16}/>;
+                            }
+                        break;
+                    }
+                    if (avatar) {
+                        const avatarContainer = document.createElement('span');
+                        node.className = "mx_MTextBody_pill " +
+                            (resourceType === "user" ? "mx_UserPill" : "mx_RoomPill");
+                        ReactDOM.render(avatar, avatarContainer);
+                        node.insertBefore(avatarContainer, node.firstChild);
+                    }
+                }
+            } else if (node.children && node.children.length) {
+                this.pillifyLinks(node.children);
+            }
+        }
+    },
+
     findLinks: function(nodes) {
         var links = [];
 

src/components/views/rooms/MessageComposerInput.js

@@ -527,15 +527,18 @@ export default class MessageComposerInput extends React.Component {
         if (this.state.isRichtextEnabled) {
             // These are block types, not handled by RichUtils by default.
             const blockCommands = ['code-block', 'blockquote', 'unordered-list-item', 'ordered-list-item'];
+            const currentBlockType = RichUtils.getCurrentBlockType(this.state.editorState);
             if (blockCommands.includes(command)) {
-                this.setState({
-                    editorState: RichUtils.toggleBlockType(this.state.editorState, command),
-                });
+                newState = RichUtils.toggleBlockType(this.state.editorState, command);
             } else if (command === 'strike') {
                 // this is the only inline style not handled by Draft by default
-                this.setState({
-                    editorState: RichUtils.toggleInlineStyle(this.state.editorState, 'STRIKETHROUGH'),
-                });
+                newState = RichUtils.toggleInlineStyle(this.state.editorState, 'STRIKETHROUGH');
+            } else if (command === 'backspace' && currentBlockType !== 'unstyled') {
+                const currentStartOffset = this.state.editorState.getSelection().getStartOffset();
+                if (currentStartOffset === 0) {
+                    // Toggle current block type (setting it to 'unstyled')
+                    newState = RichUtils.toggleBlockType(this.state.editorState, currentBlockType);
+                }
             }
         } else {
             const contentState = this.state.editorState.getCurrentContent();
@@ -655,6 +658,7 @@ export default class MessageComposerInput extends React.Component {
             // By returning false, we allow the default draft-js key binding to occur,
             // which in this case invokes "split-block". This creates a new block of the
             // same type, allowing the user to delete it with backspace.
+            // See handleKeyCommand (when command === 'backspace')
             return false;
         }