@bbl-digital/snorre 4.3.18 → 4.3.20

package/esm/core/Html/Html.stories.js

@@ -16,6 +16,7 @@ const HtmlDefault = exports.HtmlDefault = {
   name: 'Html',
   args: {
     allowVideo: true,
+    disableFullscreenVideo: false,
     text: `<h1>WroomWroom</h1><h2>test</h2><h3>test</h3><h4>test</h4><p><br /></p><ol><li>test</li><li>test<ol><li>test<ol><li>test</li><li>test</li></ol></li></ol></li></ol><ul><li>test<ul><li>test<ul><li>test</li></ul></li></ul></li></ul><p><br /></p><p><img src=\"https://bbldpublicationsstgtest.blob.core.windows.net/bbldtest02/37e9fbd2-14d1-4c59-9f23-0c67d57942e9/27982f6f-542c-46cc-90c6-a365a38e6d40?sv=2024-11-04&amp;se=2040-03-21T12%3A07%3A44Z&amp;sr=b&amp;sp=r&amp;sig=1WCwtE53sk9adHcHrhVGZhuD8iU5lfKIAJzFToVBR90%3D\"></p><p>Nytt bilde</p><p><img src=\"https://bbldpublicationsstgtest.blob.core.windows.net/bbldtest02/37e9fbd2-14d1-4c59-9f23-0c67d57942e9/6768e119-627d-4981-9d70-77bea58d2794?sv=2024-11-04&amp;se=2040-03-09T08%3A07%3A03Z&amp;sr=b&amp;sp=r&amp;sig=VJSLebAwU3%2FA5aFJ3xRL6N18611SO%2BNk5YXKTOaoKkc%3D\"></p><p>tekst under bildet</p><p><br /></p><p><div>\uFEFF<span contenteditable=\"false\"><div class=\"video-container\"><br />          <iframe src=\"https://www.youtube.com/embed/hQlXebNPQAU?showinfo=0\" frameborder=\"0\" allowfullscreen=\"\"></iframe><br />        </div></span>\uFEFF</div></p>",
 st<ol><li>test</li><li>test</li><li>test</li></ol></li></ol></li></ol><br /><ul><li>test</li><li>test<ul><li>test</li></ul></li></ul>`
   }

package/esm/core/Html/index.js

@@ -7,7 +7,6 @@ exports.default = void 0;
 var _styles = require("./styles");
 var _dompurify = _interopRequireDefault(require("dompurify"));
 require("quill/dist/quill.snow.css");
-var _react = require("react");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** @jsxImportSource @emotion/react */
@@ -23,12 +22,12 @@ const Html = ({
   sanitize = true,
   sanitizeOptions,
   whiteSpace,
-  allowVideo = false
+  allowVideo = false,
+  disableFullscreenVideo = false
 }) => {
-  const containerRef = (0, _react.useRef)(null);
   let _sanitizeOptions = allowVideo ? {
     ADD_TAGS: ['iframe', 'video'],
-    ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'],
+    ADD_ATTR: disableFullscreenVideo ? ['frameborder', 'scrolling'] : ['allow', 'allowfullscreen', 'frameborder', 'scrolling'],
     ...sanitizeOptions
   } : {
     ...sanitizeOptions
@@ -36,21 +35,9 @@ const Html = ({
   let safeHtml = sanitize ? _dompurify.default.sanitize(text, _sanitizeOptions) : text;
   safeHtml = safeHtml.replace(/ /g, ' ');
   const classes = `snorre-html ${className || ''}`;
-  (0, _react.useEffect)(() => {
-    if (!allowVideo) return;
-    if (containerRef.current) {
-      console.log('containerRef.current', containerRef.current);
-      const iframes = containerRef.current.querySelectorAll('iframe');
-      iframes.forEach(iframe => {
-        iframe.setAttribute('allow', 'autoplay; fullscreen; picture-in-picture');
-        iframe.setAttribute('allowfullscreen', '');
-      });
-    }
-  }, [text, allowVideo]);
   return (0, _jsxRuntime.jsx)("div", {
     className: classes,
     css: theme => [_styles.styles.default(theme), secondary && _styles.styles.secondary(theme), dark && _styles.styles.dark(theme), size && _styles.styles.size(size), _styles.styles.whiteSpace(whiteSpace ? whiteSpace : 'pre-wrap'), removeMargins && _styles.styles.removeMargins],
-    ref: containerRef,
     dangerouslySetInnerHTML: {
       __html: externalLinks ? safeHtml.replace(/href/g, "target='_blank' href") : safeHtml
     }

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

@@ -1 +1 @@
-{"version":3,"file":"Html.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Html/Html.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,IAAI,MAAM,GAAG,CAAA;AAEpB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAG3B,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAA"}
+{"version":3,"file":"Html.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Html/Html.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,IAAI,MAAM,GAAG,CAAA;AAEpB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAG3B,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,WAAW,EAAE,KASzB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAA"}

package/lib/core/Html/Html.stories.js

@@ -16,6 +16,7 @@ const HtmlDefault = exports.HtmlDefault = {
   name: 'Html',
   args: {
     allowVideo: true,
+    disableFullscreenVideo: false,
     text: `<h1>WroomWroom</h1><h2>test</h2><h3>test</h3><h4>test</h4><p><br /></p><ol><li>test</li><li>test<ol><li>test<ol><li>test</li><li>test</li></ol></li></ol></li></ol><ul><li>test<ul><li>test<ul><li>test</li></ul></li></ul></li></ul><p><br /></p><p><img src=\"https://bbldpublicationsstgtest.blob.core.windows.net/bbldtest02/37e9fbd2-14d1-4c59-9f23-0c67d57942e9/27982f6f-542c-46cc-90c6-a365a38e6d40?sv=2024-11-04&amp;se=2040-03-21T12%3A07%3A44Z&amp;sr=b&amp;sp=r&amp;sig=1WCwtE53sk9adHcHrhVGZhuD8iU5lfKIAJzFToVBR90%3D\"></p><p>Nytt bilde</p><p><img src=\"https://bbldpublicationsstgtest.blob.core.windows.net/bbldtest02/37e9fbd2-14d1-4c59-9f23-0c67d57942e9/6768e119-627d-4981-9d70-77bea58d2794?sv=2024-11-04&amp;se=2040-03-09T08%3A07%3A03Z&amp;sr=b&amp;sp=r&amp;sig=VJSLebAwU3%2FA5aFJ3xRL6N18611SO%2BNk5YXKTOaoKkc%3D\"></p><p>tekst under bildet</p><p><br /></p><p><div>\uFEFF<span contenteditable=\"false\"><div class=\"video-container\"><br />          <iframe src=\"https://www.youtube.com/embed/hQlXebNPQAU?showinfo=0\" frameborder=\"0\" allowfullscreen=\"\"></iframe><br />        </div></span>\uFEFF</div></p>",
 st<ol><li>test</li><li>test</li><li>test</li></ol></li></ol></li></ol><br /><ul><li>test</li><li>test<ul><li>test</li></ul></li></ul>`
   }

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

@@ -25,7 +25,9 @@ interface IProps {
     sanitizeOptions?: Config;
     /** Allow video tags */
     allowVideo?: boolean;
+    /** Disable fullscreen video */
+    disableFullscreenVideo?: boolean;
 }
-declare const Html: ({ className, dark, externalLinks, removeMargins, secondary, size, text, sanitize, sanitizeOptions, whiteSpace, allowVideo, }: IProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const Html: ({ className, dark, externalLinks, removeMargins, secondary, size, text, sanitize, sanitizeOptions, whiteSpace, allowVideo, disableFullscreenVideo, }: 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":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,2BAA2B,CAAA;AAGlC,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;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gCAAgC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,uBAAuB;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,QAAA,MAAM,IAAI,GAAI,8HAYX,MAAM,qDA+CR,CAAA;AAED,eAAe,IAAI,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Html/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AACvC,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;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gCAAgC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,uBAAuB;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB,+BAA+B;IAC/B,sBAAsB,CAAC,EAAE,OAAO,CAAA;CACjC;AAED,QAAA,MAAM,IAAI,GAAI,sJAaX,MAAM,qDAkCR,CAAA;AAED,eAAe,IAAI,CAAA"}

package/lib/core/Html/index.js

@@ -7,7 +7,6 @@ exports.default = void 0;
 var _styles = require("./styles");
 var _dompurify = _interopRequireDefault(require("dompurify"));
 require("quill/dist/quill.snow.css");
-var _react = require("react");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** @jsxImportSource @emotion/react */
@@ -23,12 +22,12 @@ const Html = ({
   sanitize = true,
   sanitizeOptions,
   whiteSpace,
-  allowVideo = false
+  allowVideo = false,
+  disableFullscreenVideo = false
 }) => {
-  const containerRef = (0, _react.useRef)(null);
   let _sanitizeOptions = allowVideo ? {
     ADD_TAGS: ['iframe', 'video'],
-    ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'],
+    ADD_ATTR: disableFullscreenVideo ? ['frameborder', 'scrolling'] : ['allow', 'allowfullscreen', 'frameborder', 'scrolling'],
     ...sanitizeOptions
   } : {
     ...sanitizeOptions
@@ -36,21 +35,9 @@ const Html = ({
   let safeHtml = sanitize ? _dompurify.default.sanitize(text, _sanitizeOptions) : text;
   safeHtml = safeHtml.replace(/ /g, ' ');
   const classes = `snorre-html ${className || ''}`;
-  (0, _react.useEffect)(() => {
-    if (!allowVideo) return;
-    if (containerRef.current) {
-      console.log('containerRef.current', containerRef.current);
-      const iframes = containerRef.current.querySelectorAll('iframe');
-      iframes.forEach(iframe => {
-        iframe.setAttribute('allow', 'autoplay; fullscreen; picture-in-picture');
-        iframe.setAttribute('allowfullscreen', '');
-      });
-    }
-  }, [text, allowVideo]);
   return (0, _jsxRuntime.jsx)("div", {
     className: classes,
     css: theme => [_styles.styles.default(theme), secondary && _styles.styles.secondary(theme), dark && _styles.styles.dark(theme), size && _styles.styles.size(size), _styles.styles.whiteSpace(whiteSpace ? whiteSpace : 'pre-wrap'), removeMargins && _styles.styles.removeMargins],
-    ref: containerRef,
     dangerouslySetInnerHTML: {
       __html: externalLinks ? safeHtml.replace(/href/g, "target='_blank' href") : safeHtml
     }

package/package.json

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