/* Copyright 2015, 2016 OpenMarket Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ 'use strict'; var React = require('react'); var sanitizeHtml = require('sanitize-html'); var highlight = require('highlight.js'); var sanitizeHtmlParams = { allowedTags: [ 'font', // custom to matrix for IRC-style font coloring 'del', // for markdown // deliberately no h1/h2 to stop people shouting. 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol', 'nl', 'li', 'b', 'i', 'strong', 'em', 'strike', 'code', 'hr', 'br', 'div', 'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre' ], allowedAttributes: { // custom ones first: font: [ 'color' ], // custom to matrix a: [ 'href', 'name', 'target' ], // remote target: custom to matrix // We don't currently allow img itself by default, but this // would make sense if we did img: [ 'src' ], }, // Lots of these won't come up by default because we don't allow them selfClosing: [ 'img', 'br', 'hr', 'area', 'base', 'basefont', 'input', 'link', 'meta' ], // URL schemes we permit allowedSchemes: [ 'http', 'https', 'ftp', 'mailto' ], allowedSchemesByTag: {}, transformTags: { // custom to matrix // add blank targets to all hyperlinks 'a': sanitizeHtml.simpleTransform('a', { target: '_blank'} ) }, }; class Highlighter { constructor(html, highlightClass, onHighlightClick) { this.html = html; this.highlightClass = highlightClass; this.onHighlightClick = onHighlightClick; this._key = 0; } applyHighlights(safeSnippet, highlights) { var lastOffset = 0; var offset; var nodes = []; // XXX: when highlighting HTML, synapse performs the search on the plaintext body, // but we're attempting to apply the highlights here to the HTML body. This is // never going to end well - we really should be hooking into the sanitzer HTML // parser to only attempt to highlight text nodes to avoid corrupting tags. // If and when this happens, we'll probably have to split this method in two between // HTML and plain-text highlighting. var safeHighlight = this.html ? sanitizeHtml(highlights[0], sanitizeHtmlParams) : highlights[0]; while ((offset = safeSnippet.toLowerCase().indexOf(safeHighlight.toLowerCase(), lastOffset)) >= 0) { // handle preamble if (offset > lastOffset) { var subSnippet = safeSnippet.substring(lastOffset, offset); nodes = nodes.concat(this._applySubHighlights(subSnippet, highlights)); } // do highlight nodes.push(this._createSpan(safeHighlight, true)); lastOffset = offset + safeHighlight.length; } // handle postamble if (lastOffset != safeSnippet.length) { var subSnippet = safeSnippet.substring(lastOffset, undefined); nodes = nodes.concat(this._applySubHighlights(subSnippet, highlights)); } return nodes; } _applySubHighlights(safeSnippet, highlights) { if (highlights[1]) { // recurse into this range to check for the next set of highlight matches return this.applyHighlights(safeSnippet, highlights.slice(1)); } else { // no more highlights to be found, just return the unhighlighted string return [this._createSpan(safeSnippet, false)]; } } /* create a node to hold the given content * * spanBody: content of the span. If html, must have been sanitised * highlight: true to highlight as a search match */ _createSpan(spanBody, highlight) { var spanProps = { key: this._key++, }; if (highlight) { spanProps.onClick = this.onHighlightClick; spanProps.className = this.highlightClass; } if (this.html) { return (); } else { return ({ spanBody }); } } } module.exports = { /* turn a matrix event body into html * * content: 'content' of the MatrixEvent * * highlights: optional list of words to highlight * * opts.onHighlightClick: optional callback function to be called when a * highlighted word is clicked */ bodyToHtml: function(content, highlights, opts) { opts = opts || {}; var isHtml = (content.format === "org.matrix.custom.html"); var safeBody; if (isHtml) { safeBody = sanitizeHtml(content.formatted_body, sanitizeHtmlParams); } else { safeBody = content.body; } var body; if (highlights && highlights.length > 0) { var highlighter = new Highlighter(isHtml, "mx_EventTile_searchHighlight", opts.onHighlightClick); body = highlighter.applyHighlights(safeBody, highlights); } else { if (isHtml) { body = ; } else { body = safeBody; } } return body; }, highlightDom: function(element) { var blocks = element.getElementsByTagName("code"); for (var i = 0; i < blocks.length; i++) { highlight.highlightBlock(blocks[i]); } }, }