react-email-studio 2.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"
   }
@@ -692,6 +696,10 @@ function makeContentBlock(type) {
 }
 
 // src/lib/columnPath.ts
+var MAX_NESTED_LAYOUT_DEPTH = 1;
+function nestedLayoutDepth(nested) {
+  return nested != null && nested.parentBlockIdx != null && nested.innerCellIdx != null ? 1 : 0;
+}
 function isSplitLayoutBlock(b) {
   return b && b.type === "layout" && b.props && Array.isArray(b.props.cells);
 }
@@ -1283,8 +1291,18 @@ function normalizeEmailDocument(input) {
     settings: doc.settings && typeof doc.settings === "object" && !Array.isArray(doc.settings) ? doc.settings : {},
     rows: rows.map((r, ri) => {
       const columns = Array.isArray(r.columns) ? r.columns : [];
-      const colCount = typeof r.layout?.columns === "number" && r.layout.columns > 0 ? Math.floor(r.layout.columns) : Math.max(1, columns.length || 1);
-      const colsNormalized = columns.length > 0 ? columns : Array.from({ length: colCount }).map(() => ({}));
+      const layoutColCount = typeof r.layout?.columns === "number" && r.layout.columns > 0 ? Math.floor(r.layout.columns) : 0;
+      const colCount = Math.max(1, columns.length, layoutColCount);
+      const colsNormalized = (() => {
+        if (columns.length >= colCount) return columns;
+        if (columns.length > 0) {
+          return [
+            ...columns,
+            ...Array.from({ length: colCount - columns.length }).map(() => ({}))
+          ];
+        }
+        return Array.from({ length: colCount }).map(() => ({}));
+      })();
       return {
         id: ensureId(r.id, `row${ri + 1}`),
         type: "row",
@@ -1295,6 +1313,7 @@ function normalizeEmailDocument(input) {
           align: r.layout?.align || "center"
         },
         styles: r.styles && typeof r.styles === "object" && !Array.isArray(r.styles) ? r.styles : {},
+        ...typeof r._reactEmailStudio === "object" && r._reactEmailStudio !== null && !Array.isArray(r._reactEmailStudio) ? { _reactEmailStudio: r._reactEmailStudio } : {},
         columns: colsNormalized.map((c, ci) => ({
           id: ensureId(c.id, `col${ri + 1}_${ci + 1}`),
           layout: c.layout && typeof c.layout === "object" && !Array.isArray(c.layout) ? c.layout : {},
@@ -1305,7 +1324,8 @@ function normalizeEmailDocument(input) {
             content: b?.content && typeof b.content === "object" && !Array.isArray(b.content) ? b.content : {},
             styles: b?.styles && typeof b.styles === "object" && !Array.isArray(b.styles) ? b.styles : {},
             behavior: b?.behavior && typeof b.behavior === "object" && !Array.isArray(b.behavior) ? b.behavior : {},
-            responsive: b?.responsive && typeof b.responsive === "object" && !Array.isArray(b.responsive) ? b.responsive : {}
+            responsive: b?.responsive && typeof b.responsive === "object" && !Array.isArray(b.responsive) ? b.responsive : {},
+            ...b?.props && typeof b.props === "object" && !Array.isArray(b.props) ? { props: b.props } : {}
           })) : []
         }))
       };
@@ -1316,6 +1336,14 @@ function normalizeEmailDocument(input) {
 }
 
 // src/lib/emailDesignJson.ts
+var MAX_LAYOUT_TREE_DEPTH = 32;
+function cloneJson(v) {
+  try {
+    return JSON.parse(JSON.stringify(v));
+  } catch {
+    return v;
+  }
+}
 function layoutColumnPaddingForDoc(p) {
   if (typeof p === "number" && Number.isFinite(p)) {
     const n = Math.max(0, p);
@@ -1402,7 +1430,242 @@ function normalizeBoxStyles(props, t) {
   }
   props.padding = boxPad(props.padding, uniformPadDefault(def?.padding));
 }
-function mapBlockToInternal(b) {
+function internalBlockToEmailDoc(b, depth = 0) {
+  const p = b?.props && typeof b.props === "object" ? b.props : {};
+  const id = typeof b?.id === "string" ? b.id : uid();
+  const type = b?.type === "nestedRow" ? "layout" : b?.type;
+  if (!isKnownBlockType(type)) {
+    return { id, type: String(type || "text"), content: {}, styles: {} };
+  }
+  switch (type) {
+    case "heading": {
+      const fw = typeof p.fontWeight === "number" ? p.fontWeight : typeof p.fontWeight === "string" ? Number.parseInt(String(p.fontWeight), 10) || (p.bold ? 700 : 400) : p.bold ? 700 : 400;
+      const padUniform = typeof p.padding === "number" && Number.isFinite(p.padding) ? p.padding : uniformPadDefault(p.padding);
+      return {
+        id,
+        type,
+        content: { text: typeof p.content === "string" ? p.content : "", tag: p.level || "h2" },
+        styles: {
+          fontSize: p.fontSize,
+          fontWeight: fw,
+          color: p.color,
+          lineHeight: p.lineHeight,
+          textAlign: p.align,
+          letterSpacing: p.letterSpacing,
+          marginBottom: padUniform
+        }
+      };
+    }
+    case "text":
+      return {
+        id,
+        type,
+        content: { html: typeof p.content === "string" ? p.content : "" },
+        styles: {
+          fontSize: p.fontSize,
+          color: p.color,
+          lineHeight: p.lineHeight,
+          textAlign: p.align,
+          ...p.padding && typeof p.padding === "object" && !Array.isArray(p.padding) ? { padding: layoutColumnPaddingForDoc(p.padding) } : {}
+        }
+      };
+    case "html":
+      return {
+        id,
+        type,
+        content: { html: typeof p.content === "string" ? p.content : "" },
+        styles: p.padding && typeof p.padding === "object" && !Array.isArray(p.padding) ? { padding: layoutColumnPaddingForDoc(p.padding) } : {}
+      };
+    case "image": {
+      const br = p.borderRadius;
+      const borderRadius = typeof br === "number" && Number.isFinite(br) ? br : br && typeof br === "object" && !Array.isArray(br) ? Math.round(
+        (numOr(br.tl, 0) + numOr(br.tr, numOr(br.tl, 0)) + numOr(br.br, numOr(br.tl, 0)) + numOr(br.bl, numOr(br.tr, 0))) / 4
+      ) : 0;
+      return {
+        id,
+        type,
+        content: {
+          src: p.src || "",
+          alt: p.alt || "",
+          link: p.link || ""
+        },
+        styles: {
+          width: p.width,
+          align: p.align,
+          borderRadius
+        },
+        ...p.linkTarget === "_blank" ? { behavior: { openInNewTab: true } } : {}
+      };
+    }
+    case "button": {
+      let borderRadiusOut;
+      if (typeof p.borderRadius === "number" && Number.isFinite(p.borderRadius)) {
+        borderRadiusOut = p.borderRadius;
+      } else if (p.borderRadius && typeof p.borderRadius === "object" && !Array.isArray(p.borderRadius)) {
+        const br = p.borderRadius;
+        const tl = numOr(br.tl, 0);
+        const tr2 = numOr(br.tr, tl);
+        const brc = numOr(br.br, tl);
+        const bl = numOr(br.bl, tr2);
+        borderRadiusOut = tl === tr2 && tr2 === brc && brc === bl ? tl : Math.round((tl + tr2 + brc + bl) / 4);
+      }
+      return {
+        id,
+        type,
+        content: { text: p.label || "", href: p.href || "#" },
+        styles: {
+          backgroundColor: p.bgColor,
+          color: p.textColor,
+          fontSize: p.fontSize,
+          fontWeight: p.fontWeight,
+          ...borderRadiusOut !== void 0 ? { borderRadius: borderRadiusOut } : {},
+          textAlign: p.align,
+          padding: {
+            top: p.paddingV ?? 11,
+            right: p.paddingH ?? 24,
+            bottom: p.paddingV ?? 11,
+            left: p.paddingH ?? 24
+          }
+        },
+        ...p.linkTarget === "_blank" ? { behavior: { openInNewTab: true } } : {}
+      };
+    }
+    case "divider": {
+      const padY = typeof p.padding === "number" && Number.isFinite(p.padding) ? p.padding : p.padding && typeof p.padding === "object" && !Array.isArray(p.padding) ? numOr(p.padding.top, 12) : 12;
+      return {
+        id,
+        type,
+        content: {},
+        styles: { color: p.color, thickness: p.thickness, paddingY: padY }
+      };
+    }
+    case "spacer":
+      return { id, type, content: {}, styles: { height: p.height } };
+    case "social": {
+      const urls = p.socialUrls && typeof p.socialUrls === "object" && !Array.isArray(p.socialUrls) ? p.socialUrls : {};
+      const networks = {};
+      const ordered = Array.isArray(p.networks) ? p.networks.filter((n) => typeof n === "string" && !!n) : [];
+      const seen = /* @__PURE__ */ new Set();
+      for (const n of ordered) {
+        const u = urls[n];
+        networks[n] = typeof u === "string" && u.trim() ? u : "";
+        seen.add(n);
+      }
+      for (const key of Object.keys(urls)) {
+        if (seen.has(key)) continue;
+        const v = urls[key];
+        if (typeof v === "string" && v.trim()) {
+          networks[key] = v;
+          seen.add(key);
+        }
+      }
+      const padStyles = p.padding != null ? typeof p.padding === "number" && Number.isFinite(p.padding) ? { padding: layoutColumnPaddingForDoc(p.padding) } : p.padding && typeof p.padding === "object" && !Array.isArray(p.padding) ? { padding: layoutColumnPaddingForDoc(p.padding) } : {} : {};
+      return {
+        id,
+        type,
+        content: { networks },
+        styles: {
+          iconSize: p.iconSize,
+          gap: p.gap,
+          shape: p.shape,
+          align: p.align,
+          ...padStyles
+        }
+      };
+    }
+    case "table":
+      return {
+        id,
+        type,
+        content: { data: Array.isArray(p.data) ? p.data : [] },
+        styles: {
+          borderColor: p.cellBorder,
+          cellPadding: p.cellPadding,
+          headerBg: p.headerBg,
+          striped: p.striped
+        }
+      };
+    case "video":
+      return {
+        id,
+        type,
+        content: { url: p.src || "" },
+        styles: { height: p.height }
+      };
+    case "timer": {
+      let timerBr;
+      if (typeof p.borderRadius === "number" && Number.isFinite(p.borderRadius)) {
+        timerBr = p.borderRadius;
+      } else if (p.borderRadius && typeof p.borderRadius === "object" && !Array.isArray(p.borderRadius)) {
+        const br = p.borderRadius;
+        const tl = numOr(br.tl, 0);
+        const tr2 = numOr(br.tr, tl);
+        const brc = numOr(br.br, tl);
+        const bl = numOr(br.bl, tr2);
+        timerBr = tl === tr2 && tr2 === brc && brc === bl ? tl : Math.round((tl + tr2 + brc + bl) / 4);
+      }
+      return {
+        id,
+        type,
+        content: { endDate: p.endDate || "" },
+        styles: {
+          backgroundColor: p.bgColor,
+          color: p.textColor,
+          padding: typeof p.padding === "number" ? p.padding : uniformPadDefault(p.padding),
+          ...timerBr !== void 0 ? { borderRadius: timerBr } : {},
+          textAlign: p.align
+        }
+      };
+    }
+    case "menu":
+      return {
+        id,
+        type,
+        content: { items: Array.isArray(p.items) ? p.items : [] },
+        styles: { fontSize: p.fontSize, color: p.color }
+      };
+    case "link":
+      return {
+        id,
+        type,
+        content: { text: p.label || "", href: p.href || "#" },
+        styles: { color: p.color, fontSize: p.fontSize, textAlign: p.align },
+        ...p.linkTarget === "_blank" ? { behavior: { openInNewTab: true } } : {}
+      };
+    case "layout": {
+      const ratios = Array.isArray(p.ratios) ? [...p.ratios] : [1];
+      const emptyCells = ratios.map(() => []);
+      const rawCells = Array.isArray(p.cells) ? p.cells : [];
+      const cellsOut = depth >= MAX_LAYOUT_TREE_DEPTH ? emptyCells : ratios.map((_, i) => {
+        const col = rawCells[i];
+        return Array.isArray(col) ? col.map((child) => internalBlockToEmailDoc(child, depth + 1)) : [];
+      });
+      return {
+        id,
+        type,
+        content: {
+          preset: p.preset,
+          cols: p.cols,
+          ratios,
+          gap: p.gap,
+          padding: p.padding,
+          bgColor: p.bgColor,
+          bgImage: p.bgImage,
+          bgSize: p.bgSize,
+          bgRepeat: p.bgRepeat,
+          bgPosition: p.bgPosition,
+          bgGradient: p.bgGradient ?? null,
+          columnStyles: p.columnStyles,
+          cells: cellsOut
+        },
+        styles: {}
+      };
+    }
+    default:
+      return { id, type, content: {}, styles: {} };
+  }
+}
+function mapBlockToInternal(b, layoutDepth = 0) {
   const t = b.type;
   if (!isKnownBlockType(t)) return null;
   const block = makeContentBlock(t);
@@ -1473,8 +1736,28 @@ function mapBlockToInternal(b) {
       if (asNum(s.height) != null) block.props.height = s.height;
       break;
     case "social": {
-      const networksObj = c.networks && typeof c.networks === "object" ? c.networks : {};
-      const keys = Object.keys(networksObj || {});
+      const networksRaw = c.networks;
+      let networksObj = {};
+      if (Array.isArray(networksRaw)) {
+        const urlMap = c.socialUrls && typeof c.socialUrls === "object" && !Array.isArray(c.socialUrls) ? c.socialUrls : {};
+        for (const n of networksRaw) {
+          if (typeof n !== "string" || !n) continue;
+          const u = urlMap[n];
+          networksObj[n] = typeof u === "string" ? u : "";
+        }
+        for (const key of Object.keys(urlMap)) {
+          if (key in networksObj) continue;
+          const u = urlMap[key];
+          if (typeof u === "string" && u.trim()) networksObj[key] = u;
+        }
+      } else if (networksRaw && typeof networksRaw === "object" && !Array.isArray(networksRaw)) {
+        networksObj = { ...networksRaw };
+        for (const k of Object.keys(networksObj)) {
+          const v = networksObj[k];
+          networksObj[k] = typeof v === "string" ? v : "";
+        }
+      }
+      const keys = Object.keys(networksObj);
       if (keys.length) {
         block.props.networks = keys;
         block.props.socialUrls = networksObj;
@@ -1483,6 +1766,13 @@ function mapBlockToInternal(b) {
       if (asNum(s.gap) != null) block.props.gap = s.gap;
       if (asStr(s.shape)) block.props.shape = s.shape;
       if (asStr(s.align)) block.props.align = s.align;
+      if (s.padding != null) {
+        if (typeof s.padding === "number" && Number.isFinite(s.padding)) {
+          block.props.padding = s.padding;
+        } else if (s.padding && typeof s.padding === "object" && !Array.isArray(s.padding)) {
+          block.props.padding = layoutColumnPaddingForDoc(s.padding);
+        }
+      }
       break;
     }
     case "table":
@@ -1523,15 +1813,81 @@ function mapBlockToInternal(b) {
       if (asNum(s.fontSize) != null) block.props.fontSize = s.fontSize;
       if (asStr(s.textAlign)) block.props.align = s.textAlign;
       break;
-    case "layout":
+    case "layout": {
+      if (Array.isArray(c.cells)) {
+        const d = DEFAULT_BLOCK_PROPS.layout;
+        block.props.preset = asStr(c.preset) ?? block.props.preset;
+        if (typeof c.cols === "number") block.props.cols = c.cols;
+        if (Array.isArray(c.ratios)) block.props.ratios = [...c.ratios];
+        if (typeof c.gap === "number") block.props.gap = c.gap;
+        if (c.padding !== void 0 && c.padding !== null) block.props.padding = c.padding;
+        if (typeof c.bgColor === "string") block.props.bgColor = c.bgColor;
+        if (typeof c.bgImage === "string") block.props.bgImage = c.bgImage;
+        if (typeof c.bgSize === "string") block.props.bgSize = c.bgSize;
+        if (typeof c.bgRepeat === "string") block.props.bgRepeat = c.bgRepeat;
+        if (typeof c.bgPosition === "string") block.props.bgPosition = c.bgPosition;
+        if (c.bgGradient !== void 0) block.props.bgGradient = c.bgGradient;
+        if (c.columnStyles && typeof c.columnStyles === "object" && !Array.isArray(c.columnStyles)) {
+          block.props.columnStyles = c.columnStyles;
+        }
+        block.props.cells = c.cells.map(
+          (col) => Array.isArray(col) ? col.map((raw) => mapEmbeddedLayoutCellBlock(raw, layoutDepth + 1)).filter((x) => x != null) : []
+        );
+      } else {
+        block.props.preset = asStr(c.preset) ?? block.props.preset;
+      }
       break;
+    }
     default:
       break;
   }
+  const styleObj = s && typeof s === "object" && !Array.isArray(s) ? s : {};
+  const hasDocStyles = Object.keys(styleObj).some((k) => {
+    const v = styleObj[k];
+    return v !== void 0 && v !== null && v !== "";
+  });
+  const skipContentMergeKeys = {
+    heading: /* @__PURE__ */ new Set(["text", "tag"]),
+    text: /* @__PURE__ */ new Set(["html", "text"]),
+    html: /* @__PURE__ */ new Set(["html"]),
+    image: /* @__PURE__ */ new Set(["src", "alt", "link"]),
+    button: /* @__PURE__ */ new Set(["text", "href"]),
+    link: /* @__PURE__ */ new Set(["text", "href"]),
+    social: /* @__PURE__ */ new Set(["networks", "socialUrls"]),
+    table: /* @__PURE__ */ new Set(["data"]),
+    menu: /* @__PURE__ */ new Set(["items"]),
+    video: /* @__PURE__ */ new Set(["url"]),
+    timer: /* @__PURE__ */ new Set(["endDate"])
+  };
+  if (!hasDocStyles && c && typeof c === "object" && t !== "layout") {
+    const known = DEFAULT_BLOCK_PROPS[t];
+    const skip = skipContentMergeKeys[t];
+    if (known && typeof known === "object" && !Array.isArray(known)) {
+      for (const key of Object.keys(known)) {
+        if (skip?.has(key)) continue;
+        if (key in c && c[key] !== void 0) {
+          block.props[key] = c[key];
+        }
+      }
+    }
+  }
+  applyImportedEditorPropsFromDoc(block, t, b, layoutDepth);
   return block;
 }
 function rowToInternal(r) {
-  const cols = Math.max(1, r.layout?.columns || r.columns?.length || 1);
+  const columns = Array.isArray(r.columns) ? r.columns : [];
+  const layoutColCount = typeof r.layout?.columns === "number" && r.layout.columns > 0 ? Math.floor(r.layout.columns) : 0;
+  const cols = Math.max(1, columns.length, layoutColCount);
+  const colList = (() => {
+    if (columns.length >= cols) return columns;
+    if (columns.length > 0) {
+      return [
+        ...columns,
+        ...Array.from({ length: cols - columns.length }).map(() => ({}))
+      ];
+    }
+    return Array.from({ length: cols }).map(() => ({}));
+  })();
   const preset = pickPresetByColCount(cols) || LAYOUT_PRESETS[0];
   const row = makeLayoutRow(preset);
   row.id = typeof r.id === "string" ? r.id : uid();
@@ -1544,14 +1900,14 @@ function rowToInternal(r) {
   row.bgSize = r.styles?.backgroundSize || row.bgSize;
   row.bgPosition = r.styles?.backgroundPosition || row.bgPosition || "center";
   row.bgGradient = r.styles?.backgroundGradient || row.bgGradient || null;
-  const columns = Array.isArray(r.columns) ? r.columns : [];
-  const colList = columns.length ? columns : Array.from({ length: cols }).map(() => ({}));
-  row.cells = colList.slice(0, cols).map((c) => {
+  row.cells = colList.map((c) => {
     const blocks = Array.isArray(c.blocks) ? c.blocks : [];
-    return blocks.map(mapBlockToInternal).filter((x) => x != null);
+    return blocks.map((blk) => mapBlockToInternal(blk, 0)).filter((x) => x != null);
   });
-  const columnStyles = {};
-  colList.slice(0, cols).forEach((c, i) => {
+  const studio = r._reactEmailStudio;
+  const snap = studio?.row;
+  const columnStylesFromDoc = {};
+  colList.forEach((c, i) => {
     const bgColor = typeof c.styles?.backgroundColor === "string" ? c.styles.backgroundColor : "";
     const padding = layoutColumnPaddingForDoc(c.styles?.padding);
     const borderRadius = layoutColumnBorderRadiusForDoc(c.styles?.borderRadius);
@@ -1563,17 +1919,30 @@ function rowToInternal(r) {
     const hasPad = columnPaddingNonZero(padding);
     const hasBr = columnRadiusNonZero(borderRadius);
     if (bgColor || hasPad || hasBr || bgImage || bgRepeat || bgSize || bgPosition || bgGradient) {
-      columnStyles[i] = { bgColor, padding, borderRadius, bgImage, bgRepeat, bgSize, bgPosition, bgGradient };
+      columnStylesFromDoc[i] = { bgColor, padding, borderRadius, bgImage, bgRepeat, bgSize, bgPosition, bgGradient };
     }
   });
-  if (Object.keys(columnStyles).length) row.columnStyles = columnStyles;
+  if (snap && typeof snap === "object" && !Array.isArray(snap)) {
+    const { cells: _omitCells, columnStyles: snapCs, ...rest } = snap;
+    Object.assign(row, rest);
+    const snapColumn = snapCs && typeof snapCs === "object" && !Array.isArray(snapCs) ? snapCs : {};
+    row.columnStyles = { ...snapColumn, ...columnStylesFromDoc };
+    if (!Object.keys(row.columnStyles).length) delete row.columnStyles;
+  } else if (Object.keys(columnStylesFromDoc).length) {
+    row.columnStyles = columnStylesFromDoc;
+  }
   return row;
 }
 function normalizeEmailDesignInput(input) {
   const doc = normalizeEmailDocument(input);
   if (!doc) return null;
   const s = doc.settings || {};
-  const settings = {
+  const studioSettings = s._reactEmailStudio;
+  const settings = {};
+  if (studioSettings?.editorSettings && typeof studioSettings.editorSettings === "object" && !Array.isArray(studioSettings.editorSettings)) {
+    Object.assign(settings, cloneJson(studioSettings.editorSettings));
+  }
+  Object.assign(settings, {
     bgColor: s.backgroundColor || "#f1f5f9",
     bgImage: s.backgroundImage || "",
     bgRepeat: s.backgroundRepeat || "no-repeat",
@@ -1587,15 +1956,15 @@ function normalizeEmailDesignInput(input) {
     contentBgPosition: s.contentBackgroundPosition || "center",
     contentBgGradient: s.contentBackgroundGradient || null,
     contentWidth: typeof s.width === "number" ? s.width : 600,
-    padding: 24,
-    borderRadius: 8,
+    padding: typeof studioSettings?.contentPadding === "number" ? studioSettings.contentPadding : typeof settings.padding === "number" ? settings.padding : 24,
+    borderRadius: typeof studioSettings?.contentBorderRadius === "number" ? studioSettings.contentBorderRadius : typeof settings.borderRadius === "number" ? settings.borderRadius : 8,
     pageFontFamily: s.fontFamily,
     pageTextColor: s.color,
     pageLineHeight: s.lineHeightBase != null ? String(s.lineHeightBase) : void 0,
     pageResponsive: s.responsive,
     pageRtl: s.rtl,
     fontFamily: s.fontFamily
-  };
+  });
   const rows = (doc.rows || []).map(rowToInternal);
   return withHydratedRows({ rows, settings, __emailDocument: doc });
 }
@@ -1619,14 +1988,29 @@ function designToEmailDocument(rows, settings) {
       fontFamily: settings.fontFamily || settings.pageFontFamily || "Arial, Helvetica, sans-serif",
       lineHeightBase: settings.pageLineHeight ? Number(settings.pageLineHeight) : 1.6,
       color: settings.pageTextColor || "#111827",
-      responsive: true,
-      rtl: false
+      responsive: typeof settings.pageResponsive === "boolean" ? settings.pageResponsive : true,
+      rtl: !!settings.pageRtl,
+      _reactEmailStudio: {
+        contentPadding: settings.padding ?? 24,
+        contentBorderRadius: settings.borderRadius ?? 8,
+        editorSettings: cloneJson(settings)
+      }
     },
     rows: rows.map((r, ri) => {
-      const cols = Math.max(1, r.cols || r.cells?.length || 1);
+      const cellArrays = Array.isArray(r.cells) ? r.cells : [];
+      const declaredCols = typeof r.cols === "number" && r.cols > 0 ? r.cols : 0;
+      const cols = Math.max(1, cellArrays.length, declaredCols);
+      const rowPad = r.padding && typeof r.padding === "object" && !Array.isArray(r.padding) ? layoutColumnPaddingForDoc(r.padding) : (() => {
+        const n = typeof r.padding === "number" && Number.isFinite(r.padding) ? r.padding : 0;
+        return { top: n, right: n, bottom: n, left: n };
+      })();
+      const { cells: _rowCells, ...rowEditorSnap } = r;
       return {
         id: r.id || `row_${ri + 1}`,
         type: "row",
+        _reactEmailStudio: {
+          row: cloneJson(rowEditorSnap)
+        },
         layout: {
           columns: cols,
           gap: r.gap ?? 0,
@@ -1640,13 +2024,14 @@ function designToEmailDocument(rows, settings) {
           backgroundSize: r.bgSize || "cover",
           backgroundPosition: r.bgPosition || "center",
           backgroundGradient: r.bgGradient || null,
-          padding: { top: r.padding ?? 0, right: r.padding ?? 0, bottom: r.padding ?? 0, left: r.padding ?? 0 },
+          padding: rowPad,
           borderRadius: 0,
           borderWidth: 0,
           borderColor: "#e5e7eb",
           textAlign: "left"
         },
-        columns: (r.cells || []).slice(0, cols).map((cellBlocks, ci) => {
+        columns: Array.from({ length: cols }, (_, ci) => {
+          const cellBlocks = cellArrays[ci] ?? [];
           const cs = r.columnStyles && r.columnStyles[ci] || {};
           return {
             id: `col_${ri + 1}_${ci + 1}`,
@@ -1661,12 +2046,7 @@ function designToEmailDocument(rows, settings) {
               backgroundGradient: cs.bgGradient || null,
               borderRadius: layoutColumnBorderRadiusForDoc(cs.borderRadius)
             },
-            blocks: (cellBlocks || []).map((b) => ({
-              id: b.id,
-              type: b.type,
-              content: b.props,
-              styles: {}
-            }))
+            blocks: (cellBlocks || []).map((b) => exportEmailDocBlock(b))
           };
         })
       };
@@ -1674,14 +2054,29 @@ function designToEmailDocument(rows, settings) {
   };
   return doc;
 }
-function hydrateBlock(b) {
+function hydrateBlock(b, depth = 0) {
   if (!b || typeof b !== "object") return null;
   const t = b.type === "nestedRow" ? "layout" : b.type;
   if (!isKnownBlockType(t)) return null;
   if (t === "layout" && b.props && Array.isArray(b.props.cells)) {
     const defaults2 = DEFAULT_BLOCK_PROPS.layout;
+    if (depth >= MAX_LAYOUT_TREE_DEPTH) {
+      const ratios = Array.isArray(b.props.ratios) && b.props.ratios.length ? [...b.props.ratios] : [1];
+      return {
+        ...b,
+        type: "layout",
+        id: typeof b.id === "string" && b.id ? b.id : uid(),
+        props: {
+          ...defaults2,
+          ...b.props,
+          bgSize: b.props.bgSize ?? defaults2.bgSize,
+          bgRepeat: b.props.bgRepeat ?? defaults2.bgRepeat,
+          cells: ratios.map(() => [])
+        }
+      };
+    }
     const cells = b.props.cells.map(
-      (col) => Array.isArray(col) ? col.map(hydrateBlock).filter((x) => x != null) : []
+      (col) => Array.isArray(col) ? col.map((x) => hydrateBlock(x, depth + 1)).filter((x) => x != null) : []
     );
     return {
       ...b,
@@ -1712,6 +2107,78 @@ function hydrateBlock(b) {
     props: merged
   };
 }
+function mapEmbeddedLayoutCellBlock(raw, layoutDepth = 0) {
+  if (!raw || typeof raw !== "object") return null;
+  const r = raw;
+  if (r.props && typeof r.props === "object" && typeof r.type === "string" && !("styles" in r)) {
+    return hydrateBlock(r, layoutDepth);
+  }
+  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;
+  }
+  Object.assign(block.props, exp);
+  normalizeBoxStyles(block.props, t);
+  if (t === "html" || t === "text") {
+    block.props.content = normalizeRichHtmlForStorage(String(block.props.content ?? ""));
+  }
+}
+function exportEmailDocBlock(b, depth = 0) {
+  if (!b || typeof b !== "object") return { id: uid(), type: "text", content: {}, styles: {} };
+  const doc = internalBlockToEmailDoc(b, depth);
+  const out = { ...doc };
+  if (b.props && typeof b.props === "object" && !Array.isArray(b.props)) {
+    out.props = cloneJson(b.props);
+  }
+  if (b.type === "layout" && Array.isArray(b.props?.cells)) {
+    const baseContent = typeof doc.content === "object" && doc.content ? doc.content : {};
+    if (depth >= MAX_LAYOUT_TREE_DEPTH) {
+      const ratios = Array.isArray(b.props.ratios) && b.props.ratios.length ? b.props.ratios : [1];
+      out.content = { ...baseContent, cells: ratios.map(() => []) };
+    } else {
+      out.content = {
+        ...baseContent,
+        cells: b.props.cells.map(
+          (col) => Array.isArray(col) ? col.map((child) => exportEmailDocBlock(child, depth + 1)) : []
+        )
+      };
+    }
+  }
+  return out;
+}
 function hydrateLayoutRow(row) {
   if (!row || typeof row !== "object") return row;
   const cells = (row.cells || []).map(
@@ -4443,32 +4910,42 @@ function ContentBlockEditor({ block, onChange, mergeTags, onClose, onUpload, C }
       ] });
     case "text":
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          TextRichEditor,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PR, { label: "Content (HTML)", C, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "textarea",
           {
+            style: { ...IS, minHeight: 200, resize: "vertical", fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace", fontSize: 12, lineHeight: 1.45 },
             value: normalizeRichHtmlForStorage(p.content),
-            onChange: (html) => set("content", html),
-            typography: {
-              fontSize: p.fontSize,
-              color: p.color,
-              align: p.align,
-              fontFamily: p.fontFamily,
-              lineHeight: p.lineHeight,
-              letterSpacing: p.letterSpacing,
-              padding: p.padding
+            onChange: (e) => set("content", normalizeRichHtmlForStorage(e.target.value)),
+            spellCheck: false,
+            placeholder: "e.g. <p>Your message</p>"
+          },
+          block.id
+        ) }),
+        mergeTags && mergeTags.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PR, { label: "Insert merge tag", C, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "select",
+          {
+            style: IS,
+            defaultValue: "",
+            onChange: (e) => {
+              const v = e.target.value;
+              if (v) {
+                set("content", normalizeRichHtmlForStorage((p.content || "") + " " + v));
+                e.target.value = "";
+              }
             },
-            mergeTags,
-            onMergeTagInsert: (tag) => set("content", (p.content || "") + " " + tag),
-            placeholder: "Write your message\u2026",
-            headerTitle: "Rich text",
-            C
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: "Choose\u2026" }),
+              mergeTags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: t.value, children: t.name }, t.name))
+            ]
           }
-        ) }, block.id) }),
+        ) }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NumRangePx, { label: "Font size", value: p.fontSize ?? 15, onChange: (n) => set("fontSize", n), min: 8, max: 96, step: 1, C }),
         Col("color", "Color"),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AlignButtons, { value: p.align, onChange: (v) => set("align", v), options: ["left", "center", "right", "justify"], C }),
         Sel("fontWeight", "Weight", ["400", "500", "600", "700", "800"]),
         Sel("fontFamily", "Font", FONTS2),
+        Tog("italic", "Italic"),
+        Tog("underline", "Underline"),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PR, { label: "Line height", C, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "number", style: useIS(C).IS, min: 1, max: 4, step: 0.05, value: p.lineHeight ?? 1.65, onChange: (e) => set("lineHeight", +e.target.value) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NumRangePx, { label: "Letter spacing", value: p.letterSpacing ?? 0, onChange: (n) => set("letterSpacing", n), min: 0, max: 30, step: 0.5, C }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BlockSurfaceBgInspector, { variant: "surface", p, set, C, onUpload, syncKey: block.id }),
@@ -6039,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"
@@ -6181,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);
@@ -6304,6 +6791,9 @@ var ReactEmailEditor = (0, import_react8.forwardRef)(
       const nested = action.nested;
       const toLoc = toColumnLoc(rowId, cellIdx, nested);
       if (action.kind === "new") {
+        if ((action.contentType === "layout" || action.contentType === "nestedRow") && nestedLayoutDepth(nested) >= MAX_NESTED_LAYOUT_DEPTH) {
+          return;
+        }
         let nb;
         if (action.preset && (action.contentType === "layout" || action.contentType === "nestedRow")) {
           nb = makeNestedRowBlock(action.preset);
@@ -6589,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",
@@ -7517,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: [