@amplifyup/sdk 0.1.57 → 0.1.59

package/dist/react.js

@@ -2354,6 +2354,25 @@ 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"));
+          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;}";
+              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");
+          }
+          return;
+        }
         if (event.data?.type === "AMPLIFYUP_FIELD_PATCH") {
           window.dispatchEvent(
             new CustomEvent("amplifyup:field-patch", { detail: event.data })
@@ -3698,11 +3717,6 @@ function isReactNodeFallback(fallback) {
 function classNameIsBlock(className) {
   return /(?:^|\s)block(?:\s|$)/.test(className || "");
 }
-function htmlHasVisualChrome(html) {
-  return /<(input|button|select|textarea|form|svg|iframe|video|audio|img)\b/i.test(
-    html
-  );
-}
 function canInlineEdit(name, value) {
   if (!name || isLikelyNonTextFieldName(name)) return false;
   if (value !== void 0 && value !== null && typeof value === "object") {
@@ -3771,6 +3785,36 @@ function commitComposerField(layoutNodeId, componentId, name, value) {
     "*"
   );
 }
+function looksLikeRichCanvasField(name) {
+  const tokens = String(name || "").replace(/([a-z])([A-Z])/g, "$1 $2").split(/[._\-\s/]+/).map((s) => s.toLowerCase()).filter(Boolean);
+  const last = tokens[tokens.length - 1] || "";
+  return last === "body" || last === "content" || last === "copy" || last === "excerpt" || last === "markdown" || last === "richtext";
+}
+var lastRichTextRequestAt = 0;
+function requestCanvasRichTextEdit(opts) {
+  if (typeof window === "undefined" || window.parent === window) return;
+  if (!opts.name) return;
+  const now = Date.now();
+  if (now - lastRichTextRequestAt < 400) return;
+  lastRichTextRequestAt = now;
+  const rect = opts.el.getBoundingClientRect();
+  window.parent.postMessage(
+    {
+      type: "AMPLIFYUP_RICHTEXT_EDIT",
+      layoutNodeId: opts.layoutNodeId,
+      componentId: opts.componentId,
+      fieldName: opts.name,
+      value: opts.value,
+      bounds: {
+        top: rect.top,
+        left: rect.left,
+        width: Math.max(rect.width, 240),
+        height: Math.max(rect.height, 64)
+      }
+    },
+    "*"
+  );
+}
 function placeCaret(el, atStart = false) {
   const range = document.createRange();
   range.selectNodeContents(el);
@@ -3786,7 +3830,8 @@ function ComposerInlineField({
   className,
   render,
   layoutNodeId,
-  componentId
+  componentId,
+  rich = false
 }) {
   const [editing, setEditing] = React.useState(false);
   const [focused, setFocused] = React.useState(false);
@@ -3839,6 +3884,19 @@ function ComposerInlineField({
     if (!text && !storedEmpty && next === fallbackText) return;
     commitComposerField(layoutNodeId, componentId, name, next);
   };
+  const openRichEditor = (event) => {
+    if (!isComposerEditMode() || !elRef.current) return;
+    event?.preventDefault();
+    event?.stopPropagation();
+    const source = typeof value === "string" && !storedEmpty ? value : text || "";
+    requestCanvasRichTextEdit({
+      el: elRef.current,
+      layoutNodeId,
+      componentId,
+      name,
+      value: source
+    });
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
@@ -3847,7 +3905,7 @@ function ComposerInlineField({
       "data-amplifyup-field": name,
       "data-amplifyup-node-id": layoutNodeId || void 0,
       "data-amplifyup-empty-hint": showHint ? "true" : void 0,
-      contentEditable: !showRendered,
+      contentEditable: !rich && !showRendered,
       suppressContentEditableWarning: true,
       role: "textbox",
       tabIndex: 0,
@@ -3858,12 +3916,20 @@ function ComposerInlineField({
         if (!isComposerEditMode()) return;
         const link = event.target?.closest?.("a");
         if (link) event.preventDefault();
+        if (rich) {
+          openRichEditor(event);
+          return;
+        }
         if (render) {
           setEditing(true);
         }
       },
       onFocus: () => {
         if (!isComposerEditMode()) return;
+        if (rich) {
+          openRichEditor();
+          return;
+        }
         setFocused(true);
         const el = elRef.current;
         if (el && storedEmpty) {
@@ -3872,7 +3938,7 @@ function ComposerInlineField({
         }
         if (render) setEditing(true);
       },
-      onBlur: finishEdit,
+      onBlur: rich ? void 0 : finishEdit,
       onKeyDown: (event) => {
         event.stopPropagation();
         if (event.key === "Enter" && !event.shiftKey) {
@@ -3904,43 +3970,40 @@ function ComposerInlineField({
 function ComposerInlineHtml({
   name,
   html,
+  sourceValue,
   className,
   Tag = "div",
   layoutNodeId,
   componentId
 }) {
   const elRef = React.useRef(null);
-  const sourceTextRef = React.useRef("");
   React.useEffect(() => {
     const el = elRef.current;
     if (!el) return;
-    if (document.activeElement === el || el.contains(document.activeElement)) {
-      return;
-    }
     if (el.innerHTML !== html) el.innerHTML = html;
-    sourceTextRef.current = (el.innerText ?? "").replace(/\u00a0/g, " ").trim();
   }, [html]);
-  const finishEdit = () => {
-    const el = elRef.current;
-    if (!el) return;
-    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);
+  const openRichEditor = (event) => {
+    if (!elRef.current) return;
+    event.preventDefault();
+    event.stopPropagation();
+    requestCanvasRichTextEdit({
+      el: elRef.current,
+      layoutNodeId,
+      componentId,
+      name,
+      value: sourceValue
+    });
   };
   return React__default.default.createElement(Tag, {
     ref: elRef,
     className,
     "data-amplifyup-field": name,
     "data-amplifyup-node-id": layoutNodeId || void 0,
-    contentEditable: true,
-    suppressContentEditableWarning: true,
     dangerouslySetInnerHTML: { __html: html },
     onMouseDown: (event) => {
       event.stopPropagation();
     },
-    onBlur: finishEdit,
+    onClick: openRichEditor,
     style: {
       cursor: "text",
       outline: "1px dashed color-mix(in srgb, currentColor 40%, transparent)",
@@ -4036,7 +4099,8 @@ function Field(props) {
           className,
           render,
           layoutNodeId: context.layoutNodeId,
-          componentId: context.componentId
+          componentId: context.componentId,
+          rich: looksLikeRichCanvasField(editName)
         }
       );
     }
@@ -4058,7 +4122,8 @@ function Field(props) {
         fallback,
         className,
         layoutNodeId: context.layoutNodeId,
-        componentId: context.componentId
+        componentId: context.componentId,
+        rich: looksLikeRichCanvasField(editName)
       }
     );
   }
@@ -4117,7 +4182,8 @@ function RichText(props) {
           fallback: typeof fallback === "string" || typeof fallback === "number" ? fallback : void 0,
           className,
           layoutNodeId: context?.layoutNodeId,
-          componentId: context?.componentId
+          componentId: context?.componentId,
+          rich: true
         }
       );
     }
@@ -4144,6 +4210,7 @@ function RichText(props) {
       {
         name: editName,
         html,
+        sourceValue: typeof fieldValue === "string" ? fieldValue : html,
         className,
         Tag,
         layoutNodeId: context?.layoutNodeId,