@bbl-digital/snorre 4.2.1 → 4.2.3

package/dist/bundle.js

@@ -1,18 +1,18 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@emotion/styled/base'), require('react'), require('@emotion/react'), require('@emotion/react/jsx-runtime'), require('react/jsx-runtime'), require('react-transition-group'), require('react-player'), require('react-aria'), require('quill/dist/quill.snow.css'), require('match-sorter'), require('body-scroll-lock'), require('framer-motion'), require('recharts'), require('nuka-carousel'), require('react-day-picker'), require('date-fns/locale'), require('react-popper'), require('date-fns'), require('react-beautiful-dnd'), require('react-images-uploading'), require('react-stately'), require('quill'), require('dompurify')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@emotion/styled/base', 'react', '@emotion/react', '@emotion/react/jsx-runtime', 'react/jsx-runtime', 'react-transition-group', 'react-player', 'react-aria', 'quill/dist/quill.snow.css', 'match-sorter', 'body-scroll-lock', 'framer-motion', 'recharts', 'nuka-carousel', 'react-day-picker', 'date-fns/locale', 'react-popper', 'date-fns', 'react-beautiful-dnd', 'react-images-uploading', 'react-stately', 'quill', 'dompurify'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Snorre = {}, global._styled, global.React, global.react, global.jsxRuntime, global.jsxRuntime$1, global.reactTransitionGroup, global.ReactPlayer, global.reactAria, null, global.matchSorter, global.bodyScrollLock, global.framerMotion, global.recharts, global.Carousel, global.reactDayPicker, global.locale, global.reactPopper, global.dateFns, global.reactBeautifulDnd, global.ImageUploading, global.reactStately, global.Quill, global.DOMPurify));
-})(this, (function (exports, _styled, React, react, jsxRuntime, jsxRuntime$1, reactTransitionGroup, ReactPlayer, reactAria, quill_snow_css, matchSorter, bodyScrollLock, framerMotion, recharts, Carousel, reactDayPicker, locale, reactPopper, dateFns, reactBeautifulDnd, ImageUploading, reactStately, Quill, DOMPurify) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@emotion/styled/base'), require('react'), require('@emotion/react'), require('@emotion/react/jsx-runtime'), require('react/jsx-runtime'), require('react-transition-group'), require('react-player'), require('react-aria'), require('dompurify'), require('quill/dist/quill.snow.css'), require('match-sorter'), require('body-scroll-lock'), require('framer-motion'), require('recharts'), require('nuka-carousel'), require('react-day-picker'), require('date-fns/locale'), require('react-popper'), require('date-fns'), require('react-beautiful-dnd'), require('react-images-uploading'), require('react-stately'), require('quill')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@emotion/styled/base', 'react', '@emotion/react', '@emotion/react/jsx-runtime', 'react/jsx-runtime', 'react-transition-group', 'react-player', 'react-aria', 'dompurify', 'quill/dist/quill.snow.css', 'match-sorter', 'body-scroll-lock', 'framer-motion', 'recharts', 'nuka-carousel', 'react-day-picker', 'date-fns/locale', 'react-popper', 'date-fns', 'react-beautiful-dnd', 'react-images-uploading', 'react-stately', 'quill'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Snorre = {}, global._styled, global.React, global.react, global.jsxRuntime, global.jsxRuntime$1, global.reactTransitionGroup, global.ReactPlayer, global.reactAria, global.DOMPurify, null, global.matchSorter, global.bodyScrollLock, global.framerMotion, global.recharts, global.Carousel, global.reactDayPicker, global.locale, global.reactPopper, global.dateFns, global.reactBeautifulDnd, global.ImageUploading, global.reactStately, global.Quill));
+})(this, (function (exports, _styled, React, react, jsxRuntime, jsxRuntime$1, reactTransitionGroup, ReactPlayer, reactAria, DOMPurify, quill_snow_css, matchSorter, bodyScrollLock, framerMotion, recharts, Carousel, reactDayPicker, locale, reactPopper, dateFns, reactBeautifulDnd, ImageUploading, reactStately, Quill) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var _styled__default = /*#__PURE__*/_interopDefaultLegacy(_styled);
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var ReactPlayer__default = /*#__PURE__*/_interopDefaultLegacy(ReactPlayer);
+  var DOMPurify__default = /*#__PURE__*/_interopDefaultLegacy(DOMPurify);
   var Carousel__default = /*#__PURE__*/_interopDefaultLegacy(Carousel);
   var ImageUploading__default = /*#__PURE__*/_interopDefaultLegacy(ImageUploading);
   var Quill__default = /*#__PURE__*/_interopDefaultLegacy(Quill);
-  var DOMPurify__default = /*#__PURE__*/_interopDefaultLegacy(DOMPurify);
 
   const styles$B = {
     default: (theme, color) => /*#__PURE__*/react.css("display:inline-block;position:relative;min-width:58px;height:10px;div{position:absolute;width:10px;height:10px;border-radius:50%;background:", color ? color : '#ccc', ";animation-timing-function:cubic-bezier(0, 1, 1, 0);}div:nth-of-type(1){left:6px;animation:lds-ellipsis1 0.6s infinite;}div:nth-of-type(2){left:6px;animation:lds-ellipsis2 0.6s infinite;}div:nth-of-type(3){left:24px;animation:lds-ellipsis2 0.6s infinite;}div:nth-of-type(4){left:42px;animation:lds-ellipsis3 0.6s infinite;}@keyframes lds-ellipsis1{0%{transform:scale(0);}100%{transform:scale(1);}}@keyframes lds-ellipsis3{0%{transform:scale(1);}100%{transform:scale(0);}}@keyframes lds-ellipsis2{0%{transform:translate(0, 0);}100%{transform:translate(18px, 0);}}" + (process.env.NODE_ENV === "production" ? "" : ";label:default;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0FwcExvYWRlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS08iLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvQXBwTG9hZGVyL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgSUFwcFRoZW1lIH0gZnJvbSAnLi4vLi4vYXBwLXNoZWxsL3RoZW1lJ1xuXG5jb25zdCBzdHlsZXMgPSB7XG4gIGRlZmF1bHQ6ICh0aGVtZTogSUFwcFRoZW1lLCBjb2xvcjogc3RyaW5nIHwgdW5kZWZpbmVkKSA9PlxuICAgIGNzc2BcbiAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIG1pbi13aWR0aDogNThweDtcbiAgICAgIGhlaWdodDogMTBweDtcbiAgICAgIGRpdiB7XG4gICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgd2lkdGg6IDEwcHg7XG4gICAgICAgIGhlaWdodDogMTBweDtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlO1xuICAgICAgICBiYWNrZ3JvdW5kOiAke2NvbG9yID8gY29sb3IgOiAnI2NjYyd9O1xuICAgICAgICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBjdWJpYy1iZXppZXIoMCwgMSwgMSwgMCk7XG4gICAgICB9XG4gICAgICBkaXY6bnRoLW9mLXR5cGUoMSkge1xuICAgICAgICBsZWZ0OiA2cHg7XG4gICAgICAgIGFuaW1hdGlvbjogbGRzLWVsbGlwc2lzMSAwLjZzIGluZmluaXRlO1xuICAgICAgfVxuICAgICAgZGl2Om50aC1vZi10eXBlKDIpIHtcbiAgICAgICAgbGVmdDogNnB4O1xuICAgICAgICBhbmltYXRpb246IGxkcy1lbGxpcHNpczIgMC42cyBpbmZpbml0ZTtcbiAgICAgIH1cbiAgICAgIGRpdjpudGgtb2YtdHlwZSgzKSB7XG4gICAgICAgIGxlZnQ6IDI0cHg7XG4gICAgICAgIGFuaW1hdGlvbjogbGRzLWVsbGlwc2lzMiAwLjZzIGluZmluaXRlO1xuICAgICAgfVxuICAgICAgZGl2Om50aC1vZi10eXBlKDQpIHtcbiAgICAgICAgbGVmdDogNDJweDtcbiAgICAgICAgYW5pbWF0aW9uOiBsZHMtZWxsaXBzaXMzIDAuNnMgaW5maW5pdGU7XG4gICAgICB9XG4gICAgICBAa2V5ZnJhbWVzIGxkcy1lbGxpcHNpczEge1xuICAgICAgICAwJSB7XG4gICAgICAgICAgdHJhbnNmb3JtOiBzY2FsZSgwKTtcbiAgICAgICAgfVxuICAgICAgICAxMDAlIHtcbiAgICAgICAgICB0cmFuc2Zvcm06IHNjYWxlKDEpO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgICBAa2V5ZnJhbWVzIGxkcy1lbGxpcHNpczMge1xuICAgICAgICAwJSB7XG4gICAgICAgICAgdHJhbnNmb3JtOiBzY2FsZSgxKTtcbiAgICAgICAgfVxuICAgICAgICAxMDAlIHtcbiAgICAgICAgICB0cmFuc2Zvcm06IHNjYWxlKDApO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgICBAa2V5ZnJhbWVzIGxkcy1lbGxpcHNpczIge1xuICAgICAgICAwJSB7XG4gICAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoMCwgMCk7XG4gICAgICAgIH1cbiAgICAgICAgMTAwJSB7XG4gICAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoMThweCwgMCk7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICBgLFxufVxuXG5leHBvcnQgZGVmYXVsdCBzdHlsZXNcblxuZXhwb3J0IHsgc3R5bGVzIH1cbiJdfQ== */")
@@ -25028,15 +25028,30 @@
     secondary,
     size,
     text,
+    sanitize = true,
+    sanitizeOptions = {},
     whiteSpace,
     defaultListStyles
-  }) => jsxRuntime.jsx("div", {
-    css: theme => [styles$l.default(theme), secondary && styles$l.secondary(theme), dark && styles$l.dark(theme), size && styles$l.size(size), styles$l.whiteSpace(whiteSpace ? whiteSpace : 'pre-wrap'), removeMargins && styles$l.removeMargins, defaultListStyles && styles$l.defaultListStyles],
-    className: className || '',
-    dangerouslySetInnerHTML: {
-      __html: externalLinks ? text.replace(/href/g, "target='_blank' href") : text
-    }
-  });
+  }) => {
+    const allowedTags = sanitizeOptions?.allowedTags || [];
+    const allowdAttributes = sanitizeOptions?.allowedAttributes || [];
+    const forbiddenTags = sanitizeOptions?.forbiddenTags || [];
+    const forbiddenAttributes = sanitizeOptions?.forbiddenAttributes || [];
+    const sanitizeOpts = {
+      ALLOWED_TAGS: allowedTags,
+      ALLOWED_ATTR: allowdAttributes,
+      FORBID_TAGS: forbiddenTags,
+      FORBID_ATTR: forbiddenAttributes
+    };
+    const safeHtml = sanitize ? DOMPurify__default["default"].sanitize(text, sanitizeOpts) : text;
+    return jsxRuntime.jsx("div", {
+      css: theme => [styles$l.default(theme), secondary && styles$l.secondary(theme), dark && styles$l.dark(theme), size && styles$l.size(size), styles$l.whiteSpace(whiteSpace ? whiteSpace : 'pre-wrap'), removeMargins && styles$l.removeMargins, defaultListStyles && styles$l.defaultListStyles],
+      className: className || '',
+      dangerouslySetInnerHTML: {
+        __html: externalLinks ? safeHtml.replace(/href/g, "target='_blank' href") : safeHtml
+      }
+    });
+  };
 
   function _EMOTION_STRINGIFIED_CSS_ERROR__$_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
   const Wrapper$z = /*#__PURE__*/_styled__default["default"]("div", process.env.NODE_ENV === "production" ? {

package/esm/core/Html/index.js

@@ -1,5 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import { styles } from './styles';
+import DOMPurify from 'dompurify';
 import 'quill/dist/quill.snow.css';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 const Html = ({
@@ -10,13 +11,28 @@ const Html = ({
   secondary,
   size,
   text,
+  sanitize = true,
+  sanitizeOptions = {},
   whiteSpace,
   defaultListStyles
-}) => _jsx("div", {
-  css: theme => [styles.default(theme), secondary && styles.secondary(theme), dark && styles.dark(theme), size && styles.size(size), styles.whiteSpace(whiteSpace ? whiteSpace : 'pre-wrap'), removeMargins && styles.removeMargins, defaultListStyles && styles.defaultListStyles],
-  className: className || '',
-  dangerouslySetInnerHTML: {
-    __html: externalLinks ? text.replace(/href/g, "target='_blank' href") : text
-  }
-});
+}) => {
+  const allowedTags = sanitizeOptions?.allowedTags || [];
+  const allowdAttributes = sanitizeOptions?.allowedAttributes || [];
+  const forbiddenTags = sanitizeOptions?.forbiddenTags || [];
+  const forbiddenAttributes = sanitizeOptions?.forbiddenAttributes || [];
+  const sanitizeOpts = {
+    ALLOWED_TAGS: allowedTags,
+    ALLOWED_ATTR: allowdAttributes,
+    FORBID_TAGS: forbiddenTags,
+    FORBID_ATTR: forbiddenAttributes
+  };
+  const safeHtml = sanitize ? DOMPurify.sanitize(text, sanitizeOpts) : text;
+  return _jsx("div", {
+    css: theme => [styles.default(theme), secondary && styles.secondary(theme), dark && styles.dark(theme), size && styles.size(size), styles.whiteSpace(whiteSpace ? whiteSpace : 'pre-wrap'), removeMargins && styles.removeMargins, defaultListStyles && styles.defaultListStyles],
+    className: className || '',
+    dangerouslySetInnerHTML: {
+      __html: externalLinks ? safeHtml.replace(/href/g, "target='_blank' href") : safeHtml
+    }
+  });
+};
 export default Html;

package/lib/core/Html/index.d.ts

@@ -18,7 +18,15 @@ interface IProps {
     className?: string;
     /** Specifies that we want to use default list styles and not quills */
     defaultListStyles?: boolean;
+    /** Optionally sanitize before render. E.g. if you want to remove styles */
+    sanitize?: boolean;
+    sanitizeOptions?: {
+        allowedTags?: string[];
+        allowedAttributes?: string[];
+        forbiddenTags?: string[];
+        forbiddenAttributes?: string[];
+    };
 }
-declare const Html: ({ className, dark, externalLinks, removeMargins, secondary, size, text, whiteSpace, defaultListStyles, }: IProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const Html: ({ className, dark, externalLinks, removeMargins, secondary, size, text, sanitize, sanitizeOptions, whiteSpace, defaultListStyles, }: IProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Html;
 //# sourceMappingURL=index.d.ts.map

package/lib/core/Html/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Html/index.tsx"],"names":[],"mappings":"AAEA,OAAO,2BAA2B,CAAA;AAElC,UAAU,MAAM;IACd,4BAA4B;IAC5B,IAAI,CAAC,EAAE,GAAG,CAAA;IACV,2BAA2B;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mCAAmC;IACnC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,4DAA4D;IAC5D,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,sBAAsB;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B;AAED,QAAA,MAAM,IAAI,6GAUP,MAAM,qDAkBR,CAAA;AAED,eAAe,IAAI,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Html/index.tsx"],"names":[],"mappings":"AAGA,OAAO,2BAA2B,CAAA;AAElC,UAAU,MAAM;IACd,4BAA4B;IAC5B,IAAI,CAAC,EAAE,GAAG,CAAA;IACV,2BAA2B;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mCAAmC;IACnC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,4DAA4D;IAC5D,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,sBAAsB;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,EAAE;QAChB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;QACtB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAA;QAC5B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;QACxB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAA;KAC/B,CAAA;CACF;AAED,QAAA,MAAM,IAAI,wIAYP,MAAM,qDAgCR,CAAA;AAED,eAAe,IAAI,CAAA"}

package/lib/core/Html/index.js

@@ -1,5 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import { styles } from './styles';
+import DOMPurify from 'dompurify';
 import 'quill/dist/quill.snow.css';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 const Html = ({
@@ -10,13 +11,28 @@ const Html = ({
   secondary,
   size,
   text,
+  sanitize = true,
+  sanitizeOptions = {},
   whiteSpace,
   defaultListStyles
-}) => _jsx("div", {
-  css: theme => [styles.default(theme), secondary && styles.secondary(theme), dark && styles.dark(theme), size && styles.size(size), styles.whiteSpace(whiteSpace ? whiteSpace : 'pre-wrap'), removeMargins && styles.removeMargins, defaultListStyles && styles.defaultListStyles],
-  className: className || '',
-  dangerouslySetInnerHTML: {
-    __html: externalLinks ? text.replace(/href/g, "target='_blank' href") : text
-  }
-});
+}) => {
+  const allowedTags = sanitizeOptions?.allowedTags || [];
+  const allowdAttributes = sanitizeOptions?.allowedAttributes || [];
+  const forbiddenTags = sanitizeOptions?.forbiddenTags || [];
+  const forbiddenAttributes = sanitizeOptions?.forbiddenAttributes || [];
+  const sanitizeOpts = {
+    ALLOWED_TAGS: allowedTags,
+    ALLOWED_ATTR: allowdAttributes,
+    FORBID_TAGS: forbiddenTags,
+    FORBID_ATTR: forbiddenAttributes
+  };
+  const safeHtml = sanitize ? DOMPurify.sanitize(text, sanitizeOpts) : text;
+  return _jsx("div", {
+    css: theme => [styles.default(theme), secondary && styles.secondary(theme), dark && styles.dark(theme), size && styles.size(size), styles.whiteSpace(whiteSpace ? whiteSpace : 'pre-wrap'), removeMargins && styles.removeMargins, defaultListStyles && styles.defaultListStyles],
+    className: className || '',
+    dangerouslySetInnerHTML: {
+      __html: externalLinks ? safeHtml.replace(/href/g, "target='_blank' href") : safeHtml
+    }
+  });
+};
 export default Html;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbl-digital/snorre",
-  "version": "4.2.1",
+  "version": "4.2.3",
   "description": "Design library for BBL Digital",
   "license": "MIT",
   "main": "./lib/index.js",