Refactor to use HtmlUtils for linkifying and sanitizing

Signed-off-by: Bastian <matrix@noxware.de>

src/SlashCommands.js

@@ -27,12 +27,7 @@ import SettingsStore, {SettingLevel} from './settings/SettingsStore';
 import {MATRIXTO_URL_PATTERN} from "./linkify-matrix";
 import * as querystring from "querystring";
 import MultiInviter from './utils/MultiInviter';
-import * as linkify from 'linkifyjs';
-import linkifyString from 'linkifyjs/string';
-import linkifyMatrix from './linkify-matrix';
-import sanitizeHtml from 'sanitize-html';
-
-linkifyMatrix(linkify);
+import { linkifyAndSanitizeHtml } from './HtmlUtils';
 
 class Command {
     constructor({name, args='', description, runFn, hideCompletionAfterSpace=false}) {
@@ -154,7 +149,7 @@ export const CommandMap = {
 
             const topicEvents = room.currentState.getStateEvents('m.room.topic', '');
             const topic = topicEvents.getContent().topic;
-            const topicHtml = topic ? linkifyString(sanitizeHtml(topic)) : _t('This room has no topic.');
+            const topicHtml = topic ? linkifyAndSanitizeHtml(topic) : _t('This room has no topic.');
 
             const InfoDialog = sdk.getComponent('dialogs.InfoDialog');
             Modal.createTrackedDialog('Slash Commands', 'Topic', InfoDialog, {

src/components/structures/RoomDirectory.js

@@ -24,10 +24,7 @@ const Modal = require('../../Modal');
 const sdk = require('../../index');
 const dis = require('../../dispatcher');
 
-const linkify = require('linkifyjs');
-const linkifyString = require('linkifyjs/string');
-const linkifyMatrix = require('../../linkify-matrix');
-const sanitizeHtml = require('sanitize-html');
+import { linkifyAndSanitizeHtml } from '../../HtmlUtils';
 import Promise from 'bluebird';
 
 import { _t } from '../../languageHandler';
@@ -37,8 +34,6 @@ import {instanceForInstanceId, protocolNameForInstanceId} from '../../utils/Dire
 const MAX_NAME_LENGTH = 80;
 const MAX_TOPIC_LENGTH = 160;
 
-linkifyMatrix(linkify);
-
 module.exports = React.createClass({
     displayName: 'RoomDirectory',
 
@@ -438,7 +433,7 @@ module.exports = React.createClass({
             if (topic.length > MAX_TOPIC_LENGTH) {
                 topic = `${topic.substring(0, MAX_TOPIC_LENGTH)}...`;
             }
-            topic = linkifyString(sanitizeHtml(topic));
+            topic = linkifyAndSanitizeHtml(topic);
 
             rows.push(
                 <tr key={ rooms[i].room_id }

src/components/views/messages/TextualBody.js

@@ -22,9 +22,6 @@ import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import highlight from 'highlight.js';
 import * as HtmlUtils from '../../../HtmlUtils';
-import * as linkify from 'linkifyjs';
-import linkifyElement from 'linkifyjs/element';
-import linkifyMatrix from '../../../linkify-matrix';
 import sdk from '../../../index';
 import ScalarAuthClient from '../../../ScalarAuthClient';
 import Modal from '../../../Modal';
@@ -38,8 +35,6 @@ import PushProcessor from 'matrix-js-sdk/lib/pushprocessor';
 import ReplyThread from "../elements/ReplyThread";
 import {host as matrixtoHost} from '../../../matrix-to';
 
-linkifyMatrix(linkify);
-
 module.exports = React.createClass({
     displayName: 'TextualBody',
 
@@ -98,7 +93,7 @@ module.exports = React.createClass({
         // are still sent as plaintext URLs. If these are ever pillified in the composer,
         // we should be pillify them here by doing the linkifying BEFORE the pillifying.
         this.pillifyLinks(this.refs.content.children);
-        linkifyElement(this.refs.content, linkifyMatrix.options);
+        HtmlUtils.linkifyElement(this.refs.content);
         this.calculateUrlPreview();
 
         if (this.props.mxEvent.getContent().format === "org.matrix.custom.html") {

src/components/views/rooms/LinkPreviewWidget.js

@@ -16,19 +16,15 @@ limitations under the License.
 
 'use strict';
 
-const React = require('react');
+import React from 'react';
 import PropTypes from 'prop-types';
+import { linkifyElement } from '../../../HtmlUtils';
 
 const sdk = require('../../../index');
 const MatrixClientPeg = require('../../../MatrixClientPeg');
 const ImageUtils = require('../../../ImageUtils');
 const Modal = require('../../../Modal');
 
-const linkify = require('linkifyjs');
-const linkifyElement = require('linkifyjs/element');
-const linkifyMatrix = require('../../../linkify-matrix');
-linkifyMatrix(linkify);
-
 module.exports = React.createClass({
     displayName: 'LinkPreviewWidget',
 
@@ -62,13 +58,13 @@ module.exports = React.createClass({
 
     componentDidMount: function() {
         if (this.refs.description) {
-            linkifyElement(this.refs.description, linkifyMatrix.options);
+            linkifyElement(this.refs.description);
         }
     },
 
     componentDidUpdate: function() {
         if (this.refs.description) {
-            linkifyElement(this.refs.description, linkifyMatrix.options);
+            linkifyElement(this.refs.description);
         }
     },
 

src/components/views/rooms/RoomDetailRow.js

@@ -17,15 +17,11 @@ limitations under the License.
 import sdk from '../../../index';
 import React from 'react';
 import { _t } from '../../../languageHandler';
-import * as linkify from 'linkifyjs';
-import linkifyElement from 'linkifyjs/element';
-import linkifyMatrix from '../../../linkify-matrix';
+import { linkifyElement } from '../../../HtmlUtils';
 import { ContentRepo } from 'matrix-js-sdk';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import PropTypes from 'prop-types';
 
-linkifyMatrix(linkify);
-
 export function getDisplayAliasForRoom(room) {
     return room.canonicalAlias || (room.aliases ? room.aliases[0] : "");
 }
@@ -53,7 +49,7 @@ export default React.createClass({
 
     _linkifyTopic: function() {
         if (this.refs.topic) {
-            linkifyElement(this.refs.topic, linkifyMatrix.options);
+            linkifyElement(this.refs.topic);
         }
     },
 

src/components/views/rooms/RoomHeader.js

@@ -25,17 +25,13 @@ import MatrixClientPeg from '../../../MatrixClientPeg';
 import Modal from "../../../Modal";
 import RateLimitedFunc from '../../../ratelimitedfunc';
 
-import * as linkify from 'linkifyjs';
-import linkifyElement from 'linkifyjs/element';
-import linkifyMatrix from '../../../linkify-matrix';
+import { linkifyElement } from '../../../HtmlUtils';
 import AccessibleButton from '../elements/AccessibleButton';
 import ManageIntegsButton from '../elements/ManageIntegsButton';
 import {CancelButton} from './SimpleRoomHeader';
 import SettingsStore from "../../../settings/SettingsStore";
 import RoomHeaderButtons from '../right_panel/RoomHeaderButtons';
 
-linkifyMatrix(linkify);
-
 module.exports = React.createClass({
     displayName: 'RoomHeader',
 
@@ -78,7 +74,7 @@ module.exports = React.createClass({
 
     componentDidUpdate: function() {
         if (this.refs.topic) {
-            linkifyElement(this.refs.topic, linkifyMatrix.options);
+            linkifyElement(this.refs.topic);
         }
     },