@happeouikit/content-renderer 2.0.1 → 3.0.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 3.0.3
+
+- [Added] Added prop `forceDefaultLinkTarget` that will force external links with `target="_blank"` and removes `target` from internal links.
+
+## 3.0.2
+
+- [Fixed] ContentRenderer now applies styling options from Pages
+
+## 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.

package/dist/ContentRenderer.js

@@ -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,
@@ -84,7 +87,8 @@ var ContentRenderer = function ContentRenderer(_ref) {
       useHashAutoscroll = _ref.useHashAutoscroll,
       _ref$hashAutoscrollTo = _ref.hashAutoscrollTopMargin,
       hashAutoscrollTopMargin = _ref$hashAutoscrollTo === void 0 ? 0 : _ref$hashAutoscrollTo,
-      decodeHtmlEntitiesOnRender = _ref.decodeHtmlEntitiesOnRender;
+      decodeHtmlEntitiesOnRender = _ref.decodeHtmlEntitiesOnRender,
+      forceDefaultLinkTarget = _ref.forceDefaultLinkTarget;
   var element = useRef({});
 
   var _useState = useState([]),
@@ -132,6 +136,21 @@ var ContentRenderer = function ContentRenderer(_ref) {
       });
     }
 
+    var linkElems = forceDefaultLinkTarget ? element.current.querySelectorAll("a") : [];
+
+    if (linkElems.length > 0) {
+      var currentOrigin = window.origin;
+      linkElems.forEach(function (link) {
+        var href = link.href;
+
+        if (href.startsWith(currentOrigin)) {
+          delete link.target;
+        } else {
+          link.target = "_blank";
+        }
+      });
+    }
+
     var blockElems = element.current.querySelectorAll(ELEMENT_TYPE_PRE);
 
     if (blockElems.length > 0) {
@@ -171,45 +190,48 @@ var ContentRenderer = function ContentRenderer(_ref) {
     if (useHashAutoscroll) {
       scrollAndHighlightHash();
     }
-  }, [element, createAnchors, useHashAutoscroll, scrollAndHighlightHash]);
+  }, [element, createAnchors, forceDefaultLinkTarget, useHashAutoscroll, scrollAndHighlightHash]);
   var safeText = useMemo(function () {
     var lowercaseType = type && typeof type === "string" ? type.toLowerCase() : "html";
-    var transformedContent = lowercaseType === "text" ? "<p>".concat(content, "</p>") : toHtml(content, lowercaseType);
+    var transformedContent = lowercaseType === "text" ? toSafeText("<p>".concat(content, "</p>")) : toHtml(content, lowercaseType);
 
     if (decodeHtmlEntitiesOnRender) {
       transformedContent = decodeHtmlEntities(transformedContent);
     }
 
-    return toSafeText(transformedContent);
+    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 ".concat(widgetType === "page" ? "fr-view pages-text" : ""),
+      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({
@@ -250,6 +272,7 @@ ContentRenderer.propTypes = {
   headerFont: PropTypes.string,
   decodeHtmlEntitiesOnRender: PropTypes.bool,
   createAnchors: PropTypes.bool,
+  forceDefaultLinkTarget: PropTypes.bool,
   useHashAutoscroll: PropTypes.bool,
   hashAutoscrollTopMargin: PropTypes.number
 };
@@ -262,6 +285,7 @@ ContentRenderer.defaultProps = {
   decodeHtmlEntitiesOnRender: false,
   createAnchors: false,
   useHashAutoscroll: true,
+  forceDefaultLinkTarget: false,
   hashAutoscrollTopMargin: 0
 };
 export default ContentRenderer;

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": "2.0.1",
+  "version": "3.0.3",
   "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"