From 001011df2735d11c30a0010ccc660bf63440b642 Mon Sep 17 00:00:00 2001
From: Aviral Dasgupta <me@aviraldg.com>
Date: Fri, 27 May 2016 10:15:55 +0530
Subject: [PATCH 01/15] Initial version of rich text editor

---
 package.json                                  |   2 +
 src/RichText.js                               |  37 ++++
 .../views/rooms/MessageComposerInput.js       | 201 +++++++++++-------
 3 files changed, 165 insertions(+), 75 deletions(-)
 create mode 100644 src/RichText.js

diff --git a/package.json b/package.json
index 3f4a862f6f..4a2ba34343 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,8 @@
   },
   "dependencies": {
     "classnames": "^2.1.2",
+    "draft-js": "^0.7.0",
+    "draft-js-export-html": "^0.2.2",
     "favico.js": "^0.3.10",
     "filesize": "^3.1.2",
     "flux": "^2.0.3",
diff --git a/src/RichText.js b/src/RichText.js
new file mode 100644
index 0000000000..8cec5fb565
--- /dev/null
+++ b/src/RichText.js
@@ -0,0 +1,37 @@
+import {Editor, ContentState, convertFromHTML, DefaultDraftBlockRenderMap, DefaultDraftInlineStyle} from 'draft-js';
+const ReactDOM = require('react-dom');
+
+const styles = {
+    BOLD: 'strong',
+    CODE: 'code',
+    ITALIC: 'em',
+    STRIKETHROUGH: 's',
+    UNDERLINE: 'u'
+};
+
+export function contentStateToHTML(contentState:ContentState): String {
+    const elem = contentState.getBlockMap().map((block) => {
+        const elem = DefaultDraftBlockRenderMap.get(block.getType()).element;
+        const content = [];
+        block.findStyleRanges(() => true, (s, e) => {
+            console.log(block.getInlineStyleAt(s));
+            const tags = block.getInlineStyleAt(s).map(style => styles[style]);
+            const open = tags.map(tag => `<${tag}>`).join('');
+            const close = tags.map(tag => `</${tag}>`).reverse().join('');
+            content.push(`${open}${block.getText().substring(s, e)}${close}`);
+        });
+
+        return (`
+            <${elem}>
+                ${content.join('')}
+            </${elem}>
+        `);
+    }).join('');
+
+
+    return elem;
+}
+
+export function HTMLtoContentState(html:String): ContentState {
+    return ContentState.createFromBlockArray(convertFromHTML(html));
+}
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 733d9e6056..66506b3fe4 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -27,6 +27,9 @@ marked.setOptions({
     smartypants: false
 });
 
+import {Editor, EditorState, RichUtils} from 'draft-js';
+import {stateToHTML} from 'draft-js-export-html';
+
 var MatrixClientPeg = require("../../../MatrixClientPeg");
 var SlashCommands = require("../../../SlashCommands");
 var Modal = require("../../../Modal");
@@ -36,6 +39,8 @@ var sdk = require('../../../index');
 var dis = require("../../../dispatcher");
 var KeyCode = require("../../../KeyCode");
 
+import {contentStateToHTML} from '../../../RichText';
+
 var TYPING_USER_TIMEOUT = 10000;
 var TYPING_SERVER_TIMEOUT = 30000;
 var MARKDOWN_ENABLED = true;
@@ -56,26 +61,18 @@ function mdownToHtml(mdown) {
 /*
  * The textInput part of the MessageComposer
  */
-module.exports = React.createClass({
-    displayName: 'MessageComposerInput',
+module.exports = class extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+        this.onAction = this.onAction.bind(this);
+        this.onInputClick = this.onInputClick.bind(this);
 
-    statics: {
-        // the height we limit the composer to
-        MAX_HEIGHT: 100,
-    },
+        this.state = {
+            editorState: EditorState.createEmpty()
+        };
+    }
 
-    propTypes: {
-        tabComplete: React.PropTypes.any,
-
-        // a callback which is called when the height of the composer is
-        // changed due to a change in content.
-        onResize: React.PropTypes.func,
-
-        // js-sdk Room object
-        room: React.PropTypes.object.isRequired,
-    },
-
-    componentWillMount: function() {
+    componentWillMount() {
         this.oldScrollHeight = 0;
         this.markdownEnabled = MARKDOWN_ENABLED;
         var self = this;
@@ -157,21 +154,22 @@ module.exports = React.createClass({
                 // save the currently entered text in order to restore it later.
                 // NB: This isn't 'originalText' because we want to restore
                 // sent history items too!
-                var text = this.element.value;
-                window.sessionStorage.setItem("input_" + this.roomId, text);
+                console.error('fixme');
+                // window.sessionStorage.setItem("input_" + this.roomId, text);
             },
 
             setLastTextEntry: function() {
-                var text = window.sessionStorage.getItem("input_" + this.roomId);
-                if (text) {
-                    this.element.value = text;
-                    self.resizeInput();
-                }
+                console.error('fixme');
+                // var text = window.sessionStorage.getItem("input_" + this.roomId);
+                // if (text) {
+                //     this.element.value = text;
+                //     self.resizeInput();
+                // }
             }
         };
-    },
+    }
 
-    componentDidMount: function() {
+    componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
         this.sentHistory.init(
             this.refs.textarea,
@@ -181,18 +179,19 @@ module.exports = React.createClass({
         if (this.props.tabComplete) {
             this.props.tabComplete.setTextArea(this.refs.textarea);
         }
-    },
+    }
 
-    componentWillUnmount: function() {
+    componentWillUnmount() {
         dis.unregister(this.dispatcherRef);
         this.sentHistory.saveLastTextEntry();
-    },
+    }
 
-    onAction: function(payload) {
-        var textarea = this.refs.textarea;
+    onAction(payload) {
+        var editor = this.refs.editor;
         switch (payload.action) {
             case 'focus_composer':
-                textarea.focus();
+                console.error('fixme');
+                editor.focus();
                 break;
             case 'insert_displayname':
                 if (textarea.value.length) {
@@ -214,9 +213,9 @@ module.exports = React.createClass({
                 }
                 break;
         }
-    },
+    }
 
-    onKeyDown: function (ev) {
+    onKeyDown(ev) {
         if (ev.keyCode === KeyCode.ENTER && !ev.shiftKey) {
             var input = this.refs.textarea.value;
             if (input.length === 0) {
@@ -252,33 +251,34 @@ module.exports = React.createClass({
                 self.onFinishedTyping();
             }
         }, 10); // XXX: what is this 10ms setTimeout doing?  Looks hacky :(
-    },
+    }
 
-    resizeInput: function() {
+    resizeInput() {
+        console.error('fixme');
         // scrollHeight is at least equal to clientHeight, so we have to
         // temporarily crimp clientHeight to 0 to get an accurate scrollHeight value
-        this.refs.textarea.style.height = "20px"; // 20 hardcoded from CSS
-        var newHeight = Math.min(this.refs.textarea.scrollHeight,
-                                 this.constructor.MAX_HEIGHT);
-        this.refs.textarea.style.height = Math.ceil(newHeight) + "px";
-        this.oldScrollHeight = this.refs.textarea.scrollHeight;
+        // this.refs.textarea.style.height = "20px"; // 20 hardcoded from CSS
+        // var newHeight = Math.min(this.refs.textarea.scrollHeight,
+        //                          this.constructor.MAX_HEIGHT);
+        // this.refs.textarea.style.height = Math.ceil(newHeight) + "px";
+        // this.oldScrollHeight = this.refs.textarea.scrollHeight;
+        //
+        // if (this.props.onResize) {
+        //     // kick gemini-scrollbar to re-layout
+        //     this.props.onResize();
+        // }
+    }
 
-        if (this.props.onResize) {
-            // kick gemini-scrollbar to re-layout
-            this.props.onResize();
-        }
-    },
-
-    onKeyUp: function(ev) {
+    onKeyUp(ev) {
         if (this.refs.textarea.scrollHeight !== this.oldScrollHeight ||
             ev.keyCode === KeyCode.DELETE ||
             ev.keyCode === KeyCode.BACKSPACE)
         {
             this.resizeInput();
         }
-    },
+    }
 
-    onEnter: function(ev) {
+    onEnter(ev) {
         var contentText = this.refs.textarea.value;
 
         // bodge for now to set markdown state on/off. We probably want a separate
@@ -365,25 +365,25 @@ module.exports = React.createClass({
         this.refs.textarea.value = '';
         this.resizeInput();
         ev.preventDefault();
-    },
+    }
 
-    onTypingActivity: function() {
+    onTypingActivity() {
         this.isTyping = true;
         if (!this.userTypingTimer) {
             this.sendTyping(true);
         }
         this.startUserTypingTimer();
         this.startServerTypingTimer();
-    },
+    }
 
-    onFinishedTyping: function() {
+    onFinishedTyping() {
         this.isTyping = false;
         this.sendTyping(false);
         this.stopUserTypingTimer();
         this.stopServerTypingTimer();
-    },
+    }
 
-    startUserTypingTimer: function() {
+    startUserTypingTimer() {
         this.stopUserTypingTimer();
         var self = this;
         this.userTypingTimer = setTimeout(function() {
@@ -391,16 +391,16 @@ module.exports = React.createClass({
             self.sendTyping(self.isTyping);
             self.userTypingTimer = null;
         }, TYPING_USER_TIMEOUT);
-    },
+    }
 
-    stopUserTypingTimer: function() {
+    stopUserTypingTimer() {
         if (this.userTypingTimer) {
             clearTimeout(this.userTypingTimer);
             this.userTypingTimer = null;
         }
-    },
+    }
 
-    startServerTypingTimer: function() {
+    startServerTypingTimer() {
         if (!this.serverTypingTimer) {
             var self = this;
             this.serverTypingTimer = setTimeout(function() {
@@ -410,39 +410,90 @@ module.exports = React.createClass({
                 }
             }, TYPING_SERVER_TIMEOUT / 2);
         }
-    },
+    }
 
-    stopServerTypingTimer: function() {
+    stopServerTypingTimer() {
         if (this.serverTypingTimer) {
             clearTimeout(this.servrTypingTimer);
             this.serverTypingTimer = null;
         }
-    },
+    }
 
-    sendTyping: function(isTyping) {
+    sendTyping(isTyping) {
         MatrixClientPeg.get().sendTyping(
             this.props.room.roomId,
             this.isTyping, TYPING_SERVER_TIMEOUT
         ).done();
-    },
+    }
 
-    refreshTyping: function() {
+    refreshTyping() {
         if (this.typingTimeout) {
             clearTimeout(this.typingTimeout);
             this.typingTimeout = null;
         }
-    },
+    }
 
-    onInputClick: function(ev) {
-        this.refs.textarea.focus();
-    },
+    onInputClick(ev) {
+        this.refs.editor.focus();
+    }
 
-    render: function() {
+    onChange(editorState) {
+        this.setState({editorState});
+    }
+
+    handleKeyCommand(command) {
+        const newState = RichUtils.handleKeyCommand(this.state.editorState, command);
+        if (newState) {
+            this.onChange(newState);
+            return true;
+        }
+        return false;
+    }
+
+    handleReturn(ev) {
+        if(ev.shiftKey)
+            return false;
+
+        const contentState = this.state.editorState.getCurrentContent();
+        if(!contentState.hasText())
+            return false;
+
+        const contentText = contentState.getPlainText(),
+            contentHTML = contentStateToHTML(contentState);
+
+        MatrixClientPeg.get().sendHtmlMessage(this.props.room.roomId, contentText, contentHTML);
+
+        this.setState({
+            editorState: EditorState.createEmpty()
+        });
+
+        return true;
+    }
+
+    render() {
         return (
-            <div className="mx_MessageComposer_input" onClick={ this.onInputClick }>
-                <textarea autoFocus ref="textarea" rows="1" onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} placeholder="Type a message..." />
+            <div className="mx_MessageComposer_input" onClick={ this.onInputClick } style={{overflow: 'auto'}}>
+                <Editor ref="editor"
+                        editorState={this.state.editorState}
+                        onChange={(state) => this.onChange(state)}
+                        handleKeyCommand={(command) => this.handleKeyCommand(command)}
+                        handleReturn={ev => this.handleReturn(ev)} />
             </div>
         );
     }
-});
+};
+
+module.exports.propTypes = {
+    tabComplete: React.PropTypes.any,
+
+    // a callback which is called when the height of the composer is
+    // changed due to a change in content.
+    onResize: React.PropTypes.func,
+
+    // js-sdk Room object
+    room: React.PropTypes.object.isRequired
+};
+
+// the height we limit the composer to
+module.exports.MAX_HEIGHT = 100;
 

From fe76eb9f737b60f153329cd5476be1e64c2ee652 Mon Sep 17 00:00:00 2001
From: Aviral Dasgupta <me@aviraldg.com>
Date: Sat, 28 May 2016 11:58:22 +0530
Subject: [PATCH 02/15] minor improvements

- use <p> for unstyled blocks
- fix return key bug
- editor placeholder
---
 src/RichText.js                               | 14 ++---
 .../views/rooms/MessageComposerInput.js       | 57 ++++++++-----------
 2 files changed, 31 insertions(+), 40 deletions(-)

diff --git a/src/RichText.js b/src/RichText.js
index 8cec5fb565..005465fc15 100644
--- a/src/RichText.js
+++ b/src/RichText.js
@@ -1,6 +1,10 @@
 import {Editor, ContentState, convertFromHTML, DefaultDraftBlockRenderMap, DefaultDraftInlineStyle} from 'draft-js';
 const ReactDOM = require('react-dom');
 
+const BLOCK_RENDER_MAP = DefaultDraftBlockRenderMap.set('unstyled', {
+    element: 'p' // draft uses <div> by default which we don't really like
+});
+
 const styles = {
     BOLD: 'strong',
     CODE: 'code',
@@ -11,24 +15,18 @@ const styles = {
 
 export function contentStateToHTML(contentState:ContentState): String {
     const elem = contentState.getBlockMap().map((block) => {
-        const elem = DefaultDraftBlockRenderMap.get(block.getType()).element;
+        const elem = BLOCK_RENDER_MAP.get(block.getType()).element;
         const content = [];
         block.findStyleRanges(() => true, (s, e) => {
-            console.log(block.getInlineStyleAt(s));
             const tags = block.getInlineStyleAt(s).map(style => styles[style]);
             const open = tags.map(tag => `<${tag}>`).join('');
             const close = tags.map(tag => `</${tag}>`).reverse().join('');
             content.push(`${open}${block.getText().substring(s, e)}${close}`);
         });
 
-        return (`
-            <${elem}>
-                ${content.join('')}
-            </${elem}>
-        `);
+        return (`<${elem}>${content.join('')}</${elem}>`);
     }).join('');
 
-
     return elem;
 }
 
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 66506b3fe4..d7a3670f6b 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -28,7 +28,6 @@ marked.setOptions({
 });
 
 import {Editor, EditorState, RichUtils} from 'draft-js';
-import {stateToHTML} from 'draft-js-export-html';
 
 var MatrixClientPeg = require("../../../MatrixClientPeg");
 var SlashCommands = require("../../../SlashCommands");
@@ -39,29 +38,16 @@ var sdk = require('../../../index');
 var dis = require("../../../dispatcher");
 var KeyCode = require("../../../KeyCode");
 
-import {contentStateToHTML} from '../../../RichText';
+import {contentStateToHTML, HTMLtoContentState} from '../../../RichText';
 
 var TYPING_USER_TIMEOUT = 10000;
 var TYPING_SERVER_TIMEOUT = 30000;
 var MARKDOWN_ENABLED = true;
 
-function mdownToHtml(mdown) {
-    var html = marked(mdown) || "";
-    html = html.trim();
-    // strip start and end <p> tags else you get 'orrible spacing
-    if (html.indexOf("<p>") === 0) {
-        html = html.substring("<p>".length);
-    }
-    if (html.lastIndexOf("</p>") === (html.length - "</p>".length)) {
-        html = html.substring(0, html.length - "</p>".length);
-    }
-    return html;
-}
-
 /*
  * The textInput part of the MessageComposer
  */
-module.exports = class extends React.Component {
+export default class MessageComposerInput extends React.Component {
     constructor(props, context) {
         super(props, context);
         this.onAction = this.onAction.bind(this);
@@ -75,7 +61,6 @@ module.exports = class extends React.Component {
     componentWillMount() {
         this.oldScrollHeight = 0;
         this.markdownEnabled = MARKDOWN_ENABLED;
-        var self = this;
         this.sentHistory = {
             // The list of typed messages. Index 0 is more recent
             data: [],
@@ -150,21 +135,23 @@ module.exports = class extends React.Component {
                 return true;
             },
 
-            saveLastTextEntry: function() {
+            saveLastTextEntry: () => {
                 // save the currently entered text in order to restore it later.
                 // NB: This isn't 'originalText' because we want to restore
                 // sent history items too!
                 console.error('fixme');
-                // window.sessionStorage.setItem("input_" + this.roomId, text);
+                const contentHTML = contentStateToHTML(this.state.editorState.getCurrentContent());
+                window.sessionStorage.setItem("input_" + this.roomId, contentHTML);
             },
 
-            setLastTextEntry: function() {
+            setLastTextEntry: () => {
                 console.error('fixme');
-                // var text = window.sessionStorage.getItem("input_" + this.roomId);
-                // if (text) {
-                //     this.element.value = text;
-                //     self.resizeInput();
-                // }
+                const contentHTML = window.sessionStorage.getItem("input_" + this.roomId);
+                if (contentHTML) {
+                    const content = HTMLtoContentState(contentHTML);
+                    this.state.editorState = EditorState.createWithContent(content);
+                    self.resizeInput();
+                }
             }
         };
     }
@@ -172,12 +159,12 @@ module.exports = class extends React.Component {
     componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
         this.sentHistory.init(
-            this.refs.textarea,
+            this.refs.editor,
             this.props.room.roomId
         );
         this.resizeInput();
         if (this.props.tabComplete) {
-            this.props.tabComplete.setTextArea(this.refs.textarea);
+            this.props.tabComplete.setTextArea(this.refs.editor);
         }
     }
 
@@ -456,7 +443,7 @@ module.exports = class extends React.Component {
 
         const contentState = this.state.editorState.getCurrentContent();
         if(!contentState.hasText())
-            return false;
+            return true;
 
         const contentText = contentState.getPlainText(),
             contentHTML = contentStateToHTML(contentState);
@@ -471,9 +458,16 @@ module.exports = class extends React.Component {
     }
 
     render() {
+        const containerStyle = {
+            overflow: 'auto'
+        };
+
         return (
-            <div className="mx_MessageComposer_input" onClick={ this.onInputClick } style={{overflow: 'auto'}}>
+            <div className="mx_MessageComposer_input"
+                 onClick={ this.onInputClick }
+                 style={containerStyle}>
                 <Editor ref="editor"
+                        placeholder="Type a message…"
                         editorState={this.state.editorState}
                         onChange={(state) => this.onChange(state)}
                         handleKeyCommand={(command) => this.handleKeyCommand(command)}
@@ -483,7 +477,7 @@ module.exports = class extends React.Component {
     }
 };
 
-module.exports.propTypes = {
+MessageComposerInput.propTypes = {
     tabComplete: React.PropTypes.any,
 
     // a callback which is called when the height of the composer is
@@ -495,5 +489,4 @@ module.exports.propTypes = {
 };
 
 // the height we limit the composer to
-module.exports.MAX_HEIGHT = 100;
-
+MessageComposerInput.MAX_HEIGHT = 100;

From 29cdd1fc4144bf7f583273409e858aeec29950dd Mon Sep 17 00:00:00 2001
From: Aviral Dasgupta <me@aviraldg.com>
Date: Thu, 9 Jun 2016 23:53:09 +0530
Subject: [PATCH 03/15] user and room decorators, history & typing notifs

---
 src/RichText.js                               | 49 ++++++++++++++++++-
 .../views/rooms/MessageComposerInput.js       | 39 +++++++++------
 2 files changed, 71 insertions(+), 17 deletions(-)

diff --git a/src/RichText.js b/src/RichText.js
index 005465fc15..d6723b9bd3 100644
--- a/src/RichText.js
+++ b/src/RichText.js
@@ -1,5 +1,6 @@
-import {Editor, ContentState, convertFromHTML, DefaultDraftBlockRenderMap, DefaultDraftInlineStyle} from 'draft-js';
+import {Editor, ContentState, convertFromHTML, DefaultDraftBlockRenderMap, DefaultDraftInlineStyle, CompositeDecorator} from 'draft-js';
 const ReactDOM = require('react-dom');
+var sdk = require('./index');
 
 const BLOCK_RENDER_MAP = DefaultDraftBlockRenderMap.set('unstyled', {
     element: 'p' // draft uses <div> by default which we don't really like
@@ -33,3 +34,49 @@ export function contentStateToHTML(contentState:ContentState): String {
 export function HTMLtoContentState(html:String): ContentState {
     return ContentState.createFromBlockArray(convertFromHTML(html));
 }
+
+const USERNAME_REGEX = /@\S+:\S+/g;
+const ROOM_REGEX = /#\S+:\S+/g;
+
+export function getScopedDecorator(scope) {
+    const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+
+    const usernameDecorator = {
+        strategy: (contentBlock, callback) => {
+            findWithRegex(USERNAME_REGEX, contentBlock, callback);
+        },
+        component: (props) => {
+            console.log(props.children);
+            console.log(props.children[0].props.text);
+            const member = scope.room.getMember(props.children[0].props.text);
+            console.log(scope);
+            window.scope = scope;
+            let name = null;
+            if(!!member) {
+                name = member.name;
+            }
+            console.log(member);
+            const avatar = member ? <MemberAvatar member={member} width={16} height={16} /> : null;
+            return <span className="mx_UserPill">{avatar} {props.children}</span>;
+        }
+    };
+    const roomDecorator = {
+        strategy: (contentBlock, callback) => {
+            findWithRegex(ROOM_REGEX, contentBlock, callback);
+        },
+        component: (props) => {
+            return <span className="mx_RoomPill">{props.children}</span>;
+        }
+    };
+
+    return new CompositeDecorator([usernameDecorator, roomDecorator]);
+}
+
+function findWithRegex(regex, contentBlock, callback) {
+    const text = contentBlock.getText();
+    let matchArr, start;
+    while ((matchArr = regex.exec(text)) !== null) {
+        start = matchArr.index;
+        callback(start, start + matchArr[0].length);
+    }
+}
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index d7a3670f6b..218fcdc707 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -27,7 +27,7 @@ marked.setOptions({
     smartypants: false
 });
 
-import {Editor, EditorState, RichUtils} from 'draft-js';
+import {Editor, EditorState, RichUtils, CompositeDecorator} from 'draft-js';
 
 var MatrixClientPeg = require("../../../MatrixClientPeg");
 var SlashCommands = require("../../../SlashCommands");
@@ -38,7 +38,7 @@ var sdk = require('../../../index');
 var dis = require("../../../dispatcher");
 var KeyCode = require("../../../KeyCode");
 
-import {contentStateToHTML, HTMLtoContentState} from '../../../RichText';
+import {contentStateToHTML, HTMLtoContentState, getScopedDecorator} from '../../../RichText';
 
 var TYPING_USER_TIMEOUT = 10000;
 var TYPING_SERVER_TIMEOUT = 30000;
@@ -54,13 +54,14 @@ export default class MessageComposerInput extends React.Component {
         this.onInputClick = this.onInputClick.bind(this);
 
         this.state = {
-            editorState: EditorState.createEmpty()
+            editorState: EditorState.createEmpty(getScopedDecorator(this.props))
         };
     }
 
     componentWillMount() {
         this.oldScrollHeight = 0;
         this.markdownEnabled = MARKDOWN_ENABLED;
+        const component = this;
         this.sentHistory = {
             // The list of typed messages. Index 0 is more recent
             data: [],
@@ -73,7 +74,7 @@ export default class MessageComposerInput extends React.Component {
             // The textarea element to set text to.
             element: null,
 
-            init: function(element, roomId) {
+            init: function (element, roomId) {
                 this.roomId = roomId;
                 this.element = element;
                 this.position = -1;
@@ -88,7 +89,7 @@ export default class MessageComposerInput extends React.Component {
                 }
             },
 
-            push: function(text) {
+            push: function (text) {
                 // store a message in the sent history
                 this.data.unshift(text);
                 window.sessionStorage.setItem(
@@ -101,7 +102,7 @@ export default class MessageComposerInput extends React.Component {
             },
 
             // move in the history. Returns true if we managed to move.
-            next: function(offset) {
+            next: function (offset) {
                 if (this.position === -1) {
                     // user is going into the history, save the current line.
                     this.originalText = this.element.value;
@@ -131,26 +132,26 @@ export default class MessageComposerInput extends React.Component {
                     this.element.value = this.originalText;
                 }
 
-                self.resizeInput();
+                component.resizeInput();
                 return true;
             },
 
-            saveLastTextEntry: () => {
+            saveLastTextEntry: function () {
                 // save the currently entered text in order to restore it later.
                 // NB: This isn't 'originalText' because we want to restore
                 // sent history items too!
-                console.error('fixme');
-                const contentHTML = contentStateToHTML(this.state.editorState.getCurrentContent());
+                const contentHTML = contentStateToHTML(component.state.editorState.getCurrentContent());
+                console.error(contentHTML);
                 window.sessionStorage.setItem("input_" + this.roomId, contentHTML);
             },
 
-            setLastTextEntry: () => {
-                console.error('fixme');
+            setLastTextEntry: function () {
                 const contentHTML = window.sessionStorage.getItem("input_" + this.roomId);
+                console.error(contentHTML);
                 if (contentHTML) {
                     const content = HTMLtoContentState(contentHTML);
-                    this.state.editorState = EditorState.createWithContent(content);
-                    self.resizeInput();
+                    component.setState({editorState: EditorState.createWithContent(content, getScopedDecorator(this.props))});
+                    component.resizeInput();
                 }
             }
         };
@@ -177,10 +178,10 @@ export default class MessageComposerInput extends React.Component {
         var editor = this.refs.editor;
         switch (payload.action) {
             case 'focus_composer':
-                console.error('fixme');
                 editor.focus();
                 break;
             case 'insert_displayname':
+                console.error('fixme');
                 if (textarea.value.length) {
                     var left = textarea.value.substring(0, textarea.selectionStart);
                     var right = textarea.value.substring(textarea.selectionEnd);
@@ -426,6 +427,12 @@ export default class MessageComposerInput extends React.Component {
 
     onChange(editorState) {
         this.setState({editorState});
+
+        if(editorState.getCurrentContent().hasText()) {
+            this.onTypingActivity()
+        } else {
+            this.onFinishedTyping();
+        }
     }
 
     handleKeyCommand(command) {
@@ -451,7 +458,7 @@ export default class MessageComposerInput extends React.Component {
         MatrixClientPeg.get().sendHtmlMessage(this.props.room.roomId, contentText, contentHTML);
 
         this.setState({
-            editorState: EditorState.createEmpty()
+            editorState: EditorState.createEmpty(getScopedDecorator(this.props))
         });
 
         return true;

From 4e0720db12ee7170ada7a8f63848683015a3012c Mon Sep 17 00:00:00 2001
From: Aviral Dasgupta <me@aviraldg.com>
Date: Fri, 10 Jun 2016 00:03:40 +0530
Subject: [PATCH 04/15] Fix MessageComposerInput.setLastTextEntry

---
 src/components/views/rooms/MessageComposerInput.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 218fcdc707..129f048493 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -150,7 +150,7 @@ export default class MessageComposerInput extends React.Component {
                 console.error(contentHTML);
                 if (contentHTML) {
                     const content = HTMLtoContentState(contentHTML);
-                    component.setState({editorState: EditorState.createWithContent(content, getScopedDecorator(this.props))});
+                    component.setState({editorState: EditorState.createWithContent(content, getScopedDecorator(component.props))});
                     component.resizeInput();
                 }
             }

From e4217c3fb7238d0da09101f1e6fd75bd82a4712e Mon Sep 17 00:00:00 2001
From: Aviral Dasgupta <me@aviraldg.com>
Date: Sat, 11 Jun 2016 15:52:08 +0530
Subject: [PATCH 05/15] rte improvements, markdown mode

---
 package.json                                  |   2 +
 src/RichText.js                               |  35 ++-
 .../views/rooms/MessageComposerInput.js       | 282 +++++++++---------
 3 files changed, 168 insertions(+), 151 deletions(-)

diff --git a/package.json b/package.json
index 75b4b05c60..d3021fb1ac 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,8 @@
     "classnames": "^2.1.2",
     "draft-js": "^0.7.0",
     "draft-js-export-html": "^0.2.2",
+    "draft-js-export-markdown": "^0.2.0",
+    "draft-js-import-markdown": "^0.1.6",
     "favico.js": "^0.3.10",
     "filesize": "^3.1.2",
     "flux": "^2.0.3",
diff --git a/src/RichText.js b/src/RichText.js
index d6723b9bd3..121efc871c 100644
--- a/src/RichText.js
+++ b/src/RichText.js
@@ -1,9 +1,8 @@
 import {Editor, ContentState, convertFromHTML, DefaultDraftBlockRenderMap, DefaultDraftInlineStyle, CompositeDecorator} from 'draft-js';
-const ReactDOM = require('react-dom');
-var sdk = require('./index');
+import * as sdk from  './index';
 
 const BLOCK_RENDER_MAP = DefaultDraftBlockRenderMap.set('unstyled', {
-    element: 'p' // draft uses <div> by default which we don't really like
+    element: 'p' // draft uses <div> by default which we don't really like, so we're using <p>
 });
 
 const styles = {
@@ -14,21 +13,19 @@ const styles = {
     UNDERLINE: 'u'
 };
 
-export function contentStateToHTML(contentState:ContentState): String {
-    const elem = contentState.getBlockMap().map((block) => {
-        const elem = BLOCK_RENDER_MAP.get(block.getType()).element;
-        const content = [];
-        block.findStyleRanges(() => true, (s, e) => {
-            const tags = block.getInlineStyleAt(s).map(style => styles[style]);
+export function contentStateToHTML(contentState: ContentState): string {
+    return contentState.getBlockMap().map((block) => {
+        let elem = BLOCK_RENDER_MAP.get(block.getType()).element;
+        let content = [];
+        block.findStyleRanges(() => true, (start, end) => {
+            const tags = block.getInlineStyleAt(start).map(style => styles[style]);
             const open = tags.map(tag => `<${tag}>`).join('');
             const close = tags.map(tag => `</${tag}>`).reverse().join('');
-            content.push(`${open}${block.getText().substring(s, e)}${close}`);
+            content.push(`${open}${block.getText().substring(start, end)}${close}`);
         });
 
         return (`<${elem}>${content.join('')}</${elem}>`);
     }).join('');
-
-    return elem;
 }
 
 export function HTMLtoContentState(html:String): ContentState {
@@ -38,6 +35,12 @@ export function HTMLtoContentState(html:String): ContentState {
 const USERNAME_REGEX = /@\S+:\S+/g;
 const ROOM_REGEX = /#\S+:\S+/g;
 
+/**
+ * Returns a composite decorator which has access to provided scope.
+ * 
+ * @param scope
+ * @returns {*}
+ */
 export function getScopedDecorator(scope) {
     const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
 
@@ -46,17 +49,13 @@ export function getScopedDecorator(scope) {
             findWithRegex(USERNAME_REGEX, contentBlock, callback);
         },
         component: (props) => {
-            console.log(props.children);
-            console.log(props.children[0].props.text);
-            const member = scope.room.getMember(props.children[0].props.text);
-            console.log(scope);
-            window.scope = scope;
+            let member = scope.room.getMember(props.children[0].props.text);
             let name = null;
             if(!!member) {
                 name = member.name;
             }
             console.log(member);
-            const avatar = member ? <MemberAvatar member={member} width={16} height={16} /> : null;
+            let avatar = member ? <MemberAvatar member={member} width={16} height={16} /> : null;
             return <span className="mx_UserPill">{avatar} {props.children}</span>;
         }
     };
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 129f048493..56046f0798 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -13,7 +13,7 @@ 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.
 */
-var React = require("react");
+import React from 'react';
 
 var marked = require("marked");
 marked.setOptions({
@@ -27,7 +27,11 @@ marked.setOptions({
     smartypants: false
 });
 
-import {Editor, EditorState, RichUtils, CompositeDecorator} from 'draft-js';
+import {Editor, EditorState, RichUtils, CompositeDecorator,
+    convertFromRaw, convertToRaw, Modifier, EditorChangeType,
+    getDefaultKeyBinding, KeyBindingUtil, ContentState} from 'draft-js';
+
+import {stateToMarkdown} from 'draft-js-export-markdown';
 
 var MatrixClientPeg = require("../../../MatrixClientPeg");
 var SlashCommands = require("../../../SlashCommands");
@@ -40,9 +44,20 @@ var KeyCode = require("../../../KeyCode");
 
 import {contentStateToHTML, HTMLtoContentState, getScopedDecorator} from '../../../RichText';
 
-var TYPING_USER_TIMEOUT = 10000;
-var TYPING_SERVER_TIMEOUT = 30000;
-var MARKDOWN_ENABLED = true;
+const TYPING_USER_TIMEOUT = 10000, TYPING_SERVER_TIMEOUT = 30000;
+
+function mdownToHtml(mdown) {
+    var html = marked(mdown) || "";
+    html = html.trim();
+    // strip start and end <p> tags else you get 'orrible spacing
+    if (html.indexOf("<p>") === 0) {
+        html = html.substring("<p>".length);
+    }
+    if (html.lastIndexOf("</p>") === (html.length - "</p>".length)) {
+        html = html.substring(0, html.length - "</p>".length);
+    }
+    return html;
+}
 
 /*
  * The textInput part of the MessageComposer
@@ -54,13 +69,38 @@ export default class MessageComposerInput extends React.Component {
         this.onInputClick = this.onInputClick.bind(this);
 
         this.state = {
-            editorState: EditorState.createEmpty(getScopedDecorator(this.props))
+            isRichtextEnabled: true,
+            editorState: null
         };
+
+        // bit of a hack, but we need to do this here since createEditorState needs isRichtextEnabled
+        this.state.editorState = this.createEditorState();
+    }
+
+    static getKeyBinding(e: SyntheticKeyboardEvent): string {
+        // C-m => Toggles between rich text and markdown modes
+        if(e.keyCode == 77 && KeyBindingUtil.isCtrlKeyCommand(e)) {
+            return 'toggle-mode';
+        }
+
+        return getDefaultKeyBinding(e);
+    }
+
+    /**
+     * "Does the right thing" to create an EditorState, based on:
+     * - whether we've got rich text mode enabled
+     * - contentState was passed in
+     */
+    createEditorState(contentState: ?ContentState): EditorState {
+        let func = contentState ? EditorState.createWithContent : EditorState.createEmpty;
+        let args = contentState ? [contentState] : [];
+        if(this.state.isRichtextEnabled) {
+            args.push(getScopedDecorator(this.props));
+        }
+        return func.apply(null, args);
     }
 
     componentWillMount() {
-        this.oldScrollHeight = 0;
-        this.markdownEnabled = MARKDOWN_ENABLED;
         const component = this;
         this.sentHistory = {
             // The list of typed messages. Index 0 is more recent
@@ -132,7 +172,6 @@ export default class MessageComposerInput extends React.Component {
                     this.element.value = this.originalText;
                 }
 
-                component.resizeInput();
                 return true;
             },
 
@@ -140,18 +179,17 @@ export default class MessageComposerInput extends React.Component {
                 // save the currently entered text in order to restore it later.
                 // NB: This isn't 'originalText' because we want to restore
                 // sent history items too!
-                const contentHTML = contentStateToHTML(component.state.editorState.getCurrentContent());
-                console.error(contentHTML);
-                window.sessionStorage.setItem("input_" + this.roomId, contentHTML);
+                let contentJSON = JSON.stringify(convertToRaw(component.state.editorState.getCurrentContent()));
+                window.sessionStorage.setItem("input_" + this.roomId, contentJSON);
             },
 
             setLastTextEntry: function () {
-                const contentHTML = window.sessionStorage.getItem("input_" + this.roomId);
-                console.error(contentHTML);
-                if (contentHTML) {
-                    const content = HTMLtoContentState(contentHTML);
-                    component.setState({editorState: EditorState.createWithContent(content, getScopedDecorator(component.props))});
-                    component.resizeInput();
+                let contentJSON = window.sessionStorage.getItem("input_" + this.roomId);
+                if (contentJSON) {
+                    let content = convertFromRaw(JSON.parse(contentJSON));
+                    component.setState({
+                        editorState: component.createEditorState(content)
+                    });
                 }
             }
         };
@@ -163,10 +201,10 @@ export default class MessageComposerInput extends React.Component {
             this.refs.editor,
             this.props.room.roomId
         );
-        this.resizeInput();
-        if (this.props.tabComplete) {
-            this.props.tabComplete.setTextArea(this.refs.editor);
-        }
+        // this is disabled for now, since https://github.com/matrix-org/matrix-react-sdk/pull/296 will land soon
+        // if (this.props.tabComplete) {
+        //     this.props.tabComplete.setEditor(this.refs.editor);
+        // }
     }
 
     componentWillUnmount() {
@@ -176,44 +214,33 @@ export default class MessageComposerInput extends React.Component {
 
     onAction(payload) {
         var editor = this.refs.editor;
+
         switch (payload.action) {
             case 'focus_composer':
                 editor.focus();
                 break;
+
+            // TODO change this so we insert a complete user alias
+
             case 'insert_displayname':
-                console.error('fixme');
-                if (textarea.value.length) {
-                    var left = textarea.value.substring(0, textarea.selectionStart);
-                    var right = textarea.value.substring(textarea.selectionEnd);
-                    if (right.length) {
-                        left += payload.displayname;
-                    }
-                    else {
-                        left = left.replace(/( ?)$/, " " + payload.displayname);
-                    }
-                    textarea.value = left + right;
-                    textarea.focus();
-                    textarea.setSelectionRange(left.length, left.length);
-                }
-                else {
-                    textarea.value = payload.displayname + ": ";
-                    textarea.focus();
+                if (this.state.editorState.getCurrentContent().hasText()) {
+                    console.log(payload);
+                    let contentState = Modifier.replaceText(
+                        this.state.editorState.getCurrentContent(),
+                        this.state.editorState.getSelection(),
+                        payload.displayname
+                    );
+                    this.setState({
+                        editorState: EditorState.push(this.state.editorState, contentState, 'insert-characters')
+                    });
+                    editor.focus();
                 }
                 break;
         }
     }
 
     onKeyDown(ev) {
-        if (ev.keyCode === KeyCode.ENTER && !ev.shiftKey) {
-            var input = this.refs.textarea.value;
-            if (input.length === 0) {
-                ev.preventDefault();
-                return;
-            }
-            this.sentHistory.push(input);
-            this.onEnter(ev);
-        }
-        else if (ev.keyCode === KeyCode.UP || ev.keyCode === KeyCode.DOWN) {
+        if (ev.keyCode === KeyCode.UP || ev.keyCode === KeyCode.DOWN) {
             var oldSelectionStart = this.refs.textarea.selectionStart;
             // Remember the keyCode because React will recycle the synthetic event
             var keyCode = ev.keyCode;
@@ -222,48 +249,9 @@ export default class MessageComposerInput extends React.Component {
             setTimeout(() => {
                 if (this.refs.textarea.selectionStart == oldSelectionStart) {
                     this.sentHistory.next(keyCode === KeyCode.UP ? 1 : -1);
-                    this.resizeInput();
                 }
             }, 0);
         }
-
-        if (this.props.tabComplete) {
-            this.props.tabComplete.onKeyDown(ev);
-        }
-
-        var self = this;
-        setTimeout(function() {
-            if (self.refs.textarea && self.refs.textarea.value != '') {
-                self.onTypingActivity();
-            } else {
-                self.onFinishedTyping();
-            }
-        }, 10); // XXX: what is this 10ms setTimeout doing?  Looks hacky :(
-    }
-
-    resizeInput() {
-        console.error('fixme');
-        // scrollHeight is at least equal to clientHeight, so we have to
-        // temporarily crimp clientHeight to 0 to get an accurate scrollHeight value
-        // this.refs.textarea.style.height = "20px"; // 20 hardcoded from CSS
-        // var newHeight = Math.min(this.refs.textarea.scrollHeight,
-        //                          this.constructor.MAX_HEIGHT);
-        // this.refs.textarea.style.height = Math.ceil(newHeight) + "px";
-        // this.oldScrollHeight = this.refs.textarea.scrollHeight;
-        //
-        // if (this.props.onResize) {
-        //     // kick gemini-scrollbar to re-layout
-        //     this.props.onResize();
-        // }
-    }
-
-    onKeyUp(ev) {
-        if (this.refs.textarea.scrollHeight !== this.oldScrollHeight ||
-            ev.keyCode === KeyCode.DELETE ||
-            ev.keyCode === KeyCode.BACKSPACE)
-        {
-            this.resizeInput();
-        }
     }
 
     onEnter(ev) {
@@ -271,24 +259,24 @@ export default class MessageComposerInput extends React.Component {
 
         // bodge for now to set markdown state on/off. We probably want a separate
         // area for "local" commands which don't hit out to the server.
-        if (contentText.indexOf("/markdown") === 0) {
-            ev.preventDefault();
-            this.refs.textarea.value = '';
-            if (contentText.indexOf("/markdown on") === 0) {
-                this.markdownEnabled = true;
-            }
-            else if (contentText.indexOf("/markdown off") === 0) {
-                this.markdownEnabled = false;
-            }
-            else {
-                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createDialog(ErrorDialog, {
-                    title: "Unknown command",
-                    description: "Usage: /markdown on|off"
-                });
-            }
-            return;
-        }
+        // if (contentText.indexOf("/markdown") === 0) {
+        //     ev.preventDefault();
+        //     this.refs.textarea.value = '';
+        //     if (contentText.indexOf("/markdown on") === 0) {
+        //         this.markdownEnabled = true;
+        //     }
+        //     else if (contentText.indexOf("/markdown off") === 0) {
+        //         this.markdownEnabled = false;
+        //     }
+        //     else {
+        //         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        //         Modal.createDialog(ErrorDialog, {
+        //             title: "Unknown command",
+        //             description: "Usage: /markdown on|off"
+        //         });
+        //     }
+        //     return;
+        // }
 
         var cmd = SlashCommands.processInput(this.props.room.roomId, contentText);
         if (cmd) {
@@ -326,32 +314,23 @@ export default class MessageComposerInput extends React.Component {
             contentText = contentText.substring(4);
         }
         else if (contentText[0] === '/') {
-            contentText = contentText.substring(1);   
+            contentText = contentText.substring(1);
         }
 
         var htmlText;
         if (this.markdownEnabled && (htmlText = mdownToHtml(contentText)) !== contentText) {
-            sendMessagePromise = isEmote ? 
+            sendMessagePromise = isEmote ?
                 MatrixClientPeg.get().sendHtmlEmote(this.props.room.roomId, contentText, htmlText) :
                 MatrixClientPeg.get().sendHtmlMessage(this.props.room.roomId, contentText, htmlText);
         }
         else {
-            sendMessagePromise = isEmote ? 
+            sendMessagePromise = isEmote ?
                 MatrixClientPeg.get().sendEmoteMessage(this.props.room.roomId, contentText) :
                 MatrixClientPeg.get().sendTextMessage(this.props.room.roomId, contentText);
         }
 
-        sendMessagePromise.done(function() {
-            dis.dispatch({
-                action: 'message_sent'
-            });
-        }, function() {
-            dis.dispatch({
-                action: 'message_send_failed'
-            });
-        });
+
         this.refs.textarea.value = '';
-        this.resizeInput();
         ev.preventDefault();
     }
 
@@ -436,7 +415,28 @@ export default class MessageComposerInput extends React.Component {
     }
 
     handleKeyCommand(command) {
-        const newState = RichUtils.handleKeyCommand(this.state.editorState, command);
+        if(command === 'toggle-mode') {
+            this.setState({
+                isRichtextEnabled: !this.state.isRichtextEnabled
+            });
+
+            if(!this.state.isRichtextEnabled) {
+                let html = mdownToHtml(this.state.editorState.getCurrentContent().getPlainText());
+                this.setState({
+                    editorState: this.createEditorState(HTMLtoContentState(html))
+                });
+            } else {
+                let markdown = stateToMarkdown(this.state.editorState.getCurrentContent());
+                let contentState = ContentState.createFromText(markdown);
+                this.setState({
+                    editorState: this.createEditorState(contentState)
+                });
+            }
+
+            return true;
+        }
+
+        let newState = RichUtils.handleKeyCommand(this.state.editorState, command);
         if (newState) {
             this.onChange(newState);
             return true;
@@ -452,31 +452,50 @@ export default class MessageComposerInput extends React.Component {
         if(!contentState.hasText())
             return true;
 
-        const contentText = contentState.getPlainText(),
-            contentHTML = contentStateToHTML(contentState);
+        let contentText = contentState.getPlainText(), contentHTML;
 
-        MatrixClientPeg.get().sendHtmlMessage(this.props.room.roomId, contentText, contentHTML);
+        if(this.state.isRichtextEnabled) {
+            contentHTML = contentStateToHTML(contentState);
+        } else {
+            contentHTML = mdownToHtml(contentText);
+        }
+
+        this.sentHistory.push(contentHTML);
+        let sendMessagePromise = MatrixClientPeg.get().sendHtmlMessage(this.props.room.roomId, contentText, contentHTML);
+
+        sendMessagePromise.done(() => {
+            dis.dispatch({
+                action: 'message_sent'
+            });
+        }, () => {
+            dis.dispatch({
+                action: 'message_send_failed'
+            });
+        });
 
         this.setState({
-            editorState: EditorState.createEmpty(getScopedDecorator(this.props))
+            editorState: this.createEditorState()
         });
 
         return true;
     }
 
     render() {
-        const containerStyle = {
-            overflow: 'auto'
-        };
+        let className = "mx_MessageComposer_input";
+
+        if(this.state.isRichtextEnabled) {
+            className += " mx_MessageComposer_input_rte"; // placeholder indicator for RTE mode
+        }
+
 
         return (
-            <div className="mx_MessageComposer_input"
-                 onClick={ this.onInputClick }
-                 style={containerStyle}>
+            <div className={className}
+                 onClick={ this.onInputClick }>
                 <Editor ref="editor"
                         placeholder="Type a message…"
                         editorState={this.state.editorState}
                         onChange={(state) => this.onChange(state)}
+                        keyBindingFn={MessageComposerInput.getKeyBinding}
                         handleKeyCommand={(command) => this.handleKeyCommand(command)}
                         handleReturn={ev => this.handleReturn(ev)} />
             </div>
@@ -494,6 +513,3 @@ MessageComposerInput.propTypes = {
     // js-sdk Room object
     room: React.PropTypes.object.isRequired
 };
-
-// the height we limit the composer to
-MessageComposerInput.MAX_HEIGHT = 100;

From b960d220d27524aa419fe643817a7ca6e79e00d7 Mon Sep 17 00:00:00 2001
From: Aviral Dasgupta <me@aviraldg.com>
Date: Sat, 11 Jun 2016 22:24:09 +0530
Subject: [PATCH 06/15] cleanup, better comments, markdown hotkeys

---
 src/RichText.js                               | 72 +++++++++++-----
 .../views/rooms/MessageComposerInput.js       | 86 +++++++++++++------
 2 files changed, 109 insertions(+), 49 deletions(-)

diff --git a/src/RichText.js b/src/RichText.js
index 121efc871c..f1f2188d0d 100644
--- a/src/RichText.js
+++ b/src/RichText.js
@@ -1,11 +1,19 @@
-import {Editor, ContentState, convertFromHTML, DefaultDraftBlockRenderMap, DefaultDraftInlineStyle, CompositeDecorator} from 'draft-js';
+import {
+    Editor,
+    Modifier,
+    ContentState,
+    convertFromHTML,
+    DefaultDraftBlockRenderMap,
+    DefaultDraftInlineStyle,
+    CompositeDecorator
+} from 'draft-js';
 import * as sdk from  './index';
 
 const BLOCK_RENDER_MAP = DefaultDraftBlockRenderMap.set('unstyled', {
     element: 'p' // draft uses <div> by default which we don't really like, so we're using <p>
 });
 
-const styles = {
+const STYLES = {
     BOLD: 'strong',
     CODE: 'code',
     ITALIC: 'em',
@@ -17,18 +25,24 @@ export function contentStateToHTML(contentState: ContentState): string {
     return contentState.getBlockMap().map((block) => {
         let elem = BLOCK_RENDER_MAP.get(block.getType()).element;
         let content = [];
-        block.findStyleRanges(() => true, (start, end) => {
-            const tags = block.getInlineStyleAt(start).map(style => styles[style]);
-            const open = tags.map(tag => `<${tag}>`).join('');
-            const close = tags.map(tag => `</${tag}>`).reverse().join('');
-            content.push(`${open}${block.getText().substring(start, end)}${close}`);
-        });
+        block.findStyleRanges(
+            () => true, // always return true => don't filter any ranges out
+            (start, end) => {
+                // map style names to elements
+                let tags = block.getInlineStyleAt(start).map(style => STYLES[style]);
+                // combine them to get well-nested HTML
+                let open = tags.map(tag => `<${tag}>`).join('');
+                let close = tags.map(tag => `</${tag}>`).reverse().join('');
+                // and get the HTML representation of this styled range (this .substring() should never fail)
+                content.push(`${open}${block.getText().substring(start, end)}${close}`);
+            }
+        );
 
         return (`<${elem}>${content.join('')}</${elem}>`);
     }).join('');
 }
 
-export function HTMLtoContentState(html:String): ContentState {
+export function HTMLtoContentState(html: string): ContentState {
     return ContentState.createFromBlockArray(convertFromHTML(html));
 }
 
@@ -37,29 +51,25 @@ const ROOM_REGEX = /#\S+:\S+/g;
 
 /**
  * Returns a composite decorator which has access to provided scope.
- * 
- * @param scope
- * @returns {*}
  */
-export function getScopedDecorator(scope) {
-    const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+export function getScopedDecorator(scope: any): CompositeDecorator {
+    let MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
 
-    const usernameDecorator = {
+    let usernameDecorator = {
         strategy: (contentBlock, callback) => {
             findWithRegex(USERNAME_REGEX, contentBlock, callback);
         },
         component: (props) => {
             let member = scope.room.getMember(props.children[0].props.text);
             let name = null;
-            if(!!member) {
-                name = member.name;
+            if (!!member) {
+                name = member.name; // unused until we make these decorators immutable (autocomplete needed)
             }
-            console.log(member);
-            let avatar = member ? <MemberAvatar member={member} width={16} height={16} /> : null;
+            let avatar = member ? <MemberAvatar member={member} width={16} height={16}/> : null;
             return <span className="mx_UserPill">{avatar} {props.children}</span>;
         }
     };
-    const roomDecorator = {
+    let roomDecorator = {
         strategy: (contentBlock, callback) => {
             findWithRegex(ROOM_REGEX, contentBlock, callback);
         },
@@ -71,7 +81,11 @@ export function getScopedDecorator(scope) {
     return new CompositeDecorator([usernameDecorator, roomDecorator]);
 }
 
-function findWithRegex(regex, contentBlock, callback) {
+/**
+ * Utility function that looks for regex matches within a ContentBlock and invokes {callback} with (start, end)
+ * From https://facebook.github.io/draft-js/docs/advanced-topics-decorators.html
+ */
+function findWithRegex(regex, contentBlock: ContentBlock, callback: (start: number, end: number) => any) {
     const text = contentBlock.getText();
     let matchArr, start;
     while ((matchArr = regex.exec(text)) !== null) {
@@ -79,3 +93,19 @@ function findWithRegex(regex, contentBlock, callback) {
         callback(start, start + matchArr[0].length);
     }
 }
+
+/**
+ * Passes rangeToReplace to modifyFn and replaces it in contentState with the result.
+ */
+export function modifyText(contentState: ContentState, rangeToReplace: SelectionState, modifyFn: (text: string) => string, ...rest): ContentState {
+    let startKey = rangeToReplace.getStartKey(),
+        endKey = contentState.getKeyAfter(rangeToReplace.getEndKey()),
+        text = "";
+
+    for(let currentKey = startKey; currentKey && currentKey !== endKey; currentKey = contentState.getKeyAfter(currentKey)) {
+        let currentBlock = contentState.getBlockForKey(currentKey);
+        text += currentBlock.getText();
+    }
+
+    return Modifier.replaceText(contentState, rangeToReplace, modifyFn(text), ...rest);
+}
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 56046f0798..98dd2855c4 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -42,7 +42,7 @@ var sdk = require('../../../index');
 var dis = require("../../../dispatcher");
 var KeyCode = require("../../../KeyCode");
 
-import {contentStateToHTML, HTMLtoContentState, getScopedDecorator} from '../../../RichText';
+import * as RichText from '../../../RichText';
 
 const TYPING_USER_TIMEOUT = 10000, TYPING_SERVER_TIMEOUT = 30000;
 
@@ -69,7 +69,7 @@ export default class MessageComposerInput extends React.Component {
         this.onInputClick = this.onInputClick.bind(this);
 
         this.state = {
-            isRichtextEnabled: true,
+            isRichtextEnabled: false,
             editorState: null
         };
 
@@ -95,7 +95,7 @@ export default class MessageComposerInput extends React.Component {
         let func = contentState ? EditorState.createWithContent : EditorState.createEmpty;
         let args = contentState ? [contentState] : [];
         if(this.state.isRichtextEnabled) {
-            args.push(getScopedDecorator(this.props));
+            args.push(RichText.getScopedDecorator(this.props));
         }
         return func.apply(null, args);
     }
@@ -114,7 +114,7 @@ export default class MessageComposerInput extends React.Component {
             // The textarea element to set text to.
             element: null,
 
-            init: function (element, roomId) {
+            init: function(element, roomId) {
                 this.roomId = roomId;
                 this.element = element;
                 this.position = -1;
@@ -129,7 +129,7 @@ export default class MessageComposerInput extends React.Component {
                 }
             },
 
-            push: function (text) {
+            push: function(text) {
                 // store a message in the sent history
                 this.data.unshift(text);
                 window.sessionStorage.setItem(
@@ -142,7 +142,7 @@ export default class MessageComposerInput extends React.Component {
             },
 
             // move in the history. Returns true if we managed to move.
-            next: function (offset) {
+            next: function(offset) {
                 if (this.position === -1) {
                     // user is going into the history, save the current line.
                     this.originalText = this.element.value;
@@ -175,7 +175,7 @@ export default class MessageComposerInput extends React.Component {
                 return true;
             },
 
-            saveLastTextEntry: function () {
+            saveLastTextEntry: function() {
                 // save the currently entered text in order to restore it later.
                 // NB: This isn't 'originalText' because we want to restore
                 // sent history items too!
@@ -183,7 +183,7 @@ export default class MessageComposerInput extends React.Component {
                 window.sessionStorage.setItem("input_" + this.roomId, contentJSON);
             },
 
-            setLastTextEntry: function () {
+            setLastTextEntry: function() {
                 let contentJSON = window.sessionStorage.getItem("input_" + this.roomId);
                 if (contentJSON) {
                     let content = convertFromRaw(JSON.parse(contentJSON));
@@ -404,7 +404,7 @@ export default class MessageComposerInput extends React.Component {
         this.refs.editor.focus();
     }
 
-    onChange(editorState) {
+    onChange(editorState: EditorState) {
         this.setState({editorState});
 
         if(editorState.getCurrentContent().hasText()) {
@@ -414,30 +414,60 @@ export default class MessageComposerInput extends React.Component {
         }
     }
 
-    handleKeyCommand(command) {
-        if(command === 'toggle-mode') {
+    enableRichtext(enabled: boolean) {
+        this.setState({
+            isRichtextEnabled: enabled
+        });
+
+        if(!this.state.isRichtextEnabled) {
+            let html = mdownToHtml(this.state.editorState.getCurrentContent().getPlainText());
             this.setState({
-                isRichtextEnabled: !this.state.isRichtextEnabled
+                editorState: this.createEditorState(RichText.HTMLtoContentState(html))
             });
+        } else {
+            let markdown = stateToMarkdown(this.state.editorState.getCurrentContent());
+            let contentState = ContentState.createFromText(markdown);
+            this.setState({
+                editorState: this.createEditorState(contentState)
+            });
+        }
+    }
 
-            if(!this.state.isRichtextEnabled) {
-                let html = mdownToHtml(this.state.editorState.getCurrentContent().getPlainText());
-                this.setState({
-                    editorState: this.createEditorState(HTMLtoContentState(html))
-                });
-            } else {
-                let markdown = stateToMarkdown(this.state.editorState.getCurrentContent());
-                let contentState = ContentState.createFromText(markdown);
-                this.setState({
-                    editorState: this.createEditorState(contentState)
-                });
-            }
-
+    handleKeyCommand(command: string): boolean {
+        if(command === 'toggle-mode') {
+            this.enableRichtext(!this.state.isRichtextEnabled);
             return true;
         }
 
-        let newState = RichUtils.handleKeyCommand(this.state.editorState, command);
-        if (newState) {
+        let newState: ?EditorState = null;
+
+        // Draft handles rich text mode commands by default but we need to do it ourselves for Markdown.
+        if(!this.state.isRichtextEnabled) {
+            let contentState = this.state.editorState.getCurrentContent(),
+                selection = this.state.editorState.getSelection();
+
+            let modifyFn = {
+                bold: text => `**${text}**`,
+                italic: text => `*${text}*`,
+                underline: text => `_${text}_`, // there's actually no valid underline in Markdown, but *shrug*
+                code: text => `\`${text}\``
+            }[command];
+
+            if(modifyFn) {
+                newState = EditorState.push(
+                    this.state.editorState,
+                    RichText.modifyText(contentState, selection, modifyFn),
+                    'insert-characters'
+                );
+            }
+            console.log(modifyFn);
+            console.log(newState);
+        }
+
+        if(newState == null)
+            newState = RichUtils.handleKeyCommand(this.state.editorState, command);
+
+        if (newState != null) {
             this.onChange(newState);
             return true;
         }
@@ -455,7 +485,7 @@ export default class MessageComposerInput extends React.Component {
         let contentText = contentState.getPlainText(), contentHTML;
 
         if(this.state.isRichtextEnabled) {
-            contentHTML = contentStateToHTML(contentState);
+            contentHTML = RichText.contentStateToHTML(contentState);
         } else {
             contentHTML = mdownToHtml(contentText);
         }

From c0d762998097c89c8b585e247449ad190d0fabfe Mon Sep 17 00:00:00 2001
From: Aviral Dasgupta <me@aviraldg.com>
Date: Sun, 12 Jun 2016 00:11:27 +0530
Subject: [PATCH 07/15] get /commands working again

---
 .../views/rooms/MessageComposerInput.js       | 142 +++++++-----------
 1 file changed, 53 insertions(+), 89 deletions(-)

diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 98dd2855c4..3c5ddf1512 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -46,6 +46,7 @@ import * as RichText from '../../../RichText';
 
 const TYPING_USER_TIMEOUT = 10000, TYPING_SERVER_TIMEOUT = 30000;
 
+// FIXME Breaks markdown with multiple paragraphs, since it only strips first and last <p>
 function mdownToHtml(mdown) {
     var html = marked(mdown) || "";
     html = html.trim();
@@ -67,14 +68,19 @@ export default class MessageComposerInput extends React.Component {
         super(props, context);
         this.onAction = this.onAction.bind(this);
         this.onInputClick = this.onInputClick.bind(this);
+        this.handleReturn = this.handleReturn.bind(this);
+        this.handleKeyCommand = this.handleKeyCommand.bind(this);
+        this.onChange = this.onChange.bind(this);
 
         this.state = {
-            isRichtextEnabled: false,
+            isRichtextEnabled: false, // TODO enable by default when RTE is mature enough
             editorState: null
         };
 
         // bit of a hack, but we need to do this here since createEditorState needs isRichtextEnabled
         this.state.editorState = this.createEditorState();
+
+        this.client = MatrixClientPeg.get();
     }
 
     static getKeyBinding(e: SyntheticKeyboardEvent): string {
@@ -97,7 +103,7 @@ export default class MessageComposerInput extends React.Component {
         if(this.state.isRichtextEnabled) {
             args.push(RichText.getScopedDecorator(this.props));
         }
-        return func.apply(null, args);
+        return func(...args);
     }
 
     componentWillMount() {
@@ -254,86 +260,6 @@ export default class MessageComposerInput extends React.Component {
         }
     }
 
-    onEnter(ev) {
-        var contentText = this.refs.textarea.value;
-
-        // bodge for now to set markdown state on/off. We probably want a separate
-        // area for "local" commands which don't hit out to the server.
-        // if (contentText.indexOf("/markdown") === 0) {
-        //     ev.preventDefault();
-        //     this.refs.textarea.value = '';
-        //     if (contentText.indexOf("/markdown on") === 0) {
-        //         this.markdownEnabled = true;
-        //     }
-        //     else if (contentText.indexOf("/markdown off") === 0) {
-        //         this.markdownEnabled = false;
-        //     }
-        //     else {
-        //         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-        //         Modal.createDialog(ErrorDialog, {
-        //             title: "Unknown command",
-        //             description: "Usage: /markdown on|off"
-        //         });
-        //     }
-        //     return;
-        // }
-
-        var cmd = SlashCommands.processInput(this.props.room.roomId, contentText);
-        if (cmd) {
-            ev.preventDefault();
-            if (!cmd.error) {
-                this.refs.textarea.value = '';
-            }
-            if (cmd.promise) {
-                cmd.promise.done(function() {
-                    console.log("Command success.");
-                }, function(err) {
-                    console.error("Command failure: %s", err);
-                    var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                    Modal.createDialog(ErrorDialog, {
-                        title: "Server error",
-                        description: err.message
-                    });
-                });
-            }
-            else if (cmd.error) {
-                console.error(cmd.error);
-                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createDialog(ErrorDialog, {
-                    title: "Command error",
-                    description: cmd.error
-                });
-            }
-            return;
-        }
-
-        var isEmote = /^\/me( |$)/i.test(contentText);
-        var sendMessagePromise;
-
-        if (isEmote) {
-            contentText = contentText.substring(4);
-        }
-        else if (contentText[0] === '/') {
-            contentText = contentText.substring(1);
-        }
-
-        var htmlText;
-        if (this.markdownEnabled && (htmlText = mdownToHtml(contentText)) !== contentText) {
-            sendMessagePromise = isEmote ?
-                MatrixClientPeg.get().sendHtmlEmote(this.props.room.roomId, contentText, htmlText) :
-                MatrixClientPeg.get().sendHtmlMessage(this.props.room.roomId, contentText, htmlText);
-        }
-        else {
-            sendMessagePromise = isEmote ?
-                MatrixClientPeg.get().sendEmoteMessage(this.props.room.roomId, contentText) :
-                MatrixClientPeg.get().sendTextMessage(this.props.room.roomId, contentText);
-        }
-
-
-        this.refs.textarea.value = '';
-        ev.preventDefault();
-    }
-
     onTypingActivity() {
         this.isTyping = true;
         if (!this.userTypingTimer) {
@@ -460,8 +386,6 @@ export default class MessageComposerInput extends React.Component {
                     'insert-characters'
                 );
             }
-            console.log(modifyFn);
-            console.log(newState);
         }
 
         if(newState == null)
@@ -484,14 +408,53 @@ export default class MessageComposerInput extends React.Component {
 
         let contentText = contentState.getPlainText(), contentHTML;
 
+        var cmd = SlashCommands.processInput(this.props.room.roomId, contentText);
+        if (cmd) {
+            if (!cmd.error) {
+                this.setState({
+                    editorState: this.createEditorState()
+                });
+            }
+            if (cmd.promise) {
+                cmd.promise.done(function() {
+                    console.log("Command success.");
+                }, function(err) {
+                    console.error("Command failure: %s", err);
+                    var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    Modal.createDialog(ErrorDialog, {
+                        title: "Server error",
+                        description: err.message
+                    });
+                });
+            }
+            else if (cmd.error) {
+                console.error(cmd.error);
+                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                Modal.createDialog(ErrorDialog, {
+                    title: "Command error",
+                    description: cmd.error
+                });
+            }
+            return true;
+        }
+
         if(this.state.isRichtextEnabled) {
             contentHTML = RichText.contentStateToHTML(contentState);
         } else {
             contentHTML = mdownToHtml(contentText);
         }
 
+        let sendFn = this.client.sendHtmlMessage;
+
+        if (contentText.startsWith('/me')) {
+            contentText = contentText.replace('/me', '');
+            // bit of a hack, but the alternative would be quite complicated
+            contentHTML = contentHTML.replace('/me', '');
+            sendFn = this.client.sendHtmlEmote;
+        }
+
         this.sentHistory.push(contentHTML);
-        let sendMessagePromise = MatrixClientPeg.get().sendHtmlMessage(this.props.room.roomId, contentText, contentHTML);
+        let sendMessagePromise = sendFn.call(this.client, this.props.room.roomId, contentText, contentHTML);
 
         sendMessagePromise.done(() => {
             dis.dispatch({
@@ -517,17 +480,18 @@ export default class MessageComposerInput extends React.Component {
             className += " mx_MessageComposer_input_rte"; // placeholder indicator for RTE mode
         }
 
-
         return (
             <div className={className}
                  onClick={ this.onInputClick }>
                 <Editor ref="editor"
                         placeholder="Type a message…"
                         editorState={this.state.editorState}
-                        onChange={(state) => this.onChange(state)}
+                        onChange={this.onChange}
                         keyBindingFn={MessageComposerInput.getKeyBinding}
-                        handleKeyCommand={(command) => this.handleKeyCommand(command)}
-                        handleReturn={ev => this.handleReturn(ev)} />
+                        handleKeyCommand={this.handleKeyCommand}
+                        handleReturn={this.handleReturn}
+                        stripPastedStyles={!this.state.isRichtextEnabled}
+                        spellCheck={true} />
             </div>
         );
     }

From a5a3e4e9150090e8bc2cc031b548125a56bf103a Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <pedro@dete.st>
Date: Sat, 11 Jun 2016 23:13:57 +0200
Subject: [PATCH 08/15] Basic Markdown highlighting

---
 src/RichText.js                               | 37 ++++++++++++++++++-
 .../views/rooms/MessageComposerInput.js       | 16 ++++----
 2 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/RichText.js b/src/RichText.js
index f1f2188d0d..2334bbf2d6 100644
--- a/src/RichText.js
+++ b/src/RichText.js
@@ -52,7 +52,7 @@ const ROOM_REGEX = /#\S+:\S+/g;
 /**
  * Returns a composite decorator which has access to provided scope.
  */
-export function getScopedDecorator(scope: any): CompositeDecorator {
+export function getScopedRTDecorators(scope: any): CompositeDecorator {
     let MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
 
     let usernameDecorator = {
@@ -78,9 +78,42 @@ export function getScopedDecorator(scope: any): CompositeDecorator {
         }
     };
 
-    return new CompositeDecorator([usernameDecorator, roomDecorator]);
+    return [usernameDecorator, roomDecorator];
 }
 
+export function getScopedMDDecorators(scope: any): CompositeDecorator {
+    let markdownDecorators = ['BOLD', 'ITALIC'].map(
+        (style) => ({
+            strategy: (contentBlock, callback) => {
+                return findWithRegex(MARKDOWN_REGEX[style], contentBlock, callback);
+            },
+            component: (props) => (
+                <span className={"mx_MarkdownElement mx_Markdown_" + style}>
+                    {props.children}
+                </span>
+            )
+        }));
+
+    markdownDecorators.push({
+        strategy: (contentBlock, callback) => {
+            return findWithRegex(MARKDOWN_REGEX.LINK, contentBlock, callback);
+        },
+        component: (props) => (
+            <a href="#" className="mx_MarkdownElement mx_Markdown_LINK">
+                {props.children}
+            </a>
+        )
+    });
+
+    return markdownDecorators;
+}
+
+const MARKDOWN_REGEX = {
+    LINK: /(?:\[([^\]]+)\]\(([^\)]+)\))|\<(\w+:\/\/[^\>]+)\>/g,
+    ITALIC: /([\*_])([\w\s]+?)\1/g,
+    BOLD: /([\*_])\1([\w\s]+?)\1\1/g
+};
+
 /**
  * Utility function that looks for regex matches within a ContentBlock and invokes {callback} with (start, end)
  * From https://facebook.github.io/draft-js/docs/advanced-topics-decorators.html
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 3c5ddf1512..eb096d5bc3 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -99,10 +99,10 @@ export default class MessageComposerInput extends React.Component {
      */
     createEditorState(contentState: ?ContentState): EditorState {
         let func = contentState ? EditorState.createWithContent : EditorState.createEmpty;
+        const decoratorFunc = this.state.isRichtextEnabled ? RichText.getScopedRTDecorators :
+                              RichText.getScopedMDDecorators;
         let args = contentState ? [contentState] : [];
-        if(this.state.isRichtextEnabled) {
-            args.push(RichText.getScopedDecorator(this.props));
-        }
+        args.push(new CompositeDecorator(decoratorFunc(this.props)));
         return func(...args);
     }
 
@@ -341,11 +341,7 @@ export default class MessageComposerInput extends React.Component {
     }
 
     enableRichtext(enabled: boolean) {
-        this.setState({
-            isRichtextEnabled: enabled
-        });
-
-        if(!this.state.isRichtextEnabled) {
+        if(enabled) {
             let html = mdownToHtml(this.state.editorState.getCurrentContent().getPlainText());
             this.setState({
                 editorState: this.createEditorState(RichText.HTMLtoContentState(html))
@@ -357,6 +353,10 @@ export default class MessageComposerInput extends React.Component {
                 editorState: this.createEditorState(contentState)
             });
         }
+
+        this.setState({
+            isRichtextEnabled: enabled
+        });
     }
 
     handleKeyCommand(command: string): boolean {

From 8f45f168d5224e56dc1cdb5cf83e5a498cbb76c6 Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <pedro@dete.st>
Date: Sat, 11 Jun 2016 23:51:18 +0200
Subject: [PATCH 09/15] Fix highlighting behaviour on switch

Hopefully made the code a little bit clearer.
---
 .../views/rooms/MessageComposerInput.js       | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index eb096d5bc3..da61631b4d 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -97,13 +97,16 @@ export default class MessageComposerInput extends React.Component {
      * - whether we've got rich text mode enabled
      * - contentState was passed in
      */
-    createEditorState(contentState: ?ContentState): EditorState {
-        let func = contentState ? EditorState.createWithContent : EditorState.createEmpty;
-        const decoratorFunc = this.state.isRichtextEnabled ? RichText.getScopedRTDecorators :
-                              RichText.getScopedMDDecorators;
-        let args = contentState ? [contentState] : [];
-        args.push(new CompositeDecorator(decoratorFunc(this.props)));
-        return func(...args);
+    createEditorState(richText: boolean, contentState: ?ContentState): EditorState {
+        let decorators = richText ? RichText.getScopedRTDecorators(this.props) :
+                                    RichText.getScopedMDDecorators(this.props),
+            compositeDecorator = new CompositeDecorator(decorators);
+
+        if (contentState) {
+            return EditorState.createWithContent(contentState, compositeDecorator);
+        } else {
+            return EditorState.createEmpty(compositeDecorator);
+        }
     }
 
     componentWillMount() {
@@ -194,7 +197,7 @@ export default class MessageComposerInput extends React.Component {
                 if (contentJSON) {
                     let content = convertFromRaw(JSON.parse(contentJSON));
                     component.setState({
-                        editorState: component.createEditorState(content)
+                        editorState: component.createEditorState(this.state.isRichtextEnabled, content)
                     });
                 }
             }
@@ -341,16 +344,16 @@ export default class MessageComposerInput extends React.Component {
     }
 
     enableRichtext(enabled: boolean) {
-        if(enabled) {
+        if (enabled) {
             let html = mdownToHtml(this.state.editorState.getCurrentContent().getPlainText());
             this.setState({
-                editorState: this.createEditorState(RichText.HTMLtoContentState(html))
+                editorState: this.createEditorState(enabled, RichText.HTMLtoContentState(html))
             });
         } else {
-            let markdown = stateToMarkdown(this.state.editorState.getCurrentContent());
-            let contentState = ContentState.createFromText(markdown);
+            let markdown = stateToMarkdown(this.state.editorState.getCurrentContent()),
+                contentState = ContentState.createFromText(markdown);
             this.setState({
-                editorState: this.createEditorState(contentState)
+                editorState: this.createEditorState(enabled, contentState)
             });
         }
 

From 294a8efdc46c1c81a43fa103c391dd6eeb350972 Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <pedro@dete.st>
Date: Sun, 12 Jun 2016 00:50:30 +0200
Subject: [PATCH 10/15] Fix behaviour of modifyText

Since it was not correctly extracting the selected part of the text
string
---
 src/RichText.js | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/RichText.js b/src/RichText.js
index 2334bbf2d6..d218e698a6 100644
--- a/src/RichText.js
+++ b/src/RichText.js
@@ -130,15 +130,27 @@ function findWithRegex(regex, contentBlock: ContentBlock, callback: (start: numb
 /**
  * Passes rangeToReplace to modifyFn and replaces it in contentState with the result.
  */
-export function modifyText(contentState: ContentState, rangeToReplace: SelectionState, modifyFn: (text: string) => string, ...rest): ContentState {
-    let startKey = rangeToReplace.getStartKey(),
-        endKey = contentState.getKeyAfter(rangeToReplace.getEndKey()),
+export function modifyText(contentState: ContentState, rangeToReplace: SelectionState,
+                           modifyFn: (text: string) => string, ...rest): ContentState {
+    let getText = (key) => contentState.getBlockForKey(key).getText(),
+        startKey = rangeToReplace.getStartKey(),
+        startOffset = rangeToReplace.getStartOffset(),
+        endKey = rangeToReplace.getEndKey(),
+        endOffset = rangeToReplace.getEndOffset(),
         text = "";
 
-    for(let currentKey = startKey; currentKey && currentKey !== endKey; currentKey = contentState.getKeyAfter(currentKey)) {
-        let currentBlock = contentState.getBlockForKey(currentKey);
-        text += currentBlock.getText();
+
+    for(let currentKey = startKey;
+            currentKey && currentKey !== endKey;
+            currentKey = contentState.getKeyAfter(currentKey)) {
+        text += getText(currentKey).substring(startOffset, blockText.length);
+
+        // from now on, we'll take whole blocks
+        startOffset = 0;
     }
 
+    // add remaining part of last block
+    text += getText(endKey).substring(startOffset, endOffset);
+
     return Modifier.replaceText(contentState, rangeToReplace, modifyFn(text), ...rest);
 }

From e75a28bb0dea6b79895e5efe3c01631935d026d9 Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <pedro@dete.st>
Date: Sun, 12 Jun 2016 00:52:30 +0200
Subject: [PATCH 11/15] Minimal house cleaning

---
 src/RichText.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/RichText.js b/src/RichText.js
index d218e698a6..c0d80d2ec7 100644
--- a/src/RichText.js
+++ b/src/RichText.js
@@ -21,6 +21,15 @@ const STYLES = {
     UNDERLINE: 'u'
 };
 
+const MARKDOWN_REGEX = {
+    LINK: /(?:\[([^\]]+)\]\(([^\)]+)\))|\<(\w+:\/\/[^\>]+)\>/g,
+    ITALIC: /([\*_])([\w\s]+?)\1/g,
+    BOLD: /([\*_])\1([\w\s]+?)\1\1/g
+};
+
+const USERNAME_REGEX = /@\S+:\S+/g;
+const ROOM_REGEX = /#\S+:\S+/g;
+
 export function contentStateToHTML(contentState: ContentState): string {
     return contentState.getBlockMap().map((block) => {
         let elem = BLOCK_RENDER_MAP.get(block.getType()).element;
@@ -46,9 +55,6 @@ export function HTMLtoContentState(html: string): ContentState {
     return ContentState.createFromBlockArray(convertFromHTML(html));
 }
 
-const USERNAME_REGEX = /@\S+:\S+/g;
-const ROOM_REGEX = /#\S+:\S+/g;
-
 /**
  * Returns a composite decorator which has access to provided scope.
  */
@@ -108,12 +114,6 @@ export function getScopedMDDecorators(scope: any): CompositeDecorator {
     return markdownDecorators;
 }
 
-const MARKDOWN_REGEX = {
-    LINK: /(?:\[([^\]]+)\]\(([^\)]+)\))|\<(\w+:\/\/[^\>]+)\>/g,
-    ITALIC: /([\*_])([\w\s]+?)\1/g,
-    BOLD: /([\*_])\1([\w\s]+?)\1\1/g
-};
-
 /**
  * Utility function that looks for regex matches within a ContentBlock and invokes {callback} with (start, end)
  * From https://facebook.github.io/draft-js/docs/advanced-topics-decorators.html

From 34be17cc7e9f93676cc2874dafa68713ccd8daea Mon Sep 17 00:00:00 2001
From: Aviral Dasgupta <me@aviraldg.com>
Date: Tue, 14 Jun 2016 00:10:43 +0530
Subject: [PATCH 12/15] use rte labs setting

---
 src/component-index.js                        |   1 +
 src/components/views/rooms/MessageComposer.js |   5 +-
 .../views/rooms/MessageComposerInputOld.js    | 447 ++++++++++++++++++
 3 files changed, 452 insertions(+), 1 deletion(-)
 create mode 100644 src/components/views/rooms/MessageComposerInputOld.js

diff --git a/src/component-index.js b/src/component-index.js
index 3570523bde..4aa0efe21f 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -85,6 +85,7 @@ module.exports.components['views.rooms.MemberList'] = require('./components/view
 module.exports.components['views.rooms.MemberTile'] = require('./components/views/rooms/MemberTile');
 module.exports.components['views.rooms.MessageComposer'] = require('./components/views/rooms/MessageComposer');
 module.exports.components['views.rooms.MessageComposerInput'] = require('./components/views/rooms/MessageComposerInput');
+module.exports.components['views.rooms.MessageComposerInputOld'] = require('./components/views/rooms/MessageComposerInputOld');
 module.exports.components['views.rooms.PresenceLabel'] = require('./components/views/rooms/PresenceLabel');
 module.exports.components['views.rooms.ReadReceiptMarker'] = require('./components/views/rooms/ReadReceiptMarker');
 module.exports.components['views.rooms.RoomHeader'] = require('./components/views/rooms/RoomHeader');
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 18d138f013..eaee8205e4 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -21,6 +21,8 @@ var Modal = require('../../../Modal');
 var sdk = require('../../../index');
 var dis = require('../../../dispatcher');
 
+import UserSettingsStore from '../../../UserSettingsStore';
+
 
 module.exports = React.createClass({
     displayName: 'MessageComposer',
@@ -131,7 +133,8 @@ module.exports = React.createClass({
         var uploadInputStyle = {display: 'none'};
         var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
-        var MessageComposerInput = sdk.getComponent("rooms.MessageComposerInput");
+        var MessageComposerInput = sdk.getComponent("rooms.MessageComposerInput" +
+            (UserSettingsStore.isFeatureEnabled('rich_text_editor') ? "" : "Old"));
 
         var controls = [];
 
diff --git a/src/components/views/rooms/MessageComposerInputOld.js b/src/components/views/rooms/MessageComposerInputOld.js
new file mode 100644
index 0000000000..20b57fb246
--- /dev/null
+++ b/src/components/views/rooms/MessageComposerInputOld.js
@@ -0,0 +1,447 @@
+/*
+ Copyright 2015, 2016 OpenMarket 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.
+ */
+var React = require("react");
+
+var marked = require("marked");
+marked.setOptions({
+    renderer: new marked.Renderer(),
+    gfm: true,
+    tables: true,
+    breaks: true,
+    pedantic: false,
+    sanitize: true,
+    smartLists: true,
+    smartypants: false
+});
+
+var MatrixClientPeg = require("../../../MatrixClientPeg");
+var SlashCommands = require("../../../SlashCommands");
+var Modal = require("../../../Modal");
+var MemberEntry = require("../../../TabCompleteEntries").MemberEntry;
+var sdk = require('../../../index');
+
+var dis = require("../../../dispatcher");
+var KeyCode = require("../../../KeyCode");
+
+var TYPING_USER_TIMEOUT = 10000;
+var TYPING_SERVER_TIMEOUT = 30000;
+var MARKDOWN_ENABLED = true;
+
+function mdownToHtml(mdown) {
+    var html = marked(mdown) || "";
+    html = html.trim();
+    // strip start and end <p> tags else you get 'orrible spacing
+    if (html.indexOf("<p>") === 0) {
+        html = html.substring("<p>".length);
+    }
+    if (html.lastIndexOf("</p>") === (html.length - "</p>".length)) {
+        html = html.substring(0, html.length - "</p>".length);
+    }
+    return html;
+}
+
+/*
+ * The textInput part of the MessageComposer
+ */
+module.exports = React.createClass({
+    displayName: 'MessageComposerInput',
+
+    statics: {
+        // the height we limit the composer to
+        MAX_HEIGHT: 100,
+    },
+
+    propTypes: {
+        tabComplete: React.PropTypes.any,
+
+        // a callback which is called when the height of the composer is
+        // changed due to a change in content.
+        onResize: React.PropTypes.func,
+
+        // js-sdk Room object
+        room: React.PropTypes.object.isRequired,
+    },
+
+    componentWillMount: function() {
+        this.oldScrollHeight = 0;
+        this.markdownEnabled = MARKDOWN_ENABLED;
+        var self = this;
+        this.sentHistory = {
+            // The list of typed messages. Index 0 is more recent
+            data: [],
+            // The position in data currently displayed
+            position: -1,
+            // The room the history is for.
+            roomId: null,
+            // The original text before they hit UP
+            originalText: null,
+            // The textarea element to set text to.
+            element: null,
+
+            init: function(element, roomId) {
+                this.roomId = roomId;
+                this.element = element;
+                this.position = -1;
+                var storedData = window.sessionStorage.getItem(
+                    "history_" + roomId
+                );
+                if (storedData) {
+                    this.data = JSON.parse(storedData);
+                }
+                if (this.roomId) {
+                    this.setLastTextEntry();
+                }
+            },
+
+            push: function(text) {
+                // store a message in the sent history
+                this.data.unshift(text);
+                window.sessionStorage.setItem(
+                    "history_" + this.roomId,
+                    JSON.stringify(this.data)
+                );
+                // reset history position
+                this.position = -1;
+                this.originalText = null;
+            },
+
+            // move in the history. Returns true if we managed to move.
+            next: function(offset) {
+                if (this.position === -1) {
+                    // user is going into the history, save the current line.
+                    this.originalText = this.element.value;
+                }
+                else {
+                    // user may have modified this line in the history; remember it.
+                    this.data[this.position] = this.element.value;
+                }
+
+                if (offset > 0 && this.position === (this.data.length - 1)) {
+                    // we've run out of history
+                    return false;
+                }
+
+                // retrieve the next item (bounded).
+                var newPosition = this.position + offset;
+                newPosition = Math.max(-1, newPosition);
+                newPosition = Math.min(newPosition, this.data.length - 1);
+                this.position = newPosition;
+
+                if (this.position !== -1) {
+                    // show the message
+                    this.element.value = this.data[this.position];
+                }
+                else if (this.originalText !== undefined) {
+                    // restore the original text the user was typing.
+                    this.element.value = this.originalText;
+                }
+
+                self.resizeInput();
+                return true;
+            },
+
+            saveLastTextEntry: function() {
+                // save the currently entered text in order to restore it later.
+                // NB: This isn't 'originalText' because we want to restore
+                // sent history items too!
+                var text = this.element.value;
+                window.sessionStorage.setItem("input_" + this.roomId, text);
+            },
+
+            setLastTextEntry: function() {
+                var text = window.sessionStorage.getItem("input_" + this.roomId);
+                if (text) {
+                    this.element.value = text;
+                    self.resizeInput();
+                }
+            }
+        };
+    },
+
+    componentDidMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
+        this.sentHistory.init(
+            this.refs.textarea,
+            this.props.room.roomId
+        );
+        this.resizeInput();
+        if (this.props.tabComplete) {
+            this.props.tabComplete.setTextArea(this.refs.textarea);
+        }
+    },
+
+    componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
+        this.sentHistory.saveLastTextEntry();
+    },
+
+    onAction: function(payload) {
+        var textarea = this.refs.textarea;
+        switch (payload.action) {
+            case 'focus_composer':
+                textarea.focus();
+                break;
+            case 'insert_displayname':
+                if (textarea.value.length) {
+                    var left = textarea.value.substring(0, textarea.selectionStart);
+                    var right = textarea.value.substring(textarea.selectionEnd);
+                    if (right.length) {
+                        left += payload.displayname;
+                    }
+                    else {
+                        left = left.replace(/( ?)$/, " " + payload.displayname);
+                    }
+                    textarea.value = left + right;
+                    textarea.focus();
+                    textarea.setSelectionRange(left.length, left.length);
+                }
+                else {
+                    textarea.value = payload.displayname + ": ";
+                    textarea.focus();
+                }
+                break;
+        }
+    },
+
+    onKeyDown: function (ev) {
+        if (ev.keyCode === KeyCode.ENTER && !ev.shiftKey) {
+            var input = this.refs.textarea.value;
+            if (input.length === 0) {
+                ev.preventDefault();
+                return;
+            }
+            this.sentHistory.push(input);
+            this.onEnter(ev);
+        }
+        else if (ev.keyCode === KeyCode.UP || ev.keyCode === KeyCode.DOWN) {
+            var oldSelectionStart = this.refs.textarea.selectionStart;
+            // Remember the keyCode because React will recycle the synthetic event
+            var keyCode = ev.keyCode;
+            // set a callback so we can see if the cursor position changes as
+            // a result of this event. If it doesn't, we cycle history.
+            setTimeout(() => {
+                if (this.refs.textarea.selectionStart == oldSelectionStart) {
+                    this.sentHistory.next(keyCode === KeyCode.UP ? 1 : -1);
+                    this.resizeInput();
+                }
+            }, 0);
+        }
+
+        if (this.props.tabComplete) {
+            this.props.tabComplete.onKeyDown(ev);
+        }
+
+        var self = this;
+        setTimeout(function() {
+            if (self.refs.textarea && self.refs.textarea.value != '') {
+                self.onTypingActivity();
+            } else {
+                self.onFinishedTyping();
+            }
+        }, 10); // XXX: what is this 10ms setTimeout doing?  Looks hacky :(
+    },
+
+    resizeInput: function() {
+        // scrollHeight is at least equal to clientHeight, so we have to
+        // temporarily crimp clientHeight to 0 to get an accurate scrollHeight value
+        this.refs.textarea.style.height = "20px"; // 20 hardcoded from CSS
+        var newHeight = Math.min(this.refs.textarea.scrollHeight,
+            this.constructor.MAX_HEIGHT);
+        this.refs.textarea.style.height = Math.ceil(newHeight) + "px";
+        this.oldScrollHeight = this.refs.textarea.scrollHeight;
+
+        if (this.props.onResize) {
+            // kick gemini-scrollbar to re-layout
+            this.props.onResize();
+        }
+    },
+
+    onKeyUp: function(ev) {
+        if (this.refs.textarea.scrollHeight !== this.oldScrollHeight ||
+            ev.keyCode === KeyCode.DELETE ||
+            ev.keyCode === KeyCode.BACKSPACE)
+        {
+            this.resizeInput();
+        }
+    },
+
+    onEnter: function(ev) {
+        var contentText = this.refs.textarea.value;
+
+        // bodge for now to set markdown state on/off. We probably want a separate
+        // area for "local" commands which don't hit out to the server.
+        if (contentText.indexOf("/markdown") === 0) {
+            ev.preventDefault();
+            this.refs.textarea.value = '';
+            if (contentText.indexOf("/markdown on") === 0) {
+                this.markdownEnabled = true;
+            }
+            else if (contentText.indexOf("/markdown off") === 0) {
+                this.markdownEnabled = false;
+            }
+            else {
+                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                Modal.createDialog(ErrorDialog, {
+                    title: "Unknown command",
+                    description: "Usage: /markdown on|off"
+                });
+            }
+            return;
+        }
+
+        var cmd = SlashCommands.processInput(this.props.room.roomId, contentText);
+        if (cmd) {
+            ev.preventDefault();
+            if (!cmd.error) {
+                this.refs.textarea.value = '';
+            }
+            if (cmd.promise) {
+                cmd.promise.done(function() {
+                    console.log("Command success.");
+                }, function(err) {
+                    console.error("Command failure: %s", err);
+                    var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    Modal.createDialog(ErrorDialog, {
+                        title: "Server error",
+                        description: err.message
+                    });
+                });
+            }
+            else if (cmd.error) {
+                console.error(cmd.error);
+                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                Modal.createDialog(ErrorDialog, {
+                    title: "Command error",
+                    description: cmd.error
+                });
+            }
+            return;
+        }
+
+        var isEmote = /^\/me( |$)/i.test(contentText);
+        var sendMessagePromise;
+
+        if (isEmote) {
+            contentText = contentText.substring(4);
+        }
+        else if (contentText[0] === '/') {
+            contentText = contentText.substring(1);
+        }
+
+        var htmlText;
+        if (this.markdownEnabled && (htmlText = mdownToHtml(contentText)) !== contentText) {
+            sendMessagePromise = isEmote ?
+                MatrixClientPeg.get().sendHtmlEmote(this.props.room.roomId, contentText, htmlText) :
+                MatrixClientPeg.get().sendHtmlMessage(this.props.room.roomId, contentText, htmlText);
+        }
+        else {
+            sendMessagePromise = isEmote ?
+                MatrixClientPeg.get().sendEmoteMessage(this.props.room.roomId, contentText) :
+                MatrixClientPeg.get().sendTextMessage(this.props.room.roomId, contentText);
+        }
+
+        sendMessagePromise.done(function() {
+            dis.dispatch({
+                action: 'message_sent'
+            });
+        }, function() {
+            dis.dispatch({
+                action: 'message_send_failed'
+            });
+        });
+        this.refs.textarea.value = '';
+        this.resizeInput();
+        ev.preventDefault();
+    },
+
+    onTypingActivity: function() {
+        this.isTyping = true;
+        if (!this.userTypingTimer) {
+            this.sendTyping(true);
+        }
+        this.startUserTypingTimer();
+        this.startServerTypingTimer();
+    },
+
+    onFinishedTyping: function() {
+        this.isTyping = false;
+        this.sendTyping(false);
+        this.stopUserTypingTimer();
+        this.stopServerTypingTimer();
+    },
+
+    startUserTypingTimer: function() {
+        this.stopUserTypingTimer();
+        var self = this;
+        this.userTypingTimer = setTimeout(function() {
+            self.isTyping = false;
+            self.sendTyping(self.isTyping);
+            self.userTypingTimer = null;
+        }, TYPING_USER_TIMEOUT);
+    },
+
+    stopUserTypingTimer: function() {
+        if (this.userTypingTimer) {
+            clearTimeout(this.userTypingTimer);
+            this.userTypingTimer = null;
+        }
+    },
+
+    startServerTypingTimer: function() {
+        if (!this.serverTypingTimer) {
+            var self = this;
+            this.serverTypingTimer = setTimeout(function() {
+                if (self.isTyping) {
+                    self.sendTyping(self.isTyping);
+                    self.startServerTypingTimer();
+                }
+            }, TYPING_SERVER_TIMEOUT / 2);
+        }
+    },
+
+    stopServerTypingTimer: function() {
+        if (this.serverTypingTimer) {
+            clearTimeout(this.servrTypingTimer);
+            this.serverTypingTimer = null;
+        }
+    },
+
+    sendTyping: function(isTyping) {
+        MatrixClientPeg.get().sendTyping(
+            this.props.room.roomId,
+            this.isTyping, TYPING_SERVER_TIMEOUT
+        ).done();
+    },
+
+    refreshTyping: function() {
+        if (this.typingTimeout) {
+            clearTimeout(this.typingTimeout);
+            this.typingTimeout = null;
+        }
+    },
+
+    onInputClick: function(ev) {
+        this.refs.textarea.focus();
+    },
+
+    render: function() {
+        return (
+            <div className="mx_MessageComposer_input" onClick={ this.onInputClick }>
+                <textarea autoFocus ref="textarea" rows="1" onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} placeholder="Type a message..." />
+            </div>
+        );
+    }
+});

From 2606ea959673600fea94df0f169467ef325f979a Mon Sep 17 00:00:00 2001
From: Aviral Dasgupta <me@aviraldg.com>
Date: Tue, 14 Jun 2016 19:10:35 +0530
Subject: [PATCH 13/15] fixes and improvements in RichText

---
 src/RichText.js | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/RichText.js b/src/RichText.js
index c0d80d2ec7..ba7a5f219e 100644
--- a/src/RichText.js
+++ b/src/RichText.js
@@ -38,7 +38,7 @@ export function contentStateToHTML(contentState: ContentState): string {
             () => true, // always return true => don't filter any ranges out
             (start, end) => {
                 // map style names to elements
-                let tags = block.getInlineStyleAt(start).map(style => STYLES[style]);
+                let tags = block.getInlineStyleAt(start).map(style => STYLES[style]).filter(style => !!style);
                 // combine them to get well-nested HTML
                 let open = tags.map(tag => `<${tag}>`).join('');
                 let close = tags.map(tag => `</${tag}>`).reverse().join('');
@@ -67,10 +67,8 @@ export function getScopedRTDecorators(scope: any): CompositeDecorator {
         },
         component: (props) => {
             let member = scope.room.getMember(props.children[0].props.text);
-            let name = null;
-            if (!!member) {
-                name = member.name; // unused until we make these decorators immutable (autocomplete needed)
-            }
+            // unused until we make these decorators immutable (autocomplete needed)
+            let name = member ? member.name : null;
             let avatar = member ? <MemberAvatar member={member} width={16} height={16}/> : null;
             return <span className="mx_UserPill">{avatar} {props.children}</span>;
         }
@@ -131,7 +129,7 @@ function findWithRegex(regex, contentBlock: ContentBlock, callback: (start: numb
  * Passes rangeToReplace to modifyFn and replaces it in contentState with the result.
  */
 export function modifyText(contentState: ContentState, rangeToReplace: SelectionState,
-                           modifyFn: (text: string) => string, ...rest): ContentState {
+                           modifyFn: (text: string) => string, inlineStyle, entityKey): ContentState {
     let getText = (key) => contentState.getBlockForKey(key).getText(),
         startKey = rangeToReplace.getStartKey(),
         startOffset = rangeToReplace.getStartOffset(),
@@ -152,5 +150,5 @@ export function modifyText(contentState: ContentState, rangeToReplace: Selection
     // add remaining part of last block
     text += getText(endKey).substring(startOffset, endOffset);
 
-    return Modifier.replaceText(contentState, rangeToReplace, modifyFn(text), ...rest);
+    return Modifier.replaceText(contentState, rangeToReplace, modifyFn(text), inlineStyle, entityKey);
 }

From 8cb086ef31d1f1f80c3cbd91dc1f8eb24e30bab9 Mon Sep 17 00:00:00 2001
From: Aviral Dasgupta <me@aviraldg.com>
Date: Tue, 14 Jun 2016 19:14:09 +0530
Subject: [PATCH 14/15] use constants for keycodes in RTE

---
 src/components/views/rooms/MessageComposerInput.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index da61631b4d..09f208b035 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -46,6 +46,8 @@ import * as RichText from '../../../RichText';
 
 const TYPING_USER_TIMEOUT = 10000, TYPING_SERVER_TIMEOUT = 30000;
 
+const KEY_M = 77;
+
 // FIXME Breaks markdown with multiple paragraphs, since it only strips first and last <p>
 function mdownToHtml(mdown) {
     var html = marked(mdown) || "";
@@ -85,7 +87,7 @@ export default class MessageComposerInput extends React.Component {
 
     static getKeyBinding(e: SyntheticKeyboardEvent): string {
         // C-m => Toggles between rich text and markdown modes
-        if(e.keyCode == 77 && KeyBindingUtil.isCtrlKeyCommand(e)) {
+        if(e.keyCode == KEY_M && KeyBindingUtil.isCtrlKeyCommand(e)) {
             return 'toggle-mode';
         }
 

From ba69e4365d3c97752d8dfccbd33a2c305e0f707b Mon Sep 17 00:00:00 2001
From: Aviral Dasgupta <me@aviraldg.com>
Date: Tue, 14 Jun 2016 19:28:51 +0530
Subject: [PATCH 15/15] more RTE fixes

---
 src/RichText.js                                    | 3 ++-
 src/components/views/rooms/MessageComposerInput.js | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/RichText.js b/src/RichText.js
index ba7a5f219e..4ad9369711 100644
--- a/src/RichText.js
+++ b/src/RichText.js
@@ -141,7 +141,8 @@ export function modifyText(contentState: ContentState, rangeToReplace: Selection
     for(let currentKey = startKey;
             currentKey && currentKey !== endKey;
             currentKey = contentState.getKeyAfter(currentKey)) {
-        text += getText(currentKey).substring(startOffset, blockText.length);
+        let blockText = getText(currentKey);
+        text += blockText.substring(startOffset, blockText.length);
 
         // from now on, we'll take whole blocks
         startOffset = 0;
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 09f208b035..b6f029e139 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -199,7 +199,7 @@ export default class MessageComposerInput extends React.Component {
                 if (contentJSON) {
                     let content = convertFromRaw(JSON.parse(contentJSON));
                     component.setState({
-                        editorState: component.createEditorState(this.state.isRichtextEnabled, content)
+                        editorState: component.createEditorState(component.state.isRichtextEnabled, content)
                     });
                 }
             }