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

This commit is contained in:
Ken-Håvard Lieng 2016-02-17 01:49:27 +01:00
parent 072daa64f2
commit 47ebd9c84c
6 changed files with 44 additions and 27 deletions

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

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

View File

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

View File

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