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

package.json

@@ -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",

src/HtmlUtils.js

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

src/skins/vector/css/molecules/EventTile.css

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