@amplifyup/sdk 0.1.39 → 0.1.40

package/dist/react.js

@@ -1,10 +1,14 @@
 'use client';
 'use strict';
 
-var react = require('react');
+var React = require('react');
 var marked = require('marked');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
 /* @amplifyup/sdk - https://amplifyup.ai */
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
@@ -3010,13 +3014,13 @@ function getSDK(adapter) {
 var trackContentView = (contentId, contentType, properties) => getSDK().trackContentView(contentId, contentType, properties);
 var refreshEventTracking = () => getSDK().refreshEventTracking();
 getSDK();
-var ComponentContext = react.createContext(null);
+var ComponentContext = React.createContext(null);
 function useLiveComposerProps(layoutNodeId, props) {
-  const [live, setLive] = react.useState(props);
-  react.useEffect(() => {
+  const [live, setLive] = React.useState(props);
+  React.useEffect(() => {
     setLive(props);
   }, [props]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     const matchesNode = (nodeId) => {
       if (nodeId && layoutNodeId && String(nodeId) !== String(layoutNodeId)) {
         return false;
@@ -3033,7 +3037,10 @@ function useLiveComposerProps(layoutNodeId, props) {
         return;
       }
       if (!matchesNode(nodeId)) return;
-      setLive(nextProps);
+      setLive((prev) => ({
+        ...prev,
+        ...nextProps
+      }));
     };
     const onPatch = (event) => {
       const detail = event.detail || {};
@@ -3063,7 +3070,7 @@ function useLiveComposerProps(layoutNodeId, props) {
   return live;
 }
 function useComponentProps() {
-  const context = react.useContext(ComponentContext);
+  const context = React.useContext(ComponentContext);
   if (!context) {
     console.warn(
       "[AmplifyUp SDK] useComponentProps used outside ComponentContextProvider"
@@ -3092,7 +3099,7 @@ function Slot({
   name,
   className
 }) {
-  const context = react.useContext(ComponentContext);
+  const context = React.useContext(ComponentContext);
   console.log(`[Slot:${name}] Rendering slot`, {
     hasContext: !!context,
     availableSlotKeys: context?.slots ? Object.keys(context.slots) : [],
@@ -3194,6 +3201,32 @@ function isLikelyNonTextFieldName(name) {
   const n = name.toLowerCase();
   return n.includes("href") || n.includes("url") || n.includes("src") || n.includes("image") || n.includes("icon") || n.includes("overlay") || n.includes("color");
 }
+function isPlainTextValue(value) {
+  return typeof value === "string" || typeof value === "number";
+}
+var COMPOSER_EMPTY_FIELD_HINT = "Click here to edit this field";
+var EMPTY_FIELD_PLACEHOLDERS = /* @__PURE__ */ new Set([
+  COMPOSER_EMPTY_FIELD_HINT,
+  "Click here to enter text",
+  "Sample Title",
+  "Sample Heading",
+  "Sample Subheading"
+]);
+function isComposerEmptyText(value) {
+  if (value === void 0 || value === null) return true;
+  if (typeof value !== "string") return false;
+  const trimmed = value.trim();
+  return trimmed === "" || EMPTY_FIELD_PLACEHOLDERS.has(trimmed);
+}
+function isReactNodeFallback(fallback) {
+  if (fallback == null || fallback === false) return false;
+  return !isPlainTextValue(fallback);
+}
+function htmlHasVisualChrome(html) {
+  return /<(input|button|select|textarea|form|svg|iframe|video|audio|img)\b/i.test(
+    html
+  );
+}
 function canInlineEdit(name, value) {
   if (isLikelyNonTextFieldName(name)) return false;
   if (value !== void 0 && value !== null && typeof value === "object") {
@@ -3202,19 +3235,22 @@ function canInlineEdit(name, value) {
   if (typeof value === "boolean") return false;
   return true;
 }
+function subscribeComposerEdit(onStoreChange) {
+  if (typeof window === "undefined") return () => {
+  };
+  window.addEventListener("amplifyup:composer-edit", onStoreChange);
+  return () => window.removeEventListener("amplifyup:composer-edit", onStoreChange);
+}
 function useComposerEditMode() {
-  const [enabled, setEnabled] = react.useState(false);
-  react.useEffect(() => {
-    const sync = () => setEnabled(isComposerEditMode());
-    sync();
-    window.addEventListener("amplifyup:composer-edit", sync);
-    return () => window.removeEventListener("amplifyup:composer-edit", sync);
-  }, []);
-  return enabled;
+  return React.useSyncExternalStore(
+    subscribeComposerEdit,
+    isComposerEditMode,
+    () => false
+  );
 }
 function useFieldOverlay(layoutNodeId, name, source) {
-  const [overlay, setOverlay] = react.useState(void 0);
-  react.useEffect(() => {
+  const [overlay, setOverlay] = React.useState(void 0);
+  React.useEffect(() => {
     const onPatch = (event) => {
       const detail = event.detail || {};
       if (detail.fieldName !== name) return;
@@ -3241,6 +3277,14 @@ function commitComposerField(layoutNodeId, componentId, name, value) {
     "*"
   );
 }
+function placeCaret(el, atStart = false) {
+  const range = document.createRange();
+  range.selectNodeContents(el);
+  range.collapse(atStart);
+  const sel = window.getSelection();
+  sel?.removeAllRanges();
+  sel?.addRange(range);
+}
 function ComposerInlineField({
   name,
   value,
@@ -3250,36 +3294,55 @@ function ComposerInlineField({
   layoutNodeId,
   componentId
 }) {
-  const [editing, setEditing] = react.useState(false);
-  const elRef = react.useRef(null);
-  const text = formatFieldValue(value);
+  const [editing, setEditing] = React.useState(false);
+  const [focused, setFocused] = React.useState(false);
+  const elRef = React.useRef(null);
+  const storedEmpty = isComposerEmptyText(value);
+  const text = storedEmpty ? "" : formatFieldValue(value);
   const fallbackText = typeof fallback === "string" || typeof fallback === "number" ? String(fallback) : "";
-  const display = text || fallbackText;
+  const hint = COMPOSER_EMPTY_FIELD_HINT;
+  const idleDisplay = storedEmpty ? hint : text || fallbackText;
   const showRendered = !!render && !editing;
-  react.useEffect(() => {
+  const showHint = storedEmpty && !focused && !showRendered;
+  React.useEffect(() => {
     const el = elRef.current;
     if (!el || showRendered) return;
     if (document.activeElement === el) return;
-    const next = display || "";
+    if (el.querySelector(
+      "input, button, select, textarea, form, svg, iframe, img"
+    )) {
+      return;
+    }
+    const next = idleDisplay || "";
     if (el.textContent !== next) el.textContent = next;
-  }, [display, showRendered]);
-  react.useEffect(() => {
+  }, [idleDisplay, showRendered]);
+  React.useEffect(() => {
     if (!editing || !elRef.current) return;
     const el = elRef.current;
-    el.textContent = display || "";
+    if (storedEmpty) {
+      el.textContent = "";
+      el.focus();
+      placeCaret(el, true);
+      return;
+    }
+    el.textContent = idleDisplay || "";
     el.focus();
-    const range = document.createRange();
-    range.selectNodeContents(el);
-    const sel = window.getSelection();
-    sel?.removeAllRanges();
-    sel?.addRange(range);
-  }, [editing]);
+    placeCaret(el, false);
+  }, [editing, storedEmpty, idleDisplay]);
   const finishEdit = () => {
     const raw = (elRef.current?.innerText ?? "").replace(/\u00a0/g, " ").replace(/\n+$/g, "");
     const next = raw.trim() === "" ? "" : raw;
     setEditing(false);
+    setFocused(false);
+    if (storedEmpty && next === "") {
+      if (elRef.current) elRef.current.textContent = hint;
+      if (typeof value === "string" && EMPTY_FIELD_PLACEHOLDERS.has(value.trim())) {
+        commitComposerField(layoutNodeId, componentId, name, "");
+      }
+      return;
+    }
     if (next === text) return;
-    if (!text && next === fallbackText) return;
+    if (!text && !storedEmpty && next === fallbackText) return;
     commitComposerField(layoutNodeId, componentId, name, next);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3289,6 +3352,7 @@ function ComposerInlineField({
       className,
       "data-amplifyup-field": name,
       "data-amplifyup-node-id": layoutNodeId || void 0,
+      "data-amplifyup-empty-hint": showHint ? "true" : void 0,
       contentEditable: !showRendered,
       suppressContentEditableWarning: true,
       role: "textbox",
@@ -3305,6 +3369,12 @@ function ComposerInlineField({
       },
       onFocus: () => {
         if (!isComposerEditMode()) return;
+        setFocused(true);
+        const el = elRef.current;
+        if (el && storedEmpty) {
+          el.textContent = "";
+          placeCaret(el, true);
+        }
         if (render) setEditing(true);
       },
       onBlur: finishEdit,
@@ -3316,8 +3386,9 @@ function ComposerInlineField({
         }
         if (event.key === "Escape") {
           event.preventDefault();
-          if (elRef.current) elRef.current.textContent = display || "";
+          if (elRef.current) elRef.current.textContent = idleDisplay || "";
           setEditing(false);
+          setFocused(false);
           event.currentTarget.blur();
         }
       },
@@ -3326,12 +3397,59 @@ function ComposerInlineField({
         outline: "1px dashed color-mix(in srgb, currentColor 40%, transparent)",
         outlineOffset: "2px",
         minWidth: "1ch",
-        display: render ? void 0 : "inline"
+        minHeight: "1em",
+        display: render ? void 0 : "inline",
+        opacity: showHint ? 0.5 : void 0
       },
-      children: showRendered ? value != null && value !== "" ? render(value) : fallback ?? display : null
+      children: showRendered ? value != null && value !== "" && !storedEmpty ? render(value) : fallback ?? idleDisplay : isReactNodeFallback(fallback) && !idleDisplay ? fallback : null
     }
   );
 }
+function ComposerInlineHtml({
+  name,
+  html,
+  className,
+  Tag = "div",
+  layoutNodeId,
+  componentId
+}) {
+  const elRef = React.useRef(null);
+  const sourceTextRef = React.useRef("");
+  React.useEffect(() => {
+    const el = elRef.current;
+    if (!el) return;
+    if (document.activeElement === el || el.contains(document.activeElement)) {
+      return;
+    }
+    if (el.innerHTML !== html) el.innerHTML = html;
+    sourceTextRef.current = (el.innerText ?? "").replace(/\u00a0/g, " ").trim();
+  }, [html]);
+  const finishEdit = () => {
+    const el = elRef.current;
+    if (!el) return;
+    const next = (el.innerText ?? "").replace(/\u00a0/g, " ").replace(/\n+$/g, "");
+    if (next.trim() === sourceTextRef.current) return;
+    commitComposerField(layoutNodeId, componentId, name, next.trim());
+  };
+  return React__default.default.createElement(Tag, {
+    ref: elRef,
+    className,
+    "data-amplifyup-field": name,
+    "data-amplifyup-node-id": layoutNodeId || void 0,
+    contentEditable: true,
+    suppressContentEditableWarning: true,
+    dangerouslySetInnerHTML: { __html: html },
+    onMouseDown: (event) => {
+      event.stopPropagation();
+    },
+    onBlur: finishEdit,
+    style: {
+      cursor: "text",
+      outline: "1px dashed color-mix(in srgb, currentColor 40%, transparent)",
+      outlineOffset: "2px"
+    }
+  });
+}
 function formatFieldValue(value) {
   if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
     return String(value);
@@ -3384,7 +3502,7 @@ function Field({
   className,
   render
 }) {
-  const context = react.useContext(ComponentContext);
+  const context = React.useContext(ComponentContext);
   const composerEdit = useComposerEditMode();
   const fieldValue = useFieldOverlay(
     context?.layoutNodeId,
@@ -3398,7 +3516,13 @@ function Field({
   if (render) {
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style: { display: "contents" }, children: render(fieldValue) });
   }
-  if (composerEdit && canInlineEdit(name, fieldValue)) {
+  if (Array.isArray(fieldValue)) {
+    const list = renderLinkList(fieldValue, className);
+    if (list) return list;
+  }
+  const text = formatFieldValue(fieldValue);
+  const showVisualFallback = !text && isReactNodeFallback(fallback);
+  if (composerEdit && canInlineEdit(name, fieldValue) && !showVisualFallback) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       ComposerInlineField,
       {
@@ -3414,11 +3538,6 @@ function Field({
   if (fieldValue === void 0 || fieldValue === null) {
     return fallback ? /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: fallback }) : null;
   }
-  if (Array.isArray(fieldValue)) {
-    const list = renderLinkList(fieldValue, className);
-    if (list) return list;
-  }
-  const text = formatFieldValue(fieldValue);
   if (!text) {
     return fallback ? /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: fallback }) : null;
   }
@@ -3438,7 +3557,7 @@ function RichText({
   className,
   as: Tag = "div"
 }) {
-  const context = react.useContext(ComponentContext);
+  const context = React.useContext(ComponentContext);
   const composerEdit = useComposerEditMode();
   const fieldValue = useFieldOverlay(
     context?.layoutNodeId,
@@ -3449,20 +3568,20 @@ function RichText({
     console.warn(`[AmplifyUp SDK] RichText "${name}" used outside ComponentContextProvider`);
     return fallback ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : null;
   }
-  if (composerEdit && canInlineEdit(name, fieldValue)) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      ComposerInlineField,
-      {
-        name,
-        value: fieldValue,
-        fallback,
-        className,
-        layoutNodeId: context.layoutNodeId,
-        componentId: context.componentId
-      }
-    );
-  }
-  if (fieldValue === void 0 || fieldValue === null || fieldValue === "") {
+  if (isComposerEmptyText(fieldValue)) {
+    if (composerEdit && canInlineEdit(name, fieldValue) && !isReactNodeFallback(fallback)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ComposerInlineField,
+        {
+          name,
+          value: fieldValue,
+          fallback: typeof fallback === "string" || typeof fallback === "number" ? fallback : void 0,
+          className,
+          layoutNodeId: context.layoutNodeId,
+          componentId: context.componentId
+        }
+      );
+    }
     return fallback ? /* @__PURE__ */ jsxRuntime.jsx(Tag, { className, children: fallback }) : null;
   }
   let html = "";
@@ -3480,6 +3599,30 @@ function RichText({
   if (!html) {
     return fallback ? /* @__PURE__ */ jsxRuntime.jsx(Tag, { className, children: fallback }) : null;
   }
+  if (composerEdit && htmlHasVisualChrome(html)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Tag,
+      {
+        className,
+        "data-amplifyup-field": name,
+        "data-amplifyup-node-id": context.layoutNodeId || void 0,
+        dangerouslySetInnerHTML: { __html: html }
+      }
+    );
+  }
+  if (composerEdit && canInlineEdit(name, fieldValue)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ComposerInlineHtml,
+      {
+        name,
+        html,
+        className,
+        Tag,
+        layoutNodeId: context.layoutNodeId,
+        componentId: context.componentId
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(Tag, { className, dangerouslySetInnerHTML: { __html: html } });
 }
 function isPortableImageValue(value) {
@@ -3500,7 +3643,7 @@ function Image({
   height: heightProp,
   ...imgProps
 }) {
-  const context = react.useContext(ComponentContext);
+  const context = React.useContext(ComponentContext);
   const fieldValue = useFieldOverlay(
     context?.layoutNodeId,
     name,
@@ -3530,7 +3673,13 @@ function Image({
     }
   );
 }
-var ComponentRenderBoundary = class extends react.Component {
+function nodeRenderProps(node) {
+  return {
+    ...node.settings || {},
+    ...node.props || {}
+  };
+}
+var ComponentRenderBoundary = class extends React.Component {
   constructor() {
     super(...arguments);
     this.state = { error: null };
@@ -3602,8 +3751,8 @@ function AmplifyRenderer({
   const loading = serverPageConfig ? false : clientHook.loading;
   const error = serverPageConfig ? null : clientHook.error;
   const contentSource = clientHook.source;
-  const [variantCache, setVariantCache] = react.useState({});
-  react.useEffect(() => {
+  const [variantCache, setVariantCache] = React.useState({});
+  React.useEffect(() => {
     if (typeof window !== "undefined") {
       if (window.__AMPLIFYUP_PREVIEW_MODE__ === true) {
         return;
@@ -3629,7 +3778,7 @@ function AmplifyRenderer({
       });
     }
   }, [pageConfig]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!pageConfig?.eventTracking?.length) return;
     const sdk = getSDK();
     if (!sdk.isInitialized()) return;
@@ -3647,7 +3796,7 @@ function AmplifyRenderer({
       window.clearTimeout(t2);
     };
   }, [pageConfig?.id, pageConfig?.eventTracking]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!pageConfig) return;
     const t = window.setTimeout(() => {
       getSDK().setupComponentViewTracking();
@@ -3655,7 +3804,7 @@ function AmplifyRenderer({
     }, 100);
     return () => window.clearTimeout(t);
   }, [variantCache, pageConfig?.id]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     const isVisualEditorMode = () => {
       if (typeof window === "undefined") return false;
       const urlParams = new URLSearchParams(window.location.search);
@@ -3741,7 +3890,7 @@ function AmplifyRenderer({
       console.log("[AmplifyRenderer] Sent component tree from layoutTree:", componentTree.length, "root components");
     }
   }, [pageConfig]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!pageConfig?.layoutTree || !pageConfig.layoutId) return;
     const roots = pageConfig.layoutTree;
     const fromEdge = contentSource === "edge" || roots.some((n) => n._contentSource === "edge");
@@ -3882,7 +4031,7 @@ function AmplifyRenderer({
               "data-amplifyup-slot": "content",
               "data-parent-node-id": node.id,
               "data-parent-component-id": "AmplifyZone",
-              children: children.filter(Boolean).map((child) => /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: renderNode(child) }, child.id))
+              children: children.filter(Boolean).map((child) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: renderNode(child) }, child.id))
             }
           )
         }
@@ -3932,7 +4081,7 @@ function AmplifyRenderer({
             "data-zone-id": slot.zoneId || void 0,
             "data-parent-node-id": node.id,
             "data-parent-component-id": node.componentId,
-            children: safeChildren.filter(Boolean).map((child) => /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: renderNode(child) }, child.id))
+            children: safeChildren.filter(Boolean).map((child) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: renderNode(child) }, child.id))
           },
           slot.slotId
         );
@@ -3953,7 +4102,7 @@ function AmplifyRenderer({
           {
             nodeId: node.id,
             componentId: node.componentId,
-            props: node.props || {},
+            props: nodeRenderProps(node),
             slots: slotsToPass,
             renderComponent
           }
@@ -4123,14 +4272,14 @@ if (typeof window !== "undefined") {
   } catch {
   }
 }
-var AmplifyUpContext = react.createContext(null);
+var AmplifyUpContext = React.createContext(null);
 function AmplifyUpProvider({ children, config }) {
-  const [initialized, setInitialized] = react.useState(false);
-  const [pageConfig, setPageConfig] = react.useState(null);
-  const [loading, setLoading] = react.useState(true);
-  const [error, setError] = react.useState(null);
-  const [source, setSource] = react.useState(null);
-  const [meta, setMeta] = react.useState(null);
+  const [initialized, setInitialized] = React.useState(false);
+  const [pageConfig, setPageConfig] = React.useState(null);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  const [source, setSource] = React.useState(null);
+  const [meta, setMeta] = React.useState(null);
   const getActualRoute = () => {
     if (typeof window === "undefined") return "";
     const currentPath = window.location.pathname;
@@ -4148,13 +4297,13 @@ function AmplifyUpProvider({ children, config }) {
     return currentPath;
   };
   const nextPathname = usePathname ? usePathname() : null;
-  const [pathname, setPathname] = react.useState(() => {
+  const [pathname, setPathname] = React.useState(() => {
     if (typeof window !== "undefined") {
       return getActualRoute();
     }
     return "";
   });
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (typeof window !== "undefined") {
       const actualRoute = getActualRoute();
       if (window.location.pathname === "/api/pages/proxy" || window.location.pathname.startsWith("/api/pages/proxy")) {
@@ -4180,7 +4329,7 @@ function AmplifyUpProvider({ children, config }) {
       };
     }
   }, [nextPathname]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     let cancelled = false;
     const sdk = getSDK();
     sdk.init(config).then(() => {
@@ -4197,7 +4346,7 @@ function AmplifyUpProvider({ children, config }) {
       cancelled = true;
     };
   }, [config.trackingId, config.target, config.debug, config.dev, config.siteId]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!initialized) return;
     let cancelled = false;
     const load = async () => {
@@ -4293,7 +4442,7 @@ function AmplifyUpProvider({ children, config }) {
   );
 }
 function useAmplifyUp() {
-  const context = react.useContext(AmplifyUpContext);
+  const context = React.useContext(AmplifyUpContext);
   if (!context) {
     throw new Error("useAmplifyUp must be used within AmplifyUpProvider");
   }