@amplifyup/sdk 0.1.58 → 0.1.60

package/dist/react.js

@@ -2354,6 +2354,38 @@ Available Console Commands:
         return;
       }
       try {
+        if (event.data?.type === "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;display:block!important;box-sizing:border-box!important;}";
+              document.head.appendChild(style);
+            }
+            const editRoot = event.data.layoutNodeId ? document.querySelector(
+              `[data-node-id="${event.data.layoutNodeId}"], [data-amplifyup-node-id="${event.data.layoutNodeId}"]`
+            ) || document : document;
+            const editField = editRoot.querySelector(
+              `[data-amplifyup-field="${event.data.fieldName}"]`
+            );
+            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;
+        }
         if (event.data?.type === "AMPLIFYUP_FIELD_PATCH") {
           window.dispatchEvent(
             new CustomEvent("amplifyup:field-patch", { detail: event.data })
@@ -3884,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,
@@ -3979,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) => {
@@ -4229,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(
@@ -4237,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,