@happeouikit/content-renderer 3.2.2 → 3.2.3

package/dist/mentioningUtils.d.ts

@@ -0,0 +1,2 @@
+export const mentioningRegex: RegExp;
+export const extraMentioning: string[];

package/dist/utils.d.ts

@@ -0,0 +1,27 @@
+import { decode as decodeHtmlEntities } from "html-entities";
+/**
+ * @name toSafeText
+ * @description Returns filtered text with filterXSS library
+ * @author Antero Hanhirova
+ * @param {String} - Text to whitelist
+ * @returns {String}
+ */
+declare const toSafeText: (text?: string) => string;
+/**
+ * Adds spans with `color-block` class after color codes hex, rgb and rgba
+ */
+declare const addColorSpanAfterColorCodes: (text?: string) => string;
+/**
+ * @name toHtml
+ * @description Converts markdown to html, adds space to end of String
+ *               The non-breaking space helps users to add text if last word is mention item
+ * @author Antero Hanhirova
+ * @param {String} - Markdown
+ * @returns {String} - Html
+ */
+declare const toHtml: (str?: string, type?: string) => string;
+declare const loadCodeFont: () => void;
+declare const getNearestRelativeParent: (el: HTMLElement) => HTMLElement | null;
+declare const removeSpecialCharacters: (str?: string) => string;
+declare const replacePTagsInCodeBlocks: (html?: string) => string;
+export { toHtml, toSafeText, loadCodeFont, decodeHtmlEntities, getNearestRelativeParent, removeSpecialCharacters, addColorSpanAfterColorCodes, replacePTagsInCodeBlocks, };

package/package.json

@@ -1,38 +1,44 @@
 {
   "name": "@happeouikit/content-renderer",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "description": "Rendering html and markdown content",
-  "main": "dist/index.js",
-  "module": "src/index.js",
+  "type": "module",
+  "jsnext:main": "dist/index.es.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "/dist"
   ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "tsc && vite build"
   },
   "public": true,
   "author": "Happeo Oy",
   "license": "MIT",
   "dependencies": {
-    "@happeouikit/colors": "^1.0.4",
-    "@happeouikit/copy-to-clipboard-button": "^3.0.0",
-    "@happeouikit/emojis": "^1.3.0",
-    "@happeouikit/layout": "^1.1.11",
-    "@happeouikit/typography": "^1.1.0",
     "html-entities": "^2.3.2",
-    "linkifyjs": "^2.1.8",
-    "loadjs": "^4.2.0",
+    "linkify-html": "^4.1.3",
+    "linkifyjs": "^4.1.3",
+    "loadjs": "^4.3.0",
     "react-dom": "^17.0.2",
     "showdown": "^2.1.0",
-    "xss": "^1.0.14"
+    "xss": "^1.0.15"
   },
   "peerDependencies": {
+    "@happeouikit/colors": "^1.0.4",
+    "@happeouikit/copy-to-clipboard-button": "^3.0.0",
+    "@happeouikit/emojis": "^1.3.0",
+    "@happeouikit/layout": "^1.1.11",
+    "@happeouikit/typography": "^1.1.0",
     "prop-types": "^15.6.2",
     "react": "^17.0.2",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.3"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "152fa0259db0e622a09ecde31144336842834787"
+  "devDependencies": {
+    "@types/loadjs": "^4.0.4"
+  },
+  "gitHead": "4a97052ead5b4c60aaf1bb9227d7b118ec74d5fe"
 }

package/dist/ContentRenderer.js

@@ -1,223 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-/* eslint-disable no-nested-ternary */
-/* eslint-disable no-param-reassign */
-/**
- *
- * ContentRenderer
- *
- */
-
-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";
-import loadjs from "loadjs";
-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, 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";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var ContentRenderer = function ContentRenderer(_ref) {
-  var content = _ref.content,
-    type = _ref.type,
-    _ref$widgetType = _ref.widgetType,
-    widgetType = _ref$widgetType === void 0 ? "post" : _ref$widgetType,
-    createAnchors = _ref.createAnchors,
-    useHashAutoscroll = _ref.useHashAutoscroll,
-    _ref$hashAutoscrollTo = _ref.hashAutoscrollTopMargin,
-    hashAutoscrollTopMargin = _ref$hashAutoscrollTo === void 0 ? 0 : _ref$hashAutoscrollTo,
-    decodeHtmlEntitiesOnRender = _ref.decodeHtmlEntitiesOnRender,
-    forceDefaultLinkTarget = _ref.forceDefaultLinkTarget,
-    _ref$inheritBrandingS = _ref.inheritBrandingStyles,
-    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),
-    copyBtns = _useState2[0],
-    setCopyBtns = _useState2[1];
-
-  // Autoscroll to hashes
-  var scrollAndHighlightHash = useCallback(function () {
-    try {
-      var hash = window.location.hash;
-      if (hash) {
-        var hashEl = element.current.querySelector(hash);
-        if (hashEl) {
-          setTimeout(function () {
-            window.scrollTo({
-              top: hashEl.getBoundingClientRect().top - hashAutoscrollTopMargin,
-              behavior: "smooth"
-            });
-            hashEl.classList.add("highlight");
-            setTimeout(function () {
-              hashEl.classList.remove("highlight");
-            }, 5000);
-          }, 500);
-        }
-      }
-    } catch (error) {
-      /* In some cases the hash may be cause this function to fail. In this case, handle and do nothing */
-    }
-  }, [hashAutoscrollTopMargin]);
-  useEffect(function () {
-    if (!element.current) return;
-    var headerElems = createAnchors ? element.current.querySelectorAll("h1, h2, h3, h4, h5, h6") : [];
-    if (headerElems.length > 0) {
-      headerElems.forEach(function (header) {
-        var _header$textContent = header.textContent,
-          textContent = _header$textContent === void 0 ? "" : _header$textContent;
-        if (textContent.length > 0) {
-          header.id = header.id || removeSpecialCharacters(textContent.toLowerCase().replace(/\s/g, "-"));
-        }
-      });
-    }
-    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) {
-      if (!loadjs.isDefined("highlightjs")) {
-        loadCodeFont();
-        loadjs([].concat(_toConsumableArray(HIGHLIGHJS_JS), _toConsumableArray(HIGHLIGHJS_CSS)), "highlightjs");
-      }
-      loadjs.ready("highlightjs", function () {
-        // highlight.js register only languages we want to support?
-        window.hljs.configure({
-          languages: CODE_BLOCK_AVAILABLE_LANGUAGES,
-          useBr: true
-        });
-        blockElems.forEach(function (elem) {
-          var plainCode = elem.innerText;
-
-          // Take the inner content and put inside single code block
-          // This will ensure nice readability.
-          // Needs to be done since editor will generate multiple lines for code for ease of editing
-          var codeBlock = document.createElement(ELEMENT_TYPE_CODE);
-          var decodedText = decodeHtmlEntities(plainCode);
-          codeBlock.textContent = decodedText; // Done like this to prevent xss
-          elem.innerHTML = ""; // Clear content so we can set just the single code block there
-          elem.appendChild(codeBlock);
-          window.hljs.highlightBlock(elem);
-        });
-        setCopyBtns(function (prevState) {
-          return [].concat(_toConsumableArray(prevState), _toConsumableArray(blockElems));
-        });
-      });
-    }
-    setCopyBtns(_toConsumableArray(headerElems));
-    if (useHashAutoscroll) {
-      scrollAndHighlightHash();
-    }
-  }, [element, createAnchors, forceDefaultLinkTarget, useHashAutoscroll, scrollAndHighlightHash]);
-  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, addColorBlocks, 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 /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Wrapper, {
-      className: "content-renderer ".concat(widgetType === "page" ? "fr-view pages-text" : ""),
-      ref: element,
-      widgetType: widgetType,
-      createAnchors: createAnchors,
-      dangerouslySetInnerHTML: {
-        __html: safeText
-      },
-      inheritBrandingStyles: inheritBrandingStyles
-    }), 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({
-  displayName: "ContentRenderer__BtnContainer",
-  componentId: "sc-110nzgm-0"
-})(["display:inline-flex;margin-left:", ";button{opacity:0;transition-property:opacity;transition-duration:150ms;transition-timing-function:ease-in;}button:hover,button:active,button:focus{opacity:1 !important;}div p{font-size:12px;line-height:16px;}"], margin200);
-var Wrapper = styled(BodyUI).attrs({
-  as: "div"
-}).withConfig({
-  displayName: "ContentRenderer__Wrapper",
-  componentId: "sc-110nzgm-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;}.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) {
-  var widgetType = _ref3.widgetType,
-    inheritBrandingStyles = _ref3.inheritBrandingStyles;
-  return widgetType === "page" ? "" : "\n    * {\n      font-family: ".concat(sansFamily, ";\n    }\n\n    h1 {\n      font-family: ").concat(inheritBrandingStyles ? "var(--channels-h1-font-family, revert)" : "revert", ";      \n      font-weight: ").concat(inheritBrandingStyles ? "var(--channels-h1-font-weight, 500)" : "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         font-family: ").concat(inheritBrandingStyles ? "var(--channels-h1-font-family, revert)" : "revert", ";    \n      }\n    }\n    h2 {\n      font-family: ").concat(inheritBrandingStyles ? "var(--channels-h2-font-family, revert)" : "revert", ";      \n      font-weight: ").concat(inheritBrandingStyles ? "var(--channels-h2-font-weight, 500)" : "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       font-family: ").concat(inheritBrandingStyles ? "var(--channels-h2-font-family, revert)" : "revert", ";     \n      }\n    }\n    h3 {\n      font-family: ").concat(inheritBrandingStyles ? "var(--channels-h3-font-family, revert)" : "revert", ";      \n      font-weight: ").concat(inheritBrandingStyles ? "var(--channels-h3-font-weight, 500)" : "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        font-family: ").concat(inheritBrandingStyles ? "var(--channels-h3-font-family, revert);" : "revert", "   \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-family: ").concat(inheritBrandingStyles ? "var(--channels-body-font-family, revert)" : "revert", ";      \n      font-weight: ").concat(inheritBrandingStyles ? "var(--channels-body-font-weight, revert)" : "revert", ";\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      & * {\n         font-family: ").concat(inheritBrandingStyles ? "var(--channels-body-font-family, revert)" : "revert", ";    \n      }\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        font-family: ").concat(inheritBrandingStyles ? "var(--channels-body-font-family, revert)" : "revert", "; \n        font-weight: ").concat(inheritBrandingStyles ? "var(--channels-body-font-weight, revert)" : "revert", ";\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        font-family: ").concat(inheritBrandingStyles ? "var(--channels-body-font-family, revert);" : "revert", ";\n        font-weight: ").concat(inheritBrandingStyles ? "var(--channels-body-font-weight, revert)" : "revert", ";\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,
-    inheritBrandingStyles = _ref4.inheritBrandingStyles;
-  return widgetType === "article" && css(["h1{font-family:", ";& *{font-family:", ";}}h2{font-family:", ";& *{font-family:", ";}}h3{font-family:", ";& *{font-family:", ";}}h4,h5,h6,p,ul,ol,li,table{font-family:", ";& *{font-family:", ";}}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 auto;", ";&.article-align-left{display:block;max-width:100%;", "}&.article-align-center{display:block;}&.article-align-right{display:block;max-width:100%;", "}&.article-align-overflow{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%;}"], inheritBrandingStyles ? "var(--channels-h1-font-family, revert)" : "revert", inheritBrandingStyles ? "var(--channels-h1-font-family, revert)" : "revert", inheritBrandingStyles ? "var(--channels-h2-font-family, revert)" : "revert", inheritBrandingStyles ? "var(--channels-h2-font-family, revert)" : "revert", inheritBrandingStyles ? "var(--channels-h3-font-family, revert)" : "revert", inheritBrandingStyles ? "var(--channels-h3-font-family, revert)" : "revert", inheritBrandingStyles ? "var(--channels-body-font-family, revert)" : "revert", inheritBrandingStyles ? "var(--channels-body-font-family, revert)" : "revert", gray07, gray07, gray09, gray09, gray09, media.only.xs(_templateObject || (_templateObject = _taggedTemplateLiteral(["      \n         max-width: 100%;\n       "]))), media.min.md(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n           margin: 30px 30px 10px 0px;\n           float: left;\n           max-width: 75%;\n         "]))), media.min.md(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n           margin: 30px 0px 10px 30px;\n           float: right;\n           max-width: 75%;\n         "]))), media.min.md(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n             margin: 30px -150px;\n             width: calc(100% + 300px) !important;\n             max-width: none;\n           "]))), media.min.md(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            margin-top: 8px;\n           "]))), gray04);
-});
-ContentRenderer.propTypes = {
-  content: PropTypes.string,
-  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"]),
-  decodeHtmlEntitiesOnRender: PropTypes.bool,
-  createAnchors: PropTypes.bool,
-  forceDefaultLinkTarget: PropTypes.bool,
-  useHashAutoscroll: PropTypes.bool,
-  hashAutoscrollTopMargin: PropTypes.number,
-  addColorBlocks: PropTypes.bool
-};
-ContentRenderer.defaultProps = {
-  content: "",
-  type: "html",
-  widgetType: "post",
-  decodeHtmlEntitiesOnRender: false,
-  createAnchors: false,
-  useHashAutoscroll: true,
-  forceDefaultLinkTarget: false,
-  hashAutoscrollTopMargin: 0,
-  addColorBlocks: false
-};
-export default ContentRenderer;

package/dist/constants.js

@@ -1,73 +0,0 @@
-export var safeTagsAndAttributes = {
-  a: ["class", "target", "href", "title", "data-collection-id", "data-page-id", "rel", "data-user-id", "data-user-id-old"],
-  abbr: ["title"],
-  address: [],
-  area: ["shape", "coords", "href", "alt"],
-  article: [],
-  aside: [],
-  audio: ["autoplay", "controls", "loop", "preload", "src"],
-  b: [],
-  bdi: ["dir"],
-  bdo: ["dir"],
-  big: [],
-  blockquote: ["cite"],
-  br: [],
-  caption: [],
-  center: [],
-  cite: [],
-  code: [],
-  col: ["align", "valign", "span", "width"],
-  colgroup: ["align", "valign", "span", "width"],
-  dd: [],
-  del: ["datetime"],
-  details: ["open"],
-  div: ["style"],
-  dl: [],
-  dt: [],
-  em: [],
-  font: ["color", "size", "face", "style"],
-  footer: [],
-  h1: ["style"],
-  h2: ["style"],
-  h3: ["style"],
-  h4: ["style"],
-  h5: ["style"],
-  h6: ["style"],
-  header: ["style"],
-  hr: ["style", "class"],
-  i: [],
-  img: ["src", "alt", "title", "width", "height", "style", "class", "type"],
-  ins: ["datetime"],
-  li: ["style"],
-  mark: [],
-  nav: [],
-  ol: ["style"],
-  p: ["style"],
-  pre: ["style"],
-  s: [],
-  section: [],
-  small: [],
-  span: ["style", "class"],
-  sub: [],
-  sup: [],
-  strong: [],
-  table: ["width", "border", "align", "valign", "style", "class"],
-  tbody: ["align", "valign", "style", "class"],
-  td: ["width", "rowspan", "colspan", "align", "valign", "style", "class"],
-  tfoot: ["align", "valign", "style", "class"],
-  th: ["width", "rowspan", "colspan", "align", "valign", "style", "class"],
-  thead: ["align", "valign", "style", "class"],
-  tr: ["rowspan", "align", "valign", "style", "class"],
-  tt: [],
-  u: [],
-  ul: ["style", "class"],
-  video: ["style", "autoplay", "controls", "loop", "preload", "src", "height", "width"],
-  iframe: ["src", "frameborder", "allow", "sandbox", "referrerpolicy", "allowfullscreen", "style", "class"]
-};
-var HIGHLIGHT_JS_THEME = "a11y-light";
-export var MONOSPACE_FONT_URL = "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap";
-export var HIGHLIGHJS_JS = ["https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/highlight.min.js"];
-export var HIGHLIGHJS_CSS = ["https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/styles/default.min.css", "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/styles/".concat(HIGHLIGHT_JS_THEME, ".min.css")];
-export var ELEMENT_TYPE_PRE = "PRE";
-export var ELEMENT_TYPE_CODE = "CODE";
-export var CODE_BLOCK_AVAILABLE_LANGUAGES = ["javascript", "html", "css", "xml", "json", "java", "php", "typescript"];

package/dist/htmlConverter.js

@@ -1,56 +0,0 @@
-import showdown from "showdown";
-import { extraMentioning, mentioningRegex } from "./mentioningUtils";
-var mentioningRegexCaseInsensitive = new RegExp(mentioningRegex, "i");
-var mentioningRegexGroupCaseInsensitive = new RegExp(mentioningRegex, "gi");
-var converter;
-var customRules = {
-  color: {
-    type: "lang",
-    regex: /\((.*?)\)\[(rgb\((?:([0-9]{1,2}|1[0-9]{1,2}|2[0-4][0-9]|25[0-5]), ?)(?:([0-9]{1,2}|1[0-9]{1,2}|2[0-4][0-9]|25[0-5]), ?)(?:([0-9]{1,2}|1[0-9]{1,2}|2[0-4][0-9]|25[0-5]))\))\]/gi,
-    replace: function replace(s, val) {
-      var color = s.match(/\[(rgb\((?:([0-9]{1,2}|1[0-9]{1,2}|2[0-4][0-9]|25[0-5]), ?)(?:([0-9]{1,2}|1[0-9]{1,2}|2[0-4][0-9]|25[0-5]), ?)(?:([0-9]{1,2}|1[0-9]{1,2}|2[0-4][0-9]|25[0-5]))\))\]/gi)[0].replace("[", "").replace("]", "");
-      return "<span style=\"color:".concat(color, "\">").concat(val, "</span>");
-    }
-  },
-  mention: {
-    type: "lang",
-    regex: mentioningRegexGroupCaseInsensitive,
-    replace: function replace(s) {
-      var r = s.match(mentioningRegexCaseInsensitive);
-      var id = r && r.length > 1 && r[1];
-      var name = r && r.length > 2 && r[2];
-      if (extraMentioning.find(function (mentioning) {
-        return mentioning.toLowerCase() === String(id).toLowerCase();
-      })) {
-        return "<a class=\"mention extraMention\" data-user-id=\"".concat(id, "\">@").concat(name, "</a>");
-      }
-      return "<a class=\"mention\" data-user-id=\"".concat(id, "\">@").concat(name, "</a>");
-    }
-  },
-  userMentioTag: {
-    type: "lang",
-    regex: /<user-mentio[^>]*>(.+?)<\/user-mentio>/gi,
-    replace: function replace(s) {
-      var r = s.match(/<user-mentio[^>]*>(.+?)<\/user-mentio>/);
-      var attr = s.match(/data-user-id=["']([^"]+)["']/);
-      var name = r && r.length > 1 && r[1];
-      var id = attr && attr.length > 1 && attr[1];
-      return "<a class=\"mention\" data-user-id=\"".concat(id, "\">").concat(name, "</a>");
-    }
-  }
-};
-function getConverter() {
-  if (converter) return converter;
-  showdown.extension("color", customRules.color);
-  showdown.extension("mention", customRules.mention);
-  showdown.extension("usermentiotag", customRules.userMentioTag);
-  converter = new showdown.Converter({
-    extensions: ["color", "mention", "usermentiotag"]
-  });
-  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/index.js

@@ -1 +0,0 @@
-export { default as ContentRenderer } from "./ContentRenderer";

package/dist/mentioningUtils.js

@@ -1,2 +0,0 @@
-export var mentioningRegex = /@(\d*|channel|editors):\((.*?)\)/;
-export var extraMentioning = ["channel", "editors"];

package/dist/utils.js

@@ -1,113 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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";
-import { fixEmojioneBug, shortToUnicode } from "@happeouikit/emojis";
-import { MONOSPACE_FONT_URL, safeTagsAndAttributes } from "./constants";
-import htmlConverter from "./htmlConverter";
-import { extraMentioning, mentioningRegex } from "./mentioningUtils";
-var mentioningRegexGroupCaseInsensitive = new RegExp(mentioningRegex, "gi");
-var mentioningHtmlRegexGroupCaseInsensitive = new RegExp(/<user-mentio[^>]*data-user-id=["']([^"]+)["'][^>]*>(?:@|(?:&#64;))(.+?)<\/user-mentio>/, "gi");
-var processMatch = function processMatch(match, id, name) {
-  if (extraMentioning.find(function (mentioning) {
-    return mentioning.toLowerCase() === String(id).toLowerCase();
-  })) {
-    return "<a class=\"mention extraMention\" data-user-id=\"".concat(id, "\">@").concat(name, "</a>");
-  }
-  return "<a class=\"mention\" data-user-id=\"".concat(id, "\">@").concat(name, "</a>");
-};
-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(_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
-};
-
-/**
- * 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
- *               The non-breaking space helps users to add text if last word is mention item
- * @author Antero Hanhirova
- * @param {String} - Markdown
- * @returns {String} - Html
- */
-
-var toHtml = function toHtml() {
-  var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
-  var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "html";
-  var newString = shortToUnicode(str);
-  newString = fixEmojioneBug(newString);
-  if (type === "markdown") {
-    newString = htmlConverter.makeHtml(newString);
-  } else {
-    newString = processMentions(newString);
-  }
-  newString = toSafeText(newString);
-  return linkifyHtml(newString, {
-    target: "_blank",
-    ignoreTags: ["pre", "code", "script", "style"],
-    validate: {
-      url: function url(value) {
-        return /^(http|ftp)s?:\/\//.test(value);
-      }
-    }
-  });
-};
-var loadCodeFont = function loadCodeFont() {
-  var id = "ibmMonoOnDemand";
-  if (!document.getElementById(id)) {
-    var style = document.createElement("style");
-    style.id = id;
-    style.appendChild(document.createTextNode("@import url(".concat(MONOSPACE_FONT_URL, ");")));
-    document.head.appendChild(style);
-  }
-};
-var getNearestRelativeParent = function getNearestRelativeParent(el) {
-  if (!el) return null;
-  var elStyle = el.currentStyle || window.getComputedStyle(el, "");
-  var positionStyle = elStyle.position;
-  if (["relative", "absolute"].includes(positionStyle)) {
-    return el;
-  }
-  return getNearestRelativeParent(el.parentNode);
-};
-
-// Remove special and hidden characters from string
-var removeSpecialCharacters = function removeSpecialCharacters() {
-  var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
-  return (
-    // eslint-disable-next-line no-control-regex
-    str.replace(/[^\u0000-\u007E]/g, "")
-  );
-};
-export { toHtml, toSafeText, loadCodeFont, decodeHtmlEntities, getNearestRelativeParent, removeSpecialCharacters, addColorSpanAfterColorCodes };