Fix search clickthrough for HTML events

Switch to using a normal <a href="..."> link for search result
clickthrough. Apart from generally giving a better experience, this means that
it also works on html messages. The problem there was that we were attaching
onClick handlers to <span>s which we were then flattening into HTML with
ReactDOMServer (which meant the onClick handlers were never attached to React's
list of listeners).

To make this work without jumping through React hoops, the highlighter now
returns either a list of strings or a list of nodes, depending on whether we
are dealing with an HTML event or a text one. We therefore have a separate
HtmlHighlighter and TextHighlighter.

src/components/structures/RoomView.js

@@ -879,15 +879,6 @@ module.exports = React.createClass({
         });
     },
 
-    _onSearchResultSelected: function(result) {
-        var event = result.context.getEvent();
-        dis.dispatch({
-            action: 'view_room',
-            room_id: event.getRoomId(),
-            event_id: event.getId(),
-        });
-    },
-
     getSearchResultTiles: function() {
         var EventTile = sdk.getComponent('rooms.EventTile');
         var SearchResultTile = sdk.getComponent('rooms.SearchResultTile');
@@ -948,10 +939,12 @@ module.exports = React.createClass({
                 }
             }
 
+            var resultLink = "#/room/"+this.props.roomId+"/"+mxEv.getId();
+
             ret.push(<SearchResultTile key={mxEv.getId()}
                      searchResult={result}
                      searchHighlights={this.state.searchHighlights}
-                     onSelect={this._onSearchResultSelected.bind(this, result)}/>);
+                     resultLink={resultLink}/>);
         }
         return ret;
     },

src/components/views/messages/MessageEvent.js

@@ -28,6 +28,18 @@ module.exports = React.createClass({
         }
     },
 
+    propTypes: {
+        /* the MatrixEvent to show */
+        mxEvent: React.PropTypes.object.isRequired,
+
+        /* a list of words to highlight */
+        highlights: React.PropTypes.array,
+
+        /* link URL for the highlights */
+        highlightLink: React.PropTypes.string,
+    },
+
+
     render: function() {
         var UnknownMessageTile = sdk.getComponent('messages.UnknownBody');
 
@@ -48,6 +60,6 @@ module.exports = React.createClass({
         }
 
         return <TileType mxEvent={this.props.mxEvent} highlights={this.props.highlights} 
-                    onHighlightClick={this.props.onHighlightClick} />;
+                    highlightLink={this.props.highlightLink} />;
     },
 });

src/components/views/messages/TextualBody.js

@@ -28,6 +28,17 @@ linkifyMatrix(linkify);
 module.exports = React.createClass({
     displayName: 'TextualBody',
 
+    propTypes: {
+        /* the MatrixEvent to show */
+        mxEvent: React.PropTypes.object.isRequired,
+
+        /* a list of words to highlight */
+        highlights: React.PropTypes.array,
+
+        /* link URL for the highlights */
+        highlightLink: React.PropTypes.string,
+    },
+
     componentDidMount: function() {
         linkifyElement(this.refs.content, linkifyMatrix.options);
 
@@ -46,14 +57,15 @@ module.exports = React.createClass({
     shouldComponentUpdate: function(nextProps) {
         // exploit that events are immutable :)
         return (nextProps.mxEvent.getId() !== this.props.mxEvent.getId() ||
-                nextProps.highlights !== this.props.highlights);
+                nextProps.highlights !== this.props.highlights ||
+                nextProps.highlightLink !== this.props.highlightLink);
     },
 
     render: function() {
         var mxEvent = this.props.mxEvent;
         var content = mxEvent.getContent();
         var body = HtmlUtils.bodyToHtml(content, this.props.highlights,
-                                       {onHighlightClick: this.props.onHighlightClick});
+                                       {highlightLink: this.props.highlightLink});
 
         switch (content.msgtype) {
             case "m.emote":

src/components/views/rooms/EventTile.js

@@ -96,8 +96,8 @@ module.exports = React.createClass({
         /* a list of words to highlight */
         highlights: React.PropTypes.array,
 
-        /* a function to be called when the highlight is clicked */
-        onHighlightClick: React.PropTypes.func,
+        /* link URL for the highlights */
+        highlightLink: React.PropTypes.string,
 
         /* is this the focussed event */
         isSelectedEvent: React.PropTypes.bool,
@@ -313,8 +313,8 @@ module.exports = React.createClass({
                 { avatar }
                 { sender }
                 <div className="mx_EventTile_line">
-                    <EventTileType mxEvent={this.props.mxEvent} highlights={this.props.highlights} 
-                          onHighlightClick={this.props.onHighlightClick} />
+                    <EventTileType mxEvent={this.props.mxEvent} highlights={this.props.highlights}
+                          highlightLink={this.props.highlightLink}/>
                 </div>
             </div>
         );

src/components/views/rooms/SearchResultTile.js

@@ -29,8 +29,8 @@ module.exports = React.createClass({
         // a list of strings to be highlighted in the results
         searchHighlights: React.PropTypes.array,
 
-        // callback to be called when the user selects this result
-        onSelect: React.PropTypes.func,
+        // href for the highlights in this result
+        resultLink: React.PropTypes.string,
     },
 
     render: function() {
@@ -53,7 +53,7 @@ module.exports = React.createClass({
             }
             if (EventTile.haveTileForEvent(ev)) {
                 ret.push(<EventTile key={eventId+"+"+j} mxEvent={ev} contextual={contextual} highlights={highlights}
-                         onHighlightClick={this.props.onSelect}/>)
+                          highlightLink={this.props.resultLink}/>);
             }
         }
         return (