@builder.io/sdk-react 0.1.9 → 0.1.11

package/dist/rsc/blocks/img/img.js

@@ -1,9 +1,10 @@
 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 (React.createElement("img", { style: {
             objectFit: props.backgroundSize || "cover",
             objectPosition: props.backgroundPosition || "center",
         }, key: (isEditing() && props.imgSrc) || "default-key", alt: props.altText, src: props.imgSrc || props.image, ...props.attributes }));
 }
+export default ImgComponent;

package/dist/rsc/blocks/input/input.js

@@ -1,6 +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 (React.createElement("input", { ...props.attributes, key: isEditing() && props.defaultValue ? props.defaultValue : "default-key", placeholder: props.placeholder, type: props.type, name: props.name, value: props.value, defaultValue: props.defaultValue, required: props.required }));
 }
+export default FormInputComponent;

package/dist/rsc/blocks/raw-text/raw-text.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-export default function RawText(props) {
+function RawText(props) {
     const _context = { ...props["_context"] };
     return (React.createElement("span", { className: props.attributes?.class || props.attributes?.className, dangerouslySetInnerHTML: { __html: props.text || "" } }));
 }
+export default RawText;

package/dist/rsc/blocks/section/section.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-export default function SectionComponent(props) {
+function SectionComponent(props) {
     const _context = { ...props["_context"] };
     return (React.createElement("section", { ...props.attributes, style: {
             width: "100%",
@@ -14,3 +14,4 @@ export default function SectionComponent(props) {
             marginRight: "auto",
         } }, props.children));
 }
+export default SectionComponent;

package/dist/rsc/blocks/select/select.js

@@ -1,6 +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 (React.createElement("select", { ...props.attributes, value: props.value, key: isEditing() && props.defaultValue ? props.defaultValue : "default-key", defaultValue: props.defaultValue, name: props.name }, props.options?.map((option) => (React.createElement("option", { value: option.value }, option.name || option.value)))));
 }
+export default SelectComponent;

package/dist/rsc/blocks/submit-button/submit-button.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-export default function SubmitButton(props) {
+function SubmitButton(props) {
     const _context = { ...props["_context"] };
     return (React.createElement("button", { type: "submit", ...props.attributes }, props.text));
 }
+export default SubmitButton;

package/dist/rsc/blocks/symbol/symbol.js

@@ -3,7 +3,7 @@ import RenderContent from "../../components/render-content/render-content";
 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 = {
         get className() {
@@ -35,3 +35,4 @@ export default function Symbol(props) {
                 ...props.symbol?.content?.data?.state,
             }, model: props.symbol?.model, content: state.contentToUse, _context: _context })));
 }
+export default Symbol;

package/dist/rsc/blocks/text/text.js

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

package/dist/rsc/blocks/textarea/textarea.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-export default function Textarea(props) {
+function Textarea(props) {
     const _context = { ...props["_context"] };
     return (React.createElement("textarea", { ...props.attributes, placeholder: props.placeholder, name: props.name, value: props.value, defaultValue: props.defaultValue }));
 }
+export default Textarea;

package/dist/rsc/blocks/video/video.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-export default function Video(props) {
+function Video(props) {
     const _context = { ...props["_context"] };
     const state = {
         get videoProps() {
@@ -49,3 +49,4 @@ export default function Video(props) {
             borderRadius: 1,
         }, src: props.video || "no-src", poster: props.posterImage }));
 }
+export default Video;

package/dist/rsc/components/render-block/block-styles.js

@@ -5,7 +5,7 @@ import { getProcessedBlock } from "../../functions/get-processed-block.js";
 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 = {
         get useBlock() {
@@ -60,3 +60,4 @@ export default function BlockStyles(props) {
     return (React.createElement(React.Fragment, null, TARGET !== "reactNative" && state.css && state.canShowBlock ? (React.createElement(React.Fragment, null,
         React.createElement(RenderInlinedStyles, { styles: state.css, _context: _context }))) : null));
 }
+export default BlockStyles;

package/dist/rsc/components/render-block/render-block.js

@@ -12,7 +12,7 @@ import { extractTextStyles } from "../../functions/extract-text-styles.js";
 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 = {
         component: getComponent({
@@ -150,3 +150,4 @@ export default function RenderBlock(props) {
                 state.childrenWithoutParentComponent?.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: state.childrenContext, _context: _context }))),
                 state.childrenWithoutParentComponent?.map((child) => (React.createElement(BlockStyles, { key: "block-style-" + child.id, block: child, context: state.childrenContext, _context: _context })))))) : null)) : (React.createElement(RenderComponent, { ...state.renderComponentProps, _context: _context })))) : null));
 }
+export default RenderBlock;

package/dist/rsc/components/render-block/render-component.js

@@ -1,7 +1,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;
     return (React.createElement(React.Fragment, null, props.componentRef ? (React.createElement(React.Fragment, null,
@@ -9,3 +9,4 @@ export default function RenderComponent(props) {
             props.blockChildren?.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: props.context, _context: _context }))),
             props.blockChildren?.map((child) => (React.createElement(BlockStyles, { key: "block-style-" + child.id, block: child, context: props.context, _context: _context })))))) : null));
 }
+export default RenderComponent;

package/dist/rsc/components/render-block/render-repeated-block.js

@@ -1,7 +1,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 = {
         content: props.repeatContext.content,
@@ -14,3 +14,4 @@ export default function RenderRepeatedBlock(props) {
     };
     return (React.createElement(RenderBlock, { block: props.block, context: props.repeatContext, _context: _context }));
 }
+export default RenderRepeatedBlock;

package/dist/rsc/components/render-blocks.js

@@ -3,7 +3,7 @@ import BuilderContext from "../context/builder.context.js";
 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 = {
         get className() {
@@ -45,3 +45,4 @@ flex-direction: column;
 align-items: stretch;
 }`)));
 }
+export default RenderBlocks;

package/dist/rsc/components/render-content/components/render-styles.js

@@ -2,7 +2,7 @@ import * as React from "react";
 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 = {
         injectedStyles: `
@@ -13,7 +13,21 @@ ${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 (React.createElement(RenderInlinedStyles, { styles: state.injectedStyles, _context: _context }));
 }
+export default RenderContentStyles;

package/dist/rsc/components/render-content/render-content.js

@@ -1,6 +1,5 @@
 import * as React 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";
@@ -16,7 +15,8 @@ import { registerInsertMenu, setupBrowserForEditing, } from "../../scripts/init-
 import { checkIsDefined } from "../../helpers/nullable.js";
 import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
 import { getContentInitialValue, getContextStateInitialValue, } from "./render-content.helpers.js";
-export default function RenderContent(props) {
+import { TARGET } from "../../constants/target.js";
+function RenderContent(props) {
     const _context = { ...props["_context"] };
     const state = {
         forceReRenderCount: 0,
@@ -185,11 +185,6 @@ export default function RenderContent(props) {
                 }));
             }
         },
-        get shouldRenderContentStyles() {
-            return Boolean((state.useContent?.data?.cssCode ||
-                state.useContent?.data?.customFonts?.length) &&
-                TARGET !== "reactNative");
-        },
     };
     _context.builderContext = {
         content: state.useContent,
@@ -201,6 +196,8 @@ export default function RenderContent(props) {
     };
     return (React.createElement(React.Fragment, null, state.useContent ? (React.createElement(React.Fragment, null,
         React.createElement("div", { "builder-content-id": state.useContent?.id, "builder-model": props.model },
-            state.shouldRenderContentStyles ? (React.createElement(RenderContentStyles, { contentId: state.useContent?.id, cssCode: state.useContent?.data?.cssCode, customFonts: state.useContent?.data?.customFonts, _context: _context })) : null,
+            TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
+                React.createElement(RenderContentStyles, { contentId: state.useContent?.id, cssCode: state.useContent?.data?.cssCode, customFonts: state.useContent?.data?.customFonts, _context: _context }))) : null,
             React.createElement(RenderBlocks, { blocks: state.useContent?.data?.blocks, key: state.forceReRenderCount, _context: _context })))) : null));
 }
+export default RenderContent;

package/dist/rsc/components/render-inlined-styles.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { TARGET } from "../constants/target.js";
-export default function RenderInlinedStyles(props) {
+function RenderInlinedStyles(props) {
     const _context = { ...props["_context"] };
     const state = {
         get injectedStyleScript() {
@@ -16,3 +16,4 @@ export default function RenderInlinedStyles(props) {
     return (React.createElement(React.Fragment, null, TARGET === "svelte" || TARGET === "qwik" ? (React.createElement(React.Fragment, null,
         React.createElement(TagRef, { dangerouslySetInnerHTML: { __html: props.styles } }))) : (React.createElement(TagRef, null, props.styles))));
 }
+export default RenderInlinedStyles;

package/dist/rsc/functions/is-editing.js

@@ -1,5 +1,6 @@
+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/dist/rsc/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react",
   "description": "Builder.io SDK for React",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "main": "src/index.js",
   "type": "module",
   "exports": {

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

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

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-export default function Button(props) {
+function Button(props) {
   return (
     <>
       {props.link ? (
@@ -25,3 +25,5 @@ all: unset;
     </>
   );
 }
+
+export default Button;

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

@@ -7,7 +7,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) {
   function getGutterSize() {
     return typeof props.space === "number" ? props.space || 0 : 20;
   }
@@ -91,26 +91,26 @@ export default function Columns(props) {
 
   function columnsStyles() {
     return `
-      @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
-        .${props.builderBlock.id}-breakpoints {
-          ${convertStyleMapToCSS(columnStyleObjects().columns.medium)}
-        }
+    @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
+      .${props.builderBlock.id}-breakpoints {
+        ${convertStyleMapToCSS(columnStyleObjects().columns.medium)}
+      }
 
-        .${props.builderBlock.id}-breakpoints > .builder-column {
-          ${convertStyleMapToCSS(columnStyleObjects().column.medium)}
-        }
+      .${props.builderBlock.id}-breakpoints > .builder-column {
+        ${convertStyleMapToCSS(columnStyleObjects().column.medium)}
       }
+    }
 
-      @media (max-width: ${getWidthForBreakpointSize("small")}px) {
-        .${props.builderBlock.id}-breakpoints {
-          ${convertStyleMapToCSS(columnStyleObjects().columns.small)}
-        }
+    @media (max-width: ${getWidthForBreakpointSize("small")}px) {
+      .${props.builderBlock.id}-breakpoints {
+        ${convertStyleMapToCSS(columnStyleObjects().columns.small)}
+      }
 
-        .${props.builderBlock.id}-breakpoints > .builder-column {
-          ${convertStyleMapToCSS(columnStyleObjects().column.small)}
-        }
-      },
-    `;
+      .${props.builderBlock.id}-breakpoints > .builder-column {
+        ${convertStyleMapToCSS(columnStyleObjects().column.small)}
+      }
+    },
+  `;
   }
 
   function reactNativeColumnsStyles() {
@@ -174,3 +174,5 @@ align-items: stretch;
     </>
   );
 }
+
+export default Columns;

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useState, useRef, useEffect } from "react";
 
-export default function CustomCode(props) {
+function CustomCode(props) {
   const elem = useRef(null);
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
 
@@ -62,3 +62,5 @@ export default function CustomCode(props) {
     />
   );
 }
+
+export default CustomCode;

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

@@ -2,7 +2,7 @@ import * as React from "react";
 import { useState, useRef, useEffect } from "react";
 import { isJsScript } from "./helpers.js";
 
-export default function Embed(props) {
+function Embed(props) {
   const elem = useRef(null);
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
 
@@ -47,3 +47,5 @@ export default function Embed(props) {
     />
   );
 }
+
+export default Embed;

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

@@ -4,7 +4,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 formRef = useRef(null);
   const [formState, setFormState] = useState(() => "unsubmitted");
 
@@ -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);
               }
               setFormErrorMessage(message);
@@ -251,3 +251,4 @@ export default function FormComponent(props) {
     </>
   );
 }
+export default FormComponent;

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

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

package/packages/react/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/react/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) {
   function srcSetToUse() {
     const imageToUse = props.image || props.src;
     const url = imageToUse;
@@ -118,3 +118,5 @@ height: 100%;
     </>
   );
 }
+
+export default Image;

package/packages/react/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) {
   return (
     <img
       style={{
@@ -15,3 +15,5 @@ export default function ImgComponent(props) {
     />
   );
 }
+
+export default ImgComponent;

package/packages/react/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) {
   return (
     <input
       {...props.attributes}
@@ -17,3 +17,5 @@ export default function FormInputComponent(props) {
     />
   );
 }
+
+export default FormInputComponent;

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-export default function RawText(props) {
+function RawText(props) {
   return (
     <span
       className={props.attributes?.class || props.attributes?.className}
@@ -8,3 +8,5 @@ export default function RawText(props) {
     />
   );
 }
+
+export default RawText;

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-export default function SectionComponent(props) {
+function SectionComponent(props) {
   return (
     <section
       {...props.attributes}
@@ -21,3 +21,5 @@ export default function SectionComponent(props) {
     </section>
   );
 }
+
+export default SectionComponent;

package/packages/react/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) {
   return (
     <select
       {...props.attributes}
@@ -18,3 +18,5 @@ export default function SelectComponent(props) {
     </select>
   );
 }
+
+export default SelectComponent;

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

@@ -1,9 +1,11 @@
 import * as React from "react";
 
-export default function SubmitButton(props) {
+function SubmitButton(props) {
   return (
     <button type="submit" {...props.attributes}>
       {props.text}
     </button>
   );
 }
+
+export default SubmitButton;

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

@@ -5,7 +5,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) {
   function className() {
     return [
       ...(TARGET === "vue2" || TARGET === "vue3"
@@ -84,3 +84,5 @@ export default function Symbol(props) {
     </div>
   );
 }
+
+export default Symbol;

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

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

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-export default function Textarea(props) {
+function Textarea(props) {
   return (
     <textarea
       {...props.attributes}
@@ -11,3 +11,5 @@ export default function Textarea(props) {
     />
   );
 }
+
+export default Textarea;

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-export default function Video(props) {
+function Video(props) {
   function videoProps() {
     return {
       ...(props.autoPlay === true
@@ -56,3 +56,5 @@ export default function Video(props) {
     />
   );
 }
+
+export default Video;

package/packages/react/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) {
   function useBlock() {
     return getProcessedBlock({
       block: props.block,
@@ -79,3 +79,5 @@ export default function BlockStyles(props) {
     </>
   );
 }
+
+export default BlockStyles;