@amplifyup/sdk 0.1.55 → 0.1.56

package/dist/react.mjs

@@ -3679,13 +3679,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 +3898,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 +3944,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 +3987,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 +4001,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 +4068,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 +4081,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 +4113,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 +4153,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);