@amplifyup/sdk 0.1.59 → 0.1.61

package/dist/react.js

@@ -2355,12 +2355,17 @@ Available Console Commands:
       }
       try {
         if (event.data?.type === "AMPLIFYUP_RICHTEXT_EDITING") {
-          document.querySelectorAll(".amplifyup-richtext-editing").forEach((el) => el.classList.remove("amplifyup-richtext-editing"));
+          document.querySelectorAll(".amplifyup-richtext-editing").forEach((el) => {
+            el.classList.remove("amplifyup-richtext-editing");
+            el.style.minHeight = "";
+            el.style.height = "";
+            el.style.display = "";
+          });
           if (event.data.active && event.data.fieldName) {
             if (!document.getElementById("amplifyup-richtext-editing-style")) {
               const style = document.createElement("style");
               style.id = "amplifyup-richtext-editing-style";
-              style.textContent = "[data-amplifyup-field].amplifyup-richtext-editing{outline:none!important;visibility:hidden!important;}";
+              style.textContent = "[data-amplifyup-field].amplifyup-richtext-editing{outline:none!important;visibility:hidden!important;display:block!important;box-sizing:border-box!important;}";
               document.head.appendChild(style);
             }
             const editRoot = event.data.layoutNodeId ? document.querySelector(
@@ -2369,7 +2374,15 @@ Available Console Commands:
             const editField = editRoot.querySelector(
               `[data-amplifyup-field="${event.data.fieldName}"]`
             );
-            if (editField) editField.classList.add("amplifyup-richtext-editing");
+            if (editField) {
+              editField.classList.add("amplifyup-richtext-editing");
+              const editHeight = Number(event.data.height) || 0;
+              if (editHeight > 0) {
+                editField.style.display = "block";
+                editField.style.minHeight = `${editHeight}px`;
+                editField.style.height = `${editHeight}px`;
+              }
+            }
           }
           return;
         }
@@ -3733,6 +3746,20 @@ function canInlineEditRichText(name, value) {
   }
   return true;
 }
+function isLikelyImagePropName(name) {
+  const n = name.toLowerCase();
+  return n.includes("image") || n.includes("thumbnail") || n.includes("photo") || n.includes("avatar") || n.includes("poster") || n.includes("logo") || n.endsWith("img") || n.endsWith("_src") || n.endsWith("Src");
+}
+function portableImageUrl(value) {
+  if (typeof value === "string") return value.trim();
+  if (value && typeof value === "object" && !Array.isArray(value) && "url" in value) {
+    const url = value.url;
+    if (url == null) return "";
+    if (typeof url === "string") return url.trim();
+    return null;
+  }
+  return null;
+}
 function inferEditName(explicitName, contextProps, sourceValue) {
   if (explicitName) return explicitName;
   if (!contextProps) return "";
@@ -3740,6 +3767,22 @@ function inferEditName(explicitName, contextProps, sourceValue) {
     (key) => Object.is(contextProps[key], sourceValue)
   );
   if (keys.length === 1) return keys[0];
+  const srcUrl = portableImageUrl(sourceValue);
+  if (srcUrl !== null) {
+    const byUrl = Object.keys(contextProps).filter((key) => {
+      const other = portableImageUrl(contextProps[key]);
+      return other !== null && other === srcUrl;
+    });
+    if (byUrl.length === 1) return byUrl[0];
+    if (srcUrl === "") {
+      const emptyImageKeys = Object.keys(contextProps).filter((key) => {
+        if (!isLikelyImagePropName(key)) return false;
+        const other = portableImageUrl(contextProps[key]);
+        return other === "" || contextProps[key] == null;
+      });
+      if (emptyImageKeys.length === 1) return emptyImageKeys[0];
+    }
+  }
   if (keys.length === 0 || isComposerEmptyText(sourceValue)) return "";
   return keys[0];
 }
@@ -3903,6 +3946,7 @@ function ComposerInlineField({
       ref: elRef,
       className,
       "data-amplifyup-field": name,
+      "data-amplifyup-field-type": rich ? "richtext" : "text",
       "data-amplifyup-node-id": layoutNodeId || void 0,
       "data-amplifyup-empty-hint": showHint ? "true" : void 0,
       contentEditable: !rich && !showRendered,
@@ -3998,6 +4042,7 @@ function ComposerInlineHtml({
     ref: elRef,
     className,
     "data-amplifyup-field": name,
+    "data-amplifyup-field-type": "richtext",
     "data-amplifyup-node-id": layoutNodeId || void 0,
     dangerouslySetInnerHTML: { __html: html },
     onMouseDown: (event) => {
@@ -4248,6 +4293,8 @@ function Image(props) {
     inferEditName(name, context?.props, sourceValue),
     sourceValue
   );
+  const composerEdit = useComposerEditMode();
+  const editName = inferEditName(name, context?.props, sourceValue);
   warnProjectionProps("Image", name, hasExplicitValue);
   if (!context && !hasExplicitValue) {
     console.warn(
@@ -4256,20 +4303,58 @@ function Image(props) {
     return null;
   }
   const src = imageSrc(fieldValue);
-  if (!src) return null;
   const portable = isPortableImageValue(fieldValue) ? fieldValue : null;
   const alt = altProp ?? portable?.alt ?? "";
   const width = widthProp ?? portable?.width;
   const height = heightProp ?? portable?.height;
+  const fieldAttrs = composerEdit && editName ? {
+    "data-amplifyup-field": editName,
+    "data-amplifyup-field-type": "image",
+    "data-amplifyup-node-id": context?.layoutNodeId || void 0
+  } : null;
+  if (composerEdit && !editName && (hasExplicitValue || name)) {
+    console.warn(
+      '[AmplifyUp SDK] Image could not infer a Composer field name from value={\u2026}. Pass name="yourProp" (same as the component prop) so the image can be selected.'
+    );
+  }
+  if (!src) {
+    if (!composerEdit || !fieldAttrs) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ...fieldAttrs,
+        className,
+        role: "img",
+        "aria-label": alt || editName || "Image",
+        style: {
+          display: "block",
+          boxSizing: "border-box",
+          minWidth: width ? void 0 : 120,
+          minHeight: height ? void 0 : 80,
+          width: width || "100%",
+          height: height || void 0,
+          background: "color-mix(in srgb, currentColor 8%, transparent)",
+          outline: "2px dashed hsl(82 100% 45%)",
+          outlineOffset: 2,
+          cursor: "pointer"
+        }
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "img",
     {
       ...imgProps,
+      ...fieldAttrs,
       src,
       alt,
       className,
       width,
-      height
+      height,
+      style: {
+        ...typeof imgProps.style === "object" && imgProps.style ? imgProps.style : {},
+        ...composerEdit && fieldAttrs ? { cursor: "pointer" } : null
+      }
     }
   );
 }