@builder.io/react 6.0.2 → 6.0.4-0

package/src/components/builder-block.component.tsx

@@ -20,6 +20,31 @@ const kebabCaseToCamelCase = (str = '') =>
 
 const Device = { desktop: 0, tablet: 1, mobile: 2 };
 
+// Deep clone a block but without cloning any child blocks
+export function deepCloneWithConditions<T = any>(obj: T): T {
+  if (obj === null || typeof obj !== 'object') {
+    return obj;
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map((item: any) => deepCloneWithConditions(item)) as T;
+  }
+
+  if ((obj as any)['@type'] === '@builder.io/sdk:Element') {
+    return obj;
+  }
+
+  const clonedObj: any = {};
+
+  for (const key in obj) {
+    if (key !== 'meta' && Object.prototype.hasOwnProperty.call(obj, key)) {
+      clonedObj[key] = deepCloneWithConditions(obj[key]);
+    }
+  }
+
+  return clonedObj;
+}
+
 const voidElements = new Set([
   'area',
   'base',
@@ -135,7 +160,7 @@ export class BuilderBlock extends React.Component<
     return this.props.block;
   }
 
-  get emotionCss() {
+  emotionCss(responsiveStyles: BuilderElement['responsiveStyles']) {
     let initialAnimationStepStyles: any;
     const { block } = this;
     const animation = block.animations && block.animations[0];
@@ -148,15 +173,14 @@ export class BuilderBlock extends React.Component<
     }
 
     const reversedNames = sizeNames.slice().reverse();
-    const self = this.block;
     const styles: any = {};
-    if (self.responsiveStyles) {
+    if (responsiveStyles) {
       for (const size of reversedNames) {
         if (size === 'large') {
           if (!this.props.emailMode) {
             styles[`&.builder-block`] = Object.assign(
               {},
-              self.responsiveStyles[size],
+              responsiveStyles[size],
               initialAnimationStepStyles
             );
           }
@@ -165,7 +189,7 @@ export class BuilderBlock extends React.Component<
             this.privateState.context.builderContent?.meta?.breakpoints || {}
           );
           styles[`@media only screen and (max-width: ${sizesPerBreakpoints[size].max}px)`] = {
-            '&.builder-block': self.responsiveStyles[size],
+            '&.builder-block': responsiveStyles[size],
           };
         }
       }
@@ -211,12 +235,10 @@ export class BuilderBlock extends React.Component<
   }
 
   onWindowMessage = (event: MessageEvent) => {
-    const isTrusted = Builder.isTrustedHostForEvent(event);
-    if (!isTrusted) return;
-
     const message = event.data;
-    if (!message) return;
-
+    if (!message) {
+      return;
+    }
     switch (message.type) {
       case 'builder.selectionChange': {
         const { data } = message;
@@ -373,9 +395,9 @@ export class BuilderBlock extends React.Component<
     const TextTag: any = 'span';
 
     let options: any = {
-      // Attributes?
       ...block.properties,
-      style: {}, // this.styles
+      style: {},
+      responsiveStyles: fastClone(block.responsiveStyles || {}),
     };
 
     options = {
@@ -384,7 +406,7 @@ export class BuilderBlock extends React.Component<
     };
 
     if (block.component) {
-      options.component = fastClone(block.component);
+      options.component = deepCloneWithConditions(block.component);
     }
 
     // Binding should be properties to href or href?
@@ -491,7 +513,7 @@ export class BuilderBlock extends React.Component<
     }
 
     const finalOptions: { [key: string]: string } = {
-      ...omit(options, ['class', 'component', 'attr']),
+      ...omit(options, ['class', 'component', 'attr', 'responsiveStyles']),
       [typeof TagName === 'string' && !TagName.includes('-') ? 'className' : 'class']:
         `builder-block ${this.id}${block.class ? ` ${block.class}` : ''}${
           block.component && !(['Image', 'Video', 'Banner'].indexOf(componentName) > -1)
@@ -558,7 +580,7 @@ export class BuilderBlock extends React.Component<
         <ClassNames>
           {({ css, cx }) => {
             if (!this.props.emailMode) {
-              const addClass = ' ' + css(this.emotionCss);
+              const addClass = ' ' + css(this.emotionCss(options.responsiveStyles));
               if (finalOptions.class) {
                 finalOptions.class += addClass;
               }

package/.yarnrc.yml

@@ -1 +0,0 @@
-npmPublishAccess: "public"