@amplifyup/sdk 0.1.38 → 0.1.40

package/dist/react.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { createContext, useState, useEffect, useContext, Fragment as Fragment$1, useRef, Component } from 'react';
+import React, { createContext, useState, useEffect, useContext, Fragment as Fragment$1, useSyncExternalStore, useRef, Component } from 'react';
 import { marked } from 'marked';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -2634,7 +2634,7 @@ Available Console Commands:
     if (!highlightComponents && !showZones) return;
     const existing = document.getElementById("amplifyup-preview-highlights");
     if (existing) existing.remove();
-    const primary = "hsl(82 92% 42%)";
+    const primary = "hsl(82 100% 52%)";
     const lines = [];
     if (highlightComponents) {
       lines.push(
@@ -2644,7 +2644,7 @@ Available Console Commands:
         "[data-amplifyup-component].amplifyup-selected, [data-component-id].amplifyup-selected {",
         `  outline: 2px solid ${primary} !important;`,
         "  outline-offset: -2px !important;",
-        "  box-shadow: inset 0 0 0 1px hsl(82 92% 42% / 0.25) !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) {",
@@ -2656,7 +2656,7 @@ Available Console Commands:
     if (highlightComponents || showZones) {
       lines.push(
         "[data-slot-id].amplifyup-selected, [data-amplifyup-slot].amplifyup-selected {",
-        "  background-color: rgba(245, 245, 220, 0.35) !important;",
+        "  background-color: hsl(82 100% 52% / 0.12) !important;",
         "}"
       );
     }
@@ -3031,7 +3031,10 @@ function useLiveComposerProps(layoutNodeId, props) {
         return;
       }
       if (!matchesNode(nodeId)) return;
-      setLive(nextProps);
+      setLive((prev) => ({
+        ...prev,
+        ...nextProps
+      }));
     };
     const onPatch = (event) => {
       const detail = event.detail || {};
@@ -3192,6 +3195,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") {
@@ -3200,15 +3229,18 @@ 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] = useState(false);
-  useEffect(() => {
-    const sync = () => setEnabled(isComposerEditMode());
-    sync();
-    window.addEventListener("amplifyup:composer-edit", sync);
-    return () => window.removeEventListener("amplifyup:composer-edit", sync);
-  }, []);
-  return enabled;
+  return useSyncExternalStore(
+    subscribeComposerEdit,
+    isComposerEditMode,
+    () => false
+  );
 }
 function useFieldOverlay(layoutNodeId, name, source) {
   const [overlay, setOverlay] = useState(void 0);
@@ -3239,6 +3271,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,
@@ -3249,35 +3289,54 @@ function ComposerInlineField({
   componentId
 }) {
   const [editing, setEditing] = useState(false);
+  const [focused, setFocused] = useState(false);
   const elRef = useRef(null);
-  const text = formatFieldValue(value);
+  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;
+  const showHint = storedEmpty && !focused && !showRendered;
   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]);
+  }, [idleDisplay, showRendered]);
   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__ */ jsx(
@@ -3287,6 +3346,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",
@@ -3303,6 +3363,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,
@@ -3314,8 +3380,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();
         }
       },
@@ -3324,12 +3391,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 = useRef(null);
+  const sourceTextRef = useRef("");
+  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.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);
@@ -3396,7 +3510,13 @@ function Field({
   if (render) {
     return /* @__PURE__ */ 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__ */ jsx(
       ComposerInlineField,
       {
@@ -3412,11 +3532,6 @@ function Field({
   if (fieldValue === void 0 || fieldValue === null) {
     return fallback ? /* @__PURE__ */ 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__ */ jsx("span", { className, children: fallback }) : null;
   }
@@ -3447,20 +3562,20 @@ function RichText({
     console.warn(`[AmplifyUp SDK] RichText "${name}" used outside ComponentContextProvider`);
     return fallback ? /* @__PURE__ */ jsx(Fragment, { children: fallback }) : null;
   }
-  if (composerEdit && canInlineEdit(name, fieldValue)) {
-    return /* @__PURE__ */ 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__ */ 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__ */ jsx(Tag, { className, children: fallback }) : null;
   }
   let html = "";
@@ -3478,6 +3593,30 @@ function RichText({
   if (!html) {
     return fallback ? /* @__PURE__ */ jsx(Tag, { className, children: fallback }) : null;
   }
+  if (composerEdit && htmlHasVisualChrome(html)) {
+    return /* @__PURE__ */ 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__ */ jsx(
+      ComposerInlineHtml,
+      {
+        name,
+        html,
+        className,
+        Tag,
+        layoutNodeId: context.layoutNodeId,
+        componentId: context.componentId
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(Tag, { className, dangerouslySetInnerHTML: { __html: html } });
 }
 function isPortableImageValue(value) {
@@ -3528,6 +3667,12 @@ function Image({
     }
   );
 }
+function nodeRenderProps(node) {
+  return {
+    ...node.settings || {},
+    ...node.props || {}
+  };
+}
 var ComponentRenderBoundary = class extends Component {
   constructor() {
     super(...arguments);
@@ -3951,7 +4096,7 @@ function AmplifyRenderer({
           {
             nodeId: node.id,
             componentId: node.componentId,
-            props: node.props || {},
+            props: nodeRenderProps(node),
             slots: slotsToPass,
             renderComponent
           }