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

feat: render unicode emoji as emojione images

Browse source
This commit is contained in:
Aviral Dasgupta 2016-07-05 03:13:53 +05:30
parent 87300e3a9f
commit 48f2c4a696
1 changed files with 22 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/HtmlUtils.js
View file

@ -20,6 +20,8 @@ var React = require('react');
var sanitizeHtml = require('sanitize-html'); var sanitizeHtml = require('sanitize-html');
var highlight = require('highlight.js'); var highlight = require('highlight.js');
var linkifyMatrix = require('./linkify-matrix'); var linkifyMatrix = require('./linkify-matrix');
import escape from 'lodash/escape';
import {unicodeToImage} from 'emojione';
var sanitizeHtmlParams = { var sanitizeHtmlParams = {
allowedTags: [ allowedTags: [
@ -185,40 +187,31 @@ module.exports = {
opts = opts || {}; opts = opts || {};
var isHtml = (content.format === "org.matrix.custom.html"); var isHtml = (content.format === "org.matrix.custom.html");
let body = isHtml ? content.formatted_body : escape(content.body);
var safeBody; var safeBody;
if (isHtml) { // XXX: We sanitize the HTML whilst also highlighting its text nodes, to avoid accidentally trying
// XXX: We sanitize the HTML whilst also highlighting its text nodes, to avoid accidentally trying // to highlight HTML tags themselves. However, this does mean that we don't highlight textnodes which
// to highlight HTML tags themselves. However, this does mean that we don't highlight textnodes which // are interrupted by HTML tags (not that we did before) - e.g. foo<span/>bar won't get highlighted
// are interrupted by HTML tags (not that we did before) - e.g. foo<span/>bar won't get highlighted // by an attempt to search for 'foobar'. Then again, the search query probably wouldn't work either
// by an attempt to search for 'foobar'. Then again, the search query probably wouldn't work either try {
try {
if (highlights && highlights.length > 0) {
var highlighter = new HtmlHighlighter("mx_EventTile_searchHighlight", opts.highlightLink);
var safeHighlights = highlights.map(function(highlight) {
return sanitizeHtml(highlight, sanitizeHtmlParams);
});
// XXX: hacky bodge to temporarily apply a textFilter to the sanitizeHtmlParams structure.
sanitizeHtmlParams.textFilter = function(safeText) {
return highlighter.applyHighlights(safeText, safeHighlights).join('');
};
}
safeBody = sanitizeHtml(content.formatted_body, sanitizeHtmlParams);
}
finally {
delete sanitizeHtmlParams.textFilter;
}
return <span className="markdown-body" dangerouslySetInnerHTML={{ __html: safeBody }} />;
} else {
safeBody = content.body;
if (highlights && highlights.length > 0) { if (highlights && highlights.length > 0) {
var highlighter = new TextHighlighter("mx_EventTile_searchHighlight", opts.highlightLink); var highlighter = new HtmlHighlighter("mx_EventTile_searchHighlight", opts.highlightLink);
return highlighter.applyHighlights(safeBody, highlights); var safeHighlights = highlights.map(function(highlight) {
} return sanitizeHtml(highlight, sanitizeHtmlParams);
else { });
return safeBody; // XXX: hacky bodge to temporarily apply a textFilter to the sanitizeHtmlParams structure.
sanitizeHtmlParams.textFilter = function(safeText) {
return highlighter.applyHighlights(safeText, safeHighlights).join('');
};
} }
safeBody = sanitizeHtml(body, sanitizeHtmlParams);
safeBody = unicodeToImage(safeBody);
} }
finally {
delete sanitizeHtmlParams.textFilter;
}
return <span className="markdown-body" dangerouslySetInnerHTML={{ __html: safeBody }} />;
}, },
highlightDom: function(element) { highlightDom: function(element) {