Pillify room notifs in the timeline

This scans text nodes in the DOM for room notifications and turns
them into pills. Changes the pillification code around a bit so it
works with text nodes. Uses the push processor directly to test
the event against the room notifiation rule so we know whether
this event would actually trigger a room notification (needs to
hook into push at a lower level because otherwise our own room
notifications would not pillify since our own events never
generate notifications).

Requires https://github.com/matrix-org/matrix-js-sdk/pull/565

src/components/views/messages/TextualBody.js

@@ -34,6 +34,7 @@ import MatrixClientPeg from '../../../MatrixClientPeg';
 import ContextualMenu from '../../structures/ContextualMenu';
 import {RoomMember} from 'matrix-js-sdk';
 import classNames from 'classnames';
+import PushProcessor from 'matrix-js-sdk/lib/pushprocessor';
 
 linkifyMatrix(linkify);
 
@@ -169,8 +170,10 @@ module.exports = React.createClass({
 
     pillifyLinks: function(nodes) {
         const shouldShowPillAvatar = !UserSettingsStore.getSyncedSetting("Pill.shouldHidePillAvatar", false);
-        for (let i = 0; i < nodes.length; i++) {
-            const node = nodes[i];
+        let node = nodes[0];
+        while (node) {
+            let pillified = false;
+
             if (node.tagName === "A" && node.getAttribute("href")) {
                 const href = node.getAttribute("href");
 
@@ -189,10 +192,68 @@ module.exports = React.createClass({
 
                     ReactDOM.render(pill, pillContainer);
                     node.parentNode.replaceChild(pillContainer, node);
+                    // Pills within pills aren't going to go well, so move on
+                    pillified = true;
+                }
+            } else if (node.nodeType == Node.TEXT_NODE) {
+                const Pill = sdk.getComponent('elements.Pill');
+
+                let currentTextNode = node;
+                const roomNotifTextNodes = [];
+
+                // Take a textNode and break it up to make all the instances of @room their
+                // own textNode, adding those nodes to roomNotifTextNodes
+                while (currentTextNode !== null) {
+                    const roomNotifPos = Pill.roomNotifPos(currentTextNode.textContent);
+                    let nextTextNode = null;
+                    if (roomNotifPos > -1) {
+                        let roomTextNode = currentTextNode;
+
+                        if (roomNotifPos > 0) roomTextNode = roomTextNode.splitText(roomNotifPos);
+                        if (roomTextNode.textContent.length > Pill.roomNotifLen()) {
+                            nextTextNode = roomTextNode.splitText(Pill.roomNotifLen());
+                        }
+                        roomNotifTextNodes.push(roomTextNode);
+                    }
+                    currentTextNode = nextTextNode;
+                }
+
+                if (roomNotifTextNodes.length > 0) {
+                    const pushProcessor = new PushProcessor(MatrixClientPeg.get());
+                    const atRoomRule = pushProcessor.getPushRuleById(".m.rule.roomnotif");
+                    if (pushProcessor.ruleMatchesEvent(atRoomRule, this.props.mxEvent)) {
+                        // Now replace all those nodes with Pills
+                        for (const roomNotifTextNode of roomNotifTextNodes) {
+                            const pillContainer = document.createElement('span');
+                            const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+                            const pill = <Pill
+                                type={Pill.TYPE_AT_ROOM_MENTION}
+                                inMessage={true}
+                                room={room}
+                                shouldShowPillAvatar={true}
+                            />;
+
+                            ReactDOM.render(pill, pillContainer);
+                            roomNotifTextNode.parentNode.replaceChild(pillContainer, roomNotifTextNode);
+
+                            // Set the next node to be processed to the one after the node
+                            // we're adding now, since we've just inserted nodes into the structure
+                            // we're iterating over.
+                            // Note we've checked roomNotifTextNodes.length > 0 so we'll do this at least once
+                            node = roomNotifTextNode.nextSibling;
+                        }
+                        // Nothing else to do for a text node (and we don't need to advance
+                        // the loop pointer because we did it above)
+                        continue;
+                    }
                 }
-            } else if (node.children && node.children.length) {
-                this.pillifyLinks(node.children);
             }
+
+            if (node.childNodes && node.childNodes.length && !pillified) {
+                this.pillifyLinks(node.childNodes);
+            }
+
+            node = node.nextSibling;
         }
     },