Basic Markdown highlighting

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

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 {