@blaze-cms/react-page-builder 0.146.0-translations.6 → 0.147.0-rc-eagle.2

package/src/components/SearchFilter/components/Range.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
+import classNames from 'classnames';
 import RangeFilter from '@blaze-react/range-filter';
 import { useRouter } from 'next/router';
 import Select from '@blaze-react/select';
@@ -18,7 +19,8 @@ const Range = ({
   updateFilterValues,
   filterValues,
   shouldSearch,
-  elementTitle
+  elementTitle,
+  unit
 }) => {
   const router = useRouter();
   const debounceAmount = shouldSearch ? 1200 : 400;
@@ -38,7 +40,6 @@ const Range = ({
   if (loading || !rangeOption || !rangeValue) return '';
 
   const options = getSelectOptions(getEntitySchema, propsToDisplay);
-  // get range from aggregations so it updates
   const { min, max } = calculateMinMax(dataAggregations[rangeOption], rangeInterval);
   const minValue = rangeValue.minValue < min ? min : rangeValue.minValue;
   const maxValue = rangeValue.maxValue > max ? max : rangeValue.maxValue;
@@ -48,6 +49,11 @@ const Range = ({
     updateFilterValues({ [option]: { ...value, selectedOption: rangeOption } }, shouldSearch);
   }, debounceAmount);
 
+  let displayLabel = '';
+  if (!hasMultipleOptions) {
+    displayLabel = label;
+  }
+
   return (
     <>
       {elementTitle && <div className="heading heading--section">{elementTitle}</div>}
@@ -62,8 +68,11 @@ const Range = ({
             onChange={({ value }) => {
               const updatedOptions = {};
               propsToDisplay.forEach(prop => {
-                const { min: eMin, max: eMax } = filterValues[prop];
-                const initValue = getRangeValue(null, rangeInterval, eMin, eMax);
+                const { min: aggMin, max: aggMax } = calculateMinMax(
+                  dataAggregations[prop],
+                  rangeInterval
+                );
+                const initValue = getRangeValue(null, rangeInterval, aggMin, aggMax);
                 updatedOptions[prop] = { ...initValue, selectedOption: value };
               });
 
@@ -72,16 +81,22 @@ const Range = ({
           />
         </>
       )}
-      <RangeFilter
-        key={`${rangeOption}-${minValue}-${maxValue}`}
-        name={rangeOption}
-        label={hasMultipleOptions ? '' : label}
-        value={valueToUse}
-        id={rangeOption}
-        onChange={({ value }) => {
-          handleChange(rangeOption, value);
-        }}
-      />
+      <div
+        className={classNames('range-filter-wrapper', {
+          'has-unit': unit
+        })}
+        style={unit ? { '--unit': `"${unit}"` } : {}}>
+        <RangeFilter
+          key={`${rangeOption}-${min}-${max}`}
+          name={rangeOption}
+          label={displayLabel}
+          value={valueToUse}
+          id={rangeOption}
+          onChange={({ value }) => {
+            handleChange(rangeOption, value);
+          }}
+        />
+      </div>
     </>
   );
 };
@@ -95,14 +110,16 @@ Range.propTypes = {
   rangeInterval: PropTypes.number,
   label: PropTypes.string,
   elementTitle: PropTypes.string,
-  dataAggregations: PropTypes.object.isRequired
+  dataAggregations: PropTypes.object.isRequired,
+  unit: PropTypes.string
 };
 
 Range.defaultProps = {
   shouldSearch: false,
   rangeInterval: 1,
   label: '',
-  elementTitle: ''
+  elementTitle: '',
+  unit: ''
 };
 
 export default Range;

package/src/components/SearchFilter/helpers/build-new-url.js

@@ -1,6 +1,7 @@
-const buildNewUrl = (url, currentUrl, queryParams, hashBit) => {
+const buildNewUrl = (url, currentUrl, queryParams, newHashBit) => {
   const encodedQuery = encodeURI(queryParams);
-  const baseUrl = url || currentUrl;
+  const [baseUrl, urlHash] = (url || currentUrl).split('#');
+  const hashBit = newHashBit || urlHash || '';
   const newUrl = encodedQuery ? `${baseUrl}?${encodedQuery}` : `${baseUrl}`;
   return hashBit ? `${newUrl}#${hashBit}` : newUrl;
 };

package/src/components/SearchFilter/helpers/build-url-query.js

@@ -22,7 +22,16 @@ const buildUrlQuery = (filterValues = {}, filters = [], listComponentName = '',
   });
 
   Object.keys(query).forEach(key => {
-    if (queryKeys.indexOf(key) === -1) newQuery.push(`${key}=${query[key]}`);
+    if (queryKeys.indexOf(key) !== -1) return;
+
+    let shouldAdd = true;
+    if (!listComponentName) {
+      shouldAdd = !key.endsWith('[page]');
+    } else {
+      shouldAdd = !key.includes(listComponentName);
+    }
+
+    if (shouldAdd) newQuery.push(`${key}=${query[key]}`);
   });
 
   return newQuery.join('&');

package/src/components/Video/providers/Vimeo/VimeoProvider.js

@@ -11,29 +11,26 @@ const VimeoProvider = ({ url, autoplay, loop, imageData }) => {
   const [videoError, setVideoError] = useState(null);
   const [shouldRenderVideo, setShouldRenderVideo] = useState(!!autoplay);
 
-  useEffect(
-    () => {
-      async function fetchVideoData(videoUrl) {
-        try {
-          const res = await fetch(videoUrl);
-          const data = await res.json();
-          setVideoData(data);
-        } catch (err) {
-          setVideoError(err);
-        }
+  useEffect(() => {
+    async function fetchVideoData(videoUrl) {
+      try {
+        const res = await fetch(videoUrl);
+        const data = await res.json();
+        setVideoData(data);
+      } catch (err) {
+        setVideoError(err);
       }
-      if (url) {
-        const currentHeight = inputEl.current.clientHeight;
-        const urlWithParams = addExtraParamsToUrl(url, {
-          autoplay: true,
-          loop,
-          height: currentHeight
-        });
-        fetchVideoData(urlWithParams);
-      }
-    },
-    [autoplay, loop, url]
-  );
+    }
+    if (url) {
+      const currentHeight = inputEl.current.clientHeight;
+      const urlWithParams = addExtraParamsToUrl(url, {
+        autoplay: true,
+        loop,
+        height: currentHeight
+      });
+      fetchVideoData(urlWithParams);
+    }
+  }, [autoplay, loop, url]);
 
   const { thumbnail_url_with_play_button: thumbnailUrl, html = '' } = videoData || {};
   const imageUrl = imageData && imageData.url;

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

@@ -60,75 +60,69 @@ const YoutubeEmbeded = ({
   const parsedWrapperClassname = `yt-facade ${renderIframe ? 'yt-activated' : ''}`;
   const iframeId = `yt-iframe-${videoId}`;
 
-  useEffect(
-    () => {
-      if (!emitEvent || !renderIframe) return;
-
-      if (!document.getElementById(SCRIPT_ID)) {
-        // if script not already loaded
-        const tag = document.createElement('script');
-        tag.id = SCRIPT_ID;
-        tag.src = 'https://www.youtube.com/iframe_api';
-        const firstScriptTag = document.getElementsByTagName('script')[0];
-        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+  useEffect(() => {
+    if (!emitEvent || !renderIframe) return;
+
+    if (!document.getElementById(SCRIPT_ID)) {
+      // if script not already loaded
+      const tag = document.createElement('script');
+      tag.id = SCRIPT_ID;
+      tag.src = 'https://www.youtube.com/iframe_api';
+      const firstScriptTag = document.getElementsByTagName('script')[0];
+      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+    }
+
+    const onStateChange = event => {
+      let action = '';
+      if (event.data === window.YT.PlayerState.ENDED) {
+        action = EVENT_ACTIONS.ENDED;
+      } else if (event.data === window.YT.PlayerState.PAUSED) {
+        action = EVENT_ACTIONS.PAUSED;
+      } else if (event.data === window.YT.PlayerState.PLAYING) {
+        action = EVENT_ACTIONS.PLAYING;
       }
 
-      const onStateChange = event => {
-        let action = '';
-        if (event.data === window.YT.PlayerState.ENDED) {
-          action = EVENT_ACTIONS.ENDED;
-        } else if (event.data === window.YT.PlayerState.PAUSED) {
-          action = EVENT_ACTIONS.PAUSED;
-        } else if (event.data === window.YT.PlayerState.PLAYING) {
-          action = EVENT_ACTIONS.PLAYING;
-        }
-
-        emitEvent({ action, videoId });
-      };
+      emitEvent({ action, videoId });
+    };
 
-      if (window.YT) {
-        // if script already loaded then attach player
-        window.YT.ready(() => {
-          playerRef.current = new window.YT.Player(iframeId, {
-            events: {
-              onStateChange
-            }
-          });
+    if (window.YT) {
+      // if script already loaded then attach player
+      window.YT.ready(() => {
+        playerRef.current = new window.YT.Player(iframeId, {
+          events: {
+            onStateChange
+          }
+        });
+      });
+    } else {
+      // called on script load
+      window.onYouTubeIframeAPIReady = () => {
+        playerRef.current = new window.YT.Player(ref.current, {
+          events: {
+            onStateChange
+          }
         });
-      } else {
-        // called on script load
-        window.onYouTubeIframeAPIReady = () => {
-          playerRef.current = new window.YT.Player(ref.current, {
-            events: {
-              onStateChange
-            }
-          });
-        };
-      }
-    },
-    [emitEvent, iframeId, renderIframe, videoId]
-  );
-
-  useEffect(
-    () => {
-      let isMounted = true;
-      if ((!priority && !isIntersecting) || imageSize === YT_HQ_FORMAT) return;
-
-      const img = new Image();
-      // eslint-disable-next-line func-names
-      img.onload = function() {
-        let newImageSize = imageSize;
-        if (this && this.width === 120) newImageSize = YT_HQ_FORMAT;
-        if (isMounted) setImageDetails({ imageSize: newImageSize, displayImage: true });
-      };
-
-      img.src = posterUrl;
-      return () => {
-        isMounted = false;
       };
-    },
-    [imageSize, isIntersecting, posterUrl, priority]
-  );
+    }
+  }, [emitEvent, iframeId, renderIframe, videoId]);
+
+  useEffect(() => {
+    let isMounted = true;
+    if ((!priority && !isIntersecting) || imageSize === YT_HQ_FORMAT) return;
+
+    const img = new Image();
+    // eslint-disable-next-line func-names
+    img.onload = function () {
+      let newImageSize = imageSize;
+      if (this && this.width === 120) newImageSize = YT_HQ_FORMAT;
+      if (isMounted) setImageDetails({ imageSize: newImageSize, displayImage: true });
+    };
+
+    img.src = posterUrl;
+    return () => {
+      isMounted = false;
+    };
+  }, [imageSize, isIntersecting, posterUrl, priority]);
 
   const warmConnections = () => {
     if (preconnected) return;

package/src/components/Video/providers/get-provider.js

@@ -1,11 +1,11 @@
 import dynamic from 'next/dynamic';
 
 const SUPPORTED_PROVIDERS = {
-  youtube: dynamic(() =>
-    import(/* webpackChunkName: "blazePbVideoYouTube" */ './YouTube/YouTubeProvider')
+  youtube: dynamic(
+    () => import(/* webpackChunkName: "blazePbVideoYouTube" */ './YouTube/YouTubeProvider')
   ),
-  JWPlayer: dynamic(() =>
-    import(/* webpackChunkName: "blazePbVideoJWPlayer" */ './JWPlayer/JWPlayerProvider')
+  JWPlayer: dynamic(
+    () => import(/* webpackChunkName: "blazePbVideoJWPlayer" */ './JWPlayer/JWPlayerProvider')
   ),
   vimeo: dynamic(() => import(/* webpackChunkName: "blazePbVideoVimeo" */ './Vimeo/VimeoProvider')),
   default: dynamic(() => import(/* webpackChunkName: "blazePbVideoDefault" */ './Default')),

package/src/components/Wrapper.js

@@ -5,13 +5,11 @@ const Wrapper = React.forwardRef(
   ({ children, className, modifiers, style, tagType, ...props }, ref) => {
     const TagType = !tagType || tagType === 'Default' ? 'div' : tagType;
     return (
-      <>
-        {children && (
-          <TagType ref={ref} className={`${className} ${modifiers}`} style={style} {...props}>
-            {children}
-          </TagType>
-        )}
-      </>
+      children && (
+        <TagType ref={ref} className={`${className} ${modifiers}`} style={style} {...props}>
+          {children}
+        </TagType>
+      )
     );
   }
 );

package/src/components/index.js

@@ -11,20 +11,20 @@ export default {
   image: dynamic(() => import(/* webpackChunkName: "blazePbImage" */ './Image')),
   row: dynamic(() => import(/* webpackChunkName: "blazePbLayout" */ './Layout')),
   list: dynamic(() => import(/* webpackChunkName: "blazePbList" */ './List')),
-  socialfollow: dynamic(() =>
-    import(/* webpackChunkName: "blazePbSocialFollow" */ './SocialFollow')
+  socialfollow: dynamic(
+    () => import(/* webpackChunkName: "blazePbSocialFollow" */ './SocialFollow')
   ),
   textblock: dynamic(() => import(/* webpackChunkName: "blazePbTextBlock" */ './TextBlock')),
   video: dynamic(() => import(/* webpackChunkName: "blazePbVideo" */ './Video')),
   wrapper: dynamic(() => import(/* webpackChunkName: "blazePbWrapper" */ './Wrapper')),
-  searchcontent: dynamic(() =>
-    import(/* webpackChunkName: "blazePbSearchFilter" */ './SearchContent/SearchContent')
+  searchcontent: dynamic(
+    () => import(/* webpackChunkName: "blazePbSearchFilter" */ './SearchContent/SearchContent')
   ),
-  searchfilter: dynamic(() =>
-    import(/* webpackChunkName: "blazePbSearchFilter" */ './SearchFilter')
+  searchfilter: dynamic(
+    () => import(/* webpackChunkName: "blazePbSearchFilter" */ './SearchFilter')
   ),
-  searchfiltersort: dynamic(() =>
-    import(/* webpackChunkName: "blazePbSearchFilteSort" */ './SearchFilterSort')
+  searchfiltersort: dynamic(
+    () => import(/* webpackChunkName: "blazePbSearchFilteSort" */ './SearchFilterSort')
   ),
   modal: dynamic(() => import(/* webpackChunkName: "blazePbModal" */ './Modal')),
   datetime: dynamic(() => import(/* webpackChunkName: "blazePbDateTime" */ './DateTime')),
@@ -32,26 +32,26 @@ export default {
   menu: dynamic(() => import(/* webpackChunkName: "blazePbMenu" */ './Menu')),
   menuitem: dynamic(() => import(/* webpackChunkName: "blazePbMenuItem" */ './MenuItem')),
   submenu: dynamic(() => import(/* webpackChunkName: "blazePbSubMenu" */ './SubMenu')),
-  emailconfirm: dynamic(() =>
-    import(/* webpackChunkName: "blazePbEmailConfirm" */ './EmailConfirm')
+  emailconfirm: dynamic(
+    () => import(/* webpackChunkName: "blazePbEmailConfirm" */ './EmailConfirm')
   ),
 
   breadcrumb: dynamic(() => import(/* webpackChunkName: "blazePbBreadcrumb" */ './Breadcrumb')),
-  itemlistbutton: dynamic(() =>
-    import(/* webpackChunkName: "blazePbItemListButton" */ './ItemList/ItemListButton')
+  itemlistbutton: dynamic(
+    () => import(/* webpackChunkName: "blazePbItemListButton" */ './ItemList/ItemListButton')
   ),
-  itemlistcounter: dynamic(() =>
-    import(/* webpackChunkName: "blazePbItemListCounter" */ './ItemList/ItemListCounter')
+  itemlistcounter: dynamic(
+    () => import(/* webpackChunkName: "blazePbItemListCounter" */ './ItemList/ItemListCounter')
   ),
-  itemlistnew: dynamic(() =>
-    import(/* webpackChunkName: "blazePbItemListNew" */ './ItemList/ItemListNew')
+  itemlistnew: dynamic(
+    () => import(/* webpackChunkName: "blazePbItemListNew" */ './ItemList/ItemListNew')
   ),
   backtotop: dynamic(() => import(/* webpackChunkName: "blazePbBackToTop" */ './BackToTop')),
-  contentgroup: dynamic(() =>
-    import(/* webpackChunkName: "blazePbContentGroup" */ './ContentGroup')
+  contentgroup: dynamic(
+    () => import(/* webpackChunkName: "blazePbContentGroup" */ './ContentGroup')
   ),
-  contentgroupsection: dynamic(() =>
-    import(/* webpackChunkName: "blazePbContentGroupSection" */ './ContentGroupSection')
+  contentgroupsection: dynamic(
+    () => import(/* webpackChunkName: "blazePbContentGroupSection" */ './ContentGroupSection')
   ),
   iframe: dynamic(() => import(/* webpackChunkName: "blazePbIframe" */ './Iframe'))
 };

package/src/constants/index.js

@@ -165,8 +165,6 @@ const AZ = [
 
 const AZ_DEFAULT_PROP = 'name';
 
-const SCROLL_OFFSET = process.env.BLAZE_SCROLL_OFFSET || 50;
-
 const BANNER_LOADING = 'loading';
 const BANNER_EMPTY = 'empty';
 const BANNER_LOADED = 'loaded';
@@ -174,11 +172,13 @@ const ANCHOR_TAG = 'a';
 const TARGET_BLANK = '_blank';
 
 const DATA_SUMMARY_EMAIL_REGEX = /^([a-z0-9_\.\+-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
-const DATA_SUMMARY_URL_REGEX = /(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;
+const DATA_SUMMARY_URL_REGEX =
+  /(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;
 const DATA_SUMMARY_TEL_REGEX = /^\+{0,1}[0-9\(\)\.\- \/]{7,}$/; // note: very loose phone number match not for validation
 const SIZE = process.env.BLAZE_PB_SEARCH_FILETER_AGG_SIZE || 500;
 
 const TRANSLATION_NAMESPACE = 'page-builder-fe';
+const COMPONENT_ID_PREFIX = 'pb-';
 
 export {
   BANNER_LOADING,
@@ -281,7 +281,6 @@ export {
   AZ_QUERY_CONST,
   AZ_DEFAULT_PROP,
   AZ,
-  SCROLL_OFFSET,
   ANCHOR_TAG,
   TARGET_BLANK,
   DATA_SUMMARY_EMAIL_REGEX,
@@ -289,5 +288,6 @@ export {
   DATA_SUMMARY_TEL_REGEX,
   VIMEO_OEMBED_URL,
   SIZE,
-  TRANSLATION_NAMESPACE
+  TRANSLATION_NAMESPACE,
+  COMPONENT_ID_PREFIX
 };

package/src/helpers/build-props-query.js

@@ -79,7 +79,7 @@ const getTypeBaseProps = (entitySchema, cardOptions, extraPropsHaveCategory) =>
 
   const { interfaces, properties, dynamicProperties, relations } = entitySchema;
 
-  const isContent = !!interfaces.includes('content/content');
+  const isContent = !!interfaces.includes('content/content-base');
   const hasCategory = checkProps(properties) || checkProps(dynamicProperties);
   const hasPreheader = properties[PREHEADER_PROP];
 
@@ -97,7 +97,8 @@ const getTypeBaseProps = (entitySchema, cardOptions, extraPropsHaveCategory) =>
   return { typeBasedProps, shouldAddCategoryProps };
 };
 
-const getContentProps = isContent => (isContent ? ['url', 'sponsored', 'featured'] : []);
+// make sure all props are supported by content/content-base interface
+const getContentProps = isContent => (isContent ? ['url', 'sponsored', 'featured', 'live'] : []);
 
 const getCategoyProps = (shouldAddCategoryProps, hasCategory, hasPreheader) => {
   if (!shouldAddCategoryProps) return [];

package/src/helpers/build-query-fields.js

@@ -6,7 +6,7 @@ const buildQueryFields = (sanitizedEntityFields, entityTypes, isFull) =>
       ${sanitizedEntityFields}
       __typename
       id
-      ${isFull ? 'pageBuilderComponents' : ''}
+     ${isFull ? 'pageBuilderComponents: preparedPageBuilderComponents' : ''}
     }`
     )}
   },

package/src/helpers/build-search-values-checkbox-select.js

@@ -18,7 +18,7 @@ const buildSearchValuesCheckboxSelect = (query, rangeFilters, checkboxFilters, s
       if (isQueryParamString) {
         if (rangeFilterProps.includes(queryParam)) {
           const [min, max] = query[queryParam].split('-');
-          if (min === 'NaN' || max === 'NaN') return;
+          if (min === 'NaN' || max === 'NaN') return acc;
           acc.values.push({
             range: {
               [queryParam]: {

package/src/helpers/get-component-id.js

@@ -0,0 +1,9 @@
+import cssesc from 'cssesc';
+import { COMPONENT_ID_PREFIX } from '../constants';
+
+const getComponentId = componentName =>
+  cssesc(`${COMPONENT_ID_PREFIX}${componentName.replace(/\s+/g, '-')}`, {
+    isIdentifier: true
+  });
+
+export default getComponentId;

package/src/helpers/get-current-offset.js

@@ -1,4 +1,4 @@
-const getCurrentOffset = (offset = 0, itemsPerPage = 1, paginationIndex = 1, limit) => {
+const getCurrentOffset = (limit, offset = 0, itemsPerPage = 1, paginationIndex = 1) => {
   if (paginationIndex <= 1) return Number(offset);
   const cumulativeOffset = Number(offset) + Number(itemsPerPage) * (Number(paginationIndex) - 1);
   return !!limit && cumulativeOffset >= limit ? offset : cumulativeOffset;

package/src/helpers/get-custom-html-properties.js

@@ -0,0 +1,11 @@
+const getCustomHtmlProperties = ({ customHtmlProps = [] }) =>
+  customHtmlProps
+    ? customHtmlProps.reduce((acc, { name, value }) => {
+        if (name) {
+          acc[name] = value !== 'null' ? value : undefined;
+        }
+        return acc;
+      }, {})
+    : {};
+
+export default getCustomHtmlProperties;

package/src/helpers/get-image-ids.js

@@ -4,6 +4,7 @@ const getIdsFromArray = (relationImageData, relationProp, imageId) => {
   if (!relationImageData.length) return [imageId];
   return relationImageData
     .map(image => {
+      if (typeof image !== 'object') return image;
       if (!Object.keys(image).length) return '';
       return image[relationProp];
     })
@@ -27,6 +28,8 @@ const getImageIds = (imageRelation, relationData, imageId) => {
         ? relationImageData[relationProp]
         : [relationImageData[relationProp]];
     }
+
+    if (relationImageData) return [relationImageData];
   }
 
   return imageIdArray;

package/src/helpers/get-wrapped-value-with-link.js

@@ -12,7 +12,7 @@ const getWrappedValueWithLink = (value, link, keyPrefix = '') => {
 
       return url ? (
         <BlazeLink key={[keyPrefix, index].join('-')} href={url}>
-          {<>{keyFieldValue} </>}
+          <>{keyFieldValue} </>
         </BlazeLink>
       ) : (
         <>{keyFieldValue} </>

package/src/helpers/index.js

@@ -61,3 +61,5 @@ export { default as shouldReturn } from './should-return';
 export { default as shouldSkipSingleQuery } from './should-skip-single-query';
 export { default as buildRawQueryStringified } from './build-raw-query-stringified';
 export { default as buildFiltersQuery } from './build-filters-query';
+export { default as getComponentId } from './get-component-id';
+export { default as getCustomHtmlProperties } from './get-custom-html-properties';

package/src/helpers/remove-unwanted-characters.js

@@ -11,10 +11,7 @@ function removeCharacters(value) {
     return { ...value, [keyField]: removeUnwantedCharacters(value[keyField]) };
   }
 
-  return String(value)
-    .replace(/^\|\s/, '')
-    .replace(/\|$/, '')
-    .trim();
+  return String(value).replace(/^\|\s/, '').replace(/\|$/, '').trim();
 }
 
 export default removeUnwantedCharacters;

package/src/hooks/helpers/RenderComponent.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ErrorBoundary from '@blaze-cms/core-errors-ui';
+import { useMainContext } from '@blaze-cms/nextjs-components';
 import getComponent from './getComponent';
 import getVariant from './getVariant';
 import appendGtmClassName from './append-gtm-classname';
 import { PB_TYPE_IMAGE, PB_TYPE_BANNER, PB_TYPE_TEXTBLOCK, PB_TYPE_CAROUSEL } from './constants';
 import { BannerContextProvider } from '../../BannerContext';
+import { PbWrapper } from '../../system-components';
 
 const RenderComponent = ({
   component,
@@ -17,6 +19,7 @@ const RenderComponent = ({
   siblings,
   ...nestedComponentsProps
 }) => {
+  const { debugOptions: { editorModeEnabled } = {} } = useMainContext();
   const { type, settings, id, name } = component;
   const Component = getComponent(type);
   const isImage = [PB_TYPE_IMAGE, PB_TYPE_BANNER, PB_TYPE_TEXTBLOCK, PB_TYPE_CAROUSEL].includes(
@@ -29,6 +32,7 @@ const RenderComponent = ({
 
   return (
     <ErrorBoundary>
+      {editorModeEnabled && <PbWrapper name={name} />}
       <Component
         key={id}
         type={type}
@@ -47,6 +51,7 @@ const RenderComponent = ({
           childComponents
         )}
       </Component>
+      {editorModeEnabled && <PbWrapper name={name} type="end" />}
     </ErrorBoundary>
   );
 };