@savvycal/mjml-editor 0.8.0 → 0.9.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":"AAIA,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,2CAuLzB"}
+{"version":3,"file":"InteractivePreview.d.ts","sourceRoot":"","sources":["../../../src/components/editor/InteractivePreview.tsx"],"names":[],"mappings":"AAKA,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,2CAwLzB"}

package/dist/components/editor/InteractivePreview.js

@@ -1,38 +1,39 @@
 import { jsxs as r, jsx as l } from "react/jsx-runtime";
-import { useRef as E, useState as p, useEffect as a, useCallback as y } from "react";
-import { useEditor as C } from "../../context/EditorContext.js";
-import { useNonce as I } from "../../context/NonceContext.js";
-import { renderMjmlInteractive as N } from "../../lib/mjml/renderer.js";
-const L = 375;
-function R({
-  showHeader: g = !0,
-  previewMode: x = "desktop"
+import { useRef as y, useState as g, useEffect as a, useCallback as C } from "react";
+import { useEditor as I } from "../../context/EditorContext.js";
+import { useNonce as N } from "../../context/NonceContext.js";
+import { useRenderEndpoint as L } from "../../context/RenderEndpointContext.js";
+import { renderMjmlInteractive as D } from "../../lib/mjml/renderer.js";
+const B = 375;
+function W({
+  showHeader: x = !0,
+  previewMode: k = "desktop"
 }) {
-  const { state: n, selectBlock: m } = C(), i = I(), o = E(null), [u, k] = p(n.document), [v, w] = p({
+  const { state: n, selectBlock: m } = I(), i = N(), u = L(), o = y(null), [f, v] = g(n.document), [E, w] = g({
     html: "",
     errors: []
   });
   a(() => {
     const e = setTimeout(() => {
-      k(n.document);
+      v(n.document);
     }, 300);
     return () => clearTimeout(e);
   }, [n.document]), a(() => {
     let e = !1;
-    return N(u).then((t) => {
+    return D(f, u).then((t) => {
       e || w(t);
     }), () => {
       e = !0;
     };
-  }, [u]);
-  const { html: f, errors: s } = v, d = y(
+  }, [f, u]);
+  const { html: b, errors: s } = E, d = C(
     (e) => {
       e.data?.type === "BLOCK_SELECTED" && m(e.data.blockId);
     },
     [m]
   );
   a(() => (window.addEventListener("message", d), () => window.removeEventListener("message", d)), [d]);
-  const c = n.selectedBlockId ? `.block-${n.selectedBlockId} { outline: 2px solid #6366f1 !important; outline-offset: -2px; position: relative; }` : "", b = `
+  const c = n.selectedBlockId ? `.block-${n.selectedBlockId} { outline: 2px solid #6366f1 !important; outline-offset: -2px; position: relative; }` : "", p = `
     (function() {
       document.addEventListener('click', function(e) {
         e.preventDefault();
@@ -65,9 +66,9 @@ function R({
     if (o.current) {
       const e = o.current.contentDocument;
       if (e) {
-        e.open(), e.write(f), e.close();
+        e.open(), e.write(b), e.close();
         const t = e.createElement("script");
-        i && (t.nonce = i), t.textContent = b, e.body.appendChild(t);
+        i && (t.nonce = i), t.textContent = p, e.body.appendChild(t);
         const h = e.createElement("style");
         h.textContent = `
           [class*="block-"] {
@@ -82,7 +83,7 @@ function R({
         `, e.head.appendChild(h);
       }
     }
-  }, [f, c, b, i]), a(() => {
+  }, [b, c, p, i]), a(() => {
     if (o.current) {
       const e = o.current.contentDocument;
       if (e) {
@@ -91,7 +92,7 @@ function R({
       }
     }
   }, [n.selectedBlockId, c]), /* @__PURE__ */ r("div", { className: "flex flex-col h-full", children: [
-    g && /* @__PURE__ */ r("div", { className: "h-11 px-4 flex items-center justify-between border-b border-border bg-background", children: [
+    x && /* @__PURE__ */ r("div", { className: "h-11 px-4 flex items-center justify-between border-b border-border bg-background", children: [
       /* @__PURE__ */ l("span", { className: "text-sm font-semibold text-foreground", children: "Preview" }),
       s.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: [
         s.length,
@@ -106,7 +107,7 @@ function R({
         title: "Email Preview",
         className: "h-full border-0 bg-white transition-all duration-200",
         style: {
-          width: x === "mobile" ? L : "100%",
+          width: k === "mobile" ? B : "100%",
           maxWidth: "100%"
         },
         sandbox: "allow-same-origin allow-scripts"
@@ -134,5 +135,5 @@ function R({
   ] });
 }
 export {
-  R as InteractivePreview
+  W as InteractivePreview
 };

package/dist/components/editor/MjmlEditor.d.ts

@@ -3,6 +3,12 @@ import { LiquidSchema } from '../../types/liquid';
 interface MjmlEditorProps {
     value: string;
     onChange: (mjml: string) => void;
+    /**
+     * URL to POST raw MJML content to for server-side rendering.
+     * The endpoint should accept a POST with `Content-Type: text/plain` body
+     * and return JSON: `{ html: string, errors: Array<{ line: number, message: string, tagName: string }> }`
+     */
+    renderEndpoint: string;
     className?: string;
     defaultTheme?: 'light' | 'dark' | 'system';
     liquidSchema?: LiquidSchema;
@@ -55,6 +61,6 @@ interface MjmlEditorProps {
      */
     nonce?: string;
 }
-export declare function MjmlEditor({ value, onChange, className, defaultTheme, liquidSchema, extensions, applyThemeToDocument, showThemeToggle, defaultLeftPanelOpen, defaultRightPanelOpen, nonce, }: MjmlEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function MjmlEditor({ value, onChange, renderEndpoint, className, defaultTheme, liquidSchema, extensions, applyThemeToDocument, showThemeToggle, defaultLeftPanelOpen, defaultRightPanelOpen, nonce, }: MjmlEditorProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=MjmlEditor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MjmlEditor.d.ts","sourceRoot":"","sources":["../../../src/components/editor/MjmlEditor.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAY,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAcnD,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC3C,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B;;;;;;;;;;;;;;OAcG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B;;;;;;;;;OASG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoKD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,YAAuB,EACvB,YAAY,EACZ,UAAU,EACV,oBAA2B,EAC3B,eAAsB,EACtB,oBAA2B,EAC3B,qBAA6B,EAC7B,KAAK,GACN,EAAE,eAAe,2CAgDjB"}
+{"version":3,"file":"MjmlEditor.d.ts","sourceRoot":"","sources":["../../../src/components/editor/MjmlEditor.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAY,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAcnD,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;;OAIG;IACH,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC3C,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B;;;;;;;;;;;;;;OAcG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B;;;;;;;;;OASG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoKD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,cAAc,EACd,SAAS,EACT,YAAuB,EACvB,YAAY,EACZ,UAAU,EACV,oBAA2B,EAC3B,eAAsB,EACtB,oBAA2B,EAC3B,qBAA6B,EAC7B,KAAK,GACN,EAAE,eAAe,2CAkDjB"}

package/dist/components/editor/MjmlEditor.js

@@ -1,158 +1,160 @@
-import { jsx as e, jsxs as P, Fragment as L } from "react/jsx-runtime";
+import { jsx as e, jsxs as w, Fragment as L } from "react/jsx-runtime";
 import { useState as a, useEffect as s, useCallback as D, useRef as M } from "react";
 import { EditorProvider as O, useEditor as j } from "../../context/EditorContext.js";
 import { ThemeProvider as x, useTheme as C } from "../../context/ThemeContext.js";
-import { LiquidSchemaProvider as S } from "../../context/LiquidSchemaContext.js";
-import { ExtensionsProvider as K } from "../../context/ExtensionsContext.js";
-import { NonceProvider as N } from "../../context/NonceContext.js";
-import { OutlineTree as R, GLOBAL_STYLES_ID as w } from "./OutlineTree.js";
-import { EditorCanvas as A } from "./EditorCanvas.js";
-import { BlockInspector as F } from "./BlockInspector.js";
-import { GlobalStylesPanel as $ } from "./GlobalStylesPanel.js";
-import { FloatingPanel as B } from "../ui/floating-panel.js";
-import { createEmptyDocument as I, parseMjml as z, serializeMjml as G } from "../../lib/mjml/parser.js";
-function H(n) {
+import { LiquidSchemaProvider as R } from "../../context/LiquidSchemaContext.js";
+import { ExtensionsProvider as S } from "../../context/ExtensionsContext.js";
+import { NonceProvider as K } from "../../context/NonceContext.js";
+import { RenderEndpointProvider as N } from "../../context/RenderEndpointContext.js";
+import { OutlineTree as A, GLOBAL_STYLES_ID as B } from "./OutlineTree.js";
+import { EditorCanvas as F } from "./EditorCanvas.js";
+import { BlockInspector as $ } from "./BlockInspector.js";
+import { GlobalStylesPanel as z } from "./GlobalStylesPanel.js";
+import { FloatingPanel as I } from "../ui/floating-panel.js";
+import { createEmptyDocument as b, parseMjml as G, serializeMjml as H } from "../../lib/mjml/parser.js";
+function _(n) {
   if (!n || n.trim() === "")
-    return I();
+    return b();
   try {
-    return z(n);
+    return G(n);
   } catch (o) {
-    return console.error("Failed to parse MJML:", o), I();
+    return console.error("Failed to parse MJML:", o), b();
   }
 }
-function _({
+function q({
   className: n,
   children: o
 }) {
-  const { resolvedTheme: l } = C();
+  const { resolvedTheme: i } = C();
   return /* @__PURE__ */ e(
     "div",
     {
-      className: `mjml-editor ${l} relative h-full w-full overflow-hidden bg-background text-foreground antialiased ${n || ""}`,
+      className: `mjml-editor ${i} relative h-full w-full overflow-hidden bg-background text-foreground antialiased ${n || ""}`,
       children: o
     }
   );
 }
-function q({
+function J({
   onChange: n,
   showThemeToggle: o = !0,
-  defaultLeftPanelOpen: l = !0,
-  defaultRightPanelOpen: E = !1
+  defaultLeftPanelOpen: i = !0,
+  defaultRightPanelOpen: m = !1
 }) {
-  const { state: r, undo: m, redo: f, canUndo: u, canRedo: p, deleteBlock: h, selectBlock: g } = j(), [c, v] = a(l), [d, i] = a(E), [k, b] = a("edit"), y = M(n);
+  const { state: r, undo: f, redo: u, canUndo: p, canRedo: h, deleteBlock: g, selectBlock: v } = j(), [d, k] = a(i), [c, l] = a(m), [T, y] = a("edit"), P = M(n);
   return s(() => {
-    y.current = n;
+    P.current = n;
   }, [n]), s(() => {
-    r.selectedBlockId && i(!0);
+    r.selectedBlockId && l(!0);
   }, [r.selectedBlockId]), s(() => {
-    const T = G(r.document);
-    y.current(T);
+    const E = H(r.document);
+    P.current(E);
   }, [r.document]), s(() => {
-    const T = (t) => {
+    const E = (t) => {
       if (!(t.target instanceof HTMLInputElement || t.target instanceof HTMLTextAreaElement || t.target?.isContentEditable)) {
         if ((t.metaKey || t.ctrlKey) && t.key === "z") {
-          t.preventDefault(), t.shiftKey ? p && f() : u && m();
+          t.preventDefault(), t.shiftKey ? h && u() : p && f();
           return;
         }
-        if ((t.key === "Delete" || t.key === "Backspace") && r.selectedBlockId && r.selectedBlockId !== w) {
-          t.preventDefault(), h(r.selectedBlockId);
+        if ((t.key === "Delete" || t.key === "Backspace") && r.selectedBlockId && r.selectedBlockId !== B) {
+          t.preventDefault(), g(r.selectedBlockId);
           return;
         }
         if (t.key === "Escape" && r.selectedBlockId) {
-          t.preventDefault(), g(null);
+          t.preventDefault(), v(null);
           return;
         }
       }
     };
-    return window.addEventListener("keydown", T), () => window.removeEventListener("keydown", T);
+    return window.addEventListener("keydown", E), () => window.removeEventListener("keydown", E);
   }, [
-    m,
     f,
     u,
     p,
     h,
     g,
+    v,
     r.selectedBlockId
-  ]), /* @__PURE__ */ P("div", { className: "relative h-full overflow-hidden", children: [
+  ]), /* @__PURE__ */ w("div", { className: "relative h-full overflow-hidden", children: [
     /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-canvas", children: /* @__PURE__ */ e(
-      A,
+      F,
       {
-        activeTab: k,
-        onTabChange: b,
-        leftPanelOpen: c,
-        rightPanelOpen: d,
+        activeTab: T,
+        onTabChange: y,
+        leftPanelOpen: d,
+        rightPanelOpen: c,
         showThemeToggle: o
       }
     ) }),
-    k === "edit" && /* @__PURE__ */ P(L, { children: [
+    T === "edit" && /* @__PURE__ */ w(L, { children: [
       /* @__PURE__ */ e(
-        B,
+        I,
         {
           side: "left",
-          isOpen: c,
-          onToggle: () => v(!c),
+          isOpen: d,
+          onToggle: () => k(!d),
           width: 256,
-          children: /* @__PURE__ */ e(R, { onTogglePanel: () => v(!1) })
+          children: /* @__PURE__ */ e(A, { onTogglePanel: () => k(!1) })
         }
       ),
       /* @__PURE__ */ e(
-        B,
+        I,
         {
           side: "right",
-          isOpen: d,
-          onToggle: () => i(!d),
+          isOpen: c,
+          onToggle: () => l(!c),
           width: 300,
-          children: r.selectedBlockId === w ? /* @__PURE__ */ e(
-            $,
+          children: r.selectedBlockId === B ? /* @__PURE__ */ e(
+            z,
             {
-              onTogglePanel: () => i(!1)
+              onTogglePanel: () => l(!1)
             }
-          ) : /* @__PURE__ */ e(F, { onTogglePanel: () => i(!1) })
+          ) : /* @__PURE__ */ e($, { onTogglePanel: () => l(!1) })
         }
       )
     ] })
   ] });
 }
-function le({
+function de({
   value: n,
   onChange: o,
-  className: l,
-  defaultTheme: E = "system",
-  liquidSchema: r,
-  extensions: m,
-  applyThemeToDocument: f = !0,
-  showThemeToggle: u = !0,
-  defaultLeftPanelOpen: p = !0,
-  defaultRightPanelOpen: h = !1,
-  nonce: g
+  renderEndpoint: i,
+  className: m,
+  defaultTheme: r = "system",
+  liquidSchema: f,
+  extensions: u,
+  applyThemeToDocument: p = !0,
+  showThemeToggle: h = !0,
+  defaultLeftPanelOpen: g = !0,
+  defaultRightPanelOpen: v = !1,
+  nonce: d
 }) {
-  const [c, v] = a(!1);
+  const [k, c] = a(!1);
   s(() => {
-    v(!0);
+    c(!0);
   }, []);
-  const [d] = a(() => H(n)), i = D(
-    (k) => {
-      o(k);
+  const [l] = a(() => _(n)), T = D(
+    (y) => {
+      o(y);
     },
     [o]
   );
-  return c ? /* @__PURE__ */ e(
+  return k ? /* @__PURE__ */ e(
     x,
     {
-      defaultTheme: E,
-      applyToDocument: f,
-      children: /* @__PURE__ */ e(N, { nonce: g, children: /* @__PURE__ */ e(K, { extensions: m, children: /* @__PURE__ */ e(S, { schema: r, children: /* @__PURE__ */ e(_, { className: l, children: /* @__PURE__ */ e(O, { initialDocument: d, children: /* @__PURE__ */ e(
-        q,
+      defaultTheme: r,
+      applyToDocument: p,
+      children: /* @__PURE__ */ e(N, { renderEndpoint: i, children: /* @__PURE__ */ e(K, { nonce: d, children: /* @__PURE__ */ e(S, { extensions: u, children: /* @__PURE__ */ e(R, { schema: f, children: /* @__PURE__ */ e(q, { className: m, children: /* @__PURE__ */ e(O, { initialDocument: l, children: /* @__PURE__ */ e(
+        J,
         {
-          onChange: i,
-          showThemeToggle: u,
-          defaultLeftPanelOpen: p,
-          defaultRightPanelOpen: h
+          onChange: T,
+          showThemeToggle: h,
+          defaultLeftPanelOpen: g,
+          defaultRightPanelOpen: v
         }
-      ) }) }) }) }) })
+      ) }) }) }) }) }) })
     }
-  ) : /* @__PURE__ */ e("div", { className: `h-full w-full bg-background ${l || ""}` });
+  ) : /* @__PURE__ */ e("div", { className: `h-full w-full bg-background ${m || ""}` });
 }
 export {
-  le as MjmlEditor
+  de as MjmlEditor
 };

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,2CAqFpB"}
+{"version":3,"file":"SourcePreview.d.ts","sourceRoot":"","sources":["../../../src/components/editor/SourcePreview.tsx"],"names":[],"mappings":"AAIA,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,2CAsFpB"}

package/dist/components/editor/SourcePreview.js

@@ -1,38 +1,39 @@
 import { jsxs as r, jsx as n } from "react/jsx-runtime";
-import { useRef as x, useState as b, useEffect as i } from "react";
-import { renderMjmlString as h } from "../../lib/mjml/renderer.js";
-function w({
+import { useRef as h, useState as f, useEffect as i } from "react";
+import { renderMjmlString as g } from "../../lib/mjml/renderer.js";
+import { useRenderEndpoint as p } from "../../context/RenderEndpointContext.js";
+function R({
   mjmlSource: s,
-  debounceMs: m = 300
+  debounceMs: d = 300
 }) {
-  const a = x(null), [l, f] = b(s), [u, d] = b({
+  const m = p(), o = h(null), [a, u] = f(s), [x, c] = f({
     html: "",
     errors: []
   });
   i(() => {
     const e = setTimeout(() => {
-      f(s);
-    }, m);
+      u(s);
+    }, d);
     return () => clearTimeout(e);
-  }, [s, m]), i(() => {
-    if (!l.trim()) {
-      d({ html: "", errors: [] });
+  }, [s, d]), i(() => {
+    if (!a.trim()) {
+      c({ html: "", errors: [] });
       return;
     }
     let e = !1;
-    return h(l).then((o) => {
-      e || d(o);
+    return g(a, m).then((l) => {
+      e || c(l);
     }), () => {
       e = !0;
     };
-  }, [l]);
-  const { html: c, errors: t } = u;
+  }, [a, m]);
+  const { html: b, errors: t } = x;
   return i(() => {
-    if (a.current) {
-      const e = a.current.contentDocument;
-      e && (e.open(), e.write(c), e.close());
+    if (o.current) {
+      const e = o.current.contentDocument;
+      e && (e.open(), e.write(b), e.close());
     }
-  }, [c]), /* @__PURE__ */ r("div", { className: "flex flex-col h-full", children: [
+  }, [b]), /* @__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 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/30 px-2 py-0.5 rounded-md", children: [
@@ -44,7 +45,7 @@ function w({
     /* @__PURE__ */ n("div", { className: "flex-1 overflow-auto bg-muted", children: /* @__PURE__ */ n(
       "iframe",
       {
-        ref: a,
+        ref: o,
         title: "Source Preview",
         className: "w-full h-full border-0 bg-white",
         sandbox: "allow-same-origin"
@@ -52,7 +53,7 @@ function w({
     ) }),
     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(
+      /* @__PURE__ */ n("div", { className: "space-y-1", children: t.map((e, l) => /* @__PURE__ */ r(
         "div",
         {
           className: "text-xs text-amber-600 dark:text-amber-400",
@@ -66,11 +67,11 @@ function w({
             e.message
           ]
         },
-        o
+        l
       )) })
     ] })
   ] });
 }
 export {
-  w as SourcePreview
+  R as SourcePreview
 };

package/dist/context/RenderEndpointContext.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+interface RenderEndpointProviderProps {
+    children: ReactNode;
+    renderEndpoint: string;
+}
+export declare function RenderEndpointProvider({ children, renderEndpoint, }: RenderEndpointProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useRenderEndpoint(): string;
+export {};
+//# sourceMappingURL=RenderEndpointContext.d.ts.map

package/dist/context/RenderEndpointContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderEndpointContext.d.ts","sourceRoot":"","sources":["../../src/context/RenderEndpointContext.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlE,UAAU,2BAA2B;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,cAAc,GACf,EAAE,2BAA2B,2CAM7B;AAED,wBAAgB,iBAAiB,IAAI,MAAM,CAQ1C"}

package/dist/context/RenderEndpointContext.js

@@ -0,0 +1,21 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useContext as t, createContext as d } from "react";
+const e = d(void 0);
+function u({
+  children: n,
+  renderEndpoint: o
+}) {
+  return /* @__PURE__ */ r(e.Provider, { value: o, children: n });
+}
+function s() {
+  const n = t(e);
+  if (!n)
+    throw new Error(
+      "useRenderEndpoint must be used within MjmlEditor (no renderEndpoint provided)"
+    );
+  return n;
+}
+export {
+  u as RenderEndpointProvider,
+  s as useRenderEndpoint
+};

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { MjmlEditor } from './components/editor/MjmlEditor';
 export { ThemeProvider, useTheme } from './context/ThemeContext';
 export { ThemeToggle } from './components/ui/theme-toggle';
 export { useNonce } from './context/NonceContext';
+export { useRenderEndpoint } from './context/RenderEndpointContext';
 export type { MjmlNode, MjmlTagName, ContentBlockType, EditorState, EditorAction, EditorExtensions, } from './types/mjml';
 export type { LiquidSchema, LiquidSchemaItem } from './types/liquid';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAG5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAGlD,YAAY,EACV,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,YAAY,EACZ,gBAAgB,GACjB,MAAM,cAAc,CAAC;AAEtB,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAG5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAGlD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAGpE,YAAY,EACV,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,YAAY,EACZ,gBAAgB,GACjB,MAAM,cAAc,CAAC;AAEtB,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/index.js

@@ -1,11 +1,13 @@
 import { MjmlEditor as r } from "./components/editor/MjmlEditor.js";
-import { ThemeProvider as t, useTheme as f } from "./context/ThemeContext.js";
+import { ThemeProvider as t, useTheme as p } from "./context/ThemeContext.js";
 import { ThemeToggle as x } from "./components/ui/theme-toggle.js";
-import { useNonce as h } from "./context/NonceContext.js";
+import { useNonce as n } from "./context/NonceContext.js";
+import { useRenderEndpoint as h } from "./context/RenderEndpointContext.js";
 export {
   r as MjmlEditor,
   t as ThemeProvider,
   x as ThemeToggle,
-  h as useNonce,
-  f as useTheme
+  n as useNonce,
+  h as useRenderEndpoint,
+  p as useTheme
 };

package/dist/lib/mjml/renderer.d.ts

@@ -8,19 +8,19 @@ export interface RenderResult {
     }[];
 }
 /**
- * Render MJML JSON to HTML.
- * Custom attributes (like sc-if) are stripped to prevent mjml-browser warnings.
+ * Render MJML JSON to HTML via the render endpoint.
+ * Custom attributes (like sc-if) are stripped to prevent warnings.
  */
-export declare function renderMjml(document: MjmlNode): Promise<RenderResult>;
+export declare function renderMjml(document: MjmlNode, renderEndpoint: string): Promise<RenderResult>;
 /**
- * Render MJML string to HTML.
- * Custom attributes (like sc-if) are stripped to prevent mjml-browser warnings.
+ * Render MJML string to HTML via the render endpoint.
+ * Custom attributes (like sc-if) are stripped to prevent warnings.
  */
-export declare function renderMjmlString(mjmlString: string): Promise<RenderResult>;
+export declare function renderMjmlString(mjmlString: string, renderEndpoint: string): Promise<RenderResult>;
 /**
  * Render MJML JSON to HTML with block IDs preserved as CSS classes.
  * This allows clicking elements in the preview to identify the source block.
- * Custom attributes (like sc-if) are stripped to prevent mjml-browser warnings.
+ * Custom attributes (like sc-if) are stripped to prevent warnings.
  */
-export declare function renderMjmlInteractive(document: MjmlNode): Promise<RenderResult>;
+export declare function renderMjmlInteractive(document: MjmlNode, renderEndpoint: string): Promise<RenderResult>;
 //# sourceMappingURL=renderer.d.ts.map

package/dist/lib/mjml/renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../../src/lib/mjml/renderer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC9D;AAqHD;;;GAGG;AACH,wBAAsB,UAAU,CAAC,QAAQ,EAAE,QAAQ,GAAG,OAAO,CAAC,YAAY,CAAC,CAqB1E;AAkBD;;;GAGG;AACH,wBAAsB,gBAAgB,CACpC,UAAU,EAAE,MAAM,GACjB,OAAO,CAAC,YAAY,CAAC,CAoBvB;AAED;;;;GAIG;AACH,wBAAsB,qBAAqB,CACzC,QAAQ,EAAE,QAAQ,GACjB,OAAO,CAAC,YAAY,CAAC,CAuBvB"}
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../../src/lib/mjml/renderer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC9D;AAuHD;;;GAGG;AACH,wBAAsB,UAAU,CAC9B,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,MAAM,GACrB,OAAO,CAAC,YAAY,CAAC,CAYvB;AAkBD;;;GAGG;AACH,wBAAsB,gBAAgB,CACpC,UAAU,EAAE,MAAM,EAClB,cAAc,EAAE,MAAM,GACrB,OAAO,CAAC,YAAY,CAAC,CAWvB;AAED;;;;GAIG;AACH,wBAAsB,qBAAqB,CACzC,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,MAAM,GACrB,OAAO,CAAC,YAAY,CAAC,CAavB"}

package/dist/lib/mjml/renderer.js

@@ -1,73 +1,71 @@
 import "uuid";
-const u = ["sc-if"];
-function p(t) {
-  const r = Object.fromEntries(
+const p = ["sc-if"];
+function u(t) {
+  const e = Object.fromEntries(
     Object.entries(t.attributes || {}).filter(
-      ([e]) => !u.includes(e)
+      ([r]) => !p.includes(r)
     )
   );
   return {
     ...t,
-    attributes: r,
-    children: t.children?.map(p)
+    attributes: e,
+    children: t.children?.map(u)
   };
 }
-let o = null;
-async function g() {
-  return o || (o = (await import("mjml-browser")).default), o;
+async function m(t, e) {
+  const r = await fetch(t, {
+    method: "POST",
+    headers: { "Content-Type": "text/plain" },
+    body: e
+  });
+  if (!r.ok)
+    throw new Error(`Render endpoint returned ${r.status}`);
+  return r.json();
 }
-function m(t) {
+function l(t) {
   if (!t._id || !t.tagName.startsWith("mj-"))
     return {
       ...t,
-      children: t.children?.map(m)
+      children: t.children?.map(l)
     };
-  const r = t.attributes["mj-class"] || "", e = `block-${t._id}`, s = r ? `${r} ${e}` : e;
+  const e = t.attributes["mj-class"] || "", r = `block-${t._id}`, n = e ? `${e} ${r}` : r;
   return {
     ...t,
-    attributes: { ...t.attributes, "mj-class": s },
-    children: t.children?.map(m)
+    attributes: { ...t.attributes, "mj-class": n },
+    children: t.children?.map(l)
   };
 }
-function d(t) {
-  return h(t);
-}
-function h(t, r = 0) {
-  const e = "  ".repeat(r), s = t.tagName, l = Object.entries(t.attributes || {}).filter(
-    ([c, i]) => c !== "_id" && i !== "" && i !== void 0
-  ).map(([c, i]) => `${c}="${f(i)}"`).join(" "), n = l ? `<${s} ${l}>` : `<${s}>`, a = `</${s}>`;
+function g(t, e = 0) {
+  const r = "  ".repeat(e), n = t.tagName, i = Object.entries(t.attributes || {}).filter(
+    ([c, s]) => c !== "_id" && s !== "" && s !== void 0
+  ).map(([c, s]) => `${c}="${d(s)}"`).join(" "), a = i ? `<${n} ${i}>` : `<${n}>`, o = `</${n}>`;
   if (t.content !== void 0)
-    return `${e}${n}${t.content}${a}`;
+    return `${r}${a}${t.content}${o}`;
   if (t.children && t.children.length > 0) {
-    const c = t.children.map((i) => h(i, r + 1)).join(`
+    const c = t.children.map((s) => g(s, e + 1)).join(`
 `);
-    return `${e}${n}
+    return `${r}${a}
 ${c}
-${e}${a}`;
+${r}${o}`;
   }
-  return `${e}${n}${a}`;
+  return `${r}${a}${o}`;
 }
-function f(t) {
+function d(t) {
   return t.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function $(t) {
-  for (const r of u) {
-    const e = new RegExp(`\\s+${r}="[^"]*"`, "g");
-    t = t.replace(e, "");
-    const s = new RegExp(`\\s+${r}='[^']*'`, "g");
-    t = t.replace(s, "");
+function h(t) {
+  for (const e of p) {
+    const r = new RegExp(`\\s+${e}="[^"]*"`, "g");
+    t = t.replace(r, "");
+    const n = new RegExp(`\\s+${e}='[^']*'`, "g");
+    t = t.replace(n, "");
   }
   return t;
 }
-async function b(t) {
+async function f(t, e) {
   try {
-    const r = await g(), e = $(t), s = r(e, {
-      validationLevel: "soft"
-    });
-    return {
-      html: s.html,
-      errors: s.errors || []
-    };
+    const r = h(t);
+    return await m(e, r);
   } catch (r) {
     return console.error("MJML render error:", r), {
       html: '<p style="color: #dc2626; padding: 20px; background: white; margin: 0;">Error rendering email preview</p>',
@@ -75,15 +73,10 @@ async function b(t) {
     };
   }
 }
-async function M(t) {
+async function b(t, e) {
   try {
-    const r = await g(), e = p(t), s = m(e), l = d(s), n = r(l, {
-      validationLevel: "soft"
-    });
-    return {
-      html: n.html,
-      errors: n.errors || []
-    };
+    const r = u(t), n = l(r), i = g(n);
+    return await m(e, i);
   } catch (r) {
     return console.error("MJML render error:", r), {
       html: '<p style="color: #dc2626; padding: 20px; background: white; margin: 0;">Error rendering email preview</p>',
@@ -92,6 +85,6 @@ async function M(t) {
   }
 }
 export {
-  M as renderMjmlInteractive,
-  b as renderMjmlString
+  b as renderMjmlInteractive,
+  f as renderMjmlString
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@savvycal/mjml-editor",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -62,7 +62,6 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.562.0",
-    "mjml-browser": "^4.18.0",
     "react-arborist": "^3.4.3",
     "tailwind-merge": "^3.4.0",
     "uuid": "^13.0.0"