mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-23 09:46:09 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #527 from matrix-org/dbkr/highlight_async

Browse source 
Run highlight.js asynchronously
This commit is contained in:
David Baker 2016-10-27 09:57:23 +01:00 committed by GitHub
commit a53c1958eb
2 changed files with 20 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/HtmlUtils.js
View file

@ -302,13 +302,6 @@ export function bodyToHtml(content, highlights, opts) {
return <span className={className} dangerouslySetInnerHTML={{ __html: safeBody }} />;
}
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)),

22
src/components/views/messages/TextualBody.js
View file

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