@blaze-cms/react-page-builder 0.126.0-shorthand.2 → 0.126.0

package/lib-es/components/Video/providers/YouTube/YoutubeEmbeded.js.map

@@ -1 +1 @@
-{"version":3,"file":"YoutubeEmbeded.js","names":["React","useState","useEffect","PropTypes","useInView","IN_VIEW_CONFIG","getPosterUrl","YT_HQ_FORMAT","YT_IMAGE_URL","YoutubeEmbeded","autoplay","videoId","playlistCoverId","videoTitle","poster","videoParams","announce","noCookie","webp","playlist","onIframeAdded","muted","adNetwork","iframeClass","priority","placeholderOnly","imageData","isIntersecting","outerRef","preconnected","setPreconnected","renderIframe","setRenderIframe","imageSize","displayImage","setImageDetails","encodedId","encodeURIComponent","paramsImp","ytUrl","posterUrl","mutedValue","iframeSrc","parsedWrapperClassname","img","Image","onload","newImageSize","width","src","warmConnections","addIframe","backgroundImage","propTypes","bool","func","string","object","defaultProps"],"sources":["../../../../../src/components/Video/providers/YouTube/YoutubeEmbeded.js"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { useInView } from '@blaze-react/utils/lib/customHooks';\nimport { IN_VIEW_CONFIG } from '../../../../constants';\nimport { getPosterUrl, YT_HQ_FORMAT, YT_IMAGE_URL } from './helpers';\n\nconst YoutubeEmbeded = ({\n  autoplay,\n  videoId,\n  playlistCoverId,\n  videoTitle,\n  poster,\n  videoParams,\n  announce,\n  noCookie,\n  webp,\n  playlist,\n  onIframeAdded,\n  muted,\n  adNetwork,\n  iframeClass,\n  priority,\n  placeholderOnly,\n  imageData\n}) => {\n  const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);\n  const [preconnected, setPreconnected] = useState(false);\n  const [renderIframe, setRenderIframe] = useState(!!autoplay);\n  const [{ imageSize, displayImage }, setImageDetails] = useState({\n    imageSize: poster,\n    displayImage: priority\n  });\n\n  const encodedId = encodeURIComponent(videoId);\n  const paramsImp = videoParams ? `&${videoParams}` : '';\n  const ytUrl = noCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com';\n  const posterUrl = getPosterUrl({\n    imageData,\n    playlistCoverId,\n    playlist,\n    encodedId,\n    imageSize,\n    webp\n  });\n  const mutedValue = muted ? '&mute=1' : '';\n  const iframeSrc = !playlist\n    ? `${ytUrl}/embed/${encodedId}?autoplay=1${mutedValue}${paramsImp}`\n    : `${ytUrl}/embed/videoseries?autoplay=1${mutedValue}&list=${encodedId}${paramsImp}`;\n  const parsedWrapperClassname = `yt-facade ${renderIframe ? 'yt-activated' : ''}`;\n\n  useEffect(\n    () => {\n      if ((!priority && !isIntersecting) || imageSize === YT_HQ_FORMAT) return;\n\n      const img = new Image();\n      // eslint-disable-next-line func-names\n      img.onload = function() {\n        let newImageSize = imageSize;\n        if (this && this.width === 120) newImageSize = YT_HQ_FORMAT;\n        setImageDetails({ imageSize: newImageSize, displayImage: true });\n      };\n\n      img.src = posterUrl;\n    },\n    [imageSize, isIntersecting, posterUrl, priority]\n  );\n\n  const warmConnections = () => {\n    if (preconnected) return;\n    setPreconnected(true);\n  };\n\n  const addIframe = () => {\n    if (renderIframe || placeholderOnly) return;\n    onIframeAdded();\n    setRenderIframe(true);\n  };\n\n  return (\n    <>\n      {preconnected && (\n        <>\n          <link rel=\"preconnect\" href={YT_IMAGE_URL} />\n          <link rel=\"preconnect\" href={ytUrl} />\n          <link rel=\"preconnect\" href=\"https://www.google.com\" />\n          {adNetwork && (\n            <>\n              <link rel=\"preconnect\" href=\"https://static.doubleclick.net\" />\n              <link rel=\"preconnect\" href=\"https://googleads.g.doubleclick.net\" />\n            </>\n          )}\n        </>\n      )}\n      <div\n        ref={outerRef}\n        role=\"button\"\n        onPointerOver={warmConnections}\n        onClick={addIframe}\n        className={parsedWrapperClassname}\n        data-title={videoTitle}\n        style={{\n          backgroundImage: `url(${displayImage ? posterUrl : ''})`\n        }}>\n        <div\n          type=\"button\"\n          className=\"yt-facade-button-wrapper\"\n          aria-label={`${announce} ${videoTitle}`}>\n          <div className=\"yt-facade-button\" />\n        </div>\n        {renderIframe && (\n          <iframe\n            className={iframeClass}\n            title={videoTitle}\n            allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n            allowFullScreen\n            src={iframeSrc}\n          />\n        )}\n      </div>\n    </>\n  );\n};\n\nYoutubeEmbeded.propTypes = {\n  priority: PropTypes.bool,\n  onIframeAdded: PropTypes.func,\n  adNetwork: PropTypes.bool,\n  autoplay: PropTypes.bool,\n  playlist: PropTypes.bool,\n  muted: PropTypes.bool,\n  webp: PropTypes.bool,\n  noCookie: PropTypes.bool,\n  videoId: PropTypes.string,\n  iframeClass: PropTypes.string,\n  poster: PropTypes.string,\n  announce: PropTypes.string,\n  playlistCoverId: PropTypes.string,\n  videoParams: PropTypes.string,\n  videoTitle: PropTypes.string,\n  placeholderOnly: PropTypes.bool,\n  imageData: PropTypes.object\n};\n\nYoutubeEmbeded.defaultProps = {\n  priority: true,\n  onIframeAdded: () => {},\n  adNetwork: false,\n  autoplay: false,\n  playlist: false,\n  muted: false,\n  webp: false,\n  noCookie: false,\n  iframeClass: '',\n  poster: 'sddefault',\n  announce: 'Watch',\n  videoId: '',\n  playlistCoverId: '',\n  videoParams: '',\n  videoTitle: '',\n  placeholderOnly: false,\n  imageData: {}\n};\n\nexport default YoutubeEmbeded;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAClD,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,SAASC,cAAc,QAAQ,uBAAuB;AACtD,SAASC,YAAY,EAAEC,YAAY,EAAEC,YAAY,QAAQ,WAAW;AAEpE,MAAMC,cAAc,GAAG,CAAC;EACtBC,QAAQ;EACRC,OAAO;EACPC,eAAe;EACfC,UAAU;EACVC,MAAM;EACNC,WAAW;EACXC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,QAAQ;EACRC,aAAa;EACbC,KAAK;EACLC,SAAS;EACTC,WAAW;EACXC,QAAQ;EACRC,eAAe;EACfC;AACF,CAAC,KAAK;EACJ,MAAM,CAACC,cAAc,EAAEC,QAAQ,CAAC,GAAGxB,SAAS,CAACC,cAAc,CAAC;EAC5D,MAAM,CAACwB,YAAY,EAAEC,eAAe,CAAC,GAAG7B,QAAQ,CAAC,KAAK,CAAC;EACvD,MAAM,CAAC8B,YAAY,EAAEC,eAAe,CAAC,GAAG/B,QAAQ,CAAC,CAAC,CAACS,QAAQ,CAAC;EAC5D,MAAM,CAAC;IAAEuB,SAAS;IAAEC;EAAa,CAAC,EAAEC,eAAe,CAAC,GAAGlC,QAAQ,CAAC;IAC9DgC,SAAS,EAAEnB,MAAM;IACjBoB,YAAY,EAAEV;EAChB,CAAC,CAAC;EAEF,MAAMY,SAAS,GAAGC,kBAAkB,CAAC1B,OAAO,CAAC;EAC7C,MAAM2B,SAAS,GAAGvB,WAAW,GAAI,IAAGA,WAAY,EAAC,GAAG,EAAE;EACtD,MAAMwB,KAAK,GAAGtB,QAAQ,GAAG,kCAAkC,GAAG,yBAAyB;EACvF,MAAMuB,SAAS,GAAGlC,YAAY,CAAC;IAC7BoB,SAAS;IACTd,eAAe;IACfO,QAAQ;IACRiB,SAAS;IACTH,SAAS;IACTf;EACF,CAAC,CAAC;EACF,MAAMuB,UAAU,GAAGpB,KAAK,GAAG,SAAS,GAAG,EAAE;EACzC,MAAMqB,SAAS,GAAG,CAACvB,QAAQ,GACtB,GAAEoB,KAAM,UAASH,SAAU,cAAaK,UAAW,GAAEH,SAAU,EAAC,GAChE,GAAEC,KAAM,gCAA+BE,UAAW,SAAQL,SAAU,GAAEE,SAAU,EAAC;EACtF,MAAMK,sBAAsB,GAAI,aAAYZ,YAAY,GAAG,cAAc,GAAG,EAAG,EAAC;EAEhF7B,SAAS,CACP,MAAM;IACJ,IAAK,CAACsB,QAAQ,IAAI,CAACG,cAAc,IAAKM,SAAS,KAAK1B,YAAY,EAAE;IAElE,MAAMqC,GAAG,GAAG,IAAIC,KAAK,EAAE;IACvB;IACAD,GAAG,CAACE,MAAM,GAAG,YAAW;MACtB,IAAIC,YAAY,GAAGd,SAAS;MAC5B,IAAI,IAAI,IAAI,IAAI,CAACe,KAAK,KAAK,GAAG,EAAED,YAAY,GAAGxC,YAAY;MAC3D4B,eAAe,CAAC;QAAEF,SAAS,EAAEc,YAAY;QAAEb,YAAY,EAAE;MAAK,CAAC,CAAC;IAClE,CAAC;IAEDU,GAAG,CAACK,GAAG,GAAGT,SAAS;EACrB,CAAC,EACD,CAACP,SAAS,EAAEN,cAAc,EAAEa,SAAS,EAAEhB,QAAQ,CAAC,CACjD;EAED,MAAM0B,eAAe,GAAG,MAAM;IAC5B,IAAIrB,YAAY,EAAE;IAClBC,eAAe,CAAC,IAAI,CAAC;EACvB,CAAC;EAED,MAAMqB,SAAS,GAAG,MAAM;IACtB,IAAIpB,YAAY,IAAIN,eAAe,EAAE;IACrCL,aAAa,EAAE;IACfY,eAAe,CAAC,IAAI,CAAC;EACvB,CAAC;EAED,oBACE,0CACGH,YAAY,iBACX,uDACE;IAAM,GAAG,EAAC,YAAY;IAAC,IAAI,EAAErB;EAAa,EAAG,eAC7C;IAAM,GAAG,EAAC,YAAY;IAAC,IAAI,EAAE+B;EAAM,EAAG,eACtC;IAAM,GAAG,EAAC,YAAY;IAAC,IAAI,EAAC;EAAwB,EAAG,EACtDjB,SAAS,iBACR,uDACE;IAAM,GAAG,EAAC,YAAY;IAAC,IAAI,EAAC;EAAgC,EAAG,eAC/D;IAAM,GAAG,EAAC,YAAY;IAAC,IAAI,EAAC;EAAqC,EAAG,CAEvE,CAEJ,eACD;IACE,GAAG,EAAEM,QAAS;IACd,IAAI,EAAC,QAAQ;IACb,aAAa,EAAEsB,eAAgB;IAC/B,OAAO,EAAEC,SAAU;IACnB,SAAS,EAAER,sBAAuB;IAClC,cAAY9B,UAAW;IACvB,KAAK,EAAE;MACLuC,eAAe,EAAG,OAAMlB,YAAY,GAAGM,SAAS,GAAG,EAAG;IACxD;EAAE,gBACF;IACE,IAAI,EAAC,QAAQ;IACb,SAAS,EAAC,0BAA0B;IACpC,cAAa,GAAExB,QAAS,IAAGH,UAAW;EAAE,gBACxC;IAAK,SAAS,EAAC;EAAkB,EAAG,CAChC,EACLkB,YAAY,iBACX;IACE,SAAS,EAAER,WAAY;IACvB,KAAK,EAAEV,UAAW;IAClB,KAAK,EAAC,yEAAyE;IAC/E,eAAe;IACf,GAAG,EAAE6B;EAAU,EAElB,CACG,CACL;AAEP,CAAC;AAEDjC,cAAc,CAAC4C,SAAS,GAAG;EACzB7B,QAAQ,EAAErB,SAAS,CAACmD,IAAI;EACxBlC,aAAa,EAAEjB,SAAS,CAACoD,IAAI;EAC7BjC,SAAS,EAAEnB,SAAS,CAACmD,IAAI;EACzB5C,QAAQ,EAAEP,SAAS,CAACmD,IAAI;EACxBnC,QAAQ,EAAEhB,SAAS,CAACmD,IAAI;EACxBjC,KAAK,EAAElB,SAAS,CAACmD,IAAI;EACrBpC,IAAI,EAAEf,SAAS,CAACmD,IAAI;EACpBrC,QAAQ,EAAEd,SAAS,CAACmD,IAAI;EACxB3C,OAAO,EAAER,SAAS,CAACqD,MAAM;EACzBjC,WAAW,EAAEpB,SAAS,CAACqD,MAAM;EAC7B1C,MAAM,EAAEX,SAAS,CAACqD,MAAM;EACxBxC,QAAQ,EAAEb,SAAS,CAACqD,MAAM;EAC1B5C,eAAe,EAAET,SAAS,CAACqD,MAAM;EACjCzC,WAAW,EAAEZ,SAAS,CAACqD,MAAM;EAC7B3C,UAAU,EAAEV,SAAS,CAACqD,MAAM;EAC5B/B,eAAe,EAAEtB,SAAS,CAACmD,IAAI;EAC/B5B,SAAS,EAAEvB,SAAS,CAACsD;AACvB,CAAC;AAEDhD,cAAc,CAACiD,YAAY,GAAG;EAC5BlC,QAAQ,EAAE,IAAI;EACdJ,aAAa,EAAE,MAAM,CAAC,CAAC;EACvBE,SAAS,EAAE,KAAK;EAChBZ,QAAQ,EAAE,KAAK;EACfS,QAAQ,EAAE,KAAK;EACfE,KAAK,EAAE,KAAK;EACZH,IAAI,EAAE,KAAK;EACXD,QAAQ,EAAE,KAAK;EACfM,WAAW,EAAE,EAAE;EACfT,MAAM,EAAE,WAAW;EACnBE,QAAQ,EAAE,OAAO;EACjBL,OAAO,EAAE,EAAE;EACXC,eAAe,EAAE,EAAE;EACnBG,WAAW,EAAE,EAAE;EACfF,UAAU,EAAE,EAAE;EACdY,eAAe,EAAE,KAAK;EACtBC,SAAS,EAAE,CAAC;AACd,CAAC;AAED,eAAejB,cAAc"}
+{"version":3,"file":"YoutubeEmbeded.js","names":["React","useState","useEffect","PropTypes","useInView","IN_VIEW_CONFIG","getPosterUrl","YT_HQ_FORMAT","YT_IMAGE_URL","YoutubeEmbeded","autoplay","videoId","playlistCoverId","videoTitle","poster","videoParams","announce","noCookie","webp","playlist","onIframeAdded","muted","adNetwork","iframeClass","priority","placeholderOnly","imageData","isIntersecting","outerRef","preconnected","setPreconnected","renderIframe","setRenderIframe","imageSize","displayImage","setImageDetails","encodedId","encodeURIComponent","paramsImp","ytUrl","posterUrl","mutedValue","iframeSrc","parsedWrapperClassname","isMounted","img","Image","onload","newImageSize","width","src","warmConnections","addIframe","backgroundImage","propTypes","bool","func","string","object","defaultProps"],"sources":["../../../../../src/components/Video/providers/YouTube/YoutubeEmbeded.js"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { useInView } from '@blaze-react/utils/lib/customHooks';\nimport { IN_VIEW_CONFIG } from '../../../../constants';\nimport { getPosterUrl, YT_HQ_FORMAT, YT_IMAGE_URL } from './helpers';\n\nconst YoutubeEmbeded = ({\n  autoplay,\n  videoId,\n  playlistCoverId,\n  videoTitle,\n  poster,\n  videoParams,\n  announce,\n  noCookie,\n  webp,\n  playlist,\n  onIframeAdded,\n  muted,\n  adNetwork,\n  iframeClass,\n  priority,\n  placeholderOnly,\n  imageData\n}) => {\n  const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);\n  const [preconnected, setPreconnected] = useState(false);\n  const [renderIframe, setRenderIframe] = useState(!!autoplay);\n  const [{ imageSize, displayImage }, setImageDetails] = useState({\n    imageSize: poster,\n    displayImage: priority\n  });\n\n  const encodedId = encodeURIComponent(videoId);\n  const paramsImp = videoParams ? `&${videoParams}` : '';\n  const ytUrl = noCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com';\n  const posterUrl = getPosterUrl({\n    imageData,\n    playlistCoverId,\n    playlist,\n    encodedId,\n    imageSize,\n    webp\n  });\n  const mutedValue = muted ? '&mute=1' : '';\n  const iframeSrc = !playlist\n    ? `${ytUrl}/embed/${encodedId}?autoplay=1${mutedValue}${paramsImp}`\n    : `${ytUrl}/embed/videoseries?autoplay=1${mutedValue}&list=${encodedId}${paramsImp}`;\n  const parsedWrapperClassname = `yt-facade ${renderIframe ? 'yt-activated' : ''}`;\n\n  useEffect(\n    () => {\n      let isMounted = true;\n      if ((!priority && !isIntersecting) || imageSize === YT_HQ_FORMAT) return;\n\n      const img = new Image();\n      // eslint-disable-next-line func-names\n      img.onload = function() {\n        let newImageSize = imageSize;\n        if (this && this.width === 120) newImageSize = YT_HQ_FORMAT;\n        if (isMounted) setImageDetails({ imageSize: newImageSize, displayImage: true });\n      };\n\n      img.src = posterUrl;\n      return () => {\n        isMounted = false;\n      };\n    },\n    [imageSize, isIntersecting, posterUrl, priority]\n  );\n\n  const warmConnections = () => {\n    if (preconnected) return;\n    setPreconnected(true);\n  };\n\n  const addIframe = () => {\n    if (renderIframe || placeholderOnly) return;\n    onIframeAdded();\n    setRenderIframe(true);\n  };\n\n  return (\n    <>\n      {preconnected && (\n        <>\n          <link rel=\"preconnect\" href={YT_IMAGE_URL} />\n          <link rel=\"preconnect\" href={ytUrl} />\n          <link rel=\"preconnect\" href=\"https://www.google.com\" />\n          {adNetwork && (\n            <>\n              <link rel=\"preconnect\" href=\"https://static.doubleclick.net\" />\n              <link rel=\"preconnect\" href=\"https://googleads.g.doubleclick.net\" />\n            </>\n          )}\n        </>\n      )}\n      <div\n        ref={outerRef}\n        role=\"button\"\n        onPointerOver={warmConnections}\n        onClick={addIframe}\n        className={parsedWrapperClassname}\n        data-title={videoTitle}\n        style={{\n          backgroundImage: `url(${displayImage ? posterUrl : ''})`\n        }}>\n        <div\n          type=\"button\"\n          className=\"yt-facade-button-wrapper\"\n          aria-label={`${announce} ${videoTitle}`}>\n          <div className=\"yt-facade-button\" />\n        </div>\n        {renderIframe && (\n          <iframe\n            className={iframeClass}\n            title={videoTitle}\n            allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n            allowFullScreen\n            src={iframeSrc}\n          />\n        )}\n      </div>\n    </>\n  );\n};\n\nYoutubeEmbeded.propTypes = {\n  priority: PropTypes.bool,\n  onIframeAdded: PropTypes.func,\n  adNetwork: PropTypes.bool,\n  autoplay: PropTypes.bool,\n  playlist: PropTypes.bool,\n  muted: PropTypes.bool,\n  webp: PropTypes.bool,\n  noCookie: PropTypes.bool,\n  videoId: PropTypes.string,\n  iframeClass: PropTypes.string,\n  poster: PropTypes.string,\n  announce: PropTypes.string,\n  playlistCoverId: PropTypes.string,\n  videoParams: PropTypes.string,\n  videoTitle: PropTypes.string,\n  placeholderOnly: PropTypes.bool,\n  imageData: PropTypes.object\n};\n\nYoutubeEmbeded.defaultProps = {\n  priority: true,\n  onIframeAdded: () => {},\n  adNetwork: false,\n  autoplay: false,\n  playlist: false,\n  muted: false,\n  webp: false,\n  noCookie: false,\n  iframeClass: '',\n  poster: 'sddefault',\n  announce: 'Watch',\n  videoId: '',\n  playlistCoverId: '',\n  videoParams: '',\n  videoTitle: '',\n  placeholderOnly: false,\n  imageData: {}\n};\n\nexport default YoutubeEmbeded;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.126.0-shorthand.2",
+  "version": "0.126.0",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -45,7 +45,7 @@
     "@blaze-react/utils": "0.5.15",
     "core-js": "^3.2.1",
     "entities": "^2.0.0",
-    "html-react-parser": "^3.0.4",
+    "html-react-parser": "^0.10.0",
     "lodash.at": "^4.6.0",
     "lodash.camelcase": "^4.3.0",
     "lodash.clonedeep": "^4.5.0",
@@ -87,5 +87,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "429134189724881c61fa0651826715d56ec824e1"
+  "gitHead": "3426eb3c15ca8bf9c601ebfccff00ad695b9a83a"
 }

package/src/components/Banner/BannerRender.js

@@ -32,7 +32,7 @@ const BannerRender = ({
   asPath,
   action,
   actionKey,
-  renderCounter,
+  cardBannerIndex,
   userPropsData,
   ...otherProps
 }) => {
@@ -79,7 +79,7 @@ const BannerRender = ({
   const shouldShowBanner =
     parsedAdunit && parsedSizes && !!parsedSizes.length && isContextualTargetingReady;
 
-  const customTargetings = setCustomTargetings(targetings, renderCounter);
+  const customTargetings = setCustomTargetings(targetings, cardBannerIndex);
 
   const targetingArguments = { ...parsedTargetings, ...customTargetings, ...userPropsData };
 
@@ -107,7 +107,7 @@ BannerRender.propTypes = {
   entity: PropTypes.string,
   targetings: PropTypes.string,
   sizes: PropTypes.string,
-  renderCounter: PropTypes.number,
+  cardBannerIndex: PropTypes.number,
   userPropsData: PropTypes.object
 };
 
@@ -119,7 +119,7 @@ BannerRender.defaultProps = {
   entity: '',
   targetings: '',
   sizes: '',
-  renderCounter: null,
+  cardBannerIndex: null,
   userPropsData: {}
 };
 

package/src/components/Banner/helpers.js

@@ -20,11 +20,11 @@ const buildTargetingValue = valueTargeting =>
     ? valueTargeting.replace(/\;|\[|\]/gm, char => (char === ';' ? ',' : '')).split(',')
     : valueTargeting;
 
-const setCustomTargetings = (targetings, renderCounter) => {
+const setCustomTargetings = (targetings, cardBannerIndex) => {
   let bannerTargetings = {};
 
-  const updatedTargetings = renderCounter
-    ? addPosnToTargetings(targetings, renderCounter)
+  const updatedTargetings = cardBannerIndex
+    ? addPosnToTargetings(targetings, cardBannerIndex)
     : targetings;
 
   const isValidTargeting = updatedTargetings && typeof updatedTargetings === 'string';

package/src/components/Card/CardContainer.js

@@ -41,7 +41,7 @@ const CardContainer = ({
   const dynamicWrapperSizes = enableCarousel
     ? ''
     : getDynamicGridClasses('grid', itemsPerRow, designConfig);
-  let renderCounter = 0;
+  let cardBannerIndex = 0;
   const CardWrapper = enableCarousel ? CarouselWrapper : Wrapper;
 
   return (
@@ -55,7 +55,7 @@ const CardContainer = ({
       {entities.map(({ baseAdunit, id, ...entityProps }, index) => {
         const extraProps = parsePropsToDisplay(entityProps, propsToDisplay);
         const dynamicKey = [itemId, index].join('-');
-        if (baseAdunit) renderCounter += 1;
+        if (baseAdunit) cardBannerIndex += 1;
 
         const priority = priorityLimit > 0 && index + 1 <= priorityLimit;
 
@@ -66,7 +66,7 @@ const CardContainer = ({
             baseAdunit={baseAdunit}
             {...entityProps}
             modifier={modifier}
-            renderCounter={renderCounter}
+            cardBannerIndex={cardBannerIndex}
           />
         ) : (
           <Card

package/src/components/Code/Code.js

@@ -7,10 +7,10 @@ import { getClassModifiers } from '../../utils';
 import { CODE } from '../../constants';
 import { wrapScriptTags } from './helpers';
 
-const Code = memo(({ code: embedCode, parserOptions, ...otherProps }) => {
+const Code = memo(({ code: embedCode, ...otherProps }) => {
   if (!embedCode) return null;
 
-  const parsedCode = parseHTML(embedCode, parserOptions);
+  const parsedCode = parseHTML(embedCode);
   const wrappedCode = wrapScriptTags(parsedCode);
   const modifiers = getClassModifiers(CODE, { ...otherProps });
 
@@ -19,14 +19,12 @@ const Code = memo(({ code: embedCode, parserOptions, ...otherProps }) => {
 
 Code.propTypes = {
   code: PropTypes.string,
-  modifier: PropTypes.string,
-  parserOptions: PropTypes.object
+  modifier: PropTypes.string
 };
 
 Code.defaultProps = {
   code: '',
-  modifier: '',
-  parserOptions: {}
+  modifier: ''
 };
 
 export default withTitle(Code);

package/src/components/Code/helpers/wrap-script-tags.js

@@ -17,13 +17,9 @@ function getWrappedScriptTag(child) {
 function wrapScriptTags(parsedCode) {
   if (Array.isArray(parsedCode)) {
     parsedCode.forEach((child, index) => {
-      try {
-        // modify children array as we just want to wrap single components
-        // eslint-disable-next-line no-param-reassign
-        parsedCode[index] = getWrappedScriptTag(child);
-      } catch {
-        // catch read-only element errors
-      }
+      // modify children array as we just want to wrap single components
+      // eslint-disable-next-line no-param-reassign
+      parsedCode[index] = getWrappedScriptTag(child);
     });
 
     return parsedCode;

package/src/components/ContentGroup/ContentGroup.js

@@ -1,14 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ContentGroupTabs from './ContentGroupTabs';
+import { getSectionsData } from './helpers';
 
-const ContentGroup = ({ contentType, ...props }) => {
-  if (contentType === 'tab' || contentType === 'sidepanel')
-    return <ContentGroupTabs contentType={contentType} {...props} />;
-  return '';
+const ContentGroup = ({ contentType, children, ...props }) => {
+  const groupSections = children?.props?.children[1];
+  if (!groupSections || !groupSections.length) return '';
+  if (contentType !== 'tab' && contentType !== 'sidepanel') return '';
+  const sectionsData = getSectionsData(groupSections);
+
+  return (
+    <ContentGroupTabs
+      contentType={contentType}
+      groupSections={groupSections}
+      sectionsData={sectionsData}
+      {...props}
+    />
+  );
 };
 
 ContentGroup.propTypes = {
+  children: PropTypes.object.isRequired,
   contentType: PropTypes.string.isRequired
 };
 

package/src/components/ContentGroup/ContentGroupTabs.js

@@ -1,28 +1,37 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { useRouter } from 'next/router';
+import { getActiveTab } from './helpers';
+import { TAB, TABS, SIDEPANEL, CONTENT_GROUP, PANEL } from './constants';
 
-const ContentGroupTabs = ({ name, contentType, modifier, children, ...props }) => {
-  const [selectedTab, setSelectedTab] = useState('tab-0');
-  const groupSections = children?.props?.children[1];
-  const contentClassame = contentType === 'tab' ? '-tabs' : '-sidepanel';
-  if (!groupSections || !groupSections.length) return '';
+const ContentGroupTabs = ({ name, contentType, modifier, groupSections, sectionsData }) => {
+  const router = useRouter();
+  const [selectedTab, setSelectedTab] = useState(getActiveTab(sectionsData, ''));
+  const { asPath } = router;
+  const contentClassame = contentType === TAB ? TABS : SIDEPANEL;
+  const mainDivClass = `${CONTENT_GROUP}-${contentClassame}`;
+  const contentGroupClass = `${CONTENT_GROUP}-${contentClassame}__buttons-wrapper`;
+  const sectionClass = `${CONTENT_GROUP}-${contentClassame}__content-section`;
+
+  useEffect(
+    () => {
+      const activeTab = getActiveTab(sectionsData, asPath);
+      if (activeTab !== selectedTab) setSelectedTab(activeTab);
+    },
+    [asPath, sectionsData, selectedTab]
+  );
 
   return (
-    <div className={`content-group${contentClassame}`}>
-      <ul
-        className={`content-group${contentClassame}__buttons-wrapper`}
-        role="tablist"
-        aria-label={name}>
+    <div className={mainDivClass}>
+      <ul className={contentGroupClass} role="tablist" aria-label={name}>
         {groupSections.map((groupSection, index) => {
-          const {
-            props: { component: { settings: { label: sectionLabel } = {} } = {} } = {}
-          } = groupSection;
-          const tabId = `tab-${index}`;
-          const panelId = `panel-${index}`;
+          const [sectionName, sectioLabel] = sectionsData[index];
+          const tabId = `${TAB}-${sectionName}`;
+          const panelId = `${PANEL}-${sectionName}`;
           const isSelected = selectedTab === tabId;
-          const buttonClassName = isSelected
-            ? `content-group${contentClassame}__button--is-active`
-            : `content-group${contentClassame}__button`;
+          const buttonClassName = `${CONTENT_GROUP}-${contentClassame}__button${
+            isSelected ? '--is-active' : ''
+          }`;
 
           return (
             <button
@@ -33,22 +42,29 @@ const ContentGroupTabs = ({ name, contentType, modifier, children, ...props }) =
               role="tab"
               aria-selected={isSelected}
               aria-controls={panelId}
-              onClick={() => setSelectedTab(tabId)}>
-              {sectionLabel}
+              onClick={() => {
+                const baseUrl = asPath.split('#')[0];
+                const newUrl = `${baseUrl}#${sectionName}`;
+                if (asPath === newUrl) return;
+                router.push(`/Resolver`, newUrl, { shallow: true });
+                setSelectedTab(tabId);
+              }}>
+              {sectioLabel}
             </button>
           );
         })}
       </ul>
       {groupSections.map((groupSection, index) => {
-        const tabId = `tab-${index}`;
-        const panelId = `panel-${index}`;
+        const [sectionName] = sectionsData[index];
+        const tabId = `${TAB}-${sectionName}`;
+        const panelId = `${PANEL}-${sectionName}`;
         if (selectedTab !== tabId) return null;
 
         return (
           <div
-            id={panelId}
+            id={sectionName}
             key={panelId}
-            className={`content-group${contentClassame}__content-section`}
+            className={sectionClass}
             role="tabpanel"
             aria-labelledby={tabId}>
             {groupSection}
@@ -63,12 +79,12 @@ ContentGroupTabs.propTypes = {
   name: PropTypes.string.isRequired,
   contentType: PropTypes.string.isRequired,
   modifier: PropTypes.string,
-  children: PropTypes.object
+  groupSections: PropTypes.array.isRequired,
+  sectionsData: PropTypes.array.isRequired
 };
 
 ContentGroupTabs.defaultProps = {
-  modifier: '',
-  children: {}
+  modifier: ''
 };
 
 export default ContentGroupTabs;

package/src/components/ContentGroup/constants.js

@@ -0,0 +1,7 @@
+const TAB = 'tab';
+const TABS = 'tabs';
+const SIDEPANEL = 'sidepanel';
+const CONTENT_GROUP = 'content-group';
+const PANEL = 'panel';
+
+export { TAB, TABS, SIDEPANEL, CONTENT_GROUP, PANEL };

package/src/components/ContentGroup/helpers/get-active-tab.js

@@ -0,0 +1,11 @@
+import { TAB } from '../constants';
+
+const getActiveTab = (sections, url) => {
+  const decodedUrl = decodeURI(url);
+  const activeTabName = decodedUrl.split('#')[1];
+  const isUrlTabValid = !!sections.find(section => section[0] === activeTabName);
+  const tabToUse = (isUrlTabValid && activeTabName) || sections[0][0];
+  return `${TAB}-${tabToUse}`;
+};
+
+export default getActiveTab;

package/src/components/ContentGroup/helpers/get-sections-data.js

@@ -0,0 +1,7 @@
+const getSectionsData = sections =>
+  sections.map(section => {
+    const { props: { component: { settings: { label, name } = {} } = {} } = {} } = section;
+    return [name, label];
+  });
+
+export default getSectionsData;

package/src/components/ContentGroup/helpers/index.js

@@ -0,0 +1,4 @@
+import getSectionsData from './get-sections-data';
+import getActiveTab from './get-active-tab';
+
+export { getSectionsData, getActiveTab };

package/src/components/ContentGroupSection/ContentGroupSection.js

@@ -2,10 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { hasChildren } from '../../helpers';
 
-const ContentGroupSection = ({ children, ...props }) => {
+const ContentGroupSection = ({ children, name, ...props }) => {
   if (!hasChildren(children)) return null;
 
-  return <div className="content-group-section">{children}</div>;
+  return (
+    <div key={name} className="content-group-section">
+      {children}
+    </div>
+  );
 };
 
 ContentGroupSection.propTypes = {

package/src/components/List/components/Cards/CardsRenderItem.js

@@ -86,7 +86,7 @@ const CardsRenderItem = ({
           {...cardProps}
         />
       </div>
-      {shouldRenderBanner && <Banner {...bannerProps} renderCounter={bannerIndex} />}
+      {shouldRenderBanner && <Banner {...bannerProps} cardBannerIndex={bannerIndex} />}
     </>
   );
 };

package/src/components/List/components/Full/FullRenderItem.js

@@ -50,7 +50,7 @@ const FullRenderItem = ({
       {!!parsedPropsToDisplay.length && (
         <>{parsedPropsToDisplay.map(prop => (prop ? <span key={prop}>{prop}</span> : null))}</>
       )}
-      {shouldRenderBanner && <Banner {...bannerProps} renderCounter={bannerIndex} />}
+      {shouldRenderBanner && <Banner {...bannerProps} cardBannerIndex={bannerIndex} />}
     </>
   );
 };

package/src/components/Video/providers/YouTube/YoutubeEmbeded.js

@@ -50,6 +50,7 @@ const YoutubeEmbeded = ({
 
   useEffect(
     () => {
+      let isMounted = true;
       if ((!priority && !isIntersecting) || imageSize === YT_HQ_FORMAT) return;
 
       const img = new Image();
@@ -57,10 +58,13 @@ const YoutubeEmbeded = ({
       img.onload = function() {
         let newImageSize = imageSize;
         if (this && this.width === 120) newImageSize = YT_HQ_FORMAT;
-        setImageDetails({ imageSize: newImageSize, displayImage: true });
+        if (isMounted) setImageDetails({ imageSize: newImageSize, displayImage: true });
       };
 
       img.src = posterUrl;
+      return () => {
+        isMounted = false;
+      };
     },
     [imageSize, isIntersecting, posterUrl, priority]
   );

package/tests/unit/src/components/Banner/BannerRender.test.js

@@ -99,7 +99,7 @@ const defaultProps = {
   entity: '',
   targetings: '',
   sizes: '',
-  renderCounter: null,
+  cardBannerIndex: null,
   ...otherProps
 };
 

package/tests/unit/src/components/ContentGroup/ContentGroupTabs.test.js

@@ -1,14 +1,27 @@
+import React from 'react';
 import { render } from '@blaze-cms/tools/test-helpers/test-functions';
 import ContentGroupTabs from '../../../../../src/components/ContentGroup/ContentGroupTabs';
 
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(() => ({ asPath: 'tabs-url' }))
+}));
+
+const mockedProps = {
+  name: 'testTabs',
+  contentType: 'tab',
+  groupSections: [<div>section one</div>, <div>section two</div>],
+  sectionsData: [['section-one', 'sectionOne'], ['section-two', 'sectionTwo']]
+};
+
 describe('ContentGroupTabs component', () => {
   it('should match snapshot and render tabs content', () => {
-    const { asFragment: tabContentGroup } = render(ContentGroupTabs, { contentType: 'tab' });
+    const { asFragment: tabContentGroup } = render(ContentGroupTabs, mockedProps);
     expect(tabContentGroup()).toMatchSnapshot();
   });
 
   it('should match snapshot and render sidepanel content', () => {
     const { asFragment: sidepanelContentGroup } = render(ContentGroupTabs, {
+      ...mockedProps,
       contentType: 'sidepanel'
     });
     expect(sidepanelContentGroup()).toMatchSnapshot();

package/tests/unit/src/components/ContentGroup/__snapshots__/ContentGroupTabs.test.js.snap

@@ -1,5 +1,91 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ContentGroupTabs component should match snapshot and render sidepanel content 1`] = `<DocumentFragment />`;
+exports[`ContentGroupTabs component should match snapshot and render sidepanel content 1`] = `
+<DocumentFragment>
+  <div
+    class="content-group-sidepanel"
+  >
+    <ul
+      aria-label="testTabs"
+      class="content-group-sidepanel__buttons-wrapper"
+      role="tablist"
+    >
+      <button
+        aria-controls="panel-section-one"
+        aria-selected="true"
+        class="content-group-sidepanel__button--is-active"
+        id="tab-section-one"
+        role="tab"
+        type="button"
+      >
+        sectionOne
+      </button>
+      <button
+        aria-controls="panel-section-two"
+        aria-selected="false"
+        class="content-group-sidepanel__button"
+        id="tab-section-two"
+        role="tab"
+        type="button"
+      >
+        sectionTwo
+      </button>
+    </ul>
+    <div
+      aria-labelledby="tab-section-one"
+      class="content-group-sidepanel__content-section"
+      id="section-one"
+      role="tabpanel"
+    >
+      <div>
+        section one
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
 
-exports[`ContentGroupTabs component should match snapshot and render tabs content 1`] = `<DocumentFragment />`;
+exports[`ContentGroupTabs component should match snapshot and render tabs content 1`] = `
+<DocumentFragment>
+  <div
+    class="content-group-tabs"
+  >
+    <ul
+      aria-label="testTabs"
+      class="content-group-tabs__buttons-wrapper"
+      role="tablist"
+    >
+      <button
+        aria-controls="panel-section-one"
+        aria-selected="true"
+        class="content-group-tabs__button--is-active"
+        id="tab-section-one"
+        role="tab"
+        type="button"
+      >
+        sectionOne
+      </button>
+      <button
+        aria-controls="panel-section-two"
+        aria-selected="false"
+        class="content-group-tabs__button"
+        id="tab-section-two"
+        role="tab"
+        type="button"
+      >
+        sectionTwo
+      </button>
+    </ul>
+    <div
+      aria-labelledby="tab-section-one"
+      class="content-group-tabs__content-section"
+      id="section-one"
+      role="tabpanel"
+    >
+      <div>
+        section one
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/tests/unit/src/components/ContentGroup/helpers/get-active-tab.test.js

@@ -0,0 +1,19 @@
+import getActiveTab from '../../../../../../src/components/ContentGroup/helpers/get-active-tab';
+
+const mockedSectionsData = [['sectionname', 'section label'], ['sectionname2', 'anothersection']];
+
+describe('getActiveTab helper', () => {
+  it('should return url hash if present and it matches one of the tabs', () => {
+    const match = getActiveTab(mockedSectionsData, 'www.someurl.com/page1#sectionname2');
+
+    expect(match).toEqual('tab-sectionname2');
+  });
+
+  it('should return first tab otherwise', () => {
+    const noMatch = getActiveTab(mockedSectionsData, 'www.someurl.com/page1#sectionnamewithnomath');
+    const noHash = getActiveTab(mockedSectionsData, 'www.someurl.com/page1');
+
+    expect(noMatch).toEqual('tab-sectionname');
+    expect(noHash).toEqual('tab-sectionname');
+  });
+});

package/tests/unit/src/components/ContentGroup/helpers/get-sections-data.test.js

@@ -0,0 +1,14 @@
+import getSectionsData from '../../../../../../src/components/ContentGroup/helpers/get-sections-data';
+
+const mockedSections = [
+  { props: { component: { settings: { label: 'labelonne', name: 'nameone' } } } },
+  { props: { component: { settings: { label: 'labelTwo', name: 'nameTwo' } } } }
+];
+
+describe('getSectionsData helper', () => {
+  it('should return section name and label', () => {
+    const match = getSectionsData(mockedSections);
+
+    expect(match).toEqual([['nameone', 'labelonne'], ['nameTwo', 'labelTwo']]);
+  });
+});