@savvycal/mjml-editor 0.7.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":"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"}
+{"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,37 +1,39 @@
-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;
-function S({
-  showHeader: p = !0,
-  previewMode: g = "desktop"
+import { jsxs as r, jsx as l } from "react/jsx-runtime";
+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: r, selectBlock: d } = y(), o = w(null), [m, x] = h(r.document), [k, v] = h({
+  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(() => {
-      x(r.document);
+      v(n.document);
     }, 300);
     return () => clearTimeout(e);
-  }, [r.document]), a(() => {
+  }, [n.document]), a(() => {
     let e = !1;
-    return C(m).then((t) => {
-      e || v(t);
+    return D(f, u).then((t) => {
+      e || w(t);
     }), () => {
       e = !0;
     };
-  }, [m]);
-  const { html: u, errors: l } = k, i = E(
+  }, [f, u]);
+  const { html: b, errors: s } = E, d = C(
     (e) => {
-      e.data?.type === "BLOCK_SELECTED" && d(e.data.blockId);
+      e.data?.type === "BLOCK_SELECTED" && m(e.data.blockId);
     },
-    [d]
+    [m]
   );
-  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 = `
+  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; }` : "", p = `
     (function() {
       document.addEventListener('click', function(e) {
         e.preventDefault();
@@ -64,11 +66,11 @@ function S({
     if (o.current) {
       const e = o.current.contentDocument;
       if (e) {
-        e.open(), e.write(u), e.close();
+        e.open(), e.write(b), e.close();
         const t = e.createElement("script");
-        t.textContent = b, e.body.appendChild(t);
-        const f = e.createElement("style");
-        f.textContent = `
+        i && (t.nonce = i), t.textContent = p, e.body.appendChild(t);
+        const h = e.createElement("style");
+        h.textContent = `
           [class*="block-"] {
             cursor: pointer;
             transition: outline 0.15s ease;
@@ -78,10 +80,10 @@ function S({
             outline-offset: -1px;
           }
           ${c}
-        `, e.head.appendChild(f);
+        `, e.head.appendChild(h);
       }
     }
-  }, [u, c, b]), a(() => {
+  }, [b, c, p, i]), a(() => {
     if (o.current) {
       const e = o.current.contentDocument;
       if (e) {
@@ -89,36 +91,36 @@ function S({
         t || (t = e.createElement("style"), t.id = "selection-highlight", e.head.appendChild(t)), t.textContent = c;
       }
     }
-  }, [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__ */ 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,
+  }, [n.selectedBlockId, c]), /* @__PURE__ */ r("div", { className: "flex flex-col h-full", 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,
         " warning",
-        l.length !== 1 ? "s" : ""
+        s.length !== 1 ? "s" : ""
       ] })
     ] }),
-    /* @__PURE__ */ s("div", { className: "flex-1 overflow-auto bg-muted flex justify-center", children: /* @__PURE__ */ s(
+    /* @__PURE__ */ l("div", { className: "flex-1 overflow-auto bg-muted flex justify-center", children: /* @__PURE__ */ l(
       "iframe",
       {
         ref: o,
         title: "Email Preview",
         className: "h-full border-0 bg-white transition-all duration-200",
         style: {
-          width: g === "mobile" ? I : "100%",
+          width: k === "mobile" ? B : "100%",
           maxWidth: "100%"
         },
         sandbox: "allow-same-origin allow-scripts"
       }
     ) }),
-    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(
+    s.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__ */ l("div", { className: "text-xs font-semibold text-amber-700 dark:text-amber-300 mb-2", children: "Warnings" }),
+      /* @__PURE__ */ l("div", { className: "space-y-1", children: s.map((e, t) => /* @__PURE__ */ r(
         "div",
         {
           className: "text-xs text-amber-600 dark:text-amber-400",
           children: [
-            /* @__PURE__ */ n("span", { className: "font-mono", children: [
+            /* @__PURE__ */ r("span", { className: "font-mono", children: [
               "Line ",
               e.line,
               ":"
@@ -133,5 +135,5 @@ function S({
   ] });
 }
 export {
-  S 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;
@@ -48,7 +54,13 @@ interface MjmlEditorProps {
      * @default false
      */
     defaultRightPanelOpen?: boolean;
+    /**
+     * CSP nonce to apply to dynamically injected script tags.
+     * Required when the host application uses a Content Security Policy
+     * with `script-src 'nonce-...'`.
+     */
+    nonce?: string;
 }
-export declare function MjmlEditor({ value, onChange, className, defaultTheme, liquidSchema, extensions, applyThemeToDocument, showThemeToggle, defaultLeftPanelOpen, defaultRightPanelOpen, }: 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":"AAeA,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;CACjC;AAoKD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,YAAuB,EACvB,YAAY,EACZ,UAAU,EACV,oBAA2B,EAC3B,eAAsB,EACtB,oBAA2B,EAC3B,qBAA6B,GAC9B,EAAE,eAAe,2CA8CjB"}
+{"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,97 +1,99 @@
 import { jsx as e, jsxs as w, Fragment as L } from "react/jsx-runtime";
-import { useState as a, useEffect as d, useCallback as D, useRef as M } from "react";
+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 { OutlineTree as R, GLOBAL_STYLES_ID as B } from "./OutlineTree.js";
-import { EditorCanvas as A } from "./EditorCanvas.js";
-import { BlockInspector as F } from "./BlockInspector.js";
-import { GlobalStylesPanel as N } from "./GlobalStylesPanel.js";
+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 P, parseMjml as $, serializeMjml as z } from "../../lib/mjml/parser.js";
-function G(n) {
+import { createEmptyDocument as b, parseMjml as G, serializeMjml as H } from "../../lib/mjml/parser.js";
+function _(n) {
   if (!n || n.trim() === "")
-    return P();
+    return b();
   try {
-    return $(n);
+    return G(n);
   } catch (o) {
-    return console.error("Failed to parse MJML:", o), P();
+    return console.error("Failed to parse MJML:", o), b();
   }
 }
-function H({
+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 _({
+function J({
   onChange: n,
   showThemeToggle: o = !0,
-  defaultLeftPanelOpen: l = !0,
-  defaultRightPanelOpen: T = !1
+  defaultLeftPanelOpen: i = !0,
+  defaultRightPanelOpen: m = !1
 }) {
-  const { state: r, undo: u, redo: f, canUndo: m, canRedo: p, deleteBlock: h, selectBlock: g } = j(), [s, k] = a(l), [c, i] = a(T), [E, b] = a("edit"), y = M(n);
-  return d(() => {
-    y.current = n;
-  }, [n]), d(() => {
-    r.selectedBlockId && i(!0);
-  }, [r.selectedBlockId]), d(() => {
-    const v = z(r.document);
-    y.current(v);
-  }, [r.document]), d(() => {
-    const v = (t) => {
+  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(() => {
+    P.current = n;
+  }, [n]), s(() => {
+    r.selectedBlockId && l(!0);
+  }, [r.selectedBlockId]), s(() => {
+    const E = H(r.document);
+    P.current(E);
+  }, [r.document]), s(() => {
+    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() : m && u();
+          t.preventDefault(), t.shiftKey ? h && u() : p && f();
           return;
         }
         if ((t.key === "Delete" || t.key === "Backspace") && r.selectedBlockId && r.selectedBlockId !== B) {
-          t.preventDefault(), h(r.selectedBlockId);
+          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", v), () => window.removeEventListener("keydown", v);
+    return window.addEventListener("keydown", E), () => window.removeEventListener("keydown", E);
   }, [
-    u,
     f,
-    m,
+    u,
     p,
     h,
     g,
+    v,
     r.selectedBlockId
   ]), /* @__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: E,
-        onTabChange: b,
-        leftPanelOpen: s,
+        activeTab: T,
+        onTabChange: y,
+        leftPanelOpen: d,
         rightPanelOpen: c,
         showThemeToggle: o
       }
     ) }),
-    E === "edit" && /* @__PURE__ */ w(L, { children: [
+    T === "edit" && /* @__PURE__ */ w(L, { children: [
       /* @__PURE__ */ e(
         I,
         {
           side: "left",
-          isOpen: s,
-          onToggle: () => k(!s),
+          isOpen: d,
+          onToggle: () => k(!d),
           width: 256,
-          children: /* @__PURE__ */ e(R, { onTogglePanel: () => k(!1) })
+          children: /* @__PURE__ */ e(A, { onTogglePanel: () => k(!1) })
         }
       ),
       /* @__PURE__ */ e(
@@ -99,58 +101,60 @@ function _({
         {
           side: "right",
           isOpen: c,
-          onToggle: () => i(!c),
+          onToggle: () => l(!c),
           width: 300,
           children: r.selectedBlockId === B ? /* @__PURE__ */ e(
-            N,
+            z,
             {
-              onTogglePanel: () => i(!1)
+              onTogglePanel: () => l(!1)
             }
-          ) : /* @__PURE__ */ e(F, { onTogglePanel: () => i(!1) })
+          ) : /* @__PURE__ */ e($, { onTogglePanel: () => l(!1) })
         }
       )
     ] })
   ] });
 }
-function ne({
+function de({
   value: n,
   onChange: o,
-  className: l,
-  defaultTheme: T = "system",
-  liquidSchema: r,
+  renderEndpoint: i,
+  className: m,
+  defaultTheme: r = "system",
+  liquidSchema: f,
   extensions: u,
-  applyThemeToDocument: f = !0,
-  showThemeToggle: m = !0,
-  defaultLeftPanelOpen: p = !0,
-  defaultRightPanelOpen: h = !1
+  applyThemeToDocument: p = !0,
+  showThemeToggle: h = !0,
+  defaultLeftPanelOpen: g = !0,
+  defaultRightPanelOpen: v = !1,
+  nonce: d
 }) {
-  const [g, s] = a(!1);
-  d(() => {
-    s(!0);
+  const [k, c] = a(!1);
+  s(() => {
+    c(!0);
   }, []);
-  const [k] = a(() => G(n)), c = D(
-    (i) => {
-      o(i);
+  const [l] = a(() => _(n)), T = D(
+    (y) => {
+      o(y);
     },
     [o]
   );
-  return g ? /* @__PURE__ */ e(
+  return k ? /* @__PURE__ */ e(
     x,
     {
-      defaultTheme: T,
-      applyToDocument: f,
-      children: /* @__PURE__ */ e(K, { extensions: u, children: /* @__PURE__ */ e(S, { schema: r, children: /* @__PURE__ */ e(H, { className: l, children: /* @__PURE__ */ e(O, { initialDocument: k, children: /* @__PURE__ */ e(
-        _,
+      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: c,
-          showThemeToggle: m,
-          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 {
-  ne 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/NonceContext.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+interface NonceProviderProps {
+    children: ReactNode;
+    nonce?: string;
+}
+export declare function NonceProvider({ children, nonce }: NonceProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useNonce(): string | undefined;
+export {};
+//# sourceMappingURL=NonceContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NonceContext.d.ts","sourceRoot":"","sources":["../../src/context/NonceContext.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlE,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,kBAAkB,2CAIpE;AAED,wBAAgB,QAAQ,uBAEvB"}

package/dist/context/NonceContext.js

@@ -0,0 +1,13 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useContext as n, createContext as c } from "react";
+const o = c(void 0);
+function x({ children: e, nonce: t }) {
+  return /* @__PURE__ */ r(o.Provider, { value: t, children: e });
+}
+function f() {
+  return n(o);
+}
+export {
+  x as NonceProvider,
+  f as useNonce
+};

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

@@ -1,6 +1,8 @@
 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,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,9 +1,13 @@
 import { MjmlEditor as r } from "./components/editor/MjmlEditor.js";
-import { ThemeProvider as t, useTheme as T } from "./context/ThemeContext.js";
-import { ThemeToggle as h } from "./components/ui/theme-toggle.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 n } from "./context/NonceContext.js";
+import { useRenderEndpoint as h } from "./context/RenderEndpointContext.js";
 export {
   r as MjmlEditor,
   t as ThemeProvider,
-  h as ThemeToggle,
-  T as useTheme
+  x as ThemeToggle,
+  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.7.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"