Use a fork of autolinker with react support to get rid off dangerouslySetInnerHTML
This commit is contained in:
parent
072daa64f2
commit
47ebd9c84c
File diff suppressed because one or more lines are too long
|
@ -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",
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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);
|
||||
}
|
Loading…
Reference in New Issue