@amplifyup/sdk 0.1.59 → 0.1.60

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;
         }
@@ -3903,6 +3916,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 +4012,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 +4263,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,15 +4273,42 @@ 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 (!src) {
+    if (!composerEdit || !fieldAttrs) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ...fieldAttrs,
+        className,
+        role: "img",
+        "aria-label": alt || editName || "Image",
+        style: {
+          display: "inline-block",
+          minWidth: width ? void 0 : 48,
+          minHeight: height ? void 0 : 48,
+          width: width || void 0,
+          height: height || void 0,
+          background: "color-mix(in srgb, currentColor 8%, transparent)",
+          outline: "1px dashed color-mix(in srgb, currentColor 40%, transparent)",
+          outlineOffset: 2
+        }
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "img",
     {
       ...imgProps,
+      ...fieldAttrs,
       src,
       alt,
       className,