add target=_blank onto all HTML links, and apply GFM.css for CSS for markdown

pull/420/head
Matthew Hodgson 7 years ago
parent 4c11de787e
commit 76c6d6d4d6
  1. 5
      package.json
  2. 32
      src/HtmlUtils.js
  3. 21
      src/skins/vector/css/molecules/EventTile.css

@ -27,6 +27,7 @@
"classnames": "^2.1.2",
"filesize": "^3.1.2",
"flux": "~2.0.3",
"gfm.css": "^1.1.1",
"linkifyjs": "^2.0.0-beta.4",
"matrix-js-sdk": "https://github.com/matrix-org/matrix-js-sdk.git#develop",
"matrix-react-sdk": "https://github.com/matrix-org/matrix-react-sdk.git#develop",
@ -37,8 +38,8 @@
"react-dnd-html5-backend": "^2.0.0",
"react-dom": "^0.14.2",
"react-gemini-scrollbar": "^2.0.1",
"velocity-animate": "^1.2.3",
"sanitize-html": "^1.0.0"
"sanitize-html": "^1.0.0",
"velocity-animate": "^1.2.3"
},
"devDependencies": {
"babel": "^5.8.23",

@ -19,11 +19,31 @@ limitations under the License.
var React = require('react');
var sanitizeHtml = require('sanitize-html');
var allowedAttributes = sanitizeHtml.defaults.allowedAttributes;
allowedAttributes['font'] = ['color'];
var sanitizeHtmlParams = {
allowedTags: sanitizeHtml.defaults.allowedTags.concat([ 'font', 'h1', 'h2' ]),
allowedAttributes: allowedAttributes,
allowedTags: [
'h1', 'h2', 'font', // custom to matrix
'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'} )
},
};
module.exports = {
@ -51,7 +71,7 @@ module.exports = {
bodyList.push(<span key={ k++ } dangerouslySetInnerHTML={{ __html: safeSearchTerm }} className="mx_MessageTile_searchHighlight" />);
lastOffset = offset + safeSearchTerm.length;
}
bodyList.push(<span key={ k++ } dangerouslySetInnerHTML={{ __html: safeBody.substring(lastOffset) }} />);
bodyList.push(<span className="markdown-body" key={ k++ } dangerouslySetInnerHTML={{ __html: safeBody.substring(lastOffset) }} />);
}
else {
while ((offset = originalBody.indexOf(searchTerm, lastOffset)) >= 0) {
@ -66,7 +86,7 @@ module.exports = {
else {
if (content.format === "org.matrix.custom.html") {
var safeBody = sanitizeHtml(content.formatted_body, sanitizeHtmlParams);
body = <span dangerouslySetInnerHTML={{ __html: safeBody }} />;
body = <span className="markdown-body" dangerouslySetInnerHTML={{ __html: safeBody }} />;
}
else {
body = originalBody;

@ -65,6 +65,27 @@ limitations under the License.
margin-right: 100px;
}
/* Various markdown overrides */
.mx_MessageTile_content .markdown-body {
font-family: inherit ! important;
white-space: normal ! important;
}
.mx_MessageTile_content .markdown-body h1,
.mx_MessageTile_content .markdown-body h2,
.mx_MessageTile_content .markdown-body h3,
.mx_MessageTile_content .markdown-body h4,
.mx_MessageTile_content .markdown-body h5,
.mx_MessageTile_content .markdown-body h6
{
font-family: inherit ! important;
}
.mx_MessageTile_content .markdown-body a {
color: #76cfa6;
}
.mx_MessageTile_searchHighlight {
background-color: #76cfa6;
color: #fff;

Loading…
Cancel
Save