Use a fork of autolinker with react support to get rid off dangerouslySetInnerHTML

client/package.json

@@ -42,7 +42,7 @@
     "webpack-hot-middleware": "^2.7.1"
   },
   "dependencies": {
-    "autolinker": "^0.23.0",
+    "autolinker": "git+https://github.com/robbie-c/Autolinker.js.git",
     "backo": "^1.1.0",
     "base64-arraybuffer": "^0.1.5",
     "eventemitter2": "^0.4.14",

client/src/js/components/ChatTitle.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { List } from 'immutable';
-import Autolinker from 'autolinker';
 import pure from 'pure-render-decorator';
 import Navicon from '../components/Navicon';
+import { linkify } from '../util';
 
 @pure
 export default class ChatTitle extends Component {
@@ -20,7 +20,8 @@ export default class ChatTitle extends Component {
 
   render() {
     const { title, tab, channel, toggleSearch, toggleUserList } = this.props;
-    const topic = Autolinker.link(channel.get('topic') || '', { stripPrefix: false });
+    const _topic = channel.get('topic');
+    const topic = _topic ? linkify(_topic) : null;
 
     let leaveTitle;
     if (tab.channel) {
@@ -37,7 +38,7 @@ export default class ChatTitle extends Component {
           <Navicon />
           <span className="chat-title">{title}</span>
           <div className="chat-topic-wrap">
-            <span className="chat-topic" dangerouslySetInnerHTML={{ __html: topic }}></span>
+            <span className="chat-topic">{topic}</span>
           </div>
           <i className="icon-search" title="Search" onClick={toggleSearch} />
           <i

client/src/js/components/Message.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
-import Autolinker from 'autolinker';
 import pure from 'pure-render-decorator';
-import { timestamp } from '../util';
+import { timestamp, linkify } from '../util';
 
 @pure
 export default class Message extends Component {
@@ -14,7 +13,6 @@ export default class Message extends Component {
 
   render() {
     const { message } = this.props;
-    const content = Autolinker.link(message.message, { stripPrefix: false });
     const classes = ['message'];
     let sender = null;
 
@@ -42,7 +40,7 @@ export default class Message extends Component {
       <p className={classes.join(' ')} style={style}>
         <span className="message-time">{timestamp(message.time)}</span>
         {sender}
-        <span dangerouslySetInnerHTML={{ __html: ` ${content}` }}></span>
+        <span>{' '}{linkify(message.message)}</span>
       </p>
     );
   }

client/src/js/util/index.js

@@ -1,6 +1,7 @@
 import padStart from 'lodash/padStart';
 
 export messageHeight from './messageHeight';
+export linkify from './linkify.js';
 
 export function normalizeChannel(channel) {
   if (channel.indexOf('#') !== 0) {

client/src/js/util/linkify.js

@@ -0,0 +1,17 @@
+import Autolinker from 'autolinker';
+import React from 'react';
+
+const autolinker = new Autolinker({
+  stripPrefix: false,
+  doJoin: false,
+  replaceFn: (linker, match) => {
+    if (match.getType() === 'url') {
+      return <a target="_blank" href={match.getAnchorHref()}>{match.getAnchorText()}</a>;
+    }
+  },
+  React
+});
+
+export default function linkify(text) {
+  return autolinker.link(text);
+}