@happeouikit/content-renderer 1.0.48 → 3.0.1

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Changelog
 
+## 3.0.1
+
+- [Fixed] ContentRenderer should now deal with all kinds of xss
+
+## 3.0.0
+
+- [Fixed] the xss converter now accepts a whiteList for CSS properties that includes vertical-align
+- [Updated] new dependencies updates: React 17 and and Styled Components 5
+
+## 2.0.1
+
+- [Added] Changed type to uppercase and to handle both upper and lowercase. Add warning if lowecase is used.
+- [Added] Handle widgetType=`page` by removing forced styles from component.
+
+## 2.0.0
+
+- [Breaking change] Links rendered from markdown content now always open in a new tab (not configurable).
+
 ## 1.0.48
 
 - [Fixed] Decode HTML entites causing crashes
 
 ## 1.0.46
 
-- [Fixed] Use correct font-family for all the tags inside <p>, <li> etc.
+- [Fixed] Use correct font-family for all the tags inside paragraphs and list elements etc.
 
 ## 1.0.45
 

package/dist/ContentRenderer.js

@@ -59,7 +59,7 @@ function _templateObject() {
  * ContentRenderer
  *
  */
-import React, { useRef, useEffect, useState, useCallback } from "react";
+import React, { useRef, useEffect, useState, useCallback, useMemo } from "react";
 import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 import styled, { css } from "styled-components";
@@ -68,8 +68,11 @@ import { CopyToClipboardButton } from "@happeouikit/copy-to-clipboard-button";
 import { BodyUI, sansFamily } from "@happeouikit/typography";
 import { margin200, media, padding200 } from "@happeouikit/layout";
 import { active, gray04, gray07, gray09, lighten, warn } from "@happeouikit/colors";
-import { toHtml, toSafeText, loadCodeFont, decodeHtmlEntities, removeSpecialCharacters } from "./utils";
+import { toHtml, loadCodeFont, decodeHtmlEntities, removeSpecialCharacters, toSafeText } from "./utils";
 import { ELEMENT_TYPE_PRE, ELEMENT_TYPE_CODE, HIGHLIGHJS_CSS, HIGHLIGHJS_JS, CODE_BLOCK_AVAILABLE_LANGUAGES } from "./constants";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 
 var ContentRenderer = function ContentRenderer(_ref) {
   var content = _ref.content,
@@ -172,45 +175,47 @@ var ContentRenderer = function ContentRenderer(_ref) {
       scrollAndHighlightHash();
     }
   }, [element, createAnchors, useHashAutoscroll, scrollAndHighlightHash]);
-  var transformedContent = toHtml(content, type);
+  var safeText = useMemo(function () {
+    var lowercaseType = type && typeof type === "string" ? type.toLowerCase() : "html";
+    var transformedContent = lowercaseType === "text" ? toSafeText("<p>".concat(content, "</p>")) : toHtml(content, lowercaseType);
 
-  if (type === "text") {
-    transformedContent = "<p>".concat(transformedContent, "</p>");
-  }
-
-  if (decodeHtmlEntitiesOnRender) {
-    transformedContent = decodeHtmlEntities(transformedContent);
-  }
+    if (decodeHtmlEntitiesOnRender) {
+      transformedContent = decodeHtmlEntities(transformedContent);
+    }
 
-  var safeText = toSafeText(transformedContent); // Use dangerouslySetInnerHTML as there might be nested <p>'s header etc
+    return transformedContent;
+  }, [content, type, decodeHtmlEntitiesOnRender]); // Use dangerouslySetInnerHTML as there might be nested <p>'s header etc
   // This requires that all content is run through the toSafeText filter
   // before displaying. This will run it through xss filter.
 
-  return React.createElement(React.Fragment, null, React.createElement(Wrapper, {
-    className: "content-renderer",
-    ref: element,
-    widgetType: widgetType,
-    headerFont: headerFont,
-    bodyFont: bodyFont,
-    createAnchors: createAnchors,
-    dangerouslySetInnerHTML: {
-      __html: safeText
-    }
-  }), copyBtns.map(function (el) {
-    var clipboardContent = el.textContent || "";
-
-    if (el.tagName !== ELEMENT_TYPE_PRE) {
-      clipboardContent = "".concat(window.location.href.split("#")[0], "#").concat(el.id);
-    } // eslint-disable-next-line no-control-regex
-
-
-    clipboardContent = removeSpecialCharacters(clipboardContent);
-    return ReactDOM.createPortal(React.createElement(BtnContainer, {
-      className: "content-copy-btn"
-    }, React.createElement(CopyToClipboardButton, {
-      clipboardContent: clipboardContent
-    })), el);
-  }));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Wrapper, {
+      className: "content-renderer",
+      ref: element,
+      widgetType: widgetType,
+      headerFont: headerFont,
+      bodyFont: bodyFont,
+      createAnchors: createAnchors,
+      dangerouslySetInnerHTML: {
+        __html: safeText
+      }
+    }), copyBtns.map(function (el) {
+      var clipboardContent = el.textContent || "";
+
+      if (el.tagName !== ELEMENT_TYPE_PRE) {
+        clipboardContent = "".concat(window.location.href.split("#")[0], "#").concat(el.id);
+      } // eslint-disable-next-line no-control-regex
+
+
+      clipboardContent = removeSpecialCharacters(clipboardContent);
+      return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/_jsx(BtnContainer, {
+        className: "content-copy-btn",
+        children: /*#__PURE__*/_jsx(CopyToClipboardButton, {
+          clipboardContent: clipboardContent
+        })
+      }), el);
+    })]
+  });
 };
 
 var BtnContainer = styled.div.withConfig({
@@ -222,18 +227,30 @@ var Wrapper = styled(BodyUI).attrs({
 }).withConfig({
   displayName: "ContentRenderer__Wrapper",
   componentId: "sc-1mleu9k-1"
-})(["*{font-family:", " !important;}", " h1.highlight,h2.highlight,h3.highlight,h4.highlight,h5.highlight,h6.highlight{border-radius:6px;position:relative;:after{content:\" \";position:absolute;top:-8px;bottom:-8px;left:-8px;right:-8px;border-radius:6px;border:5px solid ", ";}}h1{font-weight:500;font-size:24px;letter-spacing:-0.5px;line-height:32px;+ h1,+ h2,+ h3,+ h4,+ p{margin-top:16px;}}h2{font-weight:500;font-size:20px;line-height:28px;+ h1,+ h2,+ h3,+ h4,+ p{margin-top:14px;}}h3{font-weight:500;font-size:16px;line-height:24px;+ h1,+ h2,+ h3,+ h4,+ p{margin-top:12px;}}h4{font-size:16px;line-height:24px;+ h1,+ h2,+ h3,+ h4,+ p{margin-top:12px;}}p{font-size:16px;line-height:24px;letter-spacing:0px;+ h1,+ h2,+ h3,+ h4,+ p{margin-top:12px;}}a{color:", ";text-decoration:none;:hover{text-decoration:underline;}}ul{list-style-type:disc;}ol{list-style-type:decimal;counter-reset:item;li{padding-left:12px;text-indent:-33px;list-style-type:none;counter-increment:item;&:before{display:inline-block;width:13px;padding-right:15px;padding-left:5px;font-weight:bold;text-align:right;content:counter(item) \".\";}}}ol,ul{font-size:16px;line-height:24px;margin:18px 16px;display:block;-webkit-margin-before:0.5em;-webkit-margin-after:0.5em;-webkit-padding-start:0.5em;li,li{margin-bottom:5px;padding-left:10px;> ul,> ol{-webkit-margin-before:8px !important;-webkit-margin-after:8px !important;}}&:first-child,&:first-child{-webkit-margin-before:0;}&:last-child,&:last-child{-webkit-margin-after:0;}}hr{-webkit-margin-before:16px;-webkit-margin-after:13px;border-color:@border-color;border-style:solid;height:0px;border-width:1px 0 0 0;}table{width:100%;margin:15px 0;text-align:left;thead th{background:@white;}th,td{border-width:1px;border-style:solid;border-color:@border-color;padding:0.5em;}tr:nth-child(even){background:@almost-white;}tr:nth-child(odd){background:@white;}}table.no-borders{th,td{border:none;}}table.padded-2{th,td{padding:2em;}}table.padded-1{th,td{padding:1em;}}img{max-width:100%;margin:15px 0;& + img{margin-top:0;}}.xl-emoji *{font-size:40px;line-height:1.2;}pre{border-radius:4px;background:", ";padding:8px;margin-bottom:10px;overflow:auto;white-space:pre;position:relative;overflow:visible;*:not(p){font-weight:inherit;font-family:\"IBM Plex Mono\",monospace !important;}.content-copy-btn{position:absolute;top:0;right:0;padding:", " 0;}:hover button{opacity:1;}}blockquote{border-top:2px solid ", ";border-bottom:2px solid ", ";font-size:18px;padding:24px 48px;position:relative;text-align:center;margin:48px 0;}.mention{border-radius:0.2em;background-color:#fff5cc;border:1px solid #fff5cc;color:#0f1621;font-weight:400;&:hover{text-decoration:none;border:1px solid #fabd24;}}.extraMention{cursor:inherit;}", ""], sansFamily, function (_ref2) {
+})(["", " h1.highlight,h2.highlight,h3.highlight,h4.highlight,h5.highlight,h6.highlight{border-radius:6px;position:relative;:after{content:\" \";position:absolute;top:-8px;bottom:-8px;left:-8px;right:-8px;border-radius:6px;border:5px solid ", ";}}pre{border-radius:4px;background:", ";padding:8px;margin-bottom:10px;overflow:auto;white-space:pre;position:relative;overflow:visible;*:not(p){font-weight:inherit;font-family:\"IBM Plex Mono\",monospace !important;}.content-copy-btn{position:absolute;top:0;right:0;padding:", " 0;}:hover button{opacity:1;}}.mention{border-radius:0.2em;background-color:#fff5cc;border:1px solid #fff5cc;color:#0f1621;font-weight:400;&:hover{text-decoration:none;border:1px solid #fabd24;}}.extraMention{cursor:inherit;}", " ", ""], function (_ref2) {
   var createAnchors = _ref2.createAnchors;
   return createAnchors ? "\n    h1, h2, h3, h4, h5, h6 {\n      display: flex;\n      align-items: center;\n      :hover button {\n        opacity: 0.4;\n      }\n    }\n  " : "";
-}, lighten(warn, 0.8), active, gray09, padding200, gray07, gray07, function (_ref3) {
-  var widgetType = _ref3.widgetType,
-      bodyFont = _ref3.bodyFont,
-      headerFont = _ref3.headerFont;
+}, lighten(warn, 0.8), gray09, padding200, function (_ref3) {
+  var widgetType = _ref3.widgetType;
+  return widgetType === "page" ? "" : "\n    * {\n      font-family: ".concat(sansFamily, " !important;\n    }\n\n    \n\n    h1 {\n      font-weight: 500;\n      font-size: 24px;\n      letter-spacing: -0.5px;\n      line-height: 32px;\n      + h1,\n      + h2,\n      + h3,\n      + h4,\n      + p {\n        margin-top: 16px;\n      }\n    }\n    h2 {\n      font-weight: 500;\n      font-size: 20px;\n      line-height: 28px;\n      + h1,\n      + h2,\n      + h3,\n      + h4,\n      + p {\n        margin-top: 14px;\n      }\n    }\n    h3 {\n      font-weight: 500;\n      font-size: 16px;\n      line-height: 24px;\n      + h1,\n      + h2,\n      + h3,\n      + h4,\n      + p {\n        margin-top: 12px;\n      }\n    }\n    h4 {\n      font-size: 16px;\n      line-height: 24px;\n      + h1,\n      + h2,\n      + h3,\n      + h4,\n      + p {\n        margin-top: 12px;\n      }\n    }\n    p {\n      font-size: 16px;\n      line-height: 24px;\n      letter-spacing: 0px;\n      + h1,\n      + h2,\n      + h3,\n      + h4,\n      + p {\n        margin-top: 12px;\n      }\n    }\n    a {\n      color: ").concat(active, ";\n      text-decoration: none;\n      :hover {\n        text-decoration: underline;\n      }\n    }\n    ul {\n      list-style-type: disc;\n    }\n    ol {\n      list-style-type: decimal;\n      counter-reset: item;\n      li {\n        padding-left: 12px;\n        text-indent: -33px;\n        list-style-type: none;\n        counter-increment: item;\n        &:before {\n          display: inline-block;\n          width: 13px;\n          padding-right: 15px;\n          padding-left: 5px;\n          font-weight: bold;\n          text-align: right;\n          content: counter(item) \".\";\n        }\n      }\n    }\n    ol,\n    ul {\n      font-size: 16px;\n      line-height: 24px;\n      margin: 18px 16px;\n      display: block;\n      -webkit-margin-before: 0.5em;\n      -webkit-margin-after: 0.5em;\n      -webkit-padding-start: 0.5em;\n      li,\n      li {\n        margin-bottom: 5px;\n        padding-left: 10px;\n        > ul,\n        > ol {\n          -webkit-margin-before: 8px !important;\n          -webkit-margin-after: 8px !important;\n        }\n      }\n\n      &:first-child,\n      &:first-child {\n        -webkit-margin-before: 0;\n      }\n      &:last-child,\n      &:last-child {\n        -webkit-margin-after: 0;\n      }\n    }\n    hr {\n      -webkit-margin-before: 16px;\n      -webkit-margin-after: 13px;\n      border-color: @border-color;\n      border-style: solid;\n      height: 0px;\n      border-width: 1px 0 0 0;\n    }\n    table {\n      width: 100%;\n      margin: 15px 0;\n      text-align: left;\n      thead th {\n        background: @white;\n      }\n      th,\n      td {\n        border-width: 1px;\n        border-style: solid;\n        border-color: @border-color;\n        padding: 0.5em;\n      }\n      tr:nth-child(even) {\n        background: @almost-white;\n      }\n      tr:nth-child(odd) {\n        background: @white;\n      }\n    }\n    table.no-borders {\n      th,\n      td {\n        border: none;\n      }\n    }\n    table.padded-2 {\n      th,\n      td {\n        padding: 2em;\n      }\n    }\n    table.padded-1 {\n      th,\n      td {\n        padding: 1em;\n      }\n    }\n    img {\n      max-width: 100%;\n      margin: 15px 0;\n      & + img {\n        margin-top: 0;\n      }\n    }\n    .xl-emoji * {\n      font-size: 40px;\n      line-height: 1.2;\n    }\n    \n    blockquote {\n      border-top: 2px solid ").concat(gray07, ";\n      border-bottom: 2px solid ").concat(gray07, ";\n      font-size: 18px;\n      padding: 24px 48px;\n      position: relative;\n      text-align: center;\n      margin: 48px 0;\n    }\n  ");
+}, function (_ref4) {
+  var widgetType = _ref4.widgetType,
+      bodyFont = _ref4.bodyFont,
+      headerFont = _ref4.headerFont;
   return widgetType === "article" && css(["h1,h2,h3{font-family:", " !important;& *{font-family:", " !important;}}h4,h5,h6,p,ul,ol,li,table{font-family:", " !important;& *{font-family:", " !important;}}h1{font-size:32px;line-height:1.13;margin:0 0 20px;letter-spacing:-0.75px;}h2{font-size:24px;line-height:1.17;margin:0 0 16px;letter-spacing:-0.5px;}h3{font-size:20px;line-height:1.2;margin:0 0 14px;}h4,h5,h6,p,ul,ol,li{font-size:18px;line-height:1.56;margin-bottom:13px;margin-top:0;}hr{border-color:", ";}table{width:100% !important;margin:15px 0;font-size:18px !important;text-align:left;border-collapse:collapse;border-spacing:0;thead th{background:@white;}th,td{border-width:1px;border-style:solid;border-color:", ";padding:0.5em;word-wrap:break-word;}tr:nth-child(odd){background:", ";}tr:nth-child(even){background:@white;}}table.no-borders{th,td{border:none;}tr:nth-child(odd){background:", ";}tr:nth-child(even){background:@white;}}pre{position:relative;background-color:", ";padding:1em;margin:1em 0;border-radius:4px;white-space:pre;}img,span.fr-img-caption,span.fr-video{display:block;margin:30px 0;", ";&.article-align-left{margin:30px auto;display:block;max-width:100%;", "}&.article-align-center{margin:30px auto;display:block;}&.article-align-right{margin:30px auto;display:block;max-width:100%;", "}&.article-align-overflow{margin:30px auto;display:block;max-width:100%;", " img{width:100%;}}}img{&.image-border-radius{border-radius:6px;}&.image-box-shadow{box-shadow:0 4px 16px 0 #bacad5;}}span.fr-img-caption{&.image-border-radius img{border-radius:6px;}&.image-box-shadow img{box-shadow:0 4px 16px 0 #bacad5;}}p{img:first-child,span.fr-img-caption:first-child{&.article-align-left,&.article-align-right{", "}}}span.fr-img-caption{text-align:center;img{margin:0;}.fr-inner{font-weight:400;font-size:16px;margin:8px auto 0 auto;padding:0 8px;color:", ";display:block;max-width:671px;}}span.fr-video{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;border-radius:6px;&.article-align-overflow{padding-top:170px;}iframe{position:absolute;top:0;left:0;width:100% !important;height:100% !important;}}blockquote{border-left:0 !important;padding-left:0 !important;margin:0 !important;color:inherit !important;p{line-height:30px;font-size:26px;text-align:center;margin:0 auto;}}.content-attachments{width:100%;}"], headerFont, headerFont, bodyFont, bodyFont, gray07, gray07, gray09, gray09, gray09, media.only.xs(_templateObject()), media.min.md(_templateObject2()), media.min.md(_templateObject3()), media.min.md(_templateObject4()), media.min.md(_templateObject5()), gray04);
 });
 ContentRenderer.propTypes = {
   content: PropTypes.string,
-  type: PropTypes.oneOf(["html", "markdown", "text"]),
+  type: function type(props, propName) {
+    if (propName === "type" && props[propName] !== props[propName].toUpperCase()) {
+      // eslint-disable-next-line no-console
+      console.warn("Please use uppercase type 'HTML', 'MARKDOWN' or 'TEXT'");
+    }
+
+    if (propName === "type" && !["HTML", "MARKDOWN", "TEXT"].includes(props[propName].toUpperCase())) {
+      throw new Error("Invalid type, use 'HTML', 'MARKDOWN' or 'TEXT'");
+    }
+  },
   widgetType: PropTypes.oneOf(["post", "article", "page"]),
   bodyFont: PropTypes.string,
   headerFont: PropTypes.string,

package/dist/htmlConverter.js

@@ -54,6 +54,7 @@ function getConverter() {
 
   converter.setOption("tables", true); // <table>
 
+  converter.setOption("openLinksInNewWindow", true);
   return converter;
 }
 

package/dist/utils.js

@@ -1,3 +1,9 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 import linkifyHtml from "linkifyjs/html";
 import xss from "xss";
 import { decode as decodeHtmlEntities } from "html-entities";
@@ -22,6 +28,26 @@ var processMentions = function processMentions() {
   var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
   return str.replace(mentioningRegexGroupCaseInsensitive, processMatch).replace(mentioningHtmlRegexGroupCaseInsensitive, processMatch);
 };
+/**
+ * @name toSafeText
+ * @description Returns filtered text with filterXSS library
+ * @author Antero Hanhirova
+ * @param {String} - Text to whitelist
+ * @returns {String}
+ */
+
+
+var toSafeText = function toSafeText(text) {
+  return xss(text, {
+    whiteList: safeTagsAndAttributes,
+    css: {
+      whiteList: _objectSpread({}, xss.getDefaultCSSWhiteList(), {
+        "vertical-align": true
+      })
+    },
+    stripIgnoreTag: true
+  }).replace(/&nbsp;/g, " ").replace(/\u2060/g, ""); // Replaces a hidden character that resulted in a "?"-character in backend
+};
 /**
  * @name toHtml
  * @description Converts markdown to html, adds space to end of String
@@ -44,26 +70,12 @@ var toHtml = function toHtml() {
     newString = processMentions(newString);
   }
 
+  newString = toSafeText(newString);
   return linkifyHtml(newString, {
     target: "_blank",
     ignoreTags: ["pre", "code", "script", "style"]
   });
 };
-/**
- * @name toSafeText
- * @description Returns filtered text with filterXSS library
- * @author Antero Hanhirova
- * @param {String} - Text to whitelist
- * @returns {String}
- */
-
-
-var toSafeText = function toSafeText(text) {
-  return xss(text, {
-    whiteList: safeTagsAndAttributes,
-    stripIgnoreTag: true
-  }).replace(/&nbsp;/g, " ").replace(/\u2060/g, ""); // Replaces a hidden character that resulted in a "?"-character in backend
-};
 
 var loadCodeFont = function loadCodeFont() {
   var id = "ibmMonoOnDemand";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happeouikit/content-renderer",
-  "version": "1.0.48",
+  "version": "3.0.1",
   "description": "Rendering html and markdown content",
   "main": "dist/index.js",
   "module": "src/index.js",
@@ -29,8 +29,8 @@
   },
   "peerDependencies": {
     "prop-types": "^15.6.2",
-    "react": "^16.6.3",
-    "styled-components": "^4.1.1"
+    "react": "^17.0.2",
+    "styled-components": "^5.3.1"
   },
   "publishConfig": {
     "access": "public"