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

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

@@ -172,7 +172,8 @@ 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;
 

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

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

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

@@ -62,3 +62,4 @@ 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>
   );
 };

package/src/hooks/helpers/buildPBComponents.js

@@ -57,10 +57,8 @@ function BuildPBComponents(components, options = {}, rootLevel = false) {
       )}
       {components.map(component => {
         const { items = [] } = component;
-        const [
-          hasElementInsertionComponents,
-          elementInsertionComponents
-        ] = getComponentsToInsertByType(items, ELEMENT);
+        const [hasElementInsertionComponents, elementInsertionComponents] =
+          getComponentsToInsertByType(items, ELEMENT);
 
         const [hasTextBlockBanners, textBlockBanners] = getComponentsToInsertByType(
           items,

package/src/hooks/helpers/get-components-to-insert-by-type.js

@@ -15,7 +15,9 @@ const getComponentsToInsertByType = (items, insertionType) => {
         }
       }) =>
         insertionTypeSetting === insertionType &&
-        (startingPoint !== 0 && repeatEvery !== 0 && maxRepetitions !== 0)
+        startingPoint !== 0 &&
+        repeatEvery !== 0 &&
+        maxRepetitions !== 0
     );
     return [!!componentsToInject.length, componentsToInject];
   }

package/src/hooks/helpers/inject-textblock-banners.js

@@ -11,14 +11,8 @@ const checkCanInjectBanner = (maxRepetitions, total) => {
 };
 
 const injectTextblockBanners = ({ componentName, parsedTextBlock, bannerContext }) => {
-  const {
-    bannerCounters,
-    banners,
-    siblings,
-    pbOptions,
-    bannerPositionCounter,
-    blockTracker
-  } = bannerContext;
+  const { bannerCounters, banners, siblings, pbOptions, bannerPositionCounter, blockTracker } =
+    bannerContext;
   const [collidedWithPrevious, collidedWithNext] = getCollisions(componentName, siblings);
   const updatedBlock = [];
   const { length: blocksLength } = parsedTextBlock;

package/src/hooks/index.js

@@ -9,3 +9,4 @@ export { default as useBannerInsertion } from './use-banner-insertion';
 export { default as useAppSyncEventHook } from './use-app-sync-event-hook';
 export { default as usePortal } from './use-portal';
 export { default as useFilterAggregationValues } from './use-filter-aggregation-values';
+export { default as useAppEventHook } from './use-app-event-hook';

package/src/hooks/use-app-event-hook.js

@@ -0,0 +1,34 @@
+import { AppContext } from '@blaze-cms/nextjs-components';
+import { useContext, useEffect, useState, useMemo } from 'react';
+
+const useAppEventHook = ({ eventName, data, props }) => {
+  const { blazeApp } = useContext(AppContext);
+  const hasListener =
+    blazeApp && blazeApp.events && blazeApp.events.hasListeners(`plugin:page-builder:${eventName}`);
+  const [loading, setLoading] = useState(hasListener);
+  const [updatedData, setUpdatedData] = useState(null);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const stableData = useMemo(() => data, [JSON.stringify(data)]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const stableProps = useMemo(() => props, [JSON.stringify(props)]);
+
+  useEffect(() => {
+    async function emitEvent() {
+      // setLoading(true);
+      await blazeApp.events.emitAsync(`plugin:page-builder:${eventName}`, {
+        data: updatedData,
+        props: stableProps
+      });
+      setLoading(false);
+    }
+    if (hasListener && updatedData) emitEvent();
+  }, [updatedData, eventName, hasListener, blazeApp.events, stableProps]);
+
+  useEffect(() => {
+    setUpdatedData(stableData);
+  }, [stableData]);
+
+  return { data: updatedData || stableData, loading };
+};
+export default useAppEventHook;

package/src/hooks/use-check-mobile-screen.js

@@ -20,14 +20,11 @@ const useCheckMobileScreen = () => {
     };
   }, []);
 
-  useEffect(
-    () => {
-      if (!defaultWidth) {
-        setWidth(initialWidth);
-      }
-    },
-    [initialWidth, width]
-  );
+  useEffect(() => {
+    if (!defaultWidth) {
+      setWidth(initialWidth);
+    }
+  }, [initialWidth, width]);
 
   return width <= MOBILE_WIDTH;
 };

package/src/hooks/use-get-entity-schema.js

@@ -20,7 +20,11 @@ function useGetEntitySchema(identifier, skipCondition = false) {
       shouldSkip = false;
     }
   }
-  const { data = cacheData, loading, error } = useQuery(getEntitySchema, {
+  const {
+    data = cacheData,
+    loading,
+    error
+  } = useQuery(getEntitySchema, {
     variables,
     skip: shouldSkip
   });

package/src/hooks/use-get-image-id-from-relation.js

@@ -10,6 +10,7 @@ function useGetImageIdFromRelation(
   hasImgSrc
 ) {
   const skip =
+    !actions ||
     !id ||
     hasImgSrc ||
     typeof id !== 'string' ||
@@ -18,13 +19,24 @@ function useGetImageIdFromRelation(
 
   const [imageRelationData = ''] = imageRelation;
   const [relationName = '', relationProp = ''] = imageRelationData.split('.');
-  const { getPublished, get } = actions;
+  const { getPublished, get } = actions || {};
   const getAction = isPreview ? get : getPublished || get;
 
-  const props = imageRelationData ? `${relationName} { ${relationProp} }` : 'id';
-  const { data = {}, loading, error } = useQuery(generateSingleItemQuery(getAction, props), {
+  let props;
+  if (imageRelationData) {
+    if (relationProp) {
+      props = imageRelationData ? `${relationName} { ${relationProp} }` : 'id';
+    } else {
+      props = relationName;
+    }
+  }
+  const {
+    data = {},
+    loading,
+    error
+  } = useQuery(generateSingleItemQuery(getAction, props), {
     variables: { id },
-    skip
+    skip: skip || !imageRelationData
   });
   return { data, loading, error };
 }

package/src/hooks/use-page-builder.js

@@ -4,20 +4,17 @@ import buildPBComponents from './helpers';
 function usePageBuilder(data) {
   const [page, setPage] = useState([]);
 
-  useEffect(
-    () => {
-      async function getBuiltComponents() {
-        const components = buildPBComponents(data);
+  useEffect(() => {
+    async function getBuiltComponents() {
+      const components = buildPBComponents(data);
 
-        setPage(components);
-      }
+      setPage(components);
+    }
 
-      if (data && !page.length) {
-        getBuiltComponents();
-      }
-    },
-    [data, page]
-  );
+    if (!!data && !page.length) {
+      getBuiltComponents();
+    }
+  }, [data, page]);
 
   return page;
 }

package/src/system-components/EditorMode/BlazeLogo.js

@@ -0,0 +1,48 @@
+import React, { useState, useEffect } from 'react';
+import { EDITOR_MODE_ICON_CLASS, EDITOR_MODE_HIGHLIGHT_CLASS } from './constants';
+
+const BlazeLogo = ({ childNode, ...props }) => {
+  const { id } = props;
+  const [style, setStyle] = useState({});
+
+  useEffect(() => {
+    if (!childNode) return;
+
+    const rect = childNode.getBoundingClientRect();
+    const left = rect.width / 2 + rect.left + window.scrollX - 20;
+    let top = rect.top - 20 + window.scrollY;
+    if (top <= 0) {
+      top = rect.bottom - 20;
+    }
+    const display = childNode.classList.contains(EDITOR_MODE_HIGHLIGHT_CLASS) ? null : 'none';
+    const newStyle = { display, top, left };
+    setStyle(newStyle);
+
+    const observer = new MutationObserver(mutations => {
+      mutations.forEach(mutation => {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+          const isHighlighted = childNode.classList.contains(EDITOR_MODE_HIGHLIGHT_CLASS);
+          setStyle({ ...newStyle, display: isHighlighted ? null : 'none' });
+        }
+      });
+    });
+    observer.observe(childNode, { attributes: true });
+    return () => observer.disconnect();
+  }, [childNode, id]);
+
+  // todo: fix icon hover/click activation while using position absolute
+  return (
+    <button type="button" className={EDITOR_MODE_ICON_CLASS} {...props} style={style}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="22" height="33">
+        <path
+          fill="currentColor"
+          transform="translate(1.0415 1.85962)"
+          d="M7.0214715 6.2017469C7.0214715 6.2017469 4.6948299 13.380771 5.2965479 15.065234C5.6174636 15.947572 6.3796396 16.18821 7.3022733 15.386085C9.1074257 13.781834 13.078762 6.3621721 9.949831 0.42644304C8.7463951 -1.8596147 18.293648 5.1589837 16.328037 18.755013C16.087351 20.559793 16.809412 19.998306 17.250671 19.236286C19.176168 15.947572 17.972733 11.616095 17.972733 10.894181C17.972733 10.172268 19.657541 12.939602 19.777885 18.353949C19.89823 23.768295 17.050098 29.022219 11.393953 29.98477C10.03006 30.225407 13.199106 27.578392 13.640366 24.610529C13.68048 24.329784 10.39109 28.300306 9.5888004 27.738817C9.2277699 27.49818 15.36529 19.877987 13.199106 13.300558C13.158992 13.140133 11.754984 24.409996 6.3796396 27.097116C3.3309369 28.621155 0.60315031 25.051697 0.12177619 21.963514C-1.0415446 13.862046 6.4999828 8.7284422 7.0214715 6.2017469Z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </button>
+  );
+};
+
+export default BlazeLogo;

package/src/system-components/EditorMode/PbWrapper.js

@@ -0,0 +1,27 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useMainContext } from '@blaze-cms/nextjs-components';
+import addEditorModeEventListeners from './helpers/add-editor-mode-event-listeners';
+import BlazeLogo from './BlazeLogo';
+
+const PbWrapper = ({ name, type = 'start' }) => {
+  const ref = useRef(null);
+  const [logoProps, setLogoProps] = useState(null);
+  const { debugOptions: { adminHref } = {} } = useMainContext();
+
+  useEffect(() => {
+    const unmount = addEditorModeEventListeners({ ref, name, adminHref, type, setLogoProps });
+
+    return unmount;
+  }, [adminHref, name, type]);
+  const TagName = `pb-wrapper-${type}`;
+
+  return (
+    <>
+      <TagName ref={ref} pb-component-name={name} />
+      {type === 'end' && logoProps && createPortal(<BlazeLogo {...logoProps} />, document.body)}
+    </>
+  );
+};
+
+export default PbWrapper;

package/src/system-components/EditorMode/constants.js

@@ -0,0 +1,2 @@
+export const EDITOR_MODE_HIGHLIGHT_CLASS = 'blaze-pb-editor-highlight';
+export const EDITOR_MODE_ICON_CLASS = 'blaze-pb-editor-icon';