@amplifyup/sdk 0.1.55 → 0.1.57

package/dist/react.mjs

@@ -1,5 +1,5 @@
 'use client';
-import React, { createContext, memo, useState, useEffect, useContext, Fragment as Fragment$1, Component, useRef, useSyncExternalStore } from 'react';
+import React, { createContext, memo, useState, useEffect, Fragment as Fragment$1, useContext, Component, useRef, useSyncExternalStore } from 'react';
 import { marked } from 'marked';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
@@ -2809,7 +2809,7 @@ Available Console Commands:
     if (typeof document === "undefined") return;
     this.teardownComposerDragDrop();
     const slotSelector = "[data-slot-id], [data-amplifyup-slot]";
-    const componentSelector = "[data-amplifyup-component], [data-component-id]";
+    const componentSelector = "[data-amplifyup-component], [data-component-id], [data-amplifyup-node], [data-node-id]";
     const clearDragOverState = () => {
       this.clearComposerDragHighlight();
     };
@@ -2858,6 +2858,7 @@ Available Console Commands:
       if (!target?.closest) return;
       const component = target.closest(componentSelector);
       const slot = target.closest(slotSelector);
+      const pageSlot = slot && slot.getAttribute("data-slot-source") === "page" ? slot : null;
       if (this.highlightComponentsEnabled && component) {
         if (!component.classList.contains("amplifyup-component-hover")) {
           clearComponentHover();
@@ -2869,7 +2870,7 @@ Available Console Commands:
         return;
       }
       clearComponentHover();
-      if (this.showZonesEnabled && slot) {
+      if (this.showZonesEnabled && slot && !pageSlot) {
         if (!slot.classList.contains("amplifyup-slot-hover")) {
           clearSlotHover();
           slot.classList.add("amplifyup-slot-hover");
@@ -2999,16 +3000,18 @@ Available Console Commands:
     const lines = [];
     if (highlightComponents) {
       lines.push(
-        "[data-amplifyup-component], [data-component-id] {",
+        "[data-amplifyup-component], [data-component-id], [data-amplifyup-node], [data-node-id] {",
         "  cursor: pointer !important;",
         "}",
-        "[data-amplifyup-component].amplifyup-selected, [data-component-id].amplifyup-selected {",
+        "[data-amplifyup-component].amplifyup-selected, [data-component-id].amplifyup-selected, [data-amplifyup-node].amplifyup-selected, [data-node-id].amplifyup-selected {",
         `  outline: 2px solid ${primary} !important;`,
         "  outline-offset: -2px !important;",
         "  box-shadow: inset 0 0 0 1px hsl(82 100% 52% / 0.25) !important;",
         "}",
         "[data-amplifyup-component].amplifyup-component-hover:not(.amplifyup-selected),",
-        "[data-component-id].amplifyup-component-hover:not(.amplifyup-selected) {",
+        "[data-component-id].amplifyup-component-hover:not(.amplifyup-selected),",
+        "[data-amplifyup-node].amplifyup-component-hover:not(.amplifyup-selected),",
+        "[data-node-id].amplifyup-component-hover:not(.amplifyup-selected) {",
         `  outline: 2px solid ${primary} !important;`,
         "  outline-offset: -2px !important;",
         "}"
@@ -3211,7 +3214,7 @@ Available Console Commands:
     let current = element;
     let sawPageSlot = false;
     while (current) {
-      if (current.hasAttribute("data-amplifyup-component") || current.hasAttribute("data-component-id") || current.hasAttribute("data-amplifyup-slot") || current.hasAttribute("data-slot-id")) {
+      if (current.hasAttribute("data-amplifyup-component") || current.hasAttribute("data-component-id") || current.hasAttribute("data-amplifyup-slot") || current.hasAttribute("data-slot-id") || current.hasAttribute("data-node-id") || current.hasAttribute("data-amplifyup-node")) {
         hierarchy.push(current);
         if (current.getAttribute("data-slot-source") === "page") {
           sawPageSlot = true;
@@ -3236,13 +3239,14 @@ Available Console Commands:
     const componentId = element.getAttribute("data-amplifyup-component") || element.getAttribute("data-component-id");
     const slotName = componentId ? null : element.getAttribute("data-amplifyup-slot") || element.getAttribute("data-slot-id");
     const componentName = element.getAttribute("data-component-name");
+    const nodeId = element.getAttribute("data-node-id") || element.closest("[data-node-id]")?.getAttribute("data-node-id") || null;
     const hierarchyInfo = hierarchy.map((el, index) => {
       const elComponentId = el.getAttribute("data-amplifyup-component") || el.getAttribute("data-component-id");
       const elSlotName = el.getAttribute("data-amplifyup-slot") || el.getAttribute("data-slot-id");
       const elComponentName = el.getAttribute("data-component-name");
       const isSlot = !elComponentId && !!elSlotName;
       const isPageSlot = isSlot && el.getAttribute("data-slot-source") === "page";
-      const nodeId = el.getAttribute("data-node-id") || (isSlot ? el.getAttribute("data-parent-node-id") : null);
+      const nodeId2 = el.getAttribute("data-node-id") || (isSlot ? el.getAttribute("data-parent-node-id") : null);
       return {
         index,
         componentId: elComponentId,
@@ -3250,7 +3254,7 @@ Available Console Commands:
         slotName: isSlot ? elSlotName : null,
         isSlot,
         isPageSlot,
-        nodeId
+        nodeId: nodeId2
       };
     });
     const rect = element.getBoundingClientRect ? element.getBoundingClientRect() : null;
@@ -3260,6 +3264,7 @@ Available Console Commands:
       componentId,
       componentName,
       slotName,
+      nodeId,
       hierarchy: hierarchyInfo,
       selectedIndex: hierarchy.length - 1,
       ...bounds && { bounds },
@@ -3289,22 +3294,27 @@ Available Console Commands:
     }
     const doc = document;
     if (highlightComponents) {
-      const componentElements = doc.querySelectorAll("[data-amplifyup-component], [data-component-id]");
+      const componentElements = doc.querySelectorAll(
+        "[data-amplifyup-component], [data-component-id], [data-amplifyup-node], [data-node-id]"
+      );
       console.log("[AmplifyUp SDK] Found", componentElements.length, "components to highlight");
       componentElements.forEach((el) => {
         const htmlEl = el;
         const componentId = htmlEl.getAttribute("data-amplifyup-component") || htmlEl.getAttribute("data-component-id");
-        if (!componentId) return;
+        const isLayoutNode = htmlEl.hasAttribute("data-node-id") || htmlEl.hasAttribute("data-amplifyup-node");
+        if (!componentId && !isLayoutNode) return;
         if (htmlEl.classList.contains("amplifyup-component-highlight")) return;
-        const component = this.componentRegistry.find((c) => c.component_id === componentId);
+        const component = componentId ? this.componentRegistry.find((c) => c.component_id === componentId) : void 0;
         htmlEl.classList.add("amplifyup-component-highlight");
-        htmlEl.setAttribute("data-component-id", componentId);
-        htmlEl.setAttribute("data-component-name", component?.component_name || componentId);
+        if (componentId) {
+          htmlEl.setAttribute("data-component-id", componentId);
+          htmlEl.setAttribute("data-component-name", component?.component_name || componentId);
+        }
         const hierarchy = this.buildComponentHierarchy(htmlEl);
         const handleClick = (e) => {
           e.stopPropagation();
           this.sendSelectionMessage(htmlEl, hierarchy);
-          if (window.parent && window.parent !== window) {
+          if (componentId && window.parent && window.parent !== window) {
             window.parent.postMessage({ type: "CHECK_COMPONENT_DELETABLE", componentId }, "*");
           }
         };
@@ -3345,6 +3355,15 @@ Available Console Commands:
         htmlEl.classList.add("amplifyup-slot-highlight");
         const hierarchy = this.buildComponentHierarchy(htmlEl);
         const handleClick = (e) => {
+          const clickTarget = e.target;
+          if (htmlEl.getAttribute("data-slot-source") === "page" && clickTarget?.closest) {
+            const nested = clickTarget.closest(
+              "[data-node-id], [data-amplifyup-node], [data-amplifyup-component], [data-component-id]"
+            );
+            if (nested && nested !== htmlEl && htmlEl.contains(nested)) {
+              return;
+            }
+          }
           e.stopPropagation();
           this.sendSelectionMessage(htmlEl, hierarchy, isEmpty);
         };
@@ -3679,13 +3698,31 @@ function htmlHasVisualChrome(html) {
   );
 }
 function canInlineEdit(name, value) {
-  if (isLikelyNonTextFieldName(name)) return false;
+  if (!name || isLikelyNonTextFieldName(name)) return false;
   if (value !== void 0 && value !== null && typeof value === "object") {
     return false;
   }
   if (typeof value === "boolean") return false;
   return true;
 }
+function canInlineEditRichText(name, value) {
+  if (!name || isLikelyNonTextFieldName(name)) return false;
+  if (typeof value === "boolean") return false;
+  if (value !== void 0 && value !== null && typeof value === "object" && !Array.isArray(value)) {
+    return false;
+  }
+  return true;
+}
+function inferEditName(explicitName, contextProps, sourceValue) {
+  if (explicitName) return explicitName;
+  if (!contextProps) return "";
+  const keys = Object.keys(contextProps).filter(
+    (key) => Object.is(contextProps[key], sourceValue)
+  );
+  if (keys.length === 1) return keys[0];
+  if (keys.length === 0 || isComposerEmptyText(sourceValue)) return "";
+  return keys[0];
+}
 function subscribeComposerEdit(onStoreChange) {
   if (typeof window === "undefined") return () => {
   };
@@ -3880,9 +3917,11 @@ function ComposerInlineHtml({
   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());
+    const nextHtml = el.innerHTML;
+    const nextText = (el.innerText ?? "").replace(/\u00a0/g, " ").replace(/\n+$/g, "").trim();
+    if (nextText === sourceTextRef.current && nextHtml === html) return;
+    const commitValue = htmlHasVisualChrome(html) || /<[a-z][\s\S]*>/i.test(html) ? nextHtml : nextText;
+    commitComposerField(layoutNodeId, componentId, name, commitValue);
   };
   return React.createElement(Tag, {
     ref: elRef,
@@ -3924,15 +3963,10 @@ function formatFieldValue(value) {
 }
 function warnProjectionProps(component, name, hasExplicitValue) {
   if (process.env.NODE_ENV === "production") return;
-  if (hasExplicitValue && name) {
-    console.warn(
-      `[AmplifyUp SDK] ${component}: pass either value={\u2026} or deprecated name="\u2026", not both. Prefer value={\u2026} and omit name.`
-    );
-    return;
-  }
+  if (hasExplicitValue) return;
   if (name) {
     console.warn(
-      `[AmplifyUp SDK] ${component} \`name\` is deprecated and will be removed. Prefer value={${name}} from your component props and omit name.`
+      `[AmplifyUp SDK] ${component} \`name\` is deprecated and will be removed. Prefer value={${name}} from your component props.`
     );
   }
 }
@@ -3972,7 +4006,7 @@ function Field(props) {
   const composerEdit = useComposerEditMode();
   const hasExplicitValue = hasOwnProp(props, "value");
   const sourceValue = hasExplicitValue ? value : name ? context?.props?.[name] : void 0;
-  const editName = hasExplicitValue ? "" : name || "";
+  const editName = inferEditName(name, context?.props, sourceValue);
   const fieldValue = useFieldOverlay(
     context?.layoutNodeId,
     editName,
@@ -3986,6 +4020,20 @@ function Field(props) {
     return fallback ? /* @__PURE__ */ jsx(Fragment, { children: fallback }) : null;
   }
   if (render) {
+    if (composerEdit && editName && context && canInlineEdit(editName, fieldValue)) {
+      return /* @__PURE__ */ jsx(
+        ComposerInlineField,
+        {
+          name: editName,
+          value: fieldValue,
+          fallback,
+          className,
+          render,
+          layoutNodeId: context.layoutNodeId,
+          componentId: context.componentId
+        }
+      );
+    }
     return /* @__PURE__ */ jsx("span", { className, style: { display: "contents" }, children: render(fieldValue) });
   }
   if (Array.isArray(fieldValue)) {
@@ -4039,7 +4087,7 @@ function RichText(props) {
   const hasValueProp = hasOwnProp(props, "value");
   const hasExplicitValue = hasValueProp || childrenValue !== void 0;
   const sourceValue = hasValueProp ? value : childrenValue !== void 0 ? childrenValue : name ? context?.props?.[name] : void 0;
-  const editName = hasExplicitValue ? "" : name || "";
+  const editName = inferEditName(name, context?.props, sourceValue);
   const fieldValue = useFieldOverlay(
     context?.layoutNodeId,
     editName,
@@ -4052,7 +4100,7 @@ function RichText(props) {
     return fallback ? /* @__PURE__ */ jsx(Fragment, { children: fallback }) : null;
   }
   warnProjectionProps("RichText", name, hasExplicitValue);
-  const canEdit = !!editName && !!context && canInlineEdit(editName, fieldValue);
+  const canEdit = !!context && canInlineEditRichText(editName, fieldValue);
   if (isComposerEmptyText(fieldValue)) {
     if (composerEdit && canEdit && !isReactNodeFallback(fallback) && !classNameIsBlock(className)) {
       return /* @__PURE__ */ jsx(
@@ -4084,17 +4132,6 @@ function RichText(props) {
   if (!html) {
     return fallback ? /* @__PURE__ */ jsx(Tag, { className, children: fallback }) : null;
   }
-  if (composerEdit && htmlHasVisualChrome(html)) {
-    return /* @__PURE__ */ jsx(
-      Tag,
-      {
-        className,
-        "data-amplifyup-field": editName || void 0,
-        "data-amplifyup-node-id": context?.layoutNodeId || void 0,
-        dangerouslySetInnerHTML: { __html: html }
-      }
-    );
-  }
   if (composerEdit && canEdit) {
     return /* @__PURE__ */ jsx(
       ComposerInlineHtml,
@@ -4135,7 +4172,7 @@ function Image(props) {
   const sourceValue = hasExplicitValue ? value : name ? context?.props?.[name] : void 0;
   const fieldValue = useFieldOverlay(
     context?.layoutNodeId,
-    hasExplicitValue ? "" : name || "",
+    inferEditName(name, context?.props, sourceValue),
     sourceValue
   );
   warnProjectionProps("Image", name, hasExplicitValue);
@@ -4569,23 +4606,32 @@ function AmplifyRendererInner({
       }
     }
     const slotsToPass = Object.keys(slotChildren).length > 0 ? slotChildren : void 0;
-    return /* @__PURE__ */ jsx("div", { "data-node-id": node.id, "data-amplifyup-node": "", children: /* @__PURE__ */ jsx(
-      ComponentRenderBoundary,
+    return /* @__PURE__ */ jsx(
+      "div",
       {
-        componentId: node.componentId,
-        nodeId: node.id,
+        "data-node-id": node.id,
+        "data-amplifyup-node": "",
+        "data-component-id": node.componentId,
+        "data-amplifyup-component": node.componentId,
         children: /* @__PURE__ */ jsx(
-          LiveNodeRender,
+          ComponentRenderBoundary,
           {
-            nodeId: node.id,
             componentId: node.componentId,
-            props: nodeRenderProps(node),
-            slots: slotsToPass,
-            renderComponent
+            nodeId: node.id,
+            children: /* @__PURE__ */ jsx(
+              LiveNodeRender,
+              {
+                nodeId: node.id,
+                componentId: node.componentId,
+                props: nodeRenderProps(node),
+                slots: slotsToPass,
+                renderComponent
+              }
+            )
           }
         )
       }
-    ) });
+    );
   };
   const rawTree = pageConfig.layoutTree;
   const layoutTree = Array.isArray(rawTree) ? rawTree : rawTree && typeof rawTree === "object" && rawTree.componentId ? [rawTree] : [];
@@ -4599,9 +4645,9 @@ function AmplifyRendererInner({
       "data-amplifyup-slot": "main",
       "data-slot-source": "page",
       "data-slot-empty": layoutTree.length === 0 ? "true" : void 0,
-      children: layoutTree.map((node) => /* @__PURE__ */ jsx("div", { children: renderNode(node) }, node.id))
+      children: layoutTree.map((node) => /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(node) }, node.id))
     }
-  ) : layoutTree.map((node) => /* @__PURE__ */ jsx("div", { children: renderNode(node) }, node.id)) });
+  ) : layoutTree.map((node) => /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(node) }, node.id)) });
 }
 var AmplifyRenderer = memo(AmplifyRendererInner);
 function defaultPreviewCanvas() {