diff --git a/src/HtmlUtils.js b/src/HtmlUtils.js index 01ae50cf68..fc1630b6fb 100644 --- a/src/HtmlUtils.js +++ b/src/HtmlUtils.js @@ -302,13 +302,6 @@ export function bodyToHtml(content, highlights, opts) { return ; } -export function highlightDom(element) { - var blocks = element.getElementsByTagName("code"); - for (var i = 0; i < blocks.length; i++) { - highlight.highlightBlock(blocks[i]); - } -} - export function emojifyText(text) { return { __html: unicodeToImage(escape(text)), diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js index 9ce4aa1e84..04a3a83fd7 100644 --- a/src/components/views/messages/TextualBody.js +++ b/src/components/views/messages/TextualBody.js @@ -18,6 +18,7 @@ limitations under the License. var React = require('react'); var ReactDOM = require('react-dom'); +var highlight = require('highlight.js'); var HtmlUtils = require('../../../HtmlUtils'); var linkify = require('linkifyjs'); var linkifyElement = require('linkifyjs/element'); @@ -62,17 +63,34 @@ module.exports = React.createClass({ }, componentDidMount: function() { + this._unmounted = false; + linkifyElement(this.refs.content, linkifyMatrix.options); this.calculateUrlPreview(); - if (this.props.mxEvent.getContent().format === "org.matrix.custom.html") - HtmlUtils.highlightDom(ReactDOM.findDOMNode(this)); + if (this.props.mxEvent.getContent().format === "org.matrix.custom.html") { + const blocks = ReactDOM.findDOMNode(this).getElementsByTagName("code"); + if (blocks.length > 0) { + // Do this asynchronously: parsing code takes time and we don't + // need to block the DOM update on it. + setTimeout(() => { + if (this._unmounted) return; + for (let i = 0; i < blocks.length; i++) { + highlight.highlightBlock(blocks[i]); + } + }, 10); + } + } }, componentDidUpdate: function() { this.calculateUrlPreview(); }, + componentWillUnmount: function() { + this._unmounted = true; + }, + shouldComponentUpdate: function(nextProps, nextState) { //console.log("shouldComponentUpdate: ShowUrlPreview for %s is %s", this.props.mxEvent.getId(), this.props.showUrlPreview);