@builder.io/sdk-react 0.1.9 → 0.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (119) hide show
  1. package/dist/react/blocks/BaseText.js +2 -1
  2. package/dist/react/blocks/button/button.js +2 -1
  3. package/dist/react/blocks/columns/columns.js +18 -17
  4. package/dist/react/blocks/custom-code/custom-code.js +2 -1
  5. package/dist/react/blocks/embed/embed.js +2 -1
  6. package/dist/react/blocks/form/form.js +3 -2
  7. package/dist/react/blocks/fragment/fragment.js +2 -1
  8. package/dist/react/blocks/image/component-info.js +1 -1
  9. package/dist/react/blocks/image/image.js +2 -1
  10. package/dist/react/blocks/img/img.js +2 -1
  11. package/dist/react/blocks/input/input.js +2 -1
  12. package/dist/react/blocks/raw-text/raw-text.js +2 -1
  13. package/dist/react/blocks/section/section.js +2 -1
  14. package/dist/react/blocks/select/select.js +2 -1
  15. package/dist/react/blocks/submit-button/submit-button.js +2 -1
  16. package/dist/react/blocks/symbol/symbol.js +2 -1
  17. package/dist/react/blocks/text/text.js +5 -2
  18. package/dist/react/blocks/textarea/textarea.js +2 -1
  19. package/dist/react/blocks/video/video.js +2 -1
  20. package/dist/react/components/render-block/block-styles.js +2 -1
  21. package/dist/react/components/render-block/render-block.js +2 -1
  22. package/dist/react/components/render-block/render-component.js +2 -1
  23. package/dist/react/components/render-block/render-repeated-block.js +2 -1
  24. package/dist/react/components/render-blocks.js +2 -1
  25. package/dist/react/components/render-content/builder-editing.js +2 -1
  26. package/dist/react/components/render-content/components/render-styles.js +15 -1
  27. package/dist/react/components/render-content/render-content.js +6 -8
  28. package/dist/react/components/render-inlined-styles.js +2 -1
  29. package/dist/react/functions/is-editing.js +2 -1
  30. package/dist/react/index.js +0 -1
  31. package/dist/rsc/blocks/BaseText.js +2 -1
  32. package/dist/rsc/blocks/button/button.js +2 -1
  33. package/dist/rsc/blocks/columns/columns.js +18 -17
  34. package/dist/rsc/blocks/custom-code/custom-code.js +2 -1
  35. package/dist/rsc/blocks/embed/embed.js +2 -1
  36. package/dist/rsc/blocks/form/form.js +3 -2
  37. package/dist/rsc/blocks/fragment/fragment.js +2 -1
  38. package/dist/rsc/blocks/image/component-info.js +1 -1
  39. package/dist/rsc/blocks/image/image.js +2 -1
  40. package/dist/rsc/blocks/img/img.js +2 -1
  41. package/dist/rsc/blocks/input/input.js +2 -1
  42. package/dist/rsc/blocks/raw-text/raw-text.js +2 -1
  43. package/dist/rsc/blocks/section/section.js +2 -1
  44. package/dist/rsc/blocks/select/select.js +2 -1
  45. package/dist/rsc/blocks/submit-button/submit-button.js +2 -1
  46. package/dist/rsc/blocks/symbol/symbol.js +2 -1
  47. package/dist/rsc/blocks/text/text.js +5 -2
  48. package/dist/rsc/blocks/textarea/textarea.js +2 -1
  49. package/dist/rsc/blocks/video/video.js +2 -1
  50. package/dist/rsc/components/render-block/block-styles.js +2 -1
  51. package/dist/rsc/components/render-block/render-block.js +2 -1
  52. package/dist/rsc/components/render-block/render-component.js +2 -1
  53. package/dist/rsc/components/render-block/render-repeated-block.js +2 -1
  54. package/dist/rsc/components/render-blocks.js +2 -1
  55. package/dist/rsc/components/render-content/components/render-styles.js +15 -1
  56. package/dist/rsc/components/render-content/render-content.js +5 -8
  57. package/dist/rsc/components/render-inlined-styles.js +2 -1
  58. package/dist/rsc/functions/is-editing.js +2 -1
  59. package/dist/rsc/index.js +0 -1
  60. package/package.json +1 -1
  61. package/packages/react/src/blocks/BaseText.jsx +3 -1
  62. package/packages/react/src/blocks/button/button.jsx +3 -1
  63. package/packages/react/src/blocks/columns/columns.jsx +19 -17
  64. package/packages/react/src/blocks/custom-code/custom-code.jsx +3 -1
  65. package/packages/react/src/blocks/embed/embed.jsx +3 -1
  66. package/packages/react/src/blocks/form/form.jsx +3 -2
  67. package/packages/react/src/blocks/fragment/fragment.jsx +3 -1
  68. package/packages/react/src/blocks/image/component-info.js +1 -1
  69. package/packages/react/src/blocks/image/image.jsx +3 -1
  70. package/packages/react/src/blocks/img/img.jsx +3 -1
  71. package/packages/react/src/blocks/input/input.jsx +3 -1
  72. package/packages/react/src/blocks/raw-text/raw-text.jsx +3 -1
  73. package/packages/react/src/blocks/section/section.jsx +3 -1
  74. package/packages/react/src/blocks/select/select.jsx +3 -1
  75. package/packages/react/src/blocks/submit-button/submit-button.jsx +3 -1
  76. package/packages/react/src/blocks/symbol/symbol.jsx +3 -1
  77. package/packages/react/src/blocks/text/text.jsx +6 -1
  78. package/packages/react/src/blocks/textarea/textarea.jsx +3 -1
  79. package/packages/react/src/blocks/video/video.jsx +3 -1
  80. package/packages/react/src/components/render-block/block-styles.jsx +3 -1
  81. package/packages/react/src/components/render-block/render-block.jsx +3 -1
  82. package/packages/react/src/components/render-block/render-component.jsx +3 -1
  83. package/packages/react/src/components/render-block/render-repeated-block.jsx +3 -1
  84. package/packages/react/src/components/render-blocks.jsx +3 -1
  85. package/packages/react/src/components/render-content/builder-editing.jsx +3 -1
  86. package/packages/react/src/components/render-content/components/render-styles.jsx +16 -1
  87. package/packages/react/src/components/render-content/render-content.jsx +13 -16
  88. package/packages/react/src/components/render-inlined-styles.jsx +3 -1
  89. package/packages/react/src/functions/is-editing.js +2 -1
  90. package/packages/react/src/index.js +0 -1
  91. package/packages/rsc/src/blocks/BaseText.jsx +3 -1
  92. package/packages/rsc/src/blocks/button/button.jsx +3 -1
  93. package/packages/rsc/src/blocks/columns/columns.jsx +19 -17
  94. package/packages/rsc/src/blocks/custom-code/custom-code.jsx +3 -1
  95. package/packages/rsc/src/blocks/embed/embed.jsx +3 -1
  96. package/packages/rsc/src/blocks/form/form.jsx +3 -2
  97. package/packages/rsc/src/blocks/fragment/fragment.jsx +3 -1
  98. package/packages/rsc/src/blocks/image/component-info.js +1 -1
  99. package/packages/rsc/src/blocks/image/image.jsx +3 -1
  100. package/packages/rsc/src/blocks/img/img.jsx +3 -1
  101. package/packages/rsc/src/blocks/input/input.jsx +3 -1
  102. package/packages/rsc/src/blocks/raw-text/raw-text.jsx +3 -1
  103. package/packages/rsc/src/blocks/section/section.jsx +3 -1
  104. package/packages/rsc/src/blocks/select/select.jsx +3 -1
  105. package/packages/rsc/src/blocks/submit-button/submit-button.jsx +3 -1
  106. package/packages/rsc/src/blocks/symbol/symbol.jsx +3 -1
  107. package/packages/rsc/src/blocks/text/text.jsx +6 -1
  108. package/packages/rsc/src/blocks/textarea/textarea.jsx +3 -1
  109. package/packages/rsc/src/blocks/video/video.jsx +3 -1
  110. package/packages/rsc/src/components/render-block/block-styles.jsx +3 -1
  111. package/packages/rsc/src/components/render-block/render-block.jsx +3 -1
  112. package/packages/rsc/src/components/render-block/render-component.jsx +3 -1
  113. package/packages/rsc/src/components/render-block/render-repeated-block.jsx +3 -1
  114. package/packages/rsc/src/components/render-blocks.jsx +3 -1
  115. package/packages/rsc/src/components/render-content/components/render-styles.jsx +16 -1
  116. package/packages/rsc/src/components/render-content/render-content.jsx +13 -16
  117. package/packages/rsc/src/components/render-inlined-styles.jsx +3 -1
  118. package/packages/rsc/src/functions/is-editing.js +2 -1
  119. package/packages/rsc/src/index.js +0 -1
@@ -1,7 +1,8 @@
1
1
  import * as React from "react";
2
2
  import { useContext } from "react";
3
3
  import BuilderContext from "../context/builder.context.js";
4
- export default function BaseText(props) {
4
+ function BaseText(props) {
5
5
  const builderContext = useContext(BuilderContext);
6
6
  return React.createElement("span", { style: builderContext.inheritedStyles }, props.text);
7
7
  }
8
+ export default BaseText;
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- export default function Button(props) {
2
+ function Button(props) {
3
3
  return (React.createElement(React.Fragment, null,
4
4
  props.link ? (React.createElement(React.Fragment, null,
5
5
  React.createElement("a", { role: "button", ...props.attributes, href: props.link, target: props.openLinkInNewTab ? "_blank" : undefined }, props.text))) : (React.createElement("button", { className: "button-66d34b93", ...props.attributes }, props.text)),
@@ -7,3 +7,4 @@ export default function Button(props) {
7
7
  all: unset;
8
8
  }`)));
9
9
  }
10
+ export default Button;
@@ -6,7 +6,7 @@ import RenderInlinedStyles from "../../components/render-inlined-styles";
6
6
  import { TARGET } from "../../constants/target.js";
7
7
  import { convertStyleMapToCSS } from "../../helpers/css";
8
8
  import BuilderContext from "../../context/builder.context.js";
9
- export default function Columns(props) {
9
+ function Columns(props) {
10
10
  function getGutterSize() {
11
11
  return typeof props.space === "number" ? props.space || 0 : 20;
12
12
  }
@@ -78,26 +78,26 @@ export default function Columns(props) {
78
78
  }
79
79
  function columnsStyles() {
80
80
  return `
81
- @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
82
- .${props.builderBlock.id}-breakpoints {
83
- ${convertStyleMapToCSS(columnStyleObjects().columns.medium)}
84
- }
81
+ @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
82
+ .${props.builderBlock.id}-breakpoints {
83
+ ${convertStyleMapToCSS(columnStyleObjects().columns.medium)}
84
+ }
85
85
 
86
- .${props.builderBlock.id}-breakpoints > .builder-column {
87
- ${convertStyleMapToCSS(columnStyleObjects().column.medium)}
88
- }
86
+ .${props.builderBlock.id}-breakpoints > .builder-column {
87
+ ${convertStyleMapToCSS(columnStyleObjects().column.medium)}
89
88
  }
89
+ }
90
90
 
91
- @media (max-width: ${getWidthForBreakpointSize("small")}px) {
92
- .${props.builderBlock.id}-breakpoints {
93
- ${convertStyleMapToCSS(columnStyleObjects().columns.small)}
94
- }
91
+ @media (max-width: ${getWidthForBreakpointSize("small")}px) {
92
+ .${props.builderBlock.id}-breakpoints {
93
+ ${convertStyleMapToCSS(columnStyleObjects().columns.small)}
94
+ }
95
95
 
96
- .${props.builderBlock.id}-breakpoints > .builder-column {
97
- ${convertStyleMapToCSS(columnStyleObjects().column.small)}
98
- }
99
- },
100
- `;
96
+ .${props.builderBlock.id}-breakpoints > .builder-column {
97
+ ${convertStyleMapToCSS(columnStyleObjects().column.small)}
98
+ }
99
+ },
100
+ `;
101
101
  }
102
102
  function reactNativeColumnsStyles() {
103
103
  return columnStyleObjects.columns.small;
@@ -132,3 +132,4 @@ flex-direction: column;
132
132
  align-items: stretch;
133
133
  }`)));
134
134
  }
135
+ export default Columns;
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
2
  import { useState, useRef, useEffect } from "react";
3
- export default function CustomCode(props) {
3
+ function CustomCode(props) {
4
4
  const elem = useRef(null);
5
5
  const [scriptsInserted, setScriptsInserted] = useState(() => []);
6
6
  const [scriptsRun, setScriptsRun] = useState(() => []);
@@ -47,3 +47,4 @@ export default function CustomCode(props) {
47
47
  }, []);
48
48
  return (React.createElement("div", { ref: elem, className: "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : ""), dangerouslySetInnerHTML: { __html: props.code } }));
49
49
  }
50
+ export default CustomCode;
@@ -1,7 +1,7 @@
1
1
  import * as React from "react";
2
2
  import { useState, useRef, useEffect } from "react";
3
3
  import { isJsScript } from "./helpers.js";
4
- export default function Embed(props) {
4
+ function Embed(props) {
5
5
  const elem = useRef(null);
6
6
  const [scriptsInserted, setScriptsInserted] = useState(() => []);
7
7
  const [scriptsRun, setScriptsRun] = useState(() => []);
@@ -38,3 +38,4 @@ export default function Embed(props) {
38
38
  }, [elem.current, ranInitFn]);
39
39
  return (React.createElement("div", { className: "builder-embed", ref: elem, dangerouslySetInnerHTML: { __html: props.content } }));
40
40
  }
41
+ export default Embed;
@@ -3,7 +3,7 @@ import { useState, useContext, useRef } from "react";
3
3
  import RenderBlock from "../../components/render-block/render-block";
4
4
  import BuilderBlocks from "../../components/render-blocks";
5
5
  import { isEditing } from "../../functions/is-editing.js";
6
- export default function FormComponent(props) {
6
+ function FormComponent(props) {
7
7
  const formRef = useRef(null);
8
8
  const [formState, setFormState] = useState(() => "unsubmitted");
9
9
  const [responseData, setResponseData] = useState(() => null);
@@ -122,7 +122,7 @@ export default function FormComponent(props) {
122
122
  /* TODO: allow supplying an error formatter function */ let message = get(body, props.errorMessagePath);
123
123
  if (message) {
124
124
  if (typeof message !== "string") {
125
- /* TODO: ideally convert json to yaml so it woul dbe like error: - email has been taken */ message =
125
+ /* TODO: ideally convert json to yaml so it woul dbe like error: - email has been taken */ message =
126
126
  JSON.stringify(message);
127
127
  }
128
128
  setFormErrorMessage(message);
@@ -199,3 +199,4 @@ export default function FormComponent(props) {
199
199
  React.createElement("style", null, `.pre-0d1abaf2 { padding: 10px; color: red; text-align: center; }`),
200
200
  " "));
201
201
  }
202
+ export default FormComponent;
@@ -1,4 +1,5 @@
1
1
  import * as React from "react";
2
- export default function FragmentComponent(props) {
2
+ function FragmentComponent(props) {
3
3
  return React.createElement("span", null, props.children);
4
4
  }
5
+ export default FragmentComponent;
@@ -17,7 +17,7 @@ const componentInfo = {
17
17
  bubble: true,
18
18
  allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
19
19
  required: true,
20
- defaultValue: "https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
20
+ defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
21
21
  onChange: serializeFn((options) => {
22
22
  const DEFAULT_ASPECT_RATIO = 0.7041;
23
23
  options.delete("srcset");
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
2
  import { getSrcSet } from "./image.helpers.js";
3
- export default function Image(props) {
3
+ function Image(props) {
4
4
  function srcSetToUse() {
5
5
  const imageToUse = props.image || props.src;
6
6
  const url = imageToUse;
@@ -80,3 +80,4 @@ width: 100%;
80
80
  height: 100%;
81
81
  }`)));
82
82
  }
83
+ export default Image;
@@ -1,8 +1,9 @@
1
1
  import * as React from "react";
2
2
  import { isEditing } from "../../functions/is-editing.js";
3
- export default function ImgComponent(props) {
3
+ function ImgComponent(props) {
4
4
  return (React.createElement("img", { style: {
5
5
  objectFit: props.backgroundSize || "cover",
6
6
  objectPosition: props.backgroundPosition || "center",
7
7
  }, key: (isEditing() && props.imgSrc) || "default-key", alt: props.altText, src: props.imgSrc || props.image, ...props.attributes }));
8
8
  }
9
+ export default ImgComponent;
@@ -1,5 +1,6 @@
1
1
  import * as React from "react";
2
2
  import { isEditing } from "../../functions/is-editing.js";
3
- export default function FormInputComponent(props) {
3
+ function FormInputComponent(props) {
4
4
  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 }));
5
5
  }
6
+ export default FormInputComponent;
@@ -1,4 +1,5 @@
1
1
  import * as React from "react";
2
- export default function RawText(props) {
2
+ function RawText(props) {
3
3
  return (React.createElement("span", { className: props.attributes?.class || props.attributes?.className, dangerouslySetInnerHTML: { __html: props.text || "" } }));
4
4
  }
5
+ export default RawText;
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- export default function SectionComponent(props) {
2
+ function SectionComponent(props) {
3
3
  return (React.createElement("section", { ...props.attributes, style: {
4
4
  width: "100%",
5
5
  alignSelf: "stretch",
@@ -13,3 +13,4 @@ export default function SectionComponent(props) {
13
13
  marginRight: "auto",
14
14
  } }, props.children));
15
15
  }
16
+ export default SectionComponent;
@@ -1,5 +1,6 @@
1
1
  import * as React from "react";
2
2
  import { isEditing } from "../../functions/is-editing.js";
3
- export default function SelectComponent(props) {
3
+ function SelectComponent(props) {
4
4
  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)))));
5
5
  }
6
+ export default SelectComponent;
@@ -1,4 +1,5 @@
1
1
  import * as React from "react";
2
- export default function SubmitButton(props) {
2
+ function SubmitButton(props) {
3
3
  return (React.createElement("button", { type: "submit", ...props.attributes }, props.text));
4
4
  }
5
+ export default SubmitButton;
@@ -4,7 +4,7 @@ import RenderContent from "../../components/render-content/render-content";
4
4
  import BuilderContext from "../../context/builder.context.js";
5
5
  import { getContent } from "../../functions/get-content/index.js";
6
6
  import { TARGET } from "../../constants/target";
7
- export default function Symbol(props) {
7
+ function Symbol(props) {
8
8
  function className() {
9
9
  return [
10
10
  ...(TARGET === "vue2" || TARGET === "vue3"
@@ -61,3 +61,4 @@ export default function Symbol(props) {
61
61
  ...props.symbol?.content?.data?.state,
62
62
  }, model: props.symbol?.model, content: contentToUse() })));
63
63
  }
64
+ export default Symbol;
@@ -1,4 +1,7 @@
1
1
  import * as React from "react";
2
- export default function Text(props) {
3
- return (React.createElement("span", { className: "builder-text", dangerouslySetInnerHTML: { __html: props.text } }));
2
+ function Text(props) {
3
+ return (React.createElement("span", { className: "builder-text", dangerouslySetInnerHTML: { __html: props.text }, style: {
4
+ outline: "none",
5
+ } }));
4
6
  }
7
+ export default Text;
@@ -1,4 +1,5 @@
1
1
  import * as React from "react";
2
- export default function Textarea(props) {
2
+ function Textarea(props) {
3
3
  return (React.createElement("textarea", { ...props.attributes, placeholder: props.placeholder, name: props.name, value: props.value, defaultValue: props.defaultValue }));
4
4
  }
5
+ export default Textarea;
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- export default function Video(props) {
2
+ function Video(props) {
3
3
  function videoProps() {
4
4
  return {
5
5
  ...(props.autoPlay === true
@@ -46,3 +46,4 @@ export default function Video(props) {
46
46
  borderRadius: 1,
47
47
  }, src: props.video || "no-src", poster: props.posterImage }));
48
48
  }
49
+ export default Video;
@@ -5,7 +5,7 @@ import { getProcessedBlock } from "../../functions/get-processed-block.js";
5
5
  import { createCssClass } from "../../helpers/css.js";
6
6
  import { checkIsDefined } from "../../helpers/nullable.js";
7
7
  import RenderInlinedStyles from "../render-inlined-styles";
8
- export default function BlockStyles(props) {
8
+ function BlockStyles(props) {
9
9
  function useBlock() {
10
10
  return getProcessedBlock({
11
11
  block: props.block,
@@ -57,3 +57,4 @@ export default function BlockStyles(props) {
57
57
  return (React.createElement(React.Fragment, null, TARGET !== "reactNative" && css() && canShowBlock() ? (React.createElement(React.Fragment, null,
58
58
  React.createElement(RenderInlinedStyles, { styles: css() }))) : null));
59
59
  }
60
+ export default BlockStyles;
@@ -13,7 +13,7 @@ import { extractTextStyles } from "../../functions/extract-text-styles.js";
13
13
  import RenderComponent from "./render-component";
14
14
  import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
15
15
  import { checkIsDefined } from "../../helpers/nullable.js";
16
- export default function RenderBlock(props) {
16
+ function RenderBlock(props) {
17
17
  const [component, setComponent] = useState(() => getComponent({
18
18
  block: props.block,
19
19
  context: props.context,
@@ -146,3 +146,4 @@ export default function RenderBlock(props) {
146
146
  childrenWithoutParentComponent()?.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: childrenContext() }))),
147
147
  childrenWithoutParentComponent()?.map((child) => (React.createElement(BlockStyles, { key: "block-style-" + child.id, block: child, context: childrenContext() })))))) : null)) : (React.createElement(RenderComponent, { ...renderComponentProps() })))) : null));
148
148
  }
149
+ export default RenderBlock;
@@ -1,10 +1,11 @@
1
1
  import * as React from "react";
2
2
  import BlockStyles from "./block-styles";
3
3
  import RenderBlock from "./render-block";
4
- export default function RenderComponent(props) {
4
+ function RenderComponent(props) {
5
5
  const ComponentRefRef = props.componentRef;
6
6
  return (React.createElement(React.Fragment, null, props.componentRef ? (React.createElement(React.Fragment, null,
7
7
  React.createElement(ComponentRefRef, { ...props.componentOptions },
8
8
  props.blockChildren?.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: props.context }))),
9
9
  props.blockChildren?.map((child) => (React.createElement(BlockStyles, { key: "block-style-" + child.id, block: child, context: props.context })))))) : null));
10
10
  }
11
+ export default RenderComponent;
@@ -2,7 +2,7 @@ import * as React from "react";
2
2
  import { useContext } from "react";
3
3
  import BuilderContext from "../../context/builder.context.js";
4
4
  import RenderBlock from "./render-block";
5
- export default function RenderRepeatedBlock(props) {
5
+ function RenderRepeatedBlock(props) {
6
6
  return (React.createElement(BuilderContext.Provider, { value: {
7
7
  content: props.repeatContext.content,
8
8
  state: props.repeatContext.state,
@@ -14,3 +14,4 @@ export default function RenderRepeatedBlock(props) {
14
14
  } },
15
15
  React.createElement(RenderBlock, { block: props.block, context: props.repeatContext })));
16
16
  }
17
+ export default RenderRepeatedBlock;
@@ -4,7 +4,7 @@ import BuilderContext from "../context/builder.context.js";
4
4
  import { isEditing } from "../functions/is-editing.js";
5
5
  import BlockStyles from "./render-block/block-styles";
6
6
  import RenderBlock from "./render-block/render-block";
7
- export default function RenderBlocks(props) {
7
+ function RenderBlocks(props) {
8
8
  function className() {
9
9
  return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
10
10
  }
@@ -43,3 +43,4 @@ flex-direction: column;
43
43
  align-items: stretch;
44
44
  }`)));
45
45
  }
46
+ export default RenderBlocks;
@@ -1,4 +1,5 @@
1
1
  import * as React from "react";
2
- export default function BuilderEditing(props) {
2
+ function BuilderEditing(props) {
3
3
  return React.createElement("div", null);
4
4
  }
5
+ export default BuilderEditing;
@@ -3,7 +3,7 @@ import { useState } from "react";
3
3
  import RenderInlinedStyles from "../../render-inlined-styles";
4
4
  import { getCss } from "./render-styles.helpers";
5
5
  import { getFontCss } from "./render-styles.helpers";
6
- export default function RenderContentStyles(props) {
6
+ function RenderContentStyles(props) {
7
7
  const [injectedStyles, setInjectedStyles] = useState(() => `
8
8
  ${getCss({
9
9
  cssCode: props.cssCode,
@@ -12,6 +12,20 @@ ${getCss({
12
12
  ${getFontCss({
13
13
  customFonts: props.customFonts,
14
14
  })}
15
+
16
+ .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
17
+ margin: 0;
18
+ }
19
+ .builder-text > p, .builder-text > .builder-paragraph {
20
+ color: inherit;
21
+ line-height: inherit;
22
+ letter-spacing: inherit;
23
+ font-weight: inherit;
24
+ font-size: inherit;
25
+ text-align: inherit;
26
+ font-family: inherit;
27
+ }
15
28
  `);
16
29
  return React.createElement(RenderInlinedStyles, { styles: injectedStyles });
17
30
  }
31
+ export default RenderContentStyles;
@@ -1,7 +1,6 @@
1
1
  import * as React from "react";
2
2
  import { useState, useContext, useRef, useEffect } from "react";
3
3
  import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
4
- import { TARGET } from "../../constants/target.js";
5
4
  import { evaluate } from "../../functions/evaluate.js";
6
5
  import { getContent } from "../../functions/get-content/index.js";
7
6
  import { fetch } from "../../functions/get-fetch.js";
@@ -17,7 +16,8 @@ import { registerInsertMenu, setupBrowserForEditing, } from "../../scripts/init-
17
16
  import { checkIsDefined } from "../../helpers/nullable.js";
18
17
  import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
19
18
  import { getContentInitialValue, getContextStateInitialValue, } from "./render-content.helpers.js";
20
- export default function RenderContent(props) {
19
+ import { TARGET } from "../../constants/target.js";
20
+ function RenderContent(props) {
21
21
  const elementRef = useRef(null);
22
22
  const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
23
23
  const [overrideContent, setOverrideContent] = useState(() => null);
@@ -184,10 +184,6 @@ export default function RenderContent(props) {
184
184
  }));
185
185
  }
186
186
  }
187
- function shouldRenderContentStyles() {
188
- return Boolean((useContent?.data?.cssCode || useContent?.data?.customFonts?.length) &&
189
- TARGET !== "reactNative");
190
- }
191
187
  useEffect(() => {
192
188
  if (!props.apiKey) {
193
189
  console.error("[Builder.io]: No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
@@ -233,7 +229,7 @@ export default function RenderContent(props) {
233
229
  const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
234
230
  /**
235
231
  * Make sure that:
236
- * - 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.
232
+ * - 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.
237
233
  *
238
234
  * TO-DO: should we check that the preview item ID is the same as the initial one being rendered? Or would
239
235
  * this break scenarios where the item is not published yet?
@@ -283,6 +279,8 @@ export default function RenderContent(props) {
283
279
  registeredComponents: allRegisteredComponents,
284
280
  } }, useContent ? (React.createElement(React.Fragment, null,
285
281
  React.createElement("div", { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": useContent?.id, "builder-model": props.model },
286
- shouldRenderContentStyles() ? (React.createElement(RenderContentStyles, { contentId: useContent?.id, cssCode: useContent?.data?.cssCode, customFonts: useContent?.data?.customFonts })) : null,
282
+ TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
283
+ React.createElement(RenderContentStyles, { contentId: useContent?.id, cssCode: useContent?.data?.cssCode, customFonts: useContent?.data?.customFonts }))) : null,
287
284
  React.createElement(RenderBlocks, { blocks: useContent?.data?.blocks, key: forceReRenderCount })))) : null));
288
285
  }
286
+ export default RenderContent;
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
2
  import { TARGET } from "../constants/target.js";
3
- export default function RenderInlinedStyles(props) {
3
+ function RenderInlinedStyles(props) {
4
4
  function injectedStyleScript() {
5
5
  return `<${tag()}>${props.styles}</${tag()}>`;
6
6
  }
@@ -13,3 +13,4 @@ export default function RenderInlinedStyles(props) {
13
13
  return (React.createElement(React.Fragment, null, TARGET === "svelte" || TARGET === "qwik" ? (React.createElement(React.Fragment, null,
14
14
  React.createElement(TagRef, { dangerouslySetInnerHTML: { __html: props.styles } }))) : (React.createElement(TagRef, null, props.styles))));
15
15
  }
16
+ export default RenderInlinedStyles;
@@ -1,5 +1,6 @@
1
+ import { TARGET } from "../constants/target.js";
1
2
  import { isIframe } from "./is-iframe.js";
2
3
  function isEditing() {
3
- return isIframe() && window.location.search.indexOf("builder.frameEditing=") !== -1;
4
+ return isIframe() && (TARGET === "reactNative" || window.location.search.indexOf("builder.frameEditing=") !== -1);
4
5
  }
5
6
  export { isEditing };
@@ -1,5 +1,4 @@
1
1
  export * from "./index-helpers/top-of-file.js";
2
- import "./scripts/init-editing.js";
3
2
  export * from "./index-helpers/blocks-exports.js";
4
3
  export * from "./functions/is-editing.js";
5
4
  export * from "./functions/is-previewing.js";
@@ -1,7 +1,8 @@
1
1
  import * as React from "react";
2
2
  import BuilderContext from "../context/builder.context.js";
3
- export default function BaseText(props) {
3
+ function BaseText(props) {
4
4
  const _context = { ...props["_context"] };
5
5
  const builderContext = _context["BuilderContext"];
6
6
  return React.createElement("span", { style: builderContext.inheritedStyles }, props.text);
7
7
  }
8
+ export default BaseText;
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- export default function Button(props) {
2
+ function Button(props) {
3
3
  const _context = { ...props["_context"] };
4
4
  return (React.createElement(React.Fragment, null,
5
5
  props.link ? (React.createElement(React.Fragment, null,
@@ -8,3 +8,4 @@ export default function Button(props) {
8
8
  all: unset;
9
9
  }`)));
10
10
  }
11
+ export default Button;
@@ -5,7 +5,7 @@ import RenderInlinedStyles from "../../components/render-inlined-styles";
5
5
  import { TARGET } from "../../constants/target.js";
6
6
  import { convertStyleMapToCSS } from "../../helpers/css";
7
7
  import BuilderContext from "../../context/builder.context.js";
8
- export default function Columns(props) {
8
+ function Columns(props) {
9
9
  const _context = { ...props["_context"] };
10
10
  const state = {
11
11
  getGutterSize() {
@@ -79,26 +79,26 @@ export default function Columns(props) {
79
79
  },
80
80
  get columnsStyles() {
81
81
  return `
82
- @media (max-width: ${state.getWidthForBreakpointSize("medium")}px) {
83
- .${props.builderBlock.id}-breakpoints {
84
- ${convertStyleMapToCSS(state.columnStyleObjects.columns.medium)}
85
- }
82
+ @media (max-width: ${state.getWidthForBreakpointSize("medium")}px) {
83
+ .${props.builderBlock.id}-breakpoints {
84
+ ${convertStyleMapToCSS(state.columnStyleObjects.columns.medium)}
85
+ }
86
86
 
87
- .${props.builderBlock.id}-breakpoints > .builder-column {
88
- ${convertStyleMapToCSS(state.columnStyleObjects.column.medium)}
89
- }
87
+ .${props.builderBlock.id}-breakpoints > .builder-column {
88
+ ${convertStyleMapToCSS(state.columnStyleObjects.column.medium)}
90
89
  }
90
+ }
91
91
 
92
- @media (max-width: ${state.getWidthForBreakpointSize("small")}px) {
93
- .${props.builderBlock.id}-breakpoints {
94
- ${convertStyleMapToCSS(state.columnStyleObjects.columns.small)}
95
- }
92
+ @media (max-width: ${state.getWidthForBreakpointSize("small")}px) {
93
+ .${props.builderBlock.id}-breakpoints {
94
+ ${convertStyleMapToCSS(state.columnStyleObjects.columns.small)}
95
+ }
96
96
 
97
- .${props.builderBlock.id}-breakpoints > .builder-column {
98
- ${convertStyleMapToCSS(state.columnStyleObjects.column.small)}
99
- }
100
- },
101
- `;
97
+ .${props.builderBlock.id}-breakpoints > .builder-column {
98
+ ${convertStyleMapToCSS(state.columnStyleObjects.column.small)}
99
+ }
100
+ },
101
+ `;
102
102
  },
103
103
  get reactNativeColumnsStyles() {
104
104
  return this.columnStyleObjects.columns.small;
@@ -136,3 +136,4 @@ flex-direction: column;
136
136
  align-items: stretch;
137
137
  }`)));
138
138
  }
139
+ export default Columns;
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- export default function CustomCode(props) {
2
+ function CustomCode(props) {
3
3
  const _context = { ...props["_context"] };
4
4
  const state = {
5
5
  scriptsInserted: [],
@@ -43,3 +43,4 @@ export default function CustomCode(props) {
43
43
  };
44
44
  return (React.createElement("div", { className: "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : ""), dangerouslySetInnerHTML: { __html: props.code } }));
45
45
  }
46
+ export default CustomCode;
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
2
  import { isJsScript } from "./helpers.js";
3
- export default function Embed(props) {
3
+ function Embed(props) {
4
4
  const _context = { ...props["_context"] };
5
5
  const state = {
6
6
  scriptsInserted: [],
@@ -34,3 +34,4 @@ export default function Embed(props) {
34
34
  };
35
35
  return (React.createElement("div", { className: "builder-embed", dangerouslySetInnerHTML: { __html: props.content } }));
36
36
  }
37
+ export default Embed;
@@ -2,7 +2,7 @@ import * as React from "react";
2
2
  import RenderBlock from "../../components/render-block/render-block";
3
3
  import BuilderBlocks from "../../components/render-blocks";
4
4
  import { isEditing } from "../../functions/is-editing.js";
5
- export default function FormComponent(props) {
5
+ function FormComponent(props) {
6
6
  const _context = { ...props["_context"] };
7
7
  const state = {
8
8
  formState: "unsubmitted",
@@ -124,7 +124,7 @@ export default function FormComponent(props) {
124
124
  /* TODO: allow supplying an error formatter function */ let message = get(body, props.errorMessagePath);
125
125
  if (message) {
126
126
  if (typeof message !== "string") {
127
- /* TODO: ideally convert json to yaml so it woul dbe like error: - email has been taken */ message =
127
+ /* TODO: ideally convert json to yaml so it woul dbe like error: - email has been taken */ message =
128
128
  JSON.stringify(message);
129
129
  }
130
130
  state.formErrorMessage = message;
@@ -202,3 +202,4 @@ export default function FormComponent(props) {
202
202
  React.createElement("style", null, `.pre-41e7c77e { padding: 10px; color: red; text-align: center; }`),
203
203
  " "));
204
204
  }
205
+ export default FormComponent;
@@ -1,5 +1,6 @@
1
1
  import * as React from "react";
2
- export default function FragmentComponent(props) {
2
+ function FragmentComponent(props) {
3
3
  const _context = { ...props["_context"] };
4
4
  return React.createElement("span", null, props.children);
5
5
  }
6
+ export default FragmentComponent;
@@ -17,7 +17,7 @@ const componentInfo = {
17
17
  bubble: true,
18
18
  allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
19
19
  required: true,
20
- defaultValue: "https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
20
+ defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
21
21
  onChange: serializeFn((options) => {
22
22
  const DEFAULT_ASPECT_RATIO = 0.7041;
23
23
  options.delete("srcset");
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
2
  import { getSrcSet } from "./image.helpers.js";
3
- export default function Image(props) {
3
+ function Image(props) {
4
4
  const _context = { ...props["_context"] };
5
5
  const state = {
6
6
  get srcSetToUse() {
@@ -83,3 +83,4 @@ width: 100%;
83
83
  height: 100%;
84
84
  }`)));
85
85
  }
86
+ export default Image;