@amplifyup/sdk 0.1.55 → 0.1.56

package/dist/react.d.mts

@@ -90,8 +90,8 @@ declare function Field(props: {
     /** Field value from your component props. Do not also pass `name`. */
     value?: unknown;
     /**
-     * @deprecated Will be removed. Use `value={…}` instead and omit `name`.
-     * Do not pass `name` together with `value`.
+     * @deprecated Prefer `value={…}`. Still used as the Composer save key when
+     * the same value appears on more than one prop.
      */
     name?: string;
     fallback?: ReactNode;
@@ -120,8 +120,8 @@ declare function RichText(props: {
     /** Markdown (or HTML) string from your component props. Do not also pass `name`. */
     value?: string | null;
     /**
-     * @deprecated Will be removed. Use `value={…}` (or string children) and omit `name`.
-     * Do not pass `name` together with `value`.
+     * @deprecated Prefer `value={…}`. Still used as the Composer save key when
+     * the same value appears on more than one prop.
      */
     name?: string;
     fallback?: ReactNode;

package/dist/react.d.ts

@@ -90,8 +90,8 @@ declare function Field(props: {
     /** Field value from your component props. Do not also pass `name`. */
     value?: unknown;
     /**
-     * @deprecated Will be removed. Use `value={…}` instead and omit `name`.
-     * Do not pass `name` together with `value`.
+     * @deprecated Prefer `value={…}`. Still used as the Composer save key when
+     * the same value appears on more than one prop.
      */
     name?: string;
     fallback?: ReactNode;
@@ -120,8 +120,8 @@ declare function RichText(props: {
     /** Markdown (or HTML) string from your component props. Do not also pass `name`. */
     value?: string | null;
     /**
-     * @deprecated Will be removed. Use `value={…}` (or string children) and omit `name`.
-     * Do not pass `name` together with `value`.
+     * @deprecated Prefer `value={…}`. Still used as the Composer save key when
+     * the same value appears on more than one prop.
      */
     name?: string;
     fallback?: ReactNode;

package/dist/react.js

@@ -3685,13 +3685,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 () => {
   };
@@ -3886,9 +3904,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__default.default.createElement(Tag, {
     ref: elRef,
@@ -3930,15 +3950,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.`
     );
   }
 }
@@ -3978,7 +3993,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,
@@ -3992,6 +4007,20 @@ function Field(props) {
     return fallback ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : null;
   }
   if (render) {
+    if (composerEdit && editName && context && canInlineEdit(editName, fieldValue)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ComposerInlineField,
+        {
+          name: editName,
+          value: fieldValue,
+          fallback,
+          className,
+          render,
+          layoutNodeId: context.layoutNodeId,
+          componentId: context.componentId
+        }
+      );
+    }
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style: { display: "contents" }, children: render(fieldValue) });
   }
   if (Array.isArray(fieldValue)) {
@@ -4045,7 +4074,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,
@@ -4058,7 +4087,7 @@ function RichText(props) {
     return fallback ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -4090,17 +4119,6 @@ function RichText(props) {
   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": editName || void 0,
-        "data-amplifyup-node-id": context?.layoutNodeId || void 0,
-        dangerouslySetInnerHTML: { __html: html }
-      }
-    );
-  }
   if (composerEdit && canEdit) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       ComposerInlineHtml,
@@ -4141,7 +4159,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);