@amplifyup/sdk 0.1.26 → 0.1.27

package/dist/react.js

@@ -1783,6 +1783,12 @@ Available Console Commands:
         return;
       }
       try {
+        if (event.data?.type === "AMPLIFYUP_FIELD_PATCH") {
+          window.dispatchEvent(
+            new CustomEvent("amplifyup:field-patch", { detail: event.data })
+          );
+          return;
+        }
         if (event.data?.type === "COMPONENT_DELETABLE_STATUS") {
           const { componentId, deletable, nodeId } = event.data;
           const element = document.querySelector(`[data-component-id="${componentId}"]`);
@@ -1969,6 +1975,10 @@ Available Console Commands:
   setEventSelectionMode(enabled) {
     if (typeof document === "undefined") return;
     this.eventSelectionMode = enabled;
+    if (typeof window !== "undefined") {
+      window.__AMPLIFYUP_EVENT_SELECTION__ = enabled;
+      window.dispatchEvent(new CustomEvent("amplifyup:composer-edit"));
+    }
     if (this.eventSelectionClickHandler) {
       document.removeEventListener("click", this.eventSelectionClickHandler, true);
       this.eventSelectionClickHandler = null;
@@ -2206,6 +2216,14 @@ Available Console Commands:
         el.classList.add("amplifyup-selected");
       }
     });
+    if (typeof window !== "undefined") {
+      window.__AMPLIFYUP_COMPOSER_EDIT__ = highlightComponents;
+      window.dispatchEvent(
+        new CustomEvent("amplifyup:composer-edit", {
+          detail: { enabled: highlightComponents }
+        })
+      );
+    }
   }
   /** Document-level drag/drop for cross-iframe drags from Composer sidebar. */
   setupComposerDragDrop() {
@@ -2514,6 +2532,12 @@ Available Console Commands:
     const clearSelection = opts?.clearSelection !== false;
     this.highlightingEnabled = false;
     this.teardownComposerDragDrop();
+    if (opts?.clearSelection !== false && typeof window !== "undefined") {
+      window.__AMPLIFYUP_COMPOSER_EDIT__ = false;
+      window.dispatchEvent(
+        new CustomEvent("amplifyup:composer-edit", { detail: { enabled: false } })
+      );
+    }
     if (this.mutationObserver) {
       this.mutationObserver.disconnect();
       this.mutationObserver = null;
@@ -3381,6 +3405,152 @@ function Slot({
     }
   );
 }
+function isComposerEditMode() {
+  if (typeof window === "undefined") return false;
+  return isComposerPreview() && window.__AMPLIFYUP_COMPOSER_EDIT__ === true && window.__AMPLIFYUP_EVENT_SELECTION__ !== true;
+}
+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 canInlineEdit(name, value) {
+  if (isLikelyNonTextFieldName(name)) return false;
+  if (value !== void 0 && value !== null && typeof value === "object") {
+    return false;
+  }
+  if (typeof value === "boolean") return false;
+  return true;
+}
+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;
+}
+function useFieldOverlay(layoutNodeId, name, source) {
+  const [overlay, setOverlay] = react.useState(void 0);
+  react.useEffect(() => {
+    const onPatch = (event) => {
+      const detail = event.detail || {};
+      if (detail.fieldName !== name) return;
+      if (detail.layoutNodeId && layoutNodeId && String(detail.layoutNodeId) !== String(layoutNodeId)) {
+        return;
+      }
+      setOverlay(detail.value);
+    };
+    window.addEventListener("amplifyup:field-patch", onPatch);
+    return () => window.removeEventListener("amplifyup:field-patch", onPatch);
+  }, [layoutNodeId, name]);
+  return overlay !== void 0 ? overlay : source;
+}
+function commitComposerField(layoutNodeId, componentId, name, value) {
+  if (typeof window === "undefined" || window.parent === window) return;
+  window.parent.postMessage(
+    {
+      type: "AMPLIFYUP_FIELD_COMMIT",
+      layoutNodeId,
+      componentId,
+      fieldName: name,
+      value
+    },
+    "*"
+  );
+}
+function ComposerInlineField({
+  name,
+  value,
+  fallback,
+  className,
+  render,
+  layoutNodeId,
+  componentId
+}) {
+  const [editing, setEditing] = react.useState(false);
+  const elRef = react.useRef(null);
+  const text = formatFieldValue(value);
+  const fallbackText = typeof fallback === "string" || typeof fallback === "number" ? String(fallback) : "";
+  const display = text || fallbackText;
+  const showRendered = !!render && !editing;
+  react.useEffect(() => {
+    const el = elRef.current;
+    if (!el || showRendered) return;
+    if (document.activeElement === el) return;
+    const next = display || "";
+    if (el.textContent !== next) el.textContent = next;
+  }, [display, showRendered]);
+  react.useEffect(() => {
+    if (!editing || !elRef.current) return;
+    const el = elRef.current;
+    el.textContent = display || "";
+    el.focus();
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+  }, [editing]);
+  const finishEdit = () => {
+    const raw = (elRef.current?.innerText ?? "").replace(/\u00a0/g, " ").replace(/\n+$/g, "");
+    const next = raw.trim() === "" ? "" : raw;
+    setEditing(false);
+    if (next === text) return;
+    if (!text && next === fallbackText) return;
+    commitComposerField(layoutNodeId, componentId, name, next);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref: elRef,
+      className,
+      "data-amplifyup-field": name,
+      "data-amplifyup-node-id": layoutNodeId || void 0,
+      contentEditable: !showRendered,
+      suppressContentEditableWarning: true,
+      role: "textbox",
+      tabIndex: 0,
+      onMouseDown: (event) => {
+        event.stopPropagation();
+      },
+      onClick: (event) => {
+        const link = event.target?.closest?.("a");
+        if (link) event.preventDefault();
+        if (render && isComposerEditMode()) {
+          setEditing(true);
+        }
+      },
+      onFocus: () => {
+        if (!isComposerEditMode()) return;
+        if (render) setEditing(true);
+      },
+      onBlur: finishEdit,
+      onKeyDown: (event) => {
+        event.stopPropagation();
+        if (event.key === "Enter" && !event.shiftKey) {
+          event.preventDefault();
+          event.currentTarget.blur();
+        }
+        if (event.key === "Escape") {
+          event.preventDefault();
+          if (elRef.current) elRef.current.textContent = display || "";
+          setEditing(false);
+          event.currentTarget.blur();
+        }
+      },
+      style: {
+        cursor: "text",
+        outline: "1px dashed color-mix(in srgb, currentColor 40%, transparent)",
+        outlineOffset: "2px",
+        minWidth: "1ch",
+        display: render ? void 0 : "inline"
+      },
+      children: showRendered ? value != null && value !== "" ? render(value) : fallback ?? display : null
+    }
+  );
+}
 function formatFieldValue(value) {
   if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
     return String(value);
@@ -3407,11 +3577,30 @@ function Field({
   render
 }) {
   const context = react.useContext(ComponentContext);
+  const composerEdit = useComposerEditMode();
+  const fieldValue = useFieldOverlay(
+    context?.layoutNodeId,
+    name,
+    context?.props?.[name]
+  );
   if (!context) {
     console.warn(`[AmplifyUp SDK] Field "${name}" used outside ComponentContextProvider`);
     return fallback ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : null;
   }
-  const fieldValue = context.props?.[name];
+  if (composerEdit && canInlineEdit(name, fieldValue)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ComposerInlineField,
+      {
+        name,
+        value: fieldValue,
+        fallback,
+        className,
+        render,
+        layoutNodeId: context.layoutNodeId,
+        componentId: context.componentId
+      }
+    );
+  }
   if (fieldValue === void 0 || fieldValue === null) {
     return fallback ? /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: fallback }) : null;
   }
@@ -3439,11 +3628,29 @@ function RichText({
   as: Tag = "div"
 }) {
   const context = react.useContext(ComponentContext);
+  const composerEdit = useComposerEditMode();
+  const fieldValue = useFieldOverlay(
+    context?.layoutNodeId,
+    name,
+    context?.props?.[name]
+  );
   if (!context) {
     console.warn(`[AmplifyUp SDK] RichText "${name}" used outside ComponentContextProvider`);
     return fallback ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : null;
   }
-  const fieldValue = context.props?.[name];
+  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 === "") {
     return fallback ? /* @__PURE__ */ jsxRuntime.jsx(Tag, { className, children: fallback }) : null;
   }