Merge branch 'develop' into matthew/whitelist-uri-schemes

src/HtmlUtils.js

@@ -28,6 +28,7 @@ emojione.imagePathSVG = 'emojione/svg/';
 emojione.imageType = 'svg';
 
 const EMOJI_REGEX = new RegExp(emojione.unicodeRegexp+"+", "gi");
+const COLOR_REGEX = /^#[0-9a-fA-F]{6}$/;
 
 /* modified from https://github.com/Ranks/emojione/blob/master/lib/js/emojione.js
  * because we want to include emoji shortnames in title text
@@ -57,6 +58,22 @@ export function unicodeToImage(str) {
     return str;
 }
 
+/**
+ * Given one or more unicode characters (represented by unicode
+ * character number), return an image node with the corresponding
+ * emoji.
+ *
+ * @param alt {string} String to use for the image alt text
+ * @param unicode {integer} One or more integers representing unicode characters
+ * @returns A img node with the corresponding emoji
+ */
+export function charactersToImageNode(alt, ...unicode) {
+    const fileName = unicode.map((u) => {
+        return u.toString(16);
+    }).join('-');
+    return <img alt={alt} src={`${emojione.imagePathSVG}${fileName}.svg${emojione.cacheBustParam}`}/>;
+}
+
 export function stripParagraphs(html: string): string {
     const contentDiv = document.createElement('div');
     contentDiv.innerHTML = html;
@@ -87,15 +104,17 @@ var sanitizeHtmlParams = {
         // deliberately no h1/h2 to stop people shouting.
         'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol',
         'nl', 'li', 'b', 'i', 'u', 'strong', 'em', 'strike', 'code', 'hr', 'br', 'div',
-        'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre', 'img',
+        'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre', 'span', 'img',
     ],
     allowedAttributes: {
         // custom ones first:
-        font: ['color'], // custom to matrix
+        font: ['color', 'data-mx-bg-color', 'data-mx-color', 'style'], // custom to matrix
+        span: ['data-mx-bg-color', 'data-mx-color', 'style'], // custom to matrix
         a: ['href', 'name', 'target', 'rel'], // remote target: custom to matrix
         // We don't currently allow img itself by default, but this
         // would make sense if we did
         img: ['src'],
+        ol: ['start'],
     },
     // 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'],
@@ -136,6 +155,38 @@ var sanitizeHtmlParams = {
             attribs.rel = 'noopener'; // https://mathiasbynens.github.io/rel-noopener/
             return { tagName: tagName, attribs : attribs };
         },
+        '*': function(tagName, attribs) {
+            // Delete any style previously assigned, style is an allowedTag for font and span
+            // because attributes are stripped after transforming
+            delete attribs.style;
+
+            // Sanitise and transform data-mx-color and data-mx-bg-color to their CSS
+            // equivalents
+            const customCSSMapper = {
+                'data-mx-color': 'color',
+                'data-mx-bg-color': 'background-color',
+                // $customAttributeKey: $cssAttributeKey
+            };
+
+            let style = "";
+            Object.keys(customCSSMapper).forEach((customAttributeKey) => {
+                const cssAttributeKey = customCSSMapper[customAttributeKey];
+                const customAttributeValue = attribs[customAttributeKey];
+                if (customAttributeValue &&
+                    typeof customAttributeValue === 'string' &&
+                    COLOR_REGEX.test(customAttributeValue)
+                ) {
+                    style += cssAttributeKey + ":" + customAttributeValue + ";";
+                    delete attribs[customAttributeKey];
+                }
+            });
+
+            if (style) {
+                attribs.style = style;
+            }
+
+            return { tagName: tagName, attribs: attribs };
+        },
     },
 };