@builder.io/sdk-react 0.1.9 → 0.1.11

package/packages/react/src/components/render-block/render-block.jsx

@@ -18,7 +18,7 @@ import RenderComponent from "./render-component";
 import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
 import { checkIsDefined } from "../../helpers/nullable.js";
 
-export default function RenderBlock(props) {
+function RenderBlock(props) {
   const [component, setComponent] = useState(() =>
     getComponent({
       block: props.block,
@@ -217,3 +217,5 @@ export default function RenderBlock(props) {
     </>
   );
 }
+
+export default RenderBlock;

package/packages/react/src/components/render-block/render-component.jsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import BlockStyles from "./block-styles";
 import RenderBlock from "./render-block";
 
-export default function RenderComponent(props) {
+function RenderComponent(props) {
   const ComponentRefRef = props.componentRef;
 
   return (
@@ -31,3 +31,5 @@ export default function RenderComponent(props) {
     </>
   );
 }
+
+export default RenderComponent;

package/packages/react/src/components/render-block/render-repeated-block.jsx

@@ -3,7 +3,7 @@ import { useContext } from "react";
 import BuilderContext from "../../context/builder.context.js";
 import RenderBlock from "./render-block";
 
-export default function RenderRepeatedBlock(props) {
+function RenderRepeatedBlock(props) {
   return (
     <BuilderContext.Provider
       value={{
@@ -20,3 +20,5 @@ export default function RenderRepeatedBlock(props) {
     </BuilderContext.Provider>
   );
 }
+
+export default RenderRepeatedBlock;

package/packages/react/src/components/render-blocks.jsx

@@ -5,7 +5,7 @@ import { isEditing } from "../functions/is-editing.js";
 import BlockStyles from "./render-block/block-styles";
 import RenderBlock from "./render-block/render-block";
 
-export default function RenderBlocks(props) {
+function RenderBlocks(props) {
   function className() {
     return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
   }
@@ -87,3 +87,5 @@ align-items: stretch;
     </>
   );
 }
+
+export default RenderBlocks;

package/packages/react/src/components/render-content/builder-editing.jsx

@@ -1,5 +1,7 @@
 import * as React from "react";
 
-export default function BuilderEditing(props) {
+function BuilderEditing(props) {
   return <div />;
 }
+
+export default BuilderEditing;

package/packages/react/src/components/render-content/components/render-styles.jsx

@@ -4,7 +4,7 @@ import RenderInlinedStyles from "../../render-inlined-styles";
 import { getCss } from "./render-styles.helpers";
 import { getFontCss } from "./render-styles.helpers";
 
-export default function RenderContentStyles(props) {
+function RenderContentStyles(props) {
   const [injectedStyles, setInjectedStyles] = useState(
     () => `
 ${getCss({
@@ -14,8 +14,23 @@ ${getCss({
 ${getFontCss({
   customFonts: props.customFonts,
 })}
+
+.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
+margin: 0;
+}
+.builder-text > p, .builder-text > .builder-paragraph {
+color: inherit;
+line-height: inherit;
+letter-spacing: inherit;
+font-weight: inherit;
+font-size: inherit;
+text-align: inherit;
+font-family: inherit;
+}
 `
   );
 
   return <RenderInlinedStyles styles={injectedStyles} />;
 }
+
+export default RenderContentStyles;

package/packages/react/src/components/render-content/render-content.jsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { useState, useContext, useRef, useEffect } from "react";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
-import { TARGET } from "../../constants/target.js";
 import { evaluate } from "../../functions/evaluate.js";
 import { getContent } from "../../functions/get-content/index.js";
 import { fetch } from "../../functions/get-fetch.js";
@@ -26,8 +25,9 @@ import {
   getContentInitialValue,
   getContextStateInitialValue,
 } from "./render-content.helpers.js";
+import { TARGET } from "../../constants/target.js";
 
-export default function RenderContent(props) {
+function RenderContent(props) {
   const elementRef = useRef(null);
   const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
 
@@ -231,13 +231,6 @@ export default function RenderContent(props) {
     }
   }
 
-  function shouldRenderContentStyles() {
-    return Boolean(
-      (useContent?.data?.cssCode || useContent?.data?.customFonts?.length) &&
-        TARGET !== "reactNative"
-    );
-  }
-
   useEffect(() => {
     if (!props.apiKey) {
       console.error(
@@ -293,7 +286,7 @@ export default function RenderContent(props) {
 
         /**
          * Make sure that:
-         * - the preview model name is the same as the one we're rendering, since there can be multiple models rendered    *  at the same time, e.g. header/page/footer.    * - the API key is the same, since we don't want to preview content from other organizations.
+         * - the preview model name is the same as the one we're rendering, since there can be multiple models rendered  *  at the same time, e.g. header/page/footer.  * - the API key is the same, since we don't want to preview content from other organizations.
          *
          * TO-DO: should we check that the preview item ID is the same as the initial one being rendered? Or would
          * this break scenarios where the item is not published yet?
@@ -361,12 +354,14 @@ export default function RenderContent(props) {
             builder-content-id={useContent?.id}
             builder-model={props.model}
           >
-            {shouldRenderContentStyles() ? (
-              <RenderContentStyles
-                contentId={useContent?.id}
-                cssCode={useContent?.data?.cssCode}
-                customFonts={useContent?.data?.customFonts}
-              />
+            {TARGET !== "reactNative" ? (
+              <>
+                <RenderContentStyles
+                  contentId={useContent?.id}
+                  cssCode={useContent?.data?.cssCode}
+                  customFonts={useContent?.data?.customFonts}
+                />
+              </>
             ) : null}
 
             <RenderBlocks
@@ -379,3 +374,5 @@ export default function RenderContent(props) {
     </builderContext.Provider>
   );
 }
+
+export default RenderContent;

package/packages/react/src/components/render-inlined-styles.jsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { TARGET } from "../constants/target.js";
 
-export default function RenderInlinedStyles(props) {
+function RenderInlinedStyles(props) {
   function injectedStyleScript() {
     return `<${tag()}>${props.styles}</${tag()}>`;
   }
@@ -26,3 +26,5 @@ export default function RenderInlinedStyles(props) {
     </>
   );
 }
+
+export default RenderInlinedStyles;

package/packages/react/src/functions/is-editing.js

@@ -1,6 +1,7 @@
+import { TARGET } from "../constants/target.js";
 import { isIframe } from "./is-iframe.js";
 function isEditing() {
-  return isIframe() && window.location.search.indexOf("builder.frameEditing=") !== -1;
+  return isIframe() && (TARGET === "reactNative" || window.location.search.indexOf("builder.frameEditing=") !== -1);
 }
 export {
   isEditing

package/packages/react/src/index.js

@@ -1,5 +1,4 @@
 export * from "./index-helpers/top-of-file.js";
-import "./scripts/init-editing.js";
 export * from "./index-helpers/blocks-exports.js";
 export * from "./functions/is-editing.js";
 export * from "./functions/is-previewing.js";

package/packages/rsc/src/blocks/BaseText.jsx

@@ -1,10 +1,12 @@
 import * as React from "react";
 import BuilderContext from "../context/builder.context.js";
 
-export default function BaseText(props) {
+function BaseText(props) {
   const _context = { ...props["_context"] };
 
   const builderContext = _context["BuilderContext"];
 
   return <span style={builderContext.inheritedStyles}>{props.text}</span>;
 }
+
+export default BaseText;

package/packages/rsc/src/blocks/button/button.jsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-export default function Button(props) {
+function Button(props) {
   const _context = { ...props["_context"] };
 
   return (
@@ -27,3 +27,5 @@ all: unset;
     </>
   );
 }
+
+export default Button;

package/packages/rsc/src/blocks/columns/columns.jsx

@@ -6,7 +6,7 @@ import { TARGET } from "../../constants/target.js";
 import { convertStyleMapToCSS } from "../../helpers/css";
 import BuilderContext from "../../context/builder.context.js";
 
-export default function Columns(props) {
+function Columns(props) {
   const _context = { ...props["_context"] };
 
   const state = {
@@ -85,26 +85,26 @@ export default function Columns(props) {
     },
     get columnsStyles() {
       return `
-      @media (max-width: ${state.getWidthForBreakpointSize("medium")}px) {
-        .${props.builderBlock.id}-breakpoints {
-          ${convertStyleMapToCSS(state.columnStyleObjects.columns.medium)}
-        }
+    @media (max-width: ${state.getWidthForBreakpointSize("medium")}px) {
+      .${props.builderBlock.id}-breakpoints {
+        ${convertStyleMapToCSS(state.columnStyleObjects.columns.medium)}
+      }
 
-        .${props.builderBlock.id}-breakpoints > .builder-column {
-          ${convertStyleMapToCSS(state.columnStyleObjects.column.medium)}
-        }
+      .${props.builderBlock.id}-breakpoints > .builder-column {
+        ${convertStyleMapToCSS(state.columnStyleObjects.column.medium)}
       }
+    }
 
-      @media (max-width: ${state.getWidthForBreakpointSize("small")}px) {
-        .${props.builderBlock.id}-breakpoints {
-          ${convertStyleMapToCSS(state.columnStyleObjects.columns.small)}
-        }
+    @media (max-width: ${state.getWidthForBreakpointSize("small")}px) {
+      .${props.builderBlock.id}-breakpoints {
+        ${convertStyleMapToCSS(state.columnStyleObjects.columns.small)}
+      }
 
-        .${props.builderBlock.id}-breakpoints > .builder-column {
-          ${convertStyleMapToCSS(state.columnStyleObjects.column.small)}
-        }
-      },
-    `;
+      .${props.builderBlock.id}-breakpoints > .builder-column {
+        ${convertStyleMapToCSS(state.columnStyleObjects.column.small)}
+      }
+    },
+  `;
     },
     get reactNativeColumnsStyles() {
       return this.columnStyleObjects.columns.small;
@@ -173,3 +173,5 @@ align-items: stretch;
     </>
   );
 }
+
+export default Columns;

package/packages/rsc/src/blocks/custom-code/custom-code.jsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-export default function CustomCode(props) {
+function CustomCode(props) {
   const _context = { ...props["_context"] };
 
   const state = {
@@ -53,3 +53,5 @@ export default function CustomCode(props) {
     />
   );
 }
+
+export default CustomCode;

package/packages/rsc/src/blocks/embed/embed.jsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { isJsScript } from "./helpers.js";
 
-export default function Embed(props) {
+function Embed(props) {
   const _context = { ...props["_context"] };
 
   const state = {
@@ -41,3 +41,5 @@ export default function Embed(props) {
     />
   );
 }
+
+export default Embed;

package/packages/rsc/src/blocks/form/form.jsx

@@ -3,7 +3,7 @@ import RenderBlock from "../../components/render-block/render-block";
 import BuilderBlocks from "../../components/render-blocks";
 import { isEditing } from "../../functions/is-editing.js";
 
-export default function FormComponent(props) {
+function FormComponent(props) {
   const _context = { ...props["_context"] };
 
   const state = {
@@ -137,7 +137,7 @@ export default function FormComponent(props) {
                 get(body, props.errorMessagePath);
               if (message) {
                 if (typeof message !== "string") {
-                  /* TODO: ideally convert json to yaml so it woul dbe like            error: - email has been taken */ message =
+                  /* TODO: ideally convert json to yaml so it woul dbe like          error: - email has been taken */ message =
                     JSON.stringify(message);
                 }
                 state.formErrorMessage = message;
@@ -257,3 +257,4 @@ export default function FormComponent(props) {
     </>
   );
 }
+export default FormComponent;

package/packages/rsc/src/blocks/fragment/fragment.jsx

@@ -1,7 +1,9 @@
 import * as React from "react";
 
-export default function FragmentComponent(props) {
+function FragmentComponent(props) {
   const _context = { ...props["_context"] };
 
   return <span>{props.children}</span>;
 }
+
+export default FragmentComponent;

package/packages/rsc/src/blocks/image/component-info.js

@@ -17,7 +17,7 @@ const componentInfo = {
       bubble: true,
       allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
       required: true,
-      defaultValue: "https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+      defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
       onChange: serializeFn((options) => {
         const DEFAULT_ASPECT_RATIO = 0.7041;
         options.delete("srcset");

package/packages/rsc/src/blocks/image/image.jsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { getSrcSet } from "./image.helpers.js";
 
-export default function Image(props) {
+function Image(props) {
   const _context = { ...props["_context"] };
 
   const state = {
@@ -120,3 +120,5 @@ height: 100%;
     </>
   );
 }
+
+export default Image;

package/packages/rsc/src/blocks/img/img.jsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { isEditing } from "../../functions/is-editing.js";
 
-export default function ImgComponent(props) {
+function ImgComponent(props) {
   const _context = { ...props["_context"] };
 
   return (
@@ -17,3 +17,5 @@ export default function ImgComponent(props) {
     />
   );
 }
+
+export default ImgComponent;

package/packages/rsc/src/blocks/input/input.jsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { isEditing } from "../../functions/is-editing.js";
 
-export default function FormInputComponent(props) {
+function FormInputComponent(props) {
   const _context = { ...props["_context"] };
 
   return (
@@ -19,3 +19,5 @@ export default function FormInputComponent(props) {
     />
   );
 }
+
+export default FormInputComponent;

package/packages/rsc/src/blocks/raw-text/raw-text.jsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-export default function RawText(props) {
+function RawText(props) {
   const _context = { ...props["_context"] };
 
   return (
@@ -10,3 +10,5 @@ export default function RawText(props) {
     />
   );
 }
+
+export default RawText;

package/packages/rsc/src/blocks/section/section.jsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-export default function SectionComponent(props) {
+function SectionComponent(props) {
   const _context = { ...props["_context"] };
 
   return (
@@ -23,3 +23,5 @@ export default function SectionComponent(props) {
     </section>
   );
 }
+
+export default SectionComponent;

package/packages/rsc/src/blocks/select/select.jsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { isEditing } from "../../functions/is-editing.js";
 
-export default function SelectComponent(props) {
+function SelectComponent(props) {
   const _context = { ...props["_context"] };
 
   return (
@@ -20,3 +20,5 @@ export default function SelectComponent(props) {
     </select>
   );
 }
+
+export default SelectComponent;

package/packages/rsc/src/blocks/submit-button/submit-button.jsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-export default function SubmitButton(props) {
+function SubmitButton(props) {
   const _context = { ...props["_context"] };
 
   return (
@@ -9,3 +9,5 @@ export default function SubmitButton(props) {
     </button>
   );
 }
+
+export default SubmitButton;

package/packages/rsc/src/blocks/symbol/symbol.jsx

@@ -4,7 +4,7 @@ import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
 import { TARGET } from "../../constants/target";
 
-export default function Symbol(props) {
+function Symbol(props) {
   const _context = { ...props["_context"] };
 
   const state = {
@@ -54,3 +54,5 @@ export default function Symbol(props) {
     </div>
   );
 }
+
+export default Symbol;

package/packages/rsc/src/blocks/text/text.jsx

@@ -1,12 +1,17 @@
 import * as React from "react";
 
-export default function Text(props) {
+function Text(props) {
   const _context = { ...props["_context"] };
 
   return (
     <span
       className="builder-text"
       dangerouslySetInnerHTML={{ __html: props.text }}
+      style={{
+        outline: "none",
+      }}
     />
   );
 }
+
+export default Text;

package/packages/rsc/src/blocks/textarea/textarea.jsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-export default function Textarea(props) {
+function Textarea(props) {
   const _context = { ...props["_context"] };
 
   return (
@@ -13,3 +13,5 @@ export default function Textarea(props) {
     />
   );
 }
+
+export default Textarea;

package/packages/rsc/src/blocks/video/video.jsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-export default function Video(props) {
+function Video(props) {
   const _context = { ...props["_context"] };
 
   const state = {
@@ -59,3 +59,5 @@ export default function Video(props) {
     />
   );
 }
+
+export default Video;

package/packages/rsc/src/components/render-block/block-styles.jsx

@@ -9,7 +9,7 @@ import { createCssClass } from "../../helpers/css.js";
 import { checkIsDefined } from "../../helpers/nullable.js";
 import RenderInlinedStyles from "../render-inlined-styles";
 
-export default function BlockStyles(props) {
+function BlockStyles(props) {
   const _context = { ...props["_context"] };
 
   const state = {
@@ -81,3 +81,5 @@ export default function BlockStyles(props) {
     </>
   );
 }
+
+export default BlockStyles;

package/packages/rsc/src/components/render-block/render-block.jsx

@@ -17,7 +17,7 @@ import RenderComponent from "./render-component";
 import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
 import { checkIsDefined } from "../../helpers/nullable.js";
 
-export default function RenderBlock(props) {
+function RenderBlock(props) {
   const _context = { ...props["_context"] };
 
   const state = {
@@ -217,3 +217,5 @@ export default function RenderBlock(props) {
     </>
   );
 }
+
+export default RenderBlock;

package/packages/rsc/src/components/render-block/render-component.jsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import BlockStyles from "./block-styles";
 import RenderBlock from "./render-block";
 
-export default function RenderComponent(props) {
+function RenderComponent(props) {
   const _context = { ...props["_context"] };
 
   const ComponentRefRef = props.componentRef;
@@ -35,3 +35,5 @@ export default function RenderComponent(props) {
     </>
   );
 }
+
+export default RenderComponent;

package/packages/rsc/src/components/render-block/render-repeated-block.jsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import BuilderContext from "../../context/builder.context.js";
 import RenderBlock from "./render-block";
 
-export default function RenderRepeatedBlock(props) {
+function RenderRepeatedBlock(props) {
   const _context = { ...props["_context"] };
 
   _context.BuilderContext = {
@@ -23,3 +23,5 @@ export default function RenderRepeatedBlock(props) {
     />
   );
 }
+
+export default RenderRepeatedBlock;

package/packages/rsc/src/components/render-blocks.jsx

@@ -4,7 +4,7 @@ import { isEditing } from "../functions/is-editing.js";
 import BlockStyles from "./render-block/block-styles";
 import RenderBlock from "./render-block/render-block";
 
-export default function RenderBlocks(props) {
+function RenderBlocks(props) {
   const _context = { ...props["_context"] };
 
   const state = {
@@ -88,3 +88,5 @@ align-items: stretch;
     </>
   );
 }
+
+export default RenderBlocks;

package/packages/rsc/src/components/render-content/components/render-styles.jsx

@@ -3,7 +3,7 @@ import RenderInlinedStyles from "../../render-inlined-styles";
 import { getCss } from "./render-styles.helpers";
 import { getFontCss } from "./render-styles.helpers";
 
-export default function RenderContentStyles(props) {
+function RenderContentStyles(props) {
   const _context = { ...props["_context"] };
 
   const state = {
@@ -15,6 +15,19 @@ ${getCss({
 ${getFontCss({
   customFonts: props.customFonts,
 })}
+
+.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
+margin: 0;
+}
+.builder-text > p, .builder-text > .builder-paragraph {
+color: inherit;
+line-height: inherit;
+letter-spacing: inherit;
+font-weight: inherit;
+font-size: inherit;
+text-align: inherit;
+font-family: inherit;
+}
 `,
   };
 
@@ -22,3 +35,5 @@ ${getFontCss({
     <RenderInlinedStyles styles={state.injectedStyles} _context={_context} />
   );
 }
+
+export default RenderContentStyles;