@savvycal/mjml-editor 0.1.0 → 0.2.0

package/dist/components/editor/InteractivePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InteractivePreview.d.ts","sourceRoot":"","sources":["../../../src/components/editor/InteractivePreview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,UAAU,uBAAuB;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAID,wBAAgB,kBAAkB,CAAC,EACjC,UAAiB,EACjB,WAAuB,GACxB,EAAE,uBAAuB,2CAkLzB"}
+{"version":3,"file":"InteractivePreview.d.ts","sourceRoot":"","sources":["../../../src/components/editor/InteractivePreview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,UAAU,uBAAuB;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAID,wBAAgB,kBAAkB,CAAC,EACjC,UAAiB,EACjB,WAAuB,GACxB,EAAE,uBAAuB,2CAqLzB"}

package/dist/components/editor/InteractivePreview.js

@@ -1,5 +1,5 @@
-import { jsxs as r, jsx as s } from "react/jsx-runtime";
-import { useRef as w, useState as b, useEffect as c, useCallback as E } from "react";
+import { jsxs as n, jsx as s } from "react/jsx-runtime";
+import { useRef as w, useState as h, useEffect as a, useCallback as E } from "react";
 import { useEditor as y } from "../../context/EditorContext.js";
 import { renderMjmlInteractive as C } from "../../lib/mjml/renderer.js";
 const I = 375;
@@ -7,31 +7,31 @@ function S({
   showHeader: p = !0,
   previewMode: g = "desktop"
 }) {
-  const { state: n, selectBlock: d } = y(), o = w(null), [m, x] = b(n.document), [v, k] = b({
+  const { state: r, selectBlock: d } = y(), o = w(null), [m, x] = h(r.document), [k, v] = h({
     html: "",
     errors: []
   });
-  c(() => {
+  a(() => {
     const e = setTimeout(() => {
-      x(n.document);
+      x(r.document);
     }, 300);
     return () => clearTimeout(e);
-  }, [n.document]), c(() => {
+  }, [r.document]), a(() => {
     let e = !1;
     return C(m).then((t) => {
-      e || k(t);
+      e || v(t);
     }), () => {
       e = !0;
     };
   }, [m]);
-  const { html: u, errors: l } = v, i = E(
+  const { html: u, errors: l } = k, i = E(
     (e) => {
       e.data?.type === "BLOCK_SELECTED" && d(e.data.blockId);
     },
     [d]
   );
-  c(() => (window.addEventListener("message", i), () => window.removeEventListener("message", i)), [i]);
-  const a = n.selectedBlockId ? `.block-${n.selectedBlockId} { outline: 2px solid #6366f1 !important; outline-offset: -2px; position: relative; }` : "", f = `
+  a(() => (window.addEventListener("message", i), () => window.removeEventListener("message", i)), [i]);
+  const c = r.selectedBlockId ? `.block-${r.selectedBlockId} { outline: 2px solid #6366f1 !important; outline-offset: -2px; position: relative; }` : "", b = `
     (function() {
       document.addEventListener('click', function(e) {
         e.preventDefault();
@@ -60,15 +60,15 @@ function S({
       }, true);
     })();
   `;
-  return c(() => {
+  return a(() => {
     if (o.current) {
       const e = o.current.contentDocument;
       if (e) {
         e.open(), e.write(u), e.close();
         const t = e.createElement("script");
-        t.textContent = f, e.body.appendChild(t);
-        const h = e.createElement("style");
-        h.textContent = `
+        t.textContent = b, e.body.appendChild(t);
+        const f = e.createElement("style");
+        f.textContent = `
           [class*="block-"] {
             cursor: pointer;
             transition: outline 0.15s ease;
@@ -77,22 +77,22 @@ function S({
             outline: 1px dashed #94a3b8 !important;
             outline-offset: -1px;
           }
-          ${a}
-        `, e.head.appendChild(h);
+          ${c}
+        `, e.head.appendChild(f);
       }
     }
-  }, [u, a, f]), c(() => {
+  }, [u, c, b]), a(() => {
     if (o.current) {
       const e = o.current.contentDocument;
       if (e) {
         let t = e.getElementById("selection-highlight");
-        t || (t = e.createElement("style"), t.id = "selection-highlight", e.head.appendChild(t)), t.textContent = a;
+        t || (t = e.createElement("style"), t.id = "selection-highlight", e.head.appendChild(t)), t.textContent = c;
       }
     }
-  }, [n.selectedBlockId, a]), /* @__PURE__ */ r("div", { className: "flex flex-col h-full", children: [
-    p && /* @__PURE__ */ r("div", { className: "h-11 px-4 flex items-center justify-between border-b border-border bg-background", children: [
+  }, [r.selectedBlockId, c]), /* @__PURE__ */ n("div", { className: "flex flex-col h-full", children: [
+    p && /* @__PURE__ */ n("div", { className: "h-11 px-4 flex items-center justify-between border-b border-border bg-background", children: [
       /* @__PURE__ */ s("span", { className: "text-sm font-semibold text-foreground", children: "Preview" }),
-      l.length > 0 && /* @__PURE__ */ r("span", { className: "text-xs font-medium text-amber-600 bg-amber-50 px-2 py-0.5 rounded-md", children: [
+      l.length > 0 && /* @__PURE__ */ n("span", { className: "text-xs font-medium text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/30 px-2 py-0.5 rounded-md", children: [
         l.length,
         " warning",
         l.length !== 1 ? "s" : ""
@@ -111,17 +111,24 @@ function S({
         sandbox: "allow-same-origin allow-scripts"
       }
     ) }),
-    l.length > 0 && /* @__PURE__ */ r("div", { className: "max-h-28 overflow-auto border-t border-border bg-amber-50/50 p-3", children: [
-      /* @__PURE__ */ s("div", { className: "text-xs font-semibold text-amber-700 mb-2", children: "Warnings" }),
-      /* @__PURE__ */ s("div", { className: "space-y-1", children: l.map((e, t) => /* @__PURE__ */ r("div", { className: "text-xs text-amber-600", children: [
-        /* @__PURE__ */ r("span", { className: "font-mono", children: [
-          "Line ",
-          e.line,
-          ":"
-        ] }),
-        " ",
-        e.message
-      ] }, t)) })
+    l.length > 0 && /* @__PURE__ */ n("div", { className: "max-h-28 overflow-auto border-t border-border bg-amber-50/50 dark:bg-amber-900/20 p-3", children: [
+      /* @__PURE__ */ s("div", { className: "text-xs font-semibold text-amber-700 dark:text-amber-300 mb-2", children: "Warnings" }),
+      /* @__PURE__ */ s("div", { className: "space-y-1", children: l.map((e, t) => /* @__PURE__ */ n(
+        "div",
+        {
+          className: "text-xs text-amber-600 dark:text-amber-400",
+          children: [
+            /* @__PURE__ */ n("span", { className: "font-mono", children: [
+              "Line ",
+              e.line,
+              ":"
+            ] }),
+            " ",
+            e.message
+          ]
+        },
+        t
+      )) })
     ] })
   ] });
 }

package/dist/components/editor/OutlineTree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OutlineTree.d.ts","sourceRoot":"","sources":["../../../src/components/editor/OutlineTree.tsx"],"names":[],"mappings":"AA8BA,eAAO,MAAM,gBAAgB,sBAAsB,CAAC;AA+NpD,UAAU,gBAAgB;IACxB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,WAAW,CAAC,EAAE,aAAa,EAAE,EAAE,gBAAgB,2CAiI9D"}
+{"version":3,"file":"OutlineTree.d.ts","sourceRoot":"","sources":["../../../src/components/editor/OutlineTree.tsx"],"names":[],"mappings":"AA8BA,eAAO,MAAM,gBAAgB,sBAAsB,CAAC;AA+NpD,UAAU,gBAAgB;IACxB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,WAAW,CAAC,EAAE,aAAa,EAAE,EAAE,gBAAgB,2CAkI9D"}

package/dist/components/editor/OutlineTree.js

@@ -217,6 +217,7 @@ function he({ onTogglePanel: t }) {
         variant: "outline",
         size: "sm",
         onClick: x,
+        disabled: !a,
         className: "w-full h-8 gap-1.5 text-xs font-medium",
         children: [
           /* @__PURE__ */ e(I, { className: "h-3.5 w-3.5" }),

package/dist/components/editor/SourcePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SourcePreview.d.ts","sourceRoot":"","sources":["../../../src/components/editor/SourcePreview.tsx"],"names":[],"mappings":"AAGA,UAAU,kBAAkB;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,UAAgB,GACjB,EAAE,kBAAkB,2CAkFpB"}
+{"version":3,"file":"SourcePreview.d.ts","sourceRoot":"","sources":["../../../src/components/editor/SourcePreview.tsx"],"names":[],"mappings":"AAGA,UAAU,kBAAkB;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,UAAgB,GACjB,EAAE,kBAAkB,2CAqFpB"}

package/dist/components/editor/SourcePreview.js

@@ -1,41 +1,41 @@
 import { jsxs as r, jsx as n } from "react/jsx-runtime";
-import { useRef as h, useState as f, useEffect as a } from "react";
-import { renderMjmlString as x } from "../../lib/mjml/renderer.js";
+import { useRef as x, useState as b, useEffect as i } from "react";
+import { renderMjmlString as h } from "../../lib/mjml/renderer.js";
 function w({
   mjmlSource: s,
-  debounceMs: c = 300
+  debounceMs: m = 300
 }) {
-  const l = h(null), [o, u] = f(s), [b, m] = f({
+  const a = x(null), [l, f] = b(s), [u, d] = b({
     html: "",
     errors: []
   });
-  a(() => {
+  i(() => {
     const e = setTimeout(() => {
-      u(s);
-    }, c);
+      f(s);
+    }, m);
     return () => clearTimeout(e);
-  }, [s, c]), a(() => {
-    if (!o.trim()) {
-      m({ html: "", errors: [] });
+  }, [s, m]), i(() => {
+    if (!l.trim()) {
+      d({ html: "", errors: [] });
       return;
     }
     let e = !1;
-    return x(o).then((i) => {
-      e || m(i);
+    return h(l).then((o) => {
+      e || d(o);
     }), () => {
       e = !0;
     };
-  }, [o]);
-  const { html: d, errors: t } = b;
-  return a(() => {
-    if (l.current) {
-      const e = l.current.contentDocument;
-      e && (e.open(), e.write(d), e.close());
+  }, [l]);
+  const { html: c, errors: t } = u;
+  return i(() => {
+    if (a.current) {
+      const e = a.current.contentDocument;
+      e && (e.open(), e.write(c), e.close());
     }
-  }, [d]), /* @__PURE__ */ r("div", { className: "flex flex-col h-full", children: [
+  }, [c]), /* @__PURE__ */ r("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ r("div", { className: "h-11 px-4 flex items-center justify-between border-b border-border bg-background", children: [
       /* @__PURE__ */ n("span", { className: "text-sm font-semibold text-foreground", children: "Preview" }),
-      t.length > 0 && /* @__PURE__ */ r("span", { className: "text-xs font-medium text-amber-600 bg-amber-50 px-2 py-0.5 rounded-md", children: [
+      t.length > 0 && /* @__PURE__ */ r("span", { className: "text-xs font-medium text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/30 px-2 py-0.5 rounded-md", children: [
         t.length,
         " warning",
         t.length !== 1 ? "s" : ""
@@ -44,23 +44,30 @@ function w({
     /* @__PURE__ */ n("div", { className: "flex-1 overflow-auto bg-muted", children: /* @__PURE__ */ n(
       "iframe",
       {
-        ref: l,
+        ref: a,
         title: "Source Preview",
         className: "w-full h-full border-0 bg-white",
         sandbox: "allow-same-origin"
       }
     ) }),
-    t.length > 0 && /* @__PURE__ */ r("div", { className: "max-h-28 overflow-auto border-t border-border bg-amber-50/50 p-3", children: [
-      /* @__PURE__ */ n("div", { className: "text-xs font-semibold text-amber-700 mb-2", children: "Warnings" }),
-      /* @__PURE__ */ n("div", { className: "space-y-1", children: t.map((e, i) => /* @__PURE__ */ r("div", { className: "text-xs text-amber-600", children: [
-        /* @__PURE__ */ r("span", { className: "font-mono", children: [
-          "Line ",
-          e.line,
-          ":"
-        ] }),
-        " ",
-        e.message
-      ] }, i)) })
+    t.length > 0 && /* @__PURE__ */ r("div", { className: "max-h-28 overflow-auto border-t border-border bg-amber-50/50 dark:bg-amber-900/20 p-3", children: [
+      /* @__PURE__ */ n("div", { className: "text-xs font-semibold text-amber-700 dark:text-amber-300 mb-2", children: "Warnings" }),
+      /* @__PURE__ */ n("div", { className: "space-y-1", children: t.map((e, o) => /* @__PURE__ */ r(
+        "div",
+        {
+          className: "text-xs text-amber-600 dark:text-amber-400",
+          children: [
+            /* @__PURE__ */ r("span", { className: "font-mono", children: [
+              "Line ",
+              e.line,
+              ":"
+            ] }),
+            " ",
+            e.message
+          ]
+        },
+        o
+      )) })
     ] })
   ] });
 }

package/dist/components/editor/VisualEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VisualEditor.d.ts","sourceRoot":"","sources":["../../../src/components/editor/VisualEditor.tsx"],"names":[],"mappings":"AAeA,UAAU,iBAAiB;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,YAAY,CAAC,EAC3B,aAAa,EACb,cAAc,GACf,EAAE,iBAAiB,2CAwEnB"}
+{"version":3,"file":"VisualEditor.d.ts","sourceRoot":"","sources":["../../../src/components/editor/VisualEditor.tsx"],"names":[],"mappings":"AAyBA,UAAU,iBAAiB;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,YAAY,CAAC,EAC3B,aAAa,EACb,cAAc,GACf,EAAE,iBAAiB,2CAuGnB"}

package/dist/components/editor/VisualEditor.js

@@ -1,43 +1,70 @@
-import { jsx as r, jsxs as g } from "react/jsx-runtime";
-import { useEditor as b } from "../../context/EditorContext.js";
-import { ScrollArea as p } from "../ui/scroll-area.js";
-import { VisualSection as N } from "./visual-blocks/VisualSection.js";
-import { useFontLoader as y } from "../../hooks/useFontLoader.js";
-import { useStyleLoader as _, VISUAL_EDITOR_SCOPE_CLASS as A } from "../../hooks/useStyleLoader.js";
-const E = 256, L = 300, i = 12, c = 24;
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { useEditor as x } from "../../context/EditorContext.js";
+import { ScrollArea as a } from "../ui/scroll-area.js";
+import { VisualSection as y } from "./visual-blocks/VisualSection.js";
+import { useFontLoader as k } from "../../hooks/useFontLoader.js";
+import { useStyleLoader as E, VISUAL_EDITOR_SCOPE_CLASS as L } from "../../hooks/useStyleLoader.js";
+import { createEmptyDocument as S } from "../../lib/mjml/parser.js";
+function _(o) {
+  return o.tagName !== "mjml" ? !1 : o.children?.some((n) => n.tagName === "mj-body") ?? !1;
+}
+const v = 256, A = 300, m = 12, u = 24;
 function G({
-  leftPanelOpen: s,
-  rightPanelOpen: l
+  leftPanelOpen: o,
+  rightPanelOpen: n
 }) {
-  const { state: a, selectBlock: m } = b();
-  y(), _();
-  const o = a.document.children?.find((t) => t.tagName === "mj-body"), e = o?.attributes.width || "600px", u = o?.attributes["background-color"], h = (t) => {
-    t.target === t.currentTarget && m(null);
-  }, d = s ? E + i + c : 16, n = l ? L + i + c : 16, f = (parseInt(e, 10) || 600) + d + n;
-  return /* @__PURE__ */ r(
-    p,
+  const { state: d, selectBlock: h, setDocument: f } = x();
+  k(), E();
+  const b = () => {
+    f(S());
+  };
+  if (!_(d.document))
+    return /* @__PURE__ */ e(
+      a,
+      {
+        className: "h-full",
+        viewportStyle: { backgroundColor: "#ffffff" },
+        children: /* @__PURE__ */ e("div", { className: "flex items-center justify-center p-8 min-h-[400px]", children: /* @__PURE__ */ s("div", { className: "bg-red-50 border border-red-200 rounded-lg p-6 max-w-md text-center", children: [
+          /* @__PURE__ */ e("p", { className: "text-red-700 font-medium mb-2", children: "Invalid MJML structure" }),
+          /* @__PURE__ */ e("p", { className: "text-red-600 text-sm mb-4", children: "The document is missing required elements like mj-body. Reset to a blank template to continue editing." }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: b,
+              className: "px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-md hover:bg-red-700 transition-colors",
+              children: "Reset to blank template"
+            }
+          )
+        ] }) })
+      }
+    );
+  const r = d.document.children?.find((t) => t.tagName === "mj-body"), i = r?.attributes.width || "600px", p = r?.attributes["background-color"], g = (t) => {
+    t.target === t.currentTarget && h(null);
+  }, c = o ? v + m + u : 16, l = n ? A + m + u : 16, N = (parseInt(i, 10) || 600) + c + l;
+  return /* @__PURE__ */ e(
+    a,
     {
       className: "h-full",
       orientation: "both",
-      viewportStyle: { backgroundColor: u || "#ffffff" },
-      children: /* @__PURE__ */ r(
+      viewportStyle: { backgroundColor: p || "#ffffff" },
+      children: /* @__PURE__ */ e(
         "div",
         {
           className: "py-8",
           style: {
-            paddingLeft: d,
-            paddingRight: n,
-            minWidth: f
+            paddingLeft: c,
+            paddingRight: l,
+            minWidth: N
           },
-          onClick: h,
-          children: /* @__PURE__ */ g(
+          onClick: g,
+          children: /* @__PURE__ */ s(
             "div",
             {
-              className: `light mx-auto w-full ${A}`,
-              style: { maxWidth: e },
+              className: `light mx-auto w-full ${L}`,
+              style: { maxWidth: i },
               children: [
-                o?.children?.map((t) => /* @__PURE__ */ r(N, { node: t }, t._id)),
-                (!o?.children || o.children.length === 0) && /* @__PURE__ */ r("div", { className: "bg-surface rounded-lg border-2 border-dashed border-border p-12 text-center", children: /* @__PURE__ */ r("p", { className: "text-muted-foreground", children: "Add a section to get started" }) })
+                r?.children?.map((t) => /* @__PURE__ */ e(y, { node: t }, t._id)),
+                (!r?.children || r.children.length === 0) && /* @__PURE__ */ e("div", { className: "bg-zinc-100 rounded-lg border-2 border-dashed border-zinc-300 p-12 text-center", children: /* @__PURE__ */ e("p", { className: "text-zinc-500", children: "Add a section to get started" }) })
               ]
             }
           )

package/dist/hooks/useFontLoader.d.ts

@@ -1,5 +1,6 @@
 /**
  * Hook that injects <link> tags into the document head for each mj-font.
+ * Also loads MJML's default Ubuntu font to match preview rendering.
  * This enables custom fonts to render in the visual editor.
  */
 export declare function useFontLoader(): void;

package/dist/hooks/useFontLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFontLoader.d.ts","sourceRoot":"","sources":["../../src/hooks/useFontLoader.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,wBAAgB,aAAa,SA6C5B"}
+{"version":3,"file":"useFontLoader.d.ts","sourceRoot":"","sources":["../../src/hooks/useFontLoader.ts"],"names":[],"mappings":"AAWA;;;;GAIG;AACH,wBAAgB,aAAa,SAgD5B"}

package/dist/hooks/useFontLoader.js

@@ -1,21 +1,24 @@
-import { useEffect as l } from "react";
-import { useEditor as m } from "../context/EditorContext.js";
-const t = "mjml-editor-font-";
-function d() {
-  const { fonts: c } = m();
-  l(() => (document.querySelectorAll(`link[id^="${t}"]`).forEach((e) => {
-    const o = e.id.replace(t, "").replace(/-/g, " ");
-    c.some(
-      (n) => n.name === o || n.name.replace(/\s+/g, "-") === e.id.replace(t, "")
+import { useMemo as m, useEffect as s } from "react";
+import { useEditor as a } from "../context/EditorContext.js";
+const o = "mjml-editor-font-", i = {
+  name: "Ubuntu",
+  href: "https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700"
+};
+function u() {
+  const { fonts: c } = a(), n = m(() => [i, ...c], [c]);
+  s(() => (document.querySelectorAll(`link[id^="${o}"]`).forEach((e) => {
+    const r = e.id.replace(o, "").replace(/-/g, " ");
+    n.some(
+      (l) => l.name === r || l.name.replace(/\s+/g, "-") === e.id.replace(o, "")
     ) || e.remove();
-  }), c.forEach((e) => {
-    const o = `${t}${e.name.replace(/\s+/g, "-")}`;
-    let r = document.getElementById(o);
-    r ? r.href !== e.href && (r.href = e.href) : (r = document.createElement("link"), r.id = o, r.rel = "stylesheet", r.href = e.href, document.head.appendChild(r));
+  }), n.forEach((e) => {
+    const r = `${o}${e.name.replace(/\s+/g, "-")}`;
+    let t = document.getElementById(r);
+    t ? t.href !== e.href && (t.href = e.href) : (t = document.createElement("link"), t.id = r, t.rel = "stylesheet", t.href = e.href, document.head.appendChild(t));
   }), () => {
-    document.querySelectorAll(`link[id^="${t}"]`).forEach((e) => e.remove());
-  }), [c]);
+    document.querySelectorAll(`link[id^="${o}"]`).forEach((e) => e.remove());
+  }), [n]);
 }
 export {
-  d as useFontLoader
+  u as useFontLoader
 };

package/dist/lib/mjml/renderer.js

@@ -9,24 +9,24 @@ function m(r) {
       ...r,
       children: r.children?.map(m)
     };
-  const t = r.attributes["mj-class"] || "", e = `block-${r._id}`, s = t ? `${t} ${e}` : e;
+  const t = r.attributes["mj-class"] || "", e = `block-${r._id}`, n = t ? `${t} ${e}` : e;
   return {
     ...r,
-    attributes: { ...r.attributes, "mj-class": s },
+    attributes: { ...r.attributes, "mj-class": n },
     children: r.children?.map(m)
   };
 }
-function g(r) {
-  return p(r);
+function p(r) {
+  return g(r);
 }
-function p(r, t = 0) {
-  const e = "  ".repeat(t), s = r.tagName, n = Object.entries(r.attributes || {}).filter(
-    ([a, l]) => a !== "_id" && l !== "" && l !== void 0
-  ).map(([a, l]) => `${a}="${h(l)}"`).join(" "), i = n ? `<${s} ${n}>` : `<${s}>`, c = `</${s}>`;
+function g(r, t = 0) {
+  const e = "  ".repeat(t), n = r.tagName, l = Object.entries(r.attributes || {}).filter(
+    ([a, s]) => a !== "_id" && s !== "" && s !== void 0
+  ).map(([a, s]) => `${a}="${h(s)}"`).join(" "), i = l ? `<${n} ${l}>` : `<${n}>`, c = `</${n}>`;
   if (r.content !== void 0)
     return `${e}${i}${r.content}${c}`;
   if (r.children && r.children.length > 0) {
-    const a = r.children.map((l) => p(l, t + 1)).join(`
+    const a = r.children.map((s) => g(s, t + 1)).join(`
 `);
     return `${e}${i}
 ${a}
@@ -48,23 +48,23 @@ async function $(r) {
     };
   } catch (t) {
     return console.error("MJML render error:", t), {
-      html: '<p style="color: red; padding: 20px;">Error rendering email preview</p>',
+      html: '<p style="color: #dc2626; padding: 20px; background: white; margin: 0;">Error rendering email preview</p>',
       errors: [{ line: 0, message: String(t), tagName: "mjml" }]
     };
   }
 }
 async function d(r) {
   try {
-    const t = await u(), e = m(r), s = g(e), n = t(s, {
+    const t = await u(), e = m(r), n = p(e), l = t(n, {
       validationLevel: "soft"
     });
     return {
-      html: n.html,
-      errors: n.errors || []
+      html: l.html,
+      errors: l.errors || []
     };
   } catch (t) {
     return console.error("MJML render error:", t), {
-      html: '<p style="color: red; padding: 20px;">Error rendering email preview</p>',
+      html: '<p style="color: #dc2626; padding: 20px; background: white; margin: 0;">Error rendering email preview</p>',
       errors: [{ line: 0, message: String(t), tagName: "mjml" }]
     };
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@savvycal/mjml-editor",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "license": "MIT",
   "repository": {