user and room decorators, history & typing notifs

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);
+    }
+}