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"
|
"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",
|
||||||
|
@ -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
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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) {
|
||||||
|
17
client/src/js/util/linkify.js
Normal file
17
client/src/js/util/linkify.js
Normal 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);
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user