@happeouikit/content-renderer 3.1.6 → 3.2.0

package/dist/ContentRenderer.js

@@ -19,7 +19,7 @@ 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, loadCodeFont, decodeHtmlEntities, removeSpecialCharacters, toSafeText } from "./utils";
+import { toHtml, loadCodeFont, decodeHtmlEntities, removeSpecialCharacters, toSafeText, addColorSpanAfterColorCodes } 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";
@@ -36,7 +36,9 @@ var ContentRenderer = function ContentRenderer(_ref) {
     decodeHtmlEntitiesOnRender = _ref.decodeHtmlEntitiesOnRender,
     forceDefaultLinkTarget = _ref.forceDefaultLinkTarget,
     _ref$inheritBrandingS = _ref.inheritBrandingStyles,
-    inheritBrandingStyles = _ref$inheritBrandingS === void 0 ? false : _ref$inheritBrandingS;
+    inheritBrandingStyles = _ref$inheritBrandingS === void 0 ? false : _ref$inheritBrandingS,
+    _ref$addColorBlocks = _ref.addColorBlocks,
+    addColorBlocks = _ref$addColorBlocks === void 0 ? false : _ref$addColorBlocks;
   var element = useRef({});
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -128,11 +130,14 @@ var ContentRenderer = function ContentRenderer(_ref) {
   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 (addColorBlocks) {
+      transformedContent = addColorSpanAfterColorCodes(transformedContent);
+    }
     if (decodeHtmlEntitiesOnRender) {
       transformedContent = decodeHtmlEntities(transformedContent);
     }
     return transformedContent;
-  }, [content, type, decodeHtmlEntitiesOnRender]);
+  }, [content, type, addColorBlocks, decodeHtmlEntitiesOnRender]);
 
   // Use dangerouslySetInnerHTML as there might be nested <p>'s header etc
   // This requires that all content is run through the toSafeText filter
@@ -173,7 +178,7 @@ var Wrapper = styled(BodyUI).attrs({
 }).withConfig({
   displayName: "ContentRenderer__Wrapper",
   componentId: "sc-1mleu9k-1"
-})(["", " 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;}", " ", " img[type=\"custom-emoji\"]{height:1em;display:inline;vertical-align:middle;margin:0;}}"], 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;}.color-block{display:inline-block;width:18px;height:18px;margin-left:2px;transform:translateY(4px);margin-right:2px;border-radius:4px;border:1px solid var(--color-gray100);}", " ", "}"], 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), gray09, padding200, function (_ref3) {
@@ -201,7 +206,8 @@ ContentRenderer.propTypes = {
   createAnchors: PropTypes.bool,
   forceDefaultLinkTarget: PropTypes.bool,
   useHashAutoscroll: PropTypes.bool,
-  hashAutoscrollTopMargin: PropTypes.number
+  hashAutoscrollTopMargin: PropTypes.number,
+  addColorBlocks: PropTypes.bool
 };
 ContentRenderer.defaultProps = {
   content: "",
@@ -211,6 +217,7 @@ ContentRenderer.defaultProps = {
   createAnchors: false,
   useHashAutoscroll: true,
   forceDefaultLinkTarget: false,
-  hashAutoscrollTopMargin: 0
+  hashAutoscrollTopMargin: 0,
+  addColorBlocks: false
 };
 export default ContentRenderer;

package/dist/htmlConverter.js

@@ -50,6 +50,7 @@ function getConverter() {
   converter.setOption("strikethrough", true); // <del>
   converter.setOption("tables", true); // <table>
   converter.setOption("openLinksInNewWindow", true);
+  converter.setOption("disableForced4SpacesIndentedSublists", true);
   return converter;
 }
 export default getConverter();

package/dist/utils.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import linkifyHtml from "linkifyjs/html";
 import xss from "xss";
 import { decode as decodeHtmlEntities } from "html-entities";
@@ -42,6 +42,17 @@ var toSafeText = function toSafeText(text) {
   }).replace(/&nbsp;/g, " ").replace(/\u2060/g, ""); // Replaces a hidden character that resulted in a "?"-character in backend
 };
 
+/**
+ * Adds spans with `color-block` class after color codes hex, rgb and rgba
+ */
+var addColorSpanAfterColorCodes = function addColorSpanAfterColorCodes() {
+  var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  var colorRegex = /#(?:[0-9a-fA-F]{3}){1,2}|\brgb\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*\)|\brgba\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d*(?:\.\d+)?\s*\)/gi;
+  return text.replace(colorRegex, function (match) {
+    return "".concat(match, "<span class=\"color-block\" style=\"background-color: ").concat(match, ";\"></span>");
+  });
+};
+
 /**
  * @name toHtml
  * @description Converts markdown to html, adds space to end of String
@@ -99,4 +110,4 @@ var removeSpecialCharacters = function removeSpecialCharacters() {
     str.replace(/[^\u0000-\u007E]/g, "")
   );
 };
-export { toHtml, toSafeText, loadCodeFont, decodeHtmlEntities, getNearestRelativeParent, removeSpecialCharacters };
+export { toHtml, toSafeText, loadCodeFont, decodeHtmlEntities, getNearestRelativeParent, removeSpecialCharacters, addColorSpanAfterColorCodes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happeouikit/content-renderer",
-  "version": "3.1.6",
+  "version": "3.2.0",
   "description": "Rendering html and markdown content",
   "main": "dist/index.js",
   "module": "src/index.js",
@@ -23,8 +23,8 @@
     "linkifyjs": "^2.1.8",
     "loadjs": "^4.2.0",
     "react-dom": "^17.0.2",
-    "showdown": "^1.9.0",
-    "xss": "^1.0.6"
+    "showdown": "^2.1.0",
+    "xss": "^1.0.14"
   },
   "peerDependencies": {
     "prop-types": "^15.6.2",
@@ -33,5 +33,6 @@
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "gitHead": "4e26a409cb4a6ab360f8458d1c6b66cdd8c81d5a"
 }

package/CHANGELOG.md

@@ -1,239 +0,0 @@
-# Changelog
-
-## 3.1.6
-
-- [Fixed] emoji size for all renderers
-
-## 3.1.5
-
-- [Fixed] margin for custom-emoji
-
-## 3.1.4
-
-- [Fixed] styles for custom-emoji
-
-## 3.1.3
-
-- [Add] styles for custom-emoji
-
-## 3.1.2
-
-- [Add] img type data attribute
-
-## 3.1.1
-
-- [Remove] @universe dependencies
-
-## 3.0.10
-
-- [Fixed] paragraph styles
-
-## 3.0.9
-
-- [Fixed] paragraph styles
-
-## 3.0.8
-
-- Publish
-
-## 3.0.7
-
-- Publish
-
-## 3.0.6
-
-- [Added] Support for user defined font families and weights
-
-## 3.0.5
-
-- Publish
-
-## 3.0.4
-
-- [Fixed] ContentRenderer should now render content without applying links to domain-like text.
-- [Updated] Updated ContentRenderer unit test with Testing Linkify hyper-link Features.
-
-## 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.
-- [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 paragraphs and list elements etc.
-
-## 1.0.45
-
-- [Fixed] Removed some padding for tables without borders
-
-## 1.0.44
-
-- [Fixed] Removed special characteds from content copying
-
-## 1.0.43
-
-- [Fixed] Moved to ReactDOM for rendering extra buttons
-- [Added] Ability to include anchor links & buttons
-- [Added] Ability to auto-scroll to anchors
-
-## 1.0.42
-
-- [Fixed] Remove bolding from links
-
-## 1.0.37
-
-- [Fixed] Get correct parent for copy button
-
-## 1.0.36
-
-- [Fixed] Improved code block styles
-
-## 1.0.35
-
-- [Fixed] important fonts
-
-## 1.0.34
-
-- [Fixed] use custom fonts for all tags inside h1, h2, h3
-
-## 1.0.33
-
-- [Fixed] Code block
-
-## 1.0.30
-
-- [Fixed] enforce font style to content
-
-## 1.0.29
-
-- [Fixed] Modify blockquote styles to match froala's
-
-## 1.0.28
-
-- [Fixed] Default image placement is now left aligned and not centered
-- [Fixed] Update frontend-utils dependency
-
-## 1.0.27
-
-- [Add] Rendering of code blocks + adding copy button to code blocks
-
-## 1.0.26
-
-- [Fixed] Embeded videos styles
-
-## 1.0.25
-
-- [Fixed] Removed a href urls
-
-## 1.0.24
-
-- [Fixed] fixed article CSS styles.
-
-## 1.0.23
-
-- [Fixed] update dependencies
-
-## 1.0.22
-
-- [Add] add some props for article content
-
-## 1.0.21
-
-- [Fixed] stop publishing the docs
-
-## 1.0.20
-
-- [Add] Changed some css for @channel and @editor
-
-## 1.0.19
-
-- [Fixed] Changed @team into @channel mentioning
-
-## 1.0.18
-
-- [Add] Support for @team and @editors mentioning.
-
-## 1.0.17
-
-- [Fixed] Styles for heading text.
-
-## 1.0.15
-
-- [Fixed] Type error in the mentions Showdown plugin
-
-## 1.0.14
-
-- [Fixed] Links converted from markdown will now open in a new tab.
-
-## 1.0.13
-
-- [Fixed] Pre element styles are now also applied to Code elements.
-
-## 1.0.11
-
-- [Fixed] Ordered and unordered lists are now aligned, and have correct line-height.
-
-## 1.0.10
-
-- [Fixed] List font size is now 16px.
-
-## 1.0.8
-
-- [Added] CSS styles to mention tags.
-
-## 1.0.7
-
-- [Fixed] Adds class to safe tags for anchor elements.
-
-## 1.0.6
-
-- [Fixed] font stylings of p tags.
-
-## 1.0.5
-
-- [Fixed] Missing dist
-
-## 1.0.4
-
-- [Fixed] Package not updated
-
-## 1.0.3
-
-- [Added] Handle user-mentio html tag
-
-## 1.0.2
-
-- Publish
-
-## 1.0.1
-
-- [Fixed] All children elements will now use the sans-serif font family.
-
-## 1.0.0
-
-- Initial copy from the private kit