@savvycal/mjml-editor 0.6.0 → 0.8.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":"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"}

package/dist/components/editor/InteractivePreview.js

@@ -1,37 +1,38 @@
-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 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"
 }) {
-  const { state: r, selectBlock: d } = y(), o = w(null), [m, x] = h(r.document), [k, v] = h({
+  const { state: n, selectBlock: m } = C(), i = I(), o = E(null), [u, k] = p(n.document), [v, w] = p({
     html: "",
     errors: []
   });
   a(() => {
     const e = setTimeout(() => {
-      x(r.document);
+      k(n.document);
     }, 300);
     return () => clearTimeout(e);
-  }, [r.document]), a(() => {
+  }, [n.document]), a(() => {
     let e = !1;
-    return C(m).then((t) => {
-      e || v(t);
+    return N(u).then((t) => {
+      e || w(t);
     }), () => {
       e = !0;
     };
-  }, [m]);
-  const { html: u, errors: l } = k, i = E(
+  }, [u]);
+  const { html: f, errors: s } = v, d = y(
     (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; }` : "", b = `
     (function() {
       document.addEventListener('click', function(e) {
         e.preventDefault();
@@ -64,11 +65,11 @@ function S({
     if (o.current) {
       const e = o.current.contentDocument;
       if (e) {
-        e.open(), e.write(u), e.close();
+        e.open(), e.write(f), 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 = b, e.body.appendChild(t);
+        const h = e.createElement("style");
+        h.textContent = `
           [class*="block-"] {
             cursor: pointer;
             transition: outline 0.15s ease;
@@ -78,10 +79,10 @@ function S({
             outline-offset: -1px;
           }
           ${c}
-        `, e.head.appendChild(f);
+        `, e.head.appendChild(h);
       }
     }
-  }, [u, c, b]), a(() => {
+  }, [f, c, b, i]), a(() => {
     if (o.current) {
       const e = o.current.contentDocument;
       if (e) {
@@ -89,36 +90,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: [
+    g && /* @__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: x === "mobile" ? L : "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 +134,5 @@ function S({
   ] });
 }
 export {
-  S as InteractivePreview
+  R as InteractivePreview
 };

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

@@ -48,7 +48,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, 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":"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"}

package/dist/components/editor/MjmlEditor.js

@@ -1,25 +1,26 @@
-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 { jsx as e, jsxs as P, 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 { OutlineTree as R, GLOBAL_STYLES_ID as B } from "./OutlineTree.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 N } 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 { 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) {
   if (!n || n.trim() === "")
-    return P();
+    return I();
   try {
-    return $(n);
+    return z(n);
   } catch (o) {
-    return console.error("Failed to parse MJML:", o), P();
+    return console.error("Failed to parse MJML:", o), I();
   }
 }
-function H({
+function _({
   className: n,
   children: o
 }) {
@@ -32,28 +33,28 @@ function H({
     }
   );
 }
-function _({
+function q({
   onChange: n,
   showThemeToggle: o = !0,
   defaultLeftPanelOpen: l = !0,
-  defaultRightPanelOpen: T = !1
+  defaultRightPanelOpen: E = !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(() => {
+  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);
+  return s(() => {
     y.current = n;
-  }, [n]), d(() => {
+  }, [n]), s(() => {
     r.selectedBlockId && i(!0);
-  }, [r.selectedBlockId]), d(() => {
-    const v = z(r.document);
-    y.current(v);
-  }, [r.document]), d(() => {
-    const v = (t) => {
+  }, [r.selectedBlockId]), s(() => {
+    const T = G(r.document);
+    y.current(T);
+  }, [r.document]), s(() => {
+    const T = (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 ? p && f() : u && m();
           return;
         }
-        if ((t.key === "Delete" || t.key === "Backspace") && r.selectedBlockId && r.selectedBlockId !== B) {
+        if ((t.key === "Delete" || t.key === "Backspace") && r.selectedBlockId && r.selectedBlockId !== w) {
           t.preventDefault(), h(r.selectedBlockId);
           return;
         }
@@ -63,46 +64,46 @@ function _({
         }
       }
     };
-    return window.addEventListener("keydown", v), () => window.removeEventListener("keydown", v);
+    return window.addEventListener("keydown", T), () => window.removeEventListener("keydown", T);
   }, [
-    u,
-    f,
     m,
+    f,
+    u,
     p,
     h,
     g,
     r.selectedBlockId
-  ]), /* @__PURE__ */ w("div", { className: "relative h-full overflow-hidden", children: [
+  ]), /* @__PURE__ */ P("div", { className: "relative h-full overflow-hidden", children: [
     /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-canvas", children: /* @__PURE__ */ e(
       A,
       {
-        activeTab: E,
+        activeTab: k,
         onTabChange: b,
-        leftPanelOpen: s,
-        rightPanelOpen: c,
+        leftPanelOpen: c,
+        rightPanelOpen: d,
         showThemeToggle: o
       }
     ) }),
-    E === "edit" && /* @__PURE__ */ w(L, { children: [
+    k === "edit" && /* @__PURE__ */ P(L, { children: [
       /* @__PURE__ */ e(
-        I,
+        B,
         {
           side: "left",
-          isOpen: s,
-          onToggle: () => k(!s),
+          isOpen: c,
+          onToggle: () => v(!c),
           width: 256,
-          children: /* @__PURE__ */ e(R, { onTogglePanel: () => k(!1) })
+          children: /* @__PURE__ */ e(R, { onTogglePanel: () => v(!1) })
         }
       ),
       /* @__PURE__ */ e(
-        I,
+        B,
         {
           side: "right",
-          isOpen: c,
-          onToggle: () => i(!c),
+          isOpen: d,
+          onToggle: () => i(!d),
           width: 300,
-          children: r.selectedBlockId === B ? /* @__PURE__ */ e(
-            N,
+          children: r.selectedBlockId === w ? /* @__PURE__ */ e(
+            $,
             {
               onTogglePanel: () => i(!1)
             }
@@ -112,45 +113,46 @@ function _({
     ] })
   ] });
 }
-function ne({
+function le({
   value: n,
   onChange: o,
   className: l,
-  defaultTheme: T = "system",
+  defaultTheme: E = "system",
   liquidSchema: r,
-  extensions: u,
+  extensions: m,
   applyThemeToDocument: f = !0,
-  showThemeToggle: m = !0,
+  showThemeToggle: u = !0,
   defaultLeftPanelOpen: p = !0,
-  defaultRightPanelOpen: h = !1
+  defaultRightPanelOpen: h = !1,
+  nonce: g
 }) {
-  const [g, s] = a(!1);
-  d(() => {
-    s(!0);
+  const [c, v] = a(!1);
+  s(() => {
+    v(!0);
   }, []);
-  const [k] = a(() => G(n)), c = D(
-    (i) => {
-      o(i);
+  const [d] = a(() => H(n)), i = D(
+    (k) => {
+      o(k);
     },
     [o]
   );
-  return g ? /* @__PURE__ */ e(
+  return c ? /* @__PURE__ */ e(
     x,
     {
-      defaultTheme: T,
+      defaultTheme: E,
       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(
-        _,
+      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,
         {
-          onChange: c,
-          showThemeToggle: m,
+          onChange: i,
+          showThemeToggle: u,
           defaultLeftPanelOpen: p,
           defaultRightPanelOpen: h
         }
-      ) }) }) }) })
+      ) }) }) }) }) })
     }
   ) : /* @__PURE__ */ e("div", { className: `h-full w-full bg-background ${l || ""}` });
 }
 export {
-  ne as MjmlEditor
+  le as MjmlEditor
 };

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

@@ -1 +1 @@
-{"version":3,"file":"SourceEditor.d.ts","sourceRoot":"","sources":["../../../src/components/editor/SourceEditor.tsx"],"names":[],"mappings":"AA2DA,wBAAgB,YAAY,4CA4H3B"}
+{"version":3,"file":"SourceEditor.d.ts","sourceRoot":"","sources":["../../../src/components/editor/SourceEditor.tsx"],"names":[],"mappings":"AA0DA,wBAAgB,YAAY,4CAkH3B"}

package/dist/components/editor/SourceEditor.js

@@ -1,116 +1,111 @@
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import { useState as f, useRef as g, useEffect as p, useCallback as b, useMemo as N } from "react";
-import { AlertTriangle as y } from "lucide-react";
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import { useState as f, useRef as g, useEffect as p, useCallback as v, useMemo as y } from "react";
 import k from "@uiw/react-codemirror";
-import { EditorState as M } from "@codemirror/state";
-import { indentUnit as E, bracketMatching as j, syntaxHighlighting as w, HighlightStyle as C } from "@codemirror/language";
-import { lineNumbers as L, highlightActiveLineGutter as D, highlightActiveLine as W, EditorView as R, keymap as A } from "@codemirror/view";
-import { history as T, indentWithTab as z, defaultKeymap as H, historyKeymap as J } from "@codemirror/commands";
-import { highlightSelectionMatches as K, searchKeymap as U } from "@codemirror/search";
-import { xml as V } from "@codemirror/lang-xml";
-import { tags as r } from "@lezer/highlight";
-import { useEditor as _ } from "../../context/EditorContext.js";
-import { serializeMjml as x, parseMjml as B } from "../../lib/mjml/parser.js";
-import { ResizableSplitPane as I } from "../ui/resizable-split-pane.js";
+import { EditorState as N } from "@codemirror/state";
+import { indentUnit as M, bracketMatching as E, syntaxHighlighting as j, HighlightStyle as C } from "@codemirror/language";
+import { lineNumbers as w, highlightActiveLineGutter as L, highlightActiveLine as D, EditorView as W, keymap as R } from "@codemirror/view";
+import { history as z, indentWithTab as A, defaultKeymap as H, historyKeymap as K } from "@codemirror/commands";
+import { highlightSelectionMatches as T, searchKeymap as U } from "@codemirror/search";
+import { xml as _ } from "@codemirror/lang-xml";
+import { tags as t } from "@lezer/highlight";
+import { useEditor as B } from "../../context/EditorContext.js";
+import { serializeMjml as b, parseMjml as I } from "../../lib/mjml/parser.js";
+import { ResizableSplitPane as J } from "../ui/resizable-split-pane.js";
 import { SourcePreview as O } from "./SourcePreview.js";
-const P = 350, Y = C.define([
+const P = 350, V = C.define([
   {
-    tag: r.tagName,
+    tag: t.tagName,
     color: "var(--cm-tag, oklch(0.74 0.1 158))",
     fontWeight: "600"
   },
   {
-    tag: r.attributeName,
+    tag: t.attributeName,
     color: "var(--cm-attribute-name, oklch(0.76 0.09 80))"
   },
   {
-    tag: [r.attributeValue, r.string],
+    tag: [t.attributeValue, t.string],
     color: "var(--cm-attribute-value, oklch(0.77 0.1 255))"
   },
   {
-    tag: [r.angleBracket, r.bracket],
+    tag: [t.angleBracket, t.bracket],
     color: "var(--cm-punctuation, oklch(0.7 0.02 250))"
   },
-  { tag: r.comment, color: "var(--cm-comment, oklch(0.63 0.01 250))" },
+  { tag: t.comment, color: "var(--cm-comment, oklch(0.63 0.01 250))" },
   {
-    tag: r.invalid,
+    tag: t.invalid,
     color: "var(--cm-invalid, oklch(0.7 0.16 25))",
     textDecoration: "underline"
   }
 ]);
-function le() {
-  const { state: s, setDocument: u } = _(), [a, d] = f(""), [c, i] = f(null), l = g(!1), m = g("");
+function ae() {
+  const { state: s, setDocument: u } = B(), [o, d] = f(""), [a, i] = f(null), c = g(!1), l = g("");
   p(() => {
-    if (l.current) {
-      l.current = !1;
+    if (c.current) {
+      c.current = !1;
       return;
     }
-    const e = x(s.document);
-    m.current = e, d(e), i(null);
+    const e = b(s.document);
+    l.current = e, d(e), i(null);
   }, [s.document]);
-  const h = b(
+  const h = v(
     (e) => {
       try {
-        const o = B(e);
-        if (o.tagName !== "mjml") {
+        const r = I(e);
+        if (r.tagName !== "mjml") {
           i("Invalid MJML: Document must have an <mjml> root element");
           return;
         }
-        m.current = x(o), l.current = !0, u(o), i(null);
-      } catch (o) {
-        i(o instanceof Error ? o.message : "Failed to parse MJML");
+        l.current = b(r), c.current = !0, u(r), i(null);
+      } catch (r) {
+        i(r instanceof Error ? r.message : "Failed to parse MJML");
       }
     },
     [u]
-  ), v = N(
+  ), x = y(
     () => [
+      w(),
       L(),
       D(),
-      W(),
+      z(),
+      N.tabSize.of(2),
+      M.of("  "),
+      E(),
       T(),
-      M.tabSize.of(2),
-      E.of("  "),
-      j(),
-      K(),
-      w(Y),
-      R.lineWrapping,
-      A.of([
-        z,
+      j(V),
+      W.lineWrapping,
+      R.of([
+        A,
         ...H,
-        ...J,
+        ...K,
         ...U
       ]),
-      V()
+      _()
     ],
     []
-  ), S = b((e) => {
+  ), S = v((e) => {
     d(e), i(null);
   }, []);
   return p(() => {
-    if (a === m.current)
+    if (o === l.current)
       return;
     const e = window.setTimeout(() => {
-      h(a);
+      h(o);
     }, P);
     return () => window.clearTimeout(e);
-  }, [a, h]), /* @__PURE__ */ n(
-    I,
+  }, [o, h]), /* @__PURE__ */ m(
+    J,
     {
       defaultLeftWidth: 50,
       minLeftWidth: 30,
       maxLeftWidth: 70,
       children: [
-        /* @__PURE__ */ n("div", { className: "flex flex-col h-full bg-background", children: [
-          /* @__PURE__ */ t("div", { className: "px-4 pt-4", children: /* @__PURE__ */ n("div", { className: "flex items-start gap-3 p-3 rounded-md bg-amber-50 border border-amber-200 text-amber-800", children: [
-            /* @__PURE__ */ t(y, { className: "h-4 w-4 mt-0.5 flex-shrink-0" }),
-            /* @__PURE__ */ t("p", { className: "text-sm", children: "You are editing raw MJML source. Valid changes sync to the visual editor automatically." })
-          ] }) }),
-          /* @__PURE__ */ t("div", { className: "flex-1 min-h-0 p-4", children: /* @__PURE__ */ t(
+        /* @__PURE__ */ m("div", { className: "flex flex-col h-full bg-background", children: [
+          /* @__PURE__ */ n("div", { className: "flex-1 min-h-0 p-4", children: /* @__PURE__ */ n(
             k,
             {
-              value: a,
+              value: o,
               onChange: S,
-              extensions: v,
+              extensions: x,
               basicSetup: !1,
               theme: "none",
               className: "source-editor h-full overflow-hidden rounded-md border border-border bg-muted text-foreground",
@@ -118,16 +113,16 @@ function le() {
               spellCheck: !1
             }
           ) }),
-          /* @__PURE__ */ n("div", { className: "px-4 pb-4 flex items-center gap-3", children: [
-            !c && /* @__PURE__ */ t("span", { className: "text-sm text-foreground-muted", children: "Changes sync automatically" }),
-            c && /* @__PURE__ */ t("span", { className: "text-sm text-destructive", children: c })
+          /* @__PURE__ */ m("div", { className: "px-4 pb-4 flex items-center gap-3", children: [
+            !a && /* @__PURE__ */ n("span", { className: "text-sm text-foreground-muted", children: "Changes sync automatically" }),
+            a && /* @__PURE__ */ n("span", { className: "text-sm text-destructive", children: a })
           ] })
         ] }),
-        /* @__PURE__ */ t(O, { mjmlSource: a, debounceMs: 300 })
+        /* @__PURE__ */ n(O, { mjmlSource: o, debounceMs: 300 })
       ]
     }
   );
 }
 export {
-  le as SourceEditor
+  ae as SourceEditor
 };

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/index.d.ts

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

package/package.json

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