@amplifyup/sdk 0.1.56 → 0.1.58

package/dist/react.js

@@ -2815,7 +2815,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();
     };
@@ -2864,6 +2864,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();
@@ -2875,7 +2876,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");
@@ -3005,16 +3006,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;",
         "}"
@@ -3217,7 +3220,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;
@@ -3242,13 +3245,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,
@@ -3256,7 +3260,7 @@ Available Console Commands:
         slotName: isSlot ? elSlotName : null,
         isSlot,
         isPageSlot,
-        nodeId
+        nodeId: nodeId2
       };
     });
     const rect = element.getBoundingClientRect ? element.getBoundingClientRect() : null;
@@ -3266,6 +3270,7 @@ Available Console Commands:
       componentId,
       componentName,
       slotName,
+      nodeId,
       hierarchy: hierarchyInfo,
       selectedIndex: hierarchy.length - 1,
       ...bounds && { bounds },
@@ -3295,22 +3300,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 }, "*");
           }
         };
@@ -3351,6 +3361,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,11 +3698,6 @@ function isReactNodeFallback(fallback) {
 function classNameIsBlock(className) {
   return /(?:^|\s)block(?:\s|$)/.test(className || "");
 }
-function htmlHasVisualChrome(html) {
-  return /<(input|button|select|textarea|form|svg|iframe|video|audio|img)\b/i.test(
-    html
-  );
-}
 function canInlineEdit(name, value) {
   if (!name || isLikelyNonTextFieldName(name)) return false;
   if (value !== void 0 && value !== null && typeof value === "object") {
@@ -3752,6 +3766,36 @@ function commitComposerField(layoutNodeId, componentId, name, value) {
     "*"
   );
 }
+function looksLikeRichCanvasField(name) {
+  const tokens = String(name || "").replace(/([a-z])([A-Z])/g, "$1 $2").split(/[._\-\s/]+/).map((s) => s.toLowerCase()).filter(Boolean);
+  const last = tokens[tokens.length - 1] || "";
+  return last === "body" || last === "content" || last === "copy" || last === "excerpt" || last === "markdown" || last === "richtext";
+}
+var lastRichTextRequestAt = 0;
+function requestCanvasRichTextEdit(opts) {
+  if (typeof window === "undefined" || window.parent === window) return;
+  if (!opts.name) return;
+  const now = Date.now();
+  if (now - lastRichTextRequestAt < 400) return;
+  lastRichTextRequestAt = now;
+  const rect = opts.el.getBoundingClientRect();
+  window.parent.postMessage(
+    {
+      type: "AMPLIFYUP_RICHTEXT_EDIT",
+      layoutNodeId: opts.layoutNodeId,
+      componentId: opts.componentId,
+      fieldName: opts.name,
+      value: opts.value,
+      bounds: {
+        top: rect.top,
+        left: rect.left,
+        width: Math.max(rect.width, 240),
+        height: Math.max(rect.height, 64)
+      }
+    },
+    "*"
+  );
+}
 function placeCaret(el, atStart = false) {
   const range = document.createRange();
   range.selectNodeContents(el);
@@ -3767,7 +3811,8 @@ function ComposerInlineField({
   className,
   render,
   layoutNodeId,
-  componentId
+  componentId,
+  rich = false
 }) {
   const [editing, setEditing] = React.useState(false);
   const [focused, setFocused] = React.useState(false);
@@ -3820,6 +3865,19 @@ function ComposerInlineField({
     if (!text && !storedEmpty && next === fallbackText) return;
     commitComposerField(layoutNodeId, componentId, name, next);
   };
+  const openRichEditor = (event) => {
+    if (!isComposerEditMode() || !elRef.current) return;
+    event?.preventDefault();
+    event?.stopPropagation();
+    const source = typeof value === "string" && !storedEmpty ? value : text || "";
+    requestCanvasRichTextEdit({
+      el: elRef.current,
+      layoutNodeId,
+      componentId,
+      name,
+      value: source
+    });
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
@@ -3828,7 +3886,7 @@ function ComposerInlineField({
       "data-amplifyup-field": name,
       "data-amplifyup-node-id": layoutNodeId || void 0,
       "data-amplifyup-empty-hint": showHint ? "true" : void 0,
-      contentEditable: !showRendered,
+      contentEditable: !rich && !showRendered,
       suppressContentEditableWarning: true,
       role: "textbox",
       tabIndex: 0,
@@ -3839,12 +3897,20 @@ function ComposerInlineField({
         if (!isComposerEditMode()) return;
         const link = event.target?.closest?.("a");
         if (link) event.preventDefault();
+        if (rich) {
+          openRichEditor(event);
+          return;
+        }
         if (render) {
           setEditing(true);
         }
       },
       onFocus: () => {
         if (!isComposerEditMode()) return;
+        if (rich) {
+          openRichEditor();
+          return;
+        }
         setFocused(true);
         const el = elRef.current;
         if (el && storedEmpty) {
@@ -3853,7 +3919,7 @@ function ComposerInlineField({
         }
         if (render) setEditing(true);
       },
-      onBlur: finishEdit,
+      onBlur: rich ? void 0 : finishEdit,
       onKeyDown: (event) => {
         event.stopPropagation();
         if (event.key === "Enter" && !event.shiftKey) {
@@ -3885,43 +3951,40 @@ function ComposerInlineField({
 function ComposerInlineHtml({
   name,
   html,
+  sourceValue,
   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 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);
+  const openRichEditor = (event) => {
+    if (!elRef.current) return;
+    event.preventDefault();
+    event.stopPropagation();
+    requestCanvasRichTextEdit({
+      el: elRef.current,
+      layoutNodeId,
+      componentId,
+      name,
+      value: sourceValue
+    });
   };
   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,
+    onClick: openRichEditor,
     style: {
       cursor: "text",
       outline: "1px dashed color-mix(in srgb, currentColor 40%, transparent)",
@@ -4017,7 +4080,8 @@ function Field(props) {
           className,
           render,
           layoutNodeId: context.layoutNodeId,
-          componentId: context.componentId
+          componentId: context.componentId,
+          rich: looksLikeRichCanvasField(editName)
         }
       );
     }
@@ -4039,7 +4103,8 @@ function Field(props) {
         fallback,
         className,
         layoutNodeId: context.layoutNodeId,
-        componentId: context.componentId
+        componentId: context.componentId,
+        rich: looksLikeRichCanvasField(editName)
       }
     );
   }
@@ -4098,7 +4163,8 @@ function RichText(props) {
           fallback: typeof fallback === "string" || typeof fallback === "number" ? fallback : void 0,
           className,
           layoutNodeId: context?.layoutNodeId,
-          componentId: context?.componentId
+          componentId: context?.componentId,
+          rich: true
         }
       );
     }
@@ -4125,6 +4191,7 @@ function RichText(props) {
       {
         name: editName,
         html,
+        sourceValue: typeof fieldValue === "string" ? fieldValue : html,
         className,
         Tag,
         layoutNodeId: context?.layoutNodeId,
@@ -4593,23 +4660,32 @@ function AmplifyRendererInner({
       }
     }
     const slotsToPass = Object.keys(slotChildren).length > 0 ? slotChildren : void 0;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-node-id": node.id, "data-amplifyup-node": "", children: /* @__PURE__ */ jsxRuntime.jsx(
-      ComponentRenderBoundary,
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          LiveNodeRender,
+          ComponentRenderBoundary,
           {
-            nodeId: node.id,
             componentId: node.componentId,
-            props: nodeRenderProps(node),
-            slots: slotsToPass,
-            renderComponent
+            nodeId: node.id,
+            children: /* @__PURE__ */ jsxRuntime.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] : [];
@@ -4623,9 +4699,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__ */ jsxRuntime.jsx("div", { children: renderNode(node) }, node.id))
+      children: layoutTree.map((node) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: renderNode(node) }, node.id))
     }
-  ) : layoutTree.map((node) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderNode(node) }, node.id)) });
+  ) : layoutTree.map((node) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: renderNode(node) }, node.id)) });
 }
 var AmplifyRenderer = React.memo(AmplifyRendererInner);
 function defaultPreviewCanvas() {