@builder.io/sdk-react 0.0.1-1 → 0.0.1-2

package/README.md

@@ -16,4 +16,4 @@ To check the status of the SDK, look at [these tables](../../README.md#feature-i
 npm install @builder.io/sdk-react@dev
 ```
 
-Take a look at [our example repo](/examples/react-native) for how to use this SDK.
+Take a look at [our example repo](/examples/react-v2) for how to use this SDK.

package/package.json

@@ -1,8 +1,15 @@
 {
   "name": "@builder.io/sdk-react",
-  "description": "Builder.io SDK for React'",
-  "version": "0.0.1-1",
+  "description": "Builder.io SDK for React",
+  "version": "0.0.1-2",
   "main": "src/index.js",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./src/index.js",
+      "require": "./src/index.js"
+    }
+  },
   "scripts": {
     "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"
   },

package/src/blocks/button/button.js

@@ -24,14 +24,9 @@ function Button(props) {
     href: props.link,
     target: props.openLinkInNewTab ? "_blank" : void 0
   }), props.text)) : /* @__PURE__ */ React.createElement("button", __spreadProps(__spreadValues({}, props.attributes), {
-    className: "button"
-  }), props.text)), /* @__PURE__ */ React.createElement("style", {
-    jsx: true
-  }, `
-        .button {
-          all: unset;
-        }
-      `));
+    className: "button-7c88bfd8"
+  }), props.text)), /* @__PURE__ */ React.createElement("style", null, `.button-7c88bfd8 { 
+all: unset; }`));
 }
 export {
   Button as default

package/src/blocks/columns/columns.js

@@ -57,10 +57,10 @@ function Columns(props) {
     };
   }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: "builder-columns div",
+    className: "builder-columns div-01f6ab8c",
     style: columnsCssVars()
   }, (_a = props.columns) == null ? void 0 : _a.map((column, index) => /* @__PURE__ */ React.createElement("div", {
-    className: "builder-column div-2",
+    className: "builder-column div-01f6ab8c-2",
     style: __spreadValues({
       width: getColumnCssWidth(index),
       marginLeft: `${index === 0 ? 0 : getGutterSize()}px`
@@ -70,40 +70,17 @@ function Columns(props) {
     blocks: column.blocks,
     path: `component.options.columns.${index}.blocks`,
     parent: props.builderBlock.id
-  })))), /* @__PURE__ */ React.createElement("style", {
-    jsx: true
-  }, `
-        .div {
-          display: flex;
-          align-items: stretch;
-          line-height: normal;
-        }
-        @media (max-width: 991px) {
-          .div {
-            flex-direction: var(--flex-dir-tablet);
-          }
-        }
-        @media (max-width: 639px) {
-          .div {
-            flex-direction: var(--flex-dir);
-          }
-        }
-        .div-2 {
-          flex-grow: 1;
-        }
-        @media (max-width: 991px) {
-          .div-2 {
-            width: var(--column-width-tablet) !important;
-            margin-left: var(--column-margin-left-tablet) !important;
-          }
-        }
-        @media (max-width: 639px) {
-          .div-2 {
-            width: var(--column-width) !important;
-            margin-left: var(--column-margin-left) !important;
-          }
-        }
-      `));
+  })))), /* @__PURE__ */ React.createElement("style", null, `.div-01f6ab8c { 
+display: flex;
+align-items: stretch;
+line-height: normal; }@media (max-width: 991px) { .div-01f6ab8c { 
+flex-direction: var(--flex-dir-tablet); } }@media (max-width: 639px) { .div-01f6ab8c { 
+flex-direction: var(--flex-dir); } }.div-01f6ab8c-2 { 
+flex-grow: 1; }@media (max-width: 991px) { .div-01f6ab8c-2 { 
+width: var(--column-width-tablet) !important;
+margin-left: var(--column-margin-left-tablet) !important; } }@media (max-width: 639px) { .div-01f6ab8c-2 { 
+width: var(--column-width) !important;
+margin-left: var(--column-margin-left) !important; } }`));
 }
 export {
   Columns as default

package/src/blocks/columns/component-info.js

@@ -1,3 +1,4 @@
+import { markSerializable } from "../util";
 const componentInfo = {
   name: "Columns",
   builtIn: true,
@@ -186,7 +187,7 @@ const componentInfo = {
           ]
         }
       ],
-      onChange(options) {
+      onChange: markSerializable((options) => {
         function clearWidths() {
           columns.forEach((col) => {
             col.delete("width");
@@ -210,7 +211,7 @@ const componentInfo = {
             }
           }
         }
-      }
+      })
     },
     {
       name: "space",

package/src/blocks/embed/component-info.js

@@ -1,3 +1,4 @@
+import { markSerializable } from "../util";
 const componentInfo = {
   name: "Embed",
   static: true,
@@ -9,7 +10,7 @@ const componentInfo = {
       required: true,
       defaultValue: "",
       helperText: "e.g. enter a youtube url, google map, etc",
-      onChange(options) {
+      onChange: markSerializable((options) => {
         const url = options.get("url");
         if (url) {
           options.set("content", "Loading...");
@@ -28,7 +29,7 @@ const componentInfo = {
         } else {
           options.delete("content");
         }
-      }
+      })
     },
     {
       name: "content",

package/src/blocks/form/form.js

@@ -38,8 +38,9 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 import * as React from "react";
-import { useState, useRef } from "react";
+import { useState, useContext, useRef } from "react";
 import RenderBlock from "../../components/render-block/render-block.js";
+import BuilderBlocks from "../../components/render-blocks.js";
 import { isEditing } from "../../functions/is-editing.js";
 function FormComponent(props) {
   var _a, _b;
@@ -190,6 +191,7 @@ function FormComponent(props) {
       });
     }
   }
+  const builderContext = useContext(BuilderContext);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, " ", /* @__PURE__ */ React.createElement("form", __spreadProps(__spreadValues({}, props.attributes), {
     validate: props.validate,
     ref: formRef,
@@ -198,7 +200,8 @@ function FormComponent(props) {
     name: props.name,
     onSubmit: (event) => onSubmit(event)
   }), " ", props.builderBlock && props.builderBlock.children ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_b = (_a = props.builderBlock) == null ? void 0 : _a.children) == null ? void 0 : _b.map((block) => /* @__PURE__ */ React.createElement(RenderBlock, {
-    block
+    block,
+    context: builderContext
   }))) : null, " ", submissionState() === "error" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BuilderBlocks, {
     dataPath: "errorMessage",
     blocks: props.errorMessage
@@ -206,19 +209,11 @@ function FormComponent(props) {
     dataPath: "sendingMessage",
     blocks: props.sendingMessage
   })) : null, " ", submissionState() === "error" && responseData ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("pre", {
-    className: "builder-form-error-text pre"
+    className: "builder-form-error-text pre-79359d0a"
   }, " ", JSON.stringify(responseData, null, 2), " ")) : null, " ", submissionState() === "success" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BuilderBlocks, {
     dataPath: "successMessage",
     blocks: props.successMessage
-  })) : null, " "), " ", /* @__PURE__ */ React.createElement("style", {
-    jsx: true
-  }, `
-        .pre {
-          padding: 10px;
-          color: red;
-          text-align: center;
-        }
-      `), " ");
+  })) : null, " "), " ", /* @__PURE__ */ React.createElement("style", null, `.pre-79359d0a {  padding: 10px; color: red; text-align: center; }`), " ");
 }
 export {
   FormComponent as default

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

@@ -1,3 +1,4 @@
+import { markSerializable } from "../util";
 const componentInfo = {
   name: "Image",
   static: true,
@@ -18,7 +19,7 @@ const componentInfo = {
       allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
       required: true,
       defaultValue: "https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-      onChange(options) {
+      onChange: markSerializable((options) => {
         const DEFAULT_ASPECT_RATIO = 0.7041;
         options.delete("srcset");
         options.delete("noWebp");
@@ -64,7 +65,7 @@ const componentInfo = {
             }
           });
         }
-      }
+      })
     },
     {
       name: "backgroundSize",

package/src/blocks/image/image.js

@@ -28,7 +28,7 @@ function Image(props) {
     }
   }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: "div"
+    className: "div-4c804184"
   }, /* @__PURE__ */ React.createElement("picture", null, webpSrcSet() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("source", {
     type: "image/webp",
     srcset: webpSrcSet()
@@ -40,50 +40,39 @@ function Image(props) {
       objectPosition: props.backgroundSize || "center",
       objectFit: props.backgroundSize || "cover"
     },
-    className: "builder-image" + (props.className ? " " + props.className : "") + " img",
+    className: "builder-image" + (props.className ? " " + props.className : "") + " img-4c804184",
     src: props.image,
     srcset: srcSetToUse(),
     sizes: props.sizes
   }), /* @__PURE__ */ React.createElement("source", {
     srcset: srcSetToUse()
   })), props.aspectRatio && !(props.fitContent && ((_b = (_a = props.builderBlock) == null ? void 0 : _a.children) == null ? void 0 : _b.length)) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: "builder-image-sizer div-2",
+    className: "builder-image-sizer div-4c804184-2",
     style: {
       paddingTop: props.aspectRatio * 100 + "%"
     }
   })) : null, ((_d = (_c = props.builderBlock) == null ? void 0 : _c.children) == null ? void 0 : _d.length) && props.fitContent ? /* @__PURE__ */ React.createElement(React.Fragment, null, props.children) : null, !props.fitContent ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: "div-3"
-  }, props.children)) : null), /* @__PURE__ */ React.createElement("style", {
-    jsx: true
-  }, `
-        .div {
-          position: relative;
-        }
-        .img {
-          opacity: 1;
-          transition: opacity 0.2s ease-in-out;
-          position: absolute;
-          height: 100%;
-          width: 100%;
-          top: 0px;
-          left: 0px;
-        }
-        .div-2 {
-          width: 100%;
-          pointer-events: none;
-          font-size: 0;
-        }
-        .div-3 {
-          display: flex;
-          flex-direction: column;
-          align-items: stretch;
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-        }
-      `));
+    className: "div-4c804184-3"
+  }, props.children)) : null), /* @__PURE__ */ React.createElement("style", null, `.div-4c804184 { 
+position: relative; }.img-4c804184 { 
+opacity: 1;
+transition: opacity 0.2s ease-in-out;
+position: absolute;
+height: 100%;
+width: 100%;
+top: 0px;
+left: 0px; }.div-4c804184-2 { 
+width: 100%;
+pointer-events: none;
+font-size: 0; }.div-4c804184-3 { 
+display: flex;
+flex-direction: column;
+align-items: stretch;
+position: absolute;
+top: 0;
+left: 0;
+width: 100%;
+height: 100%; }`));
 }
 export {
   Image as default

package/src/blocks/img/img.js

@@ -27,7 +27,7 @@ function ImgComponent(props) {
     },
     key: isEditing() && props.imgSrc || "default-key",
     alt: props.altText,
-    src: props.imgSrc
+    src: props.imgSrc || props.image
   }));
 }
 export {

package/src/blocks/util.js

@@ -0,0 +1,7 @@
+function markSerializable(fn) {
+  fn.__qwik_serializable__ = true;
+  return fn;
+}
+export {
+  markSerializable
+};

package/src/components/render-block/block-styles.js

@@ -1,18 +1,16 @@
 import * as React from "react";
-import { useContext } from "react";
+import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
 import { TARGET } from "../../constants/target.js";
-import BuilderContext from "../../context/builder.context";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import RenderInlinedStyles from "../render-inlined-styles.js";
 import { convertStyleMaptoCSS } from "../../helpers/css.js";
-import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
+import RenderInlinedStyles from "../render-inlined-styles.js";
 function BlockStyles(props) {
   function useBlock() {
     return getProcessedBlock({
       block: props.block,
-      state: builderContext.state,
-      context: builderContext.context,
-      evaluateBindings: true
+      state: props.context.state,
+      context: props.context.context,
+      shouldEvaluateBindings: true
     });
   }
   function css() {
@@ -30,7 +28,6 @@ function BlockStyles(props) {
           }` : ""}
     }`;
   }
-  const builderContext = useContext(BuilderContext);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, TARGET === "vue2" || TARGET === "vue3" || TARGET === "svelte" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RenderInlinedStyles, {
     styles: css()
   })) : null);

package/src/components/render-block/render-block.js

@@ -30,8 +30,6 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import * as React from "react";
-import { useContext } from "react";
-import BuilderContext from "../../context/builder.context";
 import { getBlockActions } from "../../functions/get-block-actions.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
 import { getBlockProperties } from "../../functions/get-block-properties.js";
@@ -49,14 +47,14 @@ function RenderBlock(props) {
     var _a2;
     const componentName = (_a2 = getProcessedBlock({
       block: props.block,
-      state: builderContext.state,
-      context: builderContext.context,
-      evaluateBindings: false
+      state: props.context.state,
+      context: props.context.context,
+      shouldEvaluateBindings: false
     }).component) == null ? void 0 : _a2.name;
     if (!componentName) {
       return null;
     }
-    const ref = builderContext.registeredComponents[componentName];
+    const ref = props.context.registeredComponents[componentName];
     if (!ref) {
       console.warn(`
         Could not find a registered component named "${componentName}". 
@@ -84,16 +82,16 @@ function RenderBlock(props) {
   function useBlock() {
     return repeatItemData() ? props.block : getProcessedBlock({
       block: props.block,
-      state: builderContext.state,
-      context: builderContext.context,
-      evaluateBindings: true
+      state: props.context.state,
+      context: props.context.context,
+      shouldEvaluateBindings: true
     });
   }
   function attributes() {
     return __spreadProps(__spreadValues(__spreadValues({}, getBlockProperties(useBlock())), getBlockActions({
       block: useBlock(),
-      state: builderContext.state,
-      context: builderContext.context
+      state: props.context.state,
+      context: props.context.context
     })), {
       style: getBlockStyles(useBlock())
     });
@@ -111,7 +109,8 @@ function RenderBlock(props) {
     return {
       blockChildren: children(),
       componentRef: componentRef(),
-      componentOptions: componentOptions()
+      componentOptions: componentOptions(),
+      context: props.context
     };
   }
   function children() {
@@ -129,8 +128,8 @@ function RenderBlock(props) {
     }
     const itemsArray = evaluate({
       code: repeat.collection,
-      state: builderContext.state,
-      context: builderContext.context
+      state: props.context.state,
+      context: props.context.context
     });
     if (!Array.isArray(itemsArray)) {
       return void 0;
@@ -138,8 +137,8 @@ function RenderBlock(props) {
     const collectionName = repeat.collection.split(".").pop();
     const itemNameToUse = repeat.itemName || (collectionName ? collectionName + "Item" : "item");
     const repeatArray = itemsArray.map((item, index) => ({
-      context: __spreadProps(__spreadValues({}, builderContext), {
-        state: __spreadProps(__spreadValues({}, builderContext.state), {
+      context: __spreadProps(__spreadValues({}, props.context), {
+        state: __spreadProps(__spreadValues({}, props.context.state), {
           $index: index,
           $item: item,
           [itemNameToUse]: item,
@@ -150,7 +149,6 @@ function RenderBlock(props) {
     }));
     return repeatArray;
   }
-  const builderContext = useContext(BuilderContext);
   const TagNameRef = tagName();
   return /* @__PURE__ */ React.createElement(React.Fragment, null, shouldWrap() ? /* @__PURE__ */ React.createElement(React.Fragment, null, !isEmptyHtmlElement(tagName()) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagNameRef, __spreadValues({}, attributes()), repeatItemData() ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_a = repeatItemData()) == null ? void 0 : _a.map((data, index) => /* @__PURE__ */ React.createElement(RenderRepeatedBlock, {
     key: index,
@@ -158,11 +156,15 @@ function RenderBlock(props) {
     block: data.block
   }))) : null, !repeatItemData() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RenderComponent, __spreadValues({}, renderComponentProps()))) : null, (_b = childrenWithoutParentComponent()) == null ? void 0 : _b.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
     key: "render-block-" + child.id,
-    block: child
+    block: child,
+    context: props.context
   })), (_c = childrenWithoutParentComponent()) == null ? void 0 : _c.map((child) => /* @__PURE__ */ React.createElement(BlockStyles, {
     key: "block-style-" + child.id,
-    block: child
-  })))) : /* @__PURE__ */ React.createElement(TagNameRef, __spreadValues({}, attributes()))) : /* @__PURE__ */ React.createElement(RenderComponent, __spreadValues({}, renderComponentProps())));
+    block: child,
+    context: props.context
+  })))) : /* @__PURE__ */ React.createElement(TagNameRef, __spreadValues({}, attributes()))) : /* @__PURE__ */ React.createElement(RenderComponent, __spreadProps(__spreadValues({}, renderComponentProps()), {
+    context: props.context
+  })));
 }
 export {
   RenderBlock as default

package/src/components/render-block/render-component.js

@@ -22,10 +22,12 @@ function RenderComponent(props) {
   const ComponentRefRef = props.componentRef;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, props.componentRef ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ComponentRefRef, __spreadValues({}, props.componentOptions), (_a = props.blockChildren) == null ? void 0 : _a.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
     key: "render-block-" + child.id,
-    block: child
+    block: child,
+    context: props.context
   })), (_b = props.blockChildren) == null ? void 0 : _b.map((child) => /* @__PURE__ */ React.createElement(BlockStyles, {
     key: "block-style-" + child.id,
-    block: child
+    block: child,
+    context: props.context
   })))) : null);
 }
 export {

package/src/components/render-block/render-repeated-block.js

@@ -21,7 +21,8 @@ function RenderRepeatedBlock(props) {
       }
     }
   }, /* @__PURE__ */ React.createElement(RenderBlock, {
-    block: props.block
+    block: props.block,
+    context: props.repeatContext
   }));
 }
 export {

package/src/components/render-blocks.js

@@ -1,4 +1,6 @@
 import * as React from "react";
+import { useContext } from "react";
+import BuilderContext from "../context/builder.context";
 import { isEditing } from "../functions/is-editing.js";
 import BlockStyles from "./render-block/block-styles.js";
 import RenderBlock from "./render-block/render-block.js";
@@ -32,8 +34,9 @@ function RenderBlocks(props) {
       }, "*");
     }
   }
+  const builderContext = useContext(BuilderContext);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: className() + " div",
+    className: className() + " div-452eb7d0",
     "builder-path": props.path,
     "builder-parent-id": props.parent,
     dataSet: {
@@ -43,19 +46,16 @@ function RenderBlocks(props) {
     onMouseEnter: (event) => onMouseEnter()
   }, props.blocks ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_a = props.blocks) == null ? void 0 : _a.map((block) => /* @__PURE__ */ React.createElement(RenderBlock, {
     key: "render-block-" + block.id,
-    block
+    block,
+    context: builderContext
   }))) : null, props.blocks ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_b = props.blocks) == null ? void 0 : _b.map((block) => /* @__PURE__ */ React.createElement(BlockStyles, {
     key: "block-style-" + block.id,
-    block
-  }))) : null), /* @__PURE__ */ React.createElement("style", {
-    jsx: true
-  }, `
-        .div {
-          display: flex;
-          flex-direction: column;
-          align-items: stretch;
-        }
-      `));
+    block,
+    context: builderContext
+  }))) : null), /* @__PURE__ */ React.createElement("style", null, `.div-452eb7d0 { 
+display: flex;
+flex-direction: column;
+align-items: stretch; }`));
 }
 export {
   RenderBlocks as default

package/src/components/render-content/render-content.js

@@ -38,7 +38,7 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 import * as React from "react";
-import { useState, useEffect } from "react";
+import { useState, useRef, useEffect } from "react";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
 import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context";
@@ -55,8 +55,14 @@ import {
 import { track } from "../../functions/track.js";
 import RenderBlocks from "../render-blocks.js";
 import RenderContentStyles from "./components/render-styles.js";
+import {
+  registerInsertMenu,
+  setupBrowserForEditing
+} from "../../scripts/init-editing.js";
 function RenderContent(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  const elementRef = useRef(null);
+  const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
   function useContent() {
     var _a2;
     const mergedContent = __spreadProps(__spreadValues(__spreadValues({}, props.content), overrideContent), {
@@ -178,6 +184,9 @@ function RenderContent(props) {
   useEffect(() => {
     if (isBrowser()) {
       if (isEditing()) {
+        setForceReRenderCount(forceReRenderCount + 1);
+        registerInsertMenu();
+        setupBrowserForEditing();
         Object.values(allRegisteredComponents()).forEach((registeredComponent) => {
           var _a2;
           const message = createRegisterComponentMessage(registeredComponent);
@@ -251,13 +260,15 @@ function RenderContent(props) {
       }
     }
   }, useContent() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+    ref: elementRef,
     onClick: (event) => onClick(event),
     "builder-content-id": (_e = useContent == null ? void 0 : useContent()) == null ? void 0 : _e.id
   }, shouldRenderContentStyles() ? /* @__PURE__ */ React.createElement(RenderContentStyles, {
     cssCode: (_g = (_f = useContent == null ? void 0 : useContent()) == null ? void 0 : _f.data) == null ? void 0 : _g.cssCode,
     customFonts: (_i = (_h = useContent == null ? void 0 : useContent()) == null ? void 0 : _h.data) == null ? void 0 : _i.customFonts
   }) : null, /* @__PURE__ */ React.createElement(RenderBlocks, {
-    blocks: (_k = (_j = useContent == null ? void 0 : useContent()) == null ? void 0 : _j.data) == null ? void 0 : _k.blocks
+    blocks: (_k = (_j = useContent == null ? void 0 : useContent()) == null ? void 0 : _j.data) == null ? void 0 : _k.blocks,
+    key: forceReRenderCount
   }))) : null);
 }
 export {

package/src/constants/builder-registered-components.js

@@ -32,9 +32,12 @@ import { componentInfo as videoComponentInfo } from "../blocks/video/component-i
 import { default as Video } from "../blocks/video/video.js";
 import { componentInfo as embedComponentInfo } from "../blocks/embed/component-info";
 import { default as embed } from "../blocks/embed/embed.js";
+import { default as Img } from "../blocks/img/img.js";
+import { componentInfo as imgComponentInfo } from "../blocks/img/component-info";
 const getDefaultRegisteredComponents = () => [
   __spreadValues({ component: Columns }, columnsComponentInfo),
   __spreadValues({ component: Image }, imageComponentInfo),
+  __spreadValues({ component: Img }, imgComponentInfo),
   __spreadValues({ component: Text }, textComponentInfo),
   __spreadValues({ component: Video }, videoComponentInfo),
   __spreadValues({ component: Symbol }, symbolComponentInfo),

package/src/functions/get-fetch.js

@@ -24,9 +24,9 @@ function getFetch() {
     const globalFetch = getGlobalThis().fetch;
     if (typeof globalFetch === "undefined" && typeof global !== "undefined") {
       const nodeFetch = import("node-fetch").then((d) => d.default);
-      return nodeFetch;
+      return nodeFetch.default || nodeFetch;
     }
-    return globalFetch;
+    return globalFetch.default || globalFetch;
   });
 }
 export {

package/src/functions/get-processed-block.js

@@ -39,13 +39,17 @@ const evaluateBindings = ({
   }
   return copied;
 };
-function getProcessedBlock(options) {
-  const { state, context } = options;
-  const block = transformBlock(options.block);
-  if (evaluateBindings) {
-    return evaluateBindings({ block, state, context });
+function getProcessedBlock({
+  block,
+  context,
+  shouldEvaluateBindings,
+  state
+}) {
+  const transformedBlock = transformBlock(block);
+  if (shouldEvaluateBindings) {
+    return evaluateBindings({ block: transformedBlock, state, context });
   } else {
-    return block;
+    return transformedBlock;
   }
 }
 export {

package/src/functions/get-processed-block.test.js

@@ -21,7 +21,7 @@ test("Can process bindings", () => {
     block,
     context: {},
     state: { test: "hello" },
-    evaluateBindings: true
+    shouldEvaluateBindings: true
   });
   expect(processed).not.toEqual(block);
   expect((_a = processed.properties) == null ? void 0 : _a.foo).toEqual("baz");

package/src/scripts/init-editing.js

@@ -1,6 +1,5 @@
 import { TARGET } from "../constants/target.js";
 import { isBrowser } from "../functions/is-browser.js";
-import { isEditing } from "../functions/is-editing.js";
 import { register } from "../functions/register.js";
 const registerInsertMenu = () => {
   register("insertMenu", {
@@ -74,7 +73,7 @@ const setupBrowserForEditing = () => {
     });
   }
 };
-if (isEditing()) {
-  registerInsertMenu();
-  setupBrowserForEditing();
-}
+export {
+  registerInsertMenu,
+  setupBrowserForEditing
+};