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