react-email-studio 3.0.0 → 3.1.1

package/dist/index.cjs

@@ -170,7 +170,8 @@ var I18N = {
     blockPaletteGroupWidgets: "Widgets",
     closePanel: "Close",
     canvasEmptyHint: "Drag blocks from the library into the column, or add a Layout block for multi-column sections.",
-    emailContentSettings: "Email content"
+    emailContentSettings: "Email content",
+    loadingDesign: "Loading design\u2026"
   },
   fr: {
     layouts: "Mises en page",
@@ -223,6 +224,7 @@ var I18N = {
     blockPaletteGroupWidgets: "Widgets",
     closePanel: "Fermer",
     canvasEmptyHint: "Glissez des blocs dans la colonne, ou ajoutez un bloc Mise en page pour plusieurs colonnes.",
+    loadingDesign: "Chargement du design\u2026",
     emailContentSettings: "Contenu de l\u2019e-mail",
     zoomIn: "Zoom +",
     zoomOut: "Zoom -",
@@ -282,6 +284,7 @@ var I18N = {
     blockPaletteGroupWidgets: "Widgets",
     closePanel: "Schlie\xDFen",
     canvasEmptyHint: "Bl\xF6cke in die Spalte ziehen oder Layout-Block f\xFCr mehrspaltige Bereiche hinzuf\xFCgen.",
+    loadingDesign: "Design wird geladen\u2026",
     emailContentSettings: "E-Mail-Inhalt",
     zoomIn: "Zoom +",
     zoomOut: "Zoom -",
@@ -342,6 +345,7 @@ var I18N = {
     blockPaletteGroupWidgets: "Widgets",
     closePanel: "Cerrar",
     canvasEmptyHint: "Arrastra bloques a la columna o a\xF1ade un bloque Dise\xF1o para varias columnas.",
+    loadingDesign: "Cargando dise\xF1o\u2026",
     emailContentSettings: "Contenido del correo",
     resizeSidebar: "Redimensionar panel"
   }
@@ -2111,13 +2115,37 @@ function mapEmbeddedLayoutCellBlock(raw, layoutDepth = 0) {
   }
   return mapBlockToInternal(r, layoutDepth);
 }
+function mergeLayoutColumnStylesMaps(fromContent, fromHydrated) {
+  const isObj = (x) => x !== null && typeof x === "object" && !Array.isArray(x);
+  if (!isObj(fromContent) && !isObj(fromHydrated)) return void 0;
+  const a = isObj(fromContent) ? fromContent : {};
+  const b = isObj(fromHydrated) ? fromHydrated : {};
+  const keys = /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)]);
+  const out = {};
+  for (const k of keys) {
+    const va = a[k];
+    const vb = b[k];
+    if (isObj(va) && isObj(vb)) {
+      out[k] = { ...va, ...vb };
+    } else if (vb !== void 0) {
+      out[k] = vb;
+    } else {
+      out[k] = va;
+    }
+  }
+  return Object.keys(out).length ? out : void 0;
+}
 function applyImportedEditorPropsFromDoc(block, t, b, layoutDepth = 0) {
   const exp = b.props;
   if (!exp || typeof exp !== "object" || Array.isArray(exp)) return;
   if (t === "layout" && Array.isArray(exp.cells)) {
+    const columnStylesFromContent = block.props.columnStyles;
     const hb = hydrateBlock({ type: "layout", id: block.id, props: exp }, layoutDepth);
     if (hb) {
       block.props = hb.props;
+      const merged = mergeLayoutColumnStylesMaps(columnStylesFromContent, block.props.columnStyles);
+      if (merged) block.props.columnStyles = merged;
+      else delete block.props.columnStyles;
       if (typeof hb.id === "string" && hb.id) block.id = hb.id;
     }
     return;
@@ -6488,6 +6516,7 @@ var ReactEmailEditor = (0, import_react8.forwardRef)(
     const [previewDevice, setPreviewDevice] = (0, import_react8.useState)("desktop");
     const [activeTab, setActiveTab] = (0, import_react8.useState)("blocks");
     const [templatesOpen, setTemplatesOpen] = (0, import_react8.useState)(false);
+    const [jsonLoading, setJsonLoading] = (0, import_react8.useState)(false);
     const [autoSaveMsg, setAutoSaveMsg] = (0, import_react8.useState)("");
     const [locale, setLocale] = (0, import_react8.useState)(
       typeof opt.locale === "string" ? opt.locale : "en"
@@ -6630,31 +6659,40 @@ var ReactEmailEditor = (0, import_react8.forwardRef)(
     }, [rows, history, future, selContentMeta]);
     const buildApi = (0, import_react8.useCallback)(() => ({
       loadJson(input) {
-        let parsed = input;
-        if (typeof input === "string") {
-          try {
-            parsed = JSON.parse(input);
-          } catch {
-            return;
-          }
-        }
-        const norm = normalizeEmailDesignInput(parsed);
-        if (!norm) return;
-        setRows(norm.rows);
-        const ns = norm.settings;
-        setSettings((s) => ({ ...s, ...ns }));
-        const inferPage = () => {
-          if (ns?.bgGradient) return "gradient";
-          if (String(ns?.bgImage ?? "").trim()) return "image";
-          return "solid";
-        };
-        const inferContent = () => {
-          if (ns?.contentBgGradient) return "gradient";
-          if (String(ns?.contentBgImage ?? "").trim()) return "image";
-          return "solid";
-        };
-        setPageBgUiStep(inferPage());
-        setContentBgUiStep(inferContent());
+        setJsonLoading(true);
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            try {
+              let parsed = input;
+              if (typeof input === "string") {
+                try {
+                  parsed = JSON.parse(input);
+                } catch {
+                  return;
+                }
+              }
+              const norm = normalizeEmailDesignInput(parsed);
+              if (!norm) return;
+              setRows(norm.rows);
+              const ns = norm.settings;
+              setSettings((s) => ({ ...s, ...ns }));
+              const inferPage = () => {
+                if (ns?.bgGradient) return "gradient";
+                if (String(ns?.bgImage ?? "").trim()) return "image";
+                return "solid";
+              };
+              const inferContent = () => {
+                if (ns?.contentBgGradient) return "gradient";
+                if (String(ns?.contentBgImage ?? "").trim()) return "image";
+                return "solid";
+              };
+              setPageBgUiStep(inferPage());
+              setContentBgUiStep(inferContent());
+            } finally {
+              setJsonLoading(false);
+            }
+          });
+        });
       },
       exportJson(cb, pretty) {
         const design = designToEmailDocument(rowsRef.current, settingsRef.current);
@@ -7041,6 +7079,7 @@ var ReactEmailEditor = (0, import_react8.forwardRef)(
         ::-webkit-scrollbar-track{background:transparent;}
         ::-webkit-scrollbar-thumb{background:${C.border};border-radius:3px;}
         ::-webkit-scrollbar-thumb:hover{background:${C.muted};}
+        @keyframes email-editor-json-spin{to{transform:rotate(360deg);}}
       ` }),
           /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { id: eid("workspace"), style: {
             display: "flex",
@@ -7969,7 +8008,47 @@ var ReactEmailEditor = (0, import_react8.forwardRef)(
                   ) })
                 ]
               }
-            )
+            ),
+            jsonLoading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+              "div",
+              {
+                id: eid("json-loading"),
+                role: "status",
+                "aria-live": "polite",
+                "aria-busy": true,
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  zIndex: 180,
+                  background: `${C.bg}f2`,
+                  backdropFilter: "blur(2px)",
+                  WebkitBackdropFilter: "blur(2px)",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: 14,
+                  pointerEvents: "auto"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    "div",
+                    {
+                      "aria-hidden": true,
+                      style: {
+                        width: 40,
+                        height: 40,
+                        borderRadius: "50%",
+                        border: `3px solid ${C.border}`,
+                        borderTopColor: C.accent,
+                        animation: "email-editor-json-spin 0.65s linear infinite"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { fontSize: 13, fontWeight: 600, color: C.text }, children: L("loadingDesign") })
+                ]
+              }
+            ) : null
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { id: eid("status-bar"), style: { display: "flex", alignItems: "center", gap: 12, padding: "3px 14px", background: C.toolbarBg, borderTop: `1px solid ${C.border}`, fontSize: 10, color: C.muted, flexShrink: 0, position: "sticky", bottom: 0, zIndex: 100 }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [