@blaze-cms/react-page-builder 0.127.0-project-admin-customisations.3 → 0.127.3

package/src/components/Banner/BannerRender.js

@@ -32,7 +32,7 @@ const BannerRender = ({
   asPath,
   action,
   actionKey,
-  cardBannerIndex,
+  renderCounter,
   userPropsData,
   ...otherProps
 }) => {
@@ -79,7 +79,7 @@ const BannerRender = ({
   const shouldShowBanner =
     parsedAdunit && parsedSizes && !!parsedSizes.length && isContextualTargetingReady;
 
-  const customTargetings = setCustomTargetings(targetings, cardBannerIndex);
+  const customTargetings = setCustomTargetings(targetings, renderCounter);
 
   const targetingArguments = { ...parsedTargetings, ...customTargetings, ...userPropsData };
 
@@ -107,7 +107,7 @@ BannerRender.propTypes = {
   entity: PropTypes.string,
   targetings: PropTypes.string,
   sizes: PropTypes.string,
-  cardBannerIndex: PropTypes.number,
+  renderCounter: PropTypes.number,
   userPropsData: PropTypes.object
 };
 
@@ -119,7 +119,7 @@ BannerRender.defaultProps = {
   entity: '',
   targetings: '',
   sizes: '',
-  cardBannerIndex: null,
+  renderCounter: 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, cardBannerIndex) => {
+const setCustomTargetings = (targetings, renderCounter) => {
   let bannerTargetings = {};
 
-  const updatedTargetings = cardBannerIndex
-    ? addPosnToTargetings(targetings, cardBannerIndex)
+  const updatedTargetings = renderCounter
+    ? addPosnToTargetings(targetings, renderCounter)
     : 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 cardBannerIndex = 0;
+  let renderCounter = 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) cardBannerIndex += 1;
+        if (baseAdunit) renderCounter += 1;
 
         const priority = priorityLimit > 0 && index + 1 <= priorityLimit;
 
@@ -66,7 +66,7 @@ const CardContainer = ({
             baseAdunit={baseAdunit}
             {...entityProps}
             modifier={modifier}
-            cardBannerIndex={cardBannerIndex}
+            renderCounter={renderCounter}
           />
         ) : (
           <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, ...otherProps }) => {
+const Code = memo(({ code: embedCode, parserOptions, ...otherProps }) => {
   if (!embedCode) return null;
 
-  const parsedCode = parseHTML(embedCode);
+  const parsedCode = parseHTML(embedCode, parserOptions);
   const wrappedCode = wrapScriptTags(parsedCode);
   const modifiers = getClassModifiers(CODE, { ...otherProps });
 
@@ -19,12 +19,14 @@ const Code = memo(({ code: embedCode, ...otherProps }) => {
 
 Code.propTypes = {
   code: PropTypes.string,
-  modifier: PropTypes.string
+  modifier: PropTypes.string,
+  parserOptions: PropTypes.object
 };
 
 Code.defaultProps = {
   code: '',
-  modifier: ''
+  modifier: '',
+  parserOptions: {}
 };
 
 export default withTitle(Code);

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

@@ -17,9 +17,13 @@ function getWrappedScriptTag(child) {
 function wrapScriptTags(parsedCode) {
   if (Array.isArray(parsedCode)) {
     parsedCode.forEach((child, index) => {
-      // modify children array as we just want to wrap single components
-      // eslint-disable-next-line no-param-reassign
-      parsedCode[index] = getWrappedScriptTag(child);
+      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
+      }
     });
 
     return parsedCode;

package/src/components/ContentGroupSection/ContentGroupSection.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { hasChildren } from '../../helpers';
 
-const ContentGroupSection = ({ children, name }) => {
+const ContentGroupSection = ({ children, name, ...props }) => {
   if (!hasChildren(children)) return null;
 
   return (
@@ -13,12 +13,9 @@ const ContentGroupSection = ({ children, name }) => {
 };
 
 ContentGroupSection.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-  name: PropTypes.string.isRequired
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
 };
 
-ContentGroupSection.defaultProps = {
-  children: null
-};
+ContentGroupSection.defaultProps = { children: null };
 
 export default ContentGroupSection;

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

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

package/src/hooks/helpers/RenderComponent.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import ErrorBoundary from '@blaze-cms/core-errors-ui';
 import getComponent from './getComponent';
 import appendGtmClassName from './append-gtm-classname';
 import { PB_TYPE_IMAGE, PB_TYPE_BANNER, PB_TYPE_TEXTBLOCK, PB_TYPE_CAROUSEL } from './constants';
@@ -25,22 +26,24 @@ const RenderComponent = ({
   const updatedSettings = appendGtmClassName(settings, childComponents);
 
   return (
-    <Component
-      key={id}
-      type={type}
-      {...options}
-      {...imageOptions}
-      {...nestedComponentsProps}
-      {...updatedSettings}
-      name={name || settings.name}>
-      {hasTextBlockBanners ? (
-        <BannerContextProvider siblings={siblings} banners={textBlockBanners} pbOptions={options}>
-          {childComponents}
-        </BannerContextProvider>
-      ) : (
-        childComponents
-      )}
-    </Component>
+    <ErrorBoundary>
+      <Component
+        key={id}
+        type={type}
+        {...options}
+        {...imageOptions}
+        {...nestedComponentsProps}
+        {...updatedSettings}
+        name={name || settings.name}>
+        {hasTextBlockBanners ? (
+          <BannerContextProvider siblings={siblings} banners={textBlockBanners} pbOptions={options}>
+            {childComponents}
+          </BannerContextProvider>
+        ) : (
+          childComponents
+        )}
+      </Component>
+    </ErrorBoundary>
   );
 };
 

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

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