react-email-studio 3.0.0 → 3.2.0

package/dist/index.d.cts

@@ -108,10 +108,6 @@ type ReactEmailEditorOptions = EmailHtmlOptions & {
         customThemes?: Record<string, ThemeColors>;
     };
     locale?: string;
-    mergeTags?: {
-        name: string;
-        value: string;
-    }[];
     features?: {
         autoSave?: {
             enabled?: boolean;

package/dist/index.d.ts

@@ -108,10 +108,6 @@ type ReactEmailEditorOptions = EmailHtmlOptions & {
         customThemes?: Record<string, ThemeColors>;
     };
     locale?: string;
-    mergeTags?: {
-        name: string;
-        value: string;
-    }[];
     features?: {
         autoSave?: {
             enabled?: boolean;

package/dist/index.js

@@ -4,7 +4,7 @@ import {
   useRef as useRef6,
   useEffect as useEffect6,
   useCallback as useCallback2,
-  useMemo as useMemo2,
+  useMemo as useMemo3,
   forwardRef,
   useImperativeHandle,
   Fragment as Fragment6
@@ -120,7 +120,6 @@ var I18N = {
     delete: "Delete",
     moveUp: "Move Up",
     moveDown: "Move Down",
-    mergeTags: "Merge Tags",
     autoSaved: "Auto-saved",
     search: "Search blocks\u2026",
     zoomIn: "Zoom In",
@@ -138,7 +137,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",
@@ -178,7 +178,6 @@ var I18N = {
     delete: "Supprimer",
     moveUp: "Monter",
     moveDown: "Descendre",
-    mergeTags: "Balises fusion",
     autoSaved: "Auto-sauvegard\xE9",
     search: "Rechercher\u2026",
     colorScheme: "Sch\xE9ma de couleurs",
@@ -191,6 +190,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 -",
@@ -237,7 +237,6 @@ var I18N = {
     delete: "L\xF6schen",
     moveUp: "Nach oben",
     moveDown: "Nach unten",
-    mergeTags: "Merge-Tags",
     autoSaved: "Auto-gespeichert",
     search: "Bl\xF6cke suchen\u2026",
     colorScheme: "Farbschema",
@@ -250,6 +249,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 -",
@@ -294,7 +294,6 @@ var I18N = {
     delete: "Eliminar",
     moveUp: "Subir",
     moveDown: "Bajar",
-    mergeTags: "Etiquetas de fusi\xF3n",
     autoSaved: "Auto-guardado",
     search: "Buscar bloques\u2026",
     zoomIn: "Zoom +",
@@ -310,6 +309,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"
   }
@@ -2079,13 +2079,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;
@@ -2178,9 +2202,8 @@ function useLiveCountdown(endDate) {
   const s = Math.floor(diff % 6e4 / 1e3);
   return [d, h, m, s];
 }
-function editChromeBorder(C, preview) {
-  if (preview) return {};
-  return { border: `1px dotted ${C.border}`, boxSizing: "border-box" };
+function editChromeBorder(_C, _preview) {
+  return {};
 }
 function blockLinkCaptureHandler(preview, e) {
   if (preview) return;
@@ -2482,6 +2505,8 @@ function NestedRowBlock({
   rowId,
   cellIdx,
   parentBlockIdx,
+  /** When this layout sits inside another layout column, meta uses `contentIdx` + `inner` like other nested blocks. */
+  selectionInner,
   editorId,
   selectedKey,
   selContentMeta,
@@ -2493,7 +2518,7 @@ function NestedRowBlock({
   C
 }) {
   const p = block.props;
-  const rowSelected = !preview && selContentMeta && selContentMeta.rowId === rowId && selContentMeta.cellIdx === cellIdx && selContentMeta.contentIdx === parentBlockIdx && !selContentMeta.inner && selectedKey === block.id;
+  const rowSelected = !preview && selContentMeta && selContentMeta.rowId === rowId && selContentMeta.cellIdx === cellIdx && selectedKey === block.id && (selectionInner == null ? selContentMeta.contentIdx === parentBlockIdx && !selContentMeta.inner : selContentMeta.contentIdx === parentBlockIdx && selContentMeta.inner && selContentMeta.inner.cellIdx === selectionInner.cellIdx && selContentMeta.inner.contentIdx === selectionInner.contentIdx);
   const rowStyle = {
     padding: p.padding ?? 8,
     position: "relative",
@@ -2517,7 +2542,13 @@ function NestedRowBlock({
       style: rowStyle,
       onClick: preview ? void 0 : (e) => {
         e.stopPropagation();
-        onSelectContent(block.id, rowId, cellIdx, parentBlockIdx, null);
+        onSelectContent(
+          block.id,
+          rowId,
+          cellIdx,
+          parentBlockIdx,
+          selectionInner ?? null
+        );
       },
       children: /* @__PURE__ */ jsx3("div", { style: { display: "flex", gap: p.gap ?? 12 }, children: (p.cells || []).map((innerBlocks, ici) => {
         const cS = p.columnStyles && p.columnStyles[ici] || {};
@@ -2583,7 +2614,13 @@ function BlockItem({
     if (!onSelectContent) return;
     e.stopPropagation();
     if (isSplitLayoutBlock(cb)) {
-      onSelectContent(cb.id, rowId, cellIdx, nest ? nest.parentBlockIdx : ci, null);
+      onSelectContent(
+        cb.id,
+        rowId,
+        cellIdx,
+        nest ? nest.parentBlockIdx : ci,
+        nest ? { cellIdx: innerCellIdx, contentIdx: ci } : null
+      );
     } else {
       onSelectContent(
         cb.id,
@@ -2654,6 +2691,7 @@ function BlockItem({
                 rowId,
                 cellIdx,
                 parentBlockIdx: nest ? nest.parentBlockIdx : ci,
+                selectionInner: nest ? { cellIdx: innerCellIdx, contentIdx: ci } : null,
                 editorId,
                 selectedKey,
                 selContentMeta,
@@ -2961,7 +2999,7 @@ var CanvasRow = ({
 import { Image as ImageIcon2, Repeat as RepeatIcon, Scaling as Scaling2, Crosshair as Crosshair2, Blend as GradientIcon2, Droplets as ColorIcon } from "lucide-react";
 
 // src/editor/properties/PropertyEditors.tsx
-import { useRef as useRef2, useState as useState3, useEffect as useEffect3, Fragment as Fragment3 } from "react";
+import { useRef as useRef2, useState as useState3, useEffect as useEffect3, useMemo, Fragment as Fragment3 } from "react";
 import {
   AlignCenter as AlignCenter2,
   AlignJustify as AlignJustify2,
@@ -3282,11 +3320,8 @@ function ToolbarTypographyControls({ editor, C }) {
 }
 function FormattingToolbar({
   editor,
-  C,
-  mergeTags,
-  onMergeTagInsert
+  C
 }) {
-  const [mergeSel, setMergeSel] = useState2("");
   const [linkPanelOpen, setLinkPanelOpen] = useState2(false);
   const [linkUrlValue, setLinkUrlValue] = useState2("");
   const ibtn = (active) => toolbarIconBtn(C, active);
@@ -3606,8 +3641,6 @@ function TextRichEditor({
   value,
   onChange,
   typography,
-  mergeTags,
-  onMergeTagInsert,
   placeholder = "Write your message\u2026",
   headerTitle = "Rich editor",
   C
@@ -3751,15 +3784,7 @@ function TextRichEditor({
             ]
           }
         ),
-        /* @__PURE__ */ jsx4(
-          FormattingToolbar,
-          {
-            editor,
-            C,
-            mergeTags,
-            onMergeTagInsert
-          }
-        ),
+        /* @__PURE__ */ jsx4(FormattingToolbar, { editor, C }),
         /* @__PURE__ */ jsx4("style", { children: proseStyle }),
         /* @__PURE__ */ jsx4(
           "div",
@@ -3810,15 +3835,7 @@ function TextRichEditor({
         background: C.inputBg
       },
       children: [
-        /* @__PURE__ */ jsx4(
-          FormattingToolbar,
-          {
-            editor,
-            C,
-            mergeTags,
-            onMergeTagInsert
-          }
-        ),
+        /* @__PURE__ */ jsx4(FormattingToolbar, { editor, C }),
         /* @__PURE__ */ jsx4("style", { children: proseStyle }),
         /* @__PURE__ */ jsx4(
           "div",
@@ -4818,7 +4835,7 @@ function BlockSurfaceBgInspector({
     ] }) : null
   ] });
 }
-function ContentBlockEditor({ block, onChange, mergeTags, onClose, onUpload, C }) {
+function ContentBlockEditor({ block, onChange, onClose, onUpload, C }) {
   const { IS, CI } = useIS(C);
   const imageFileRef = useRef2(null);
   const p = block.props;
@@ -4837,7 +4854,6 @@ function ContentBlockEditor({ block, onChange, mergeTags, onClose, onUpload, C }
     /* @__PURE__ */ jsx6("input", { type: "checkbox", checked: !!p[k], onChange: (e) => set(k, e.target.checked), style: { width: 15, height: 15, accentColor: C.accent } }),
     /* @__PURE__ */ jsx6("span", { style: { color: C.muted, fontSize: 12 }, children: p[k] ? "On" : "Off" })
   ] }) });
-  const TagPicker = (_field) => null;
   const FONTS2 = ["Georgia,serif", "Arial,sans-serif", "Verdana,sans-serif", "'Courier New',monospace", "Trebuchet MS,sans-serif", "Impact,sans-serif"];
   const ImgUpload = (key) => {
     if (!onUpload) return null;
@@ -4891,7 +4907,7 @@ function ContentBlockEditor({ block, onChange, mergeTags, onClose, onUpload, C }
       ] });
     case "text":
       return /* @__PURE__ */ jsxs4(Fragment4, { children: [
-        /* @__PURE__ */ jsx6(PR, { label: "Content (HTML)", C, children: /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx6(PR, { label: "Content", C, children: /* @__PURE__ */ jsx6(
           "textarea",
           {
             style: { ...IS, minHeight: 200, resize: "vertical", fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace", fontSize: 12, lineHeight: 1.45 },
@@ -4902,24 +4918,6 @@ function ContentBlockEditor({ block, onChange, mergeTags, onClose, onUpload, C }
           },
           block.id
         ) }),
-        mergeTags && mergeTags.length > 0 ? /* @__PURE__ */ jsx6(PR, { label: "Insert merge tag", C, children: /* @__PURE__ */ jsxs4(
-          "select",
-          {
-            style: IS,
-            defaultValue: "",
-            onChange: (e) => {
-              const v = e.target.value;
-              if (v) {
-                set("content", normalizeRichHtmlForStorage((p.content || "") + " " + v));
-                e.target.value = "";
-              }
-            },
-            children: [
-              /* @__PURE__ */ jsx6("option", { value: "", children: "Choose\u2026" }),
-              mergeTags.map((t) => /* @__PURE__ */ jsx6("option", { value: t.value, children: t.name }, t.name))
-            ]
-          }
-        ) }) : null,
         /* @__PURE__ */ jsx6(NumRangePx, { label: "Font size", value: p.fontSize ?? 15, onChange: (n) => set("fontSize", n), min: 8, max: 96, step: 1, C }),
         Col("color", "Color"),
         /* @__PURE__ */ jsx6(AlignButtons, { value: p.align, onChange: (v) => set("align", v), options: ["left", "center", "right", "justify"], C }),
@@ -4949,8 +4947,6 @@ function ContentBlockEditor({ block, onChange, mergeTags, onClose, onUpload, C }
               letterSpacing: p.letterSpacing,
               padding: p.padding
             },
-            mergeTags,
-            onMergeTagInsert: (tag) => set("content", (p.content || "") + " " + tag),
             placeholder: "Write your rich content\u2026",
             headerTitle: "Rich editor",
             C
@@ -5357,6 +5353,19 @@ function ContentBlockEditor({ block, onChange, mergeTags, onClose, onUpload, C }
       return null;
   }
 }
+function inferLayoutRowBgStep(r) {
+  if (r.bgGradient) return "gradient";
+  if (String(r.bgImage || "").trim()) return "image";
+  if (String(r.bgColor || "").trim()) return "solid";
+  return null;
+}
+function inferColumnBgStep(columnStyles, selCol) {
+  const cs = (columnStyles || {})[selCol] || {};
+  if (cs.bgGradient) return "gradient";
+  if (String(cs.bgImage || "").trim()) return "image";
+  if (String(cs.bgColor || "").trim()) return "solid";
+  return null;
+}
 function LayoutRowEditor({
   row,
   onChange,
@@ -5368,49 +5377,37 @@ function LayoutRowEditor({
   customizationHint
 }) {
   const { IS, CI } = useIS(C);
-  const [selCol, setSelCol] = useState3(initialCol);
-  const [rowBgUiStep, setRowBgUiStep] = useState3(null);
-  const [colBgUiStep, setColBgUiStep] = useState3(null);
+  const colCount = Math.max(1, row.ratios?.length || row.cells?.length || 1);
+  const ratioList = row.ratios?.length ? row.ratios : [1];
+  const [selCol, setSelCol] = useState3(0);
+  const [rowBgPickerMode, setRowBgPickerMode] = useState3(null);
+  const [colBgPickerMode, setColBgPickerMode] = useState3(null);
+  const inferredRowBg = useMemo(() => inferLayoutRowBgStep(row), [row.bgGradient, row.bgImage, row.bgColor]);
+  const inferredColBg = useMemo(
+    () => inferColumnBgStep(row.columnStyles, selCol),
+    [row.columnStyles, selCol]
+  );
+  const rowBgUiStep = inferredRowBg ?? rowBgPickerMode;
+  const colBgUiStep = inferredColBg ?? colBgPickerMode;
   useEffect3(() => {
-    if (initialCol !== null && initialCol !== void 0) {
-      setSelCol(initialCol);
+    if (initialCol !== null && initialCol !== void 0 && initialCol >= 0) {
+      setSelCol(Math.min(initialCol, colCount - 1));
+    } else {
+      setSelCol((c) => Math.min(Math.max(0, c), colCount - 1));
     }
-  }, [initialCol]);
+  }, [initialCol, row.id, colCount]);
   useEffect3(() => {
-    if (row.bgGradient) {
-      setRowBgUiStep("gradient");
-      return;
-    }
-    if (String(row.bgImage || "").trim()) {
-      setRowBgUiStep("image");
-      return;
-    }
-    if (String(row.bgColor || "").trim()) {
-      setRowBgUiStep("solid");
-      return;
-    }
-    setRowBgUiStep(null);
+    setRowBgPickerMode(null);
   }, [row.id]);
   useEffect3(() => {
-    if (selCol === null) {
-      setColBgUiStep(null);
-      return;
-    }
-    const cs = (row.columnStyles || {})[selCol] || {};
-    if (cs.bgGradient) {
-      setColBgUiStep("gradient");
-      return;
-    }
-    if (String(cs.bgImage || "").trim()) {
-      setColBgUiStep("image");
-      return;
-    }
-    if (String(cs.bgColor || "").trim()) {
-      setColBgUiStep("solid");
-      return;
-    }
-    setColBgUiStep(null);
+    setColBgPickerMode(null);
   }, [selCol, row.id]);
+  useEffect3(() => {
+    if (inferredRowBg) setRowBgPickerMode(null);
+  }, [inferredRowBg]);
+  useEffect3(() => {
+    if (inferredColBg) setColBgPickerMode(null);
+  }, [inferredColBg]);
   const set = (k, v) => onChange({ ...row, [k]: v });
   const applyColumnCount = (n) => {
     const prevCells = [...row.cells || []];
@@ -5426,16 +5423,13 @@ function LayoutRowEditor({
     }
     onChange({ ...row, cols: n, preset: "custom", cells, ratios });
   };
-  const colCount = Math.max(1, row.ratios?.length || row.cells?.length || 1);
-  const ratioList = row.ratios?.length ? row.ratios : [1];
   const updCol = (i, upd) => {
     const styles = { ...row.columnStyles || {} };
     styles[i] = { ...styles[i] || {}, ...upd };
     set("columnStyles", styles);
   };
   const setColBgMode = (mode) => {
-    if (selCol === null) return;
-    setColBgUiStep(mode);
+    setColBgPickerMode(mode);
     const cs = (row.columnStyles || {})[selCol] || {};
     if (mode === "solid") {
       updCol(selCol, { bgGradient: null, bgImage: "" });
@@ -5453,7 +5447,7 @@ function LayoutRowEditor({
   const total = ratioList.reduce((a, b) => a + b, 0) || 1;
   const POS_OPTS = ["center", "top", "bottom", "left", "right", "top left", "top right", "bottom left", "bottom right"];
   const setRowBgMode = (mode) => {
-    setRowBgUiStep(mode);
+    setRowBgPickerMode(mode);
     if (mode === "solid") {
       set("bgGradient", null);
       set("bgImage", "");
@@ -5611,7 +5605,7 @@ function LayoutRowEditor({
         },
         i
       )) }),
-      selCol !== null && /* @__PURE__ */ jsxs4("div", { style: { background: C.surface, padding: 10, borderRadius: 8, border: `1px solid ${C.border}` }, children: [
+      colCount > 0 && /* @__PURE__ */ jsxs4("div", { style: { background: C.surface, padding: 10, borderRadius: 8, border: `1px solid ${C.border}` }, children: [
         /* @__PURE__ */ jsx6(BgModeButtons, { value: colBgUiStep, onChange: setColBgMode, C }),
         colBgUiStep === null ? /* @__PURE__ */ jsx6("div", { style: { fontSize: 11, color: C.muted, marginBottom: 10, lineHeight: 1.45 }, children: "Choose Color, Gradient, or Image \u2014 then edit column background details." }) : null,
         colBgUiStep === "solid" ? /* @__PURE__ */ jsx6(PR, { label: `col ${selCol + 1} bg`, C, children: /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
@@ -5710,7 +5704,7 @@ function LayoutRowEditor({
 import {
   useState as useState4,
   useEffect as useEffect4,
-  useMemo,
+  useMemo as useMemo2,
   useRef as useRef3,
   useLayoutEffect
 } from "react";
@@ -6088,8 +6082,8 @@ function PreviewModal({
   const iframeHDesktop = "min(720px, calc(100vh - 200px))";
   const mobileIframeW = previewIframeWidthPx("mobile", mobileVariant);
   const tabletIframeW = previewIframeWidthPx("tablet");
-  const srcDocMobile = useMemo(() => previewEmailSrcDoc(html, mobileIframeW), [html, mobileIframeW]);
-  const srcDocTablet = useMemo(() => previewEmailSrcDoc(html, tabletIframeW), [html, tabletIframeW]);
+  const srcDocMobile = useMemo2(() => previewEmailSrcDoc(html, mobileIframeW), [html, mobileIframeW]);
+  const srcDocTablet = useMemo2(() => previewEmailSrcDoc(html, tabletIframeW), [html, tabletIframeW]);
   const IframeContent = ({
     srcDoc,
     title: iframeTitle,
@@ -6485,7 +6479,7 @@ var ReactEmailEditor = forwardRef(
     style = {}
   }, ref) {
     const opt = options;
-    const mergedThemes = useMemo2(
+    const mergedThemes = useMemo3(
       () => ({ ...THEMES, ...opt.appearance?.customThemes || {} }),
       [opt.appearance?.customThemes]
     );
@@ -6503,11 +6497,11 @@ var ReactEmailEditor = forwardRef(
     const [previewDevice, setPreviewDevice] = useState6("desktop");
     const [activeTab, setActiveTab] = useState6("blocks");
     const [templatesOpen, setTemplatesOpen] = useState6(false);
+    const [jsonLoading, setJsonLoading] = useState6(false);
     const [autoSaveMsg, setAutoSaveMsg] = useState6("");
     const [locale, setLocale] = useState6(
       typeof opt.locale === "string" ? opt.locale : "en"
     );
-    const [mergeTags, setMergeTagsState] = useState6(() => opt.mergeTags ?? []);
     const [zoom, setZoom] = useState6(100);
     const [rightRailWidth, setRightRailWidth] = useState6(RIGHT_RAIL_DEFAULT_W);
     const [ctxMenu, setCtxMenu] = useState6(null);
@@ -6645,31 +6639,40 @@ var ReactEmailEditor = forwardRef(
     }, [rows, history, future, selContentMeta]);
     const buildApi = useCallback2(() => ({
       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);
@@ -6893,7 +6896,7 @@ var ReactEmailEditor = forwardRef(
         }));
         return;
       }
-      const loc = { type: "nested", rowId, outerCellIdx: cellIdx, blockIdx: inner.parentBlockIdx, innerCellIdx: inner.cellIdx };
+      const loc = { type: "nested", rowId, outerCellIdx: cellIdx, blockIdx: ci, innerCellIdx: inner.cellIdx };
       mutate((prev) => updateColumnAt(prev, loc, (c) => c.map((b, j) => j === inner.contentIdx ? upd : b)));
     };
     const selectContent = (contentId, rowId, cellIdx, parentBlockIdx, inner = null) => {
@@ -7056,6 +7059,7 @@ var ReactEmailEditor = 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__ */ jsxs9("div", { id: eid("workspace"), style: {
             display: "flex",
@@ -7623,7 +7627,6 @@ var ReactEmailEditor = forwardRef(
                             setSelMeta(null);
                             setSelectedRowId(null);
                           },
-                          mergeTags,
                           onUpload,
                           C
                         }
@@ -7692,11 +7695,43 @@ var ReactEmailEditor = forwardRef(
                                   e.dataTransfer.setData("application/json", JSON.stringify({ contentType: bt.type }));
                                 },
                                 onClick: () => {
-                                  const targetRow = selectedRowId ? rows.find((r) => r.id === selectedRowId) : rows[rows.length - 1];
-                                  if (!targetRow) return;
-                                  dropContent(targetRow.id, 0, { kind: "new", contentType: bt.type, insertAt: null });
+                                  if (!rows.length) return;
+                                  if (selContentMeta?.inner) {
+                                    const { rowId, cellIdx, contentIdx, inner } = selContentMeta;
+                                    dropContent(rowId, cellIdx, {
+                                      kind: "new",
+                                      contentType: bt.type,
+                                      insertAt: null,
+                                      nested: { parentBlockIdx: contentIdx, innerCellIdx: inner.cellIdx }
+                                    });
+                                    return;
+                                  }
+                                  if (selContentMeta?.rowId && typeof selContentMeta.cellIdx === "number" && selContentMeta.cellIdx >= 0) {
+                                    const r = rows.find((x) => x.id === selContentMeta.rowId);
+                                    if (r && selContentMeta.cellIdx < r.cells.length) {
+                                      dropContent(selContentMeta.rowId, selContentMeta.cellIdx, {
+                                        kind: "new",
+                                        contentType: bt.type,
+                                        insertAt: null
+                                      });
+                                      return;
+                                    }
+                                  }
+                                  if (selectedRowId) {
+                                    const targetRow = rows.find((r) => r.id === selectedRowId);
+                                    if (targetRow) {
+                                      dropContent(targetRow.id, 0, {
+                                        kind: "new",
+                                        contentType: bt.type,
+                                        insertAt: null
+                                      });
+                                      return;
+                                    }
+                                  }
+                                  const main = rows[0];
+                                  dropContent(main.id, 0, { kind: "new", contentType: bt.type, insertAt: null });
                                 },
-                                title: `Drag into a cell or click to add to ${selectedRowId ? "selected row" : "last row"}`,
+                                title: selContentMeta?.inner ? "Click to add inside the selected nested column" : selContentMeta?.rowId ? "Click to add in the selected column" : selectedRowId ? "Click to add to column 1 of the selected row" : "Click to add to the first row, first column",
                                 style: {
                                   display: "flex",
                                   flexDirection: "row",
@@ -7984,7 +8019,47 @@ var ReactEmailEditor = forwardRef(
                   ) })
                 ]
               }
-            )
+            ),
+            jsonLoading ? /* @__PURE__ */ jsxs9(
+              "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__ */ jsx11(
+                    "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__ */ jsx11("span", { style: { fontSize: 13, fontWeight: 600, color: C.text }, children: L("loadingDesign") })
+                ]
+              }
+            ) : null
           ] }),
           /* @__PURE__ */ jsxs9("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__ */ jsxs9("span", { children: [