@savvycal/mjml-editor 0.4.0 → 0.5.0

package/README.md

@@ -89,6 +89,7 @@ function App() {
 |------|------|-------------|
 | `value` | `string` | MJML markup string (required) |
 | `onChange` | `(mjml: string) => void` | Called when the document changes (required) |
+| `onSourceApply` | `(mjml: string) => void` | Called when Source tab **Apply** succeeds with valid MJML (optional) |
 | `className` | `string` | Optional CSS class for the container |
 | `defaultTheme` | `'light' \| 'dark' \| 'system'` | Theme preference (default: `'system'`) |
 | `liquidSchema` | `LiquidSchema` | Optional schema for Liquid template autocomplete |

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

@@ -6,7 +6,8 @@ interface EditorCanvasProps {
     leftPanelOpen?: boolean;
     rightPanelOpen?: boolean;
     showThemeToggle?: boolean;
+    onSourceApply?: (mjml: string) => void;
 }
-export declare function EditorCanvas({ activeTab, onTabChange, leftPanelOpen, rightPanelOpen, showThemeToggle, }: EditorCanvasProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditorCanvas({ activeTab, onTabChange, leftPanelOpen, rightPanelOpen, showThemeToggle, onSourceApply, }: EditorCanvasProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=EditorCanvas.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"EditorCanvas.d.ts","sourceRoot":"","sources":["../../../src/components/editor/EditorCanvas.tsx"],"names":[],"mappings":"AAWA,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1D,UAAU,iBAAiB;IACzB,SAAS,EAAE,aAAa,CAAC;IACzB,WAAW,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,WAAW,EACX,aAAa,EACb,cAAc,EACd,eAAsB,GACvB,EAAE,iBAAiB,2CA0GnB"}
+{"version":3,"file":"EditorCanvas.d.ts","sourceRoot":"","sources":["../../../src/components/editor/EditorCanvas.tsx"],"names":[],"mappings":"AAWA,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1D,UAAU,iBAAiB;IACzB,SAAS,EAAE,aAAa,CAAC;IACzB,WAAW,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,WAAW,EACX,aAAa,EACb,cAAc,EACd,eAAsB,EACtB,aAAa,GACd,EAAE,iBAAiB,2CAsLnB"}

package/dist/components/editor/EditorCanvas.js

@@ -1,31 +1,47 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { useState as x } from "react";
-import { Monitor as v, Smartphone as N, Undo2 as b, Redo2 as w } from "lucide-react";
-import { VisualEditor as k } from "./VisualEditor.js";
-import { InteractivePreview as C } from "./InteractivePreview.js";
-import { SourceEditor as y } from "./SourceEditor.js";
-import { useEditor as E } from "../../context/EditorContext.js";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { useState as s, useCallback as m } from "react";
+import { Monitor as z, Smartphone as j, Undo2 as P, Redo2 as R } from "lucide-react";
+import { VisualEditor as U } from "./VisualEditor.js";
+import { InteractivePreview as L } from "./InteractivePreview.js";
+import { SourceEditor as V } from "./SourceEditor.js";
+import { useEditor as Z } from "../../context/EditorContext.js";
 import { Button as i } from "../ui/button.js";
-import { Tabs as S, TabsList as M, TabsTrigger as s } from "../ui/tabs.js";
-import { ThemeToggle as P } from "../ui/theme-toggle.js";
-import { cn as d } from "../../lib/utils.js";
-function q({
-  activeTab: o,
-  onTabChange: t,
-  leftPanelOpen: a,
-  rightPanelOpen: l,
-  showThemeToggle: c = !0
+import { Tabs as A, TabsList as B, TabsTrigger as g } from "../ui/tabs.js";
+import { ThemeToggle as H } from "../ui/theme-toggle.js";
+import { cn as u } from "../../lib/utils.js";
+function _({
+  activeTab: r,
+  onTabChange: d,
+  leftPanelOpen: x,
+  rightPanelOpen: v,
+  showThemeToggle: b = !0,
+  onSourceApply: N
 }) {
-  const { undo: m, redo: u, canUndo: h, canRedo: f } = E(), [n, p] = x("desktop");
-  return /* @__PURE__ */ r("div", { className: "flex flex-col h-full", children: [
-    /* @__PURE__ */ r("div", { className: "h-11 px-4 flex items-center gap-1 border-b border-border bg-background relative", children: [
+  const { undo: w, redo: k, canUndo: C, canRedo: y } = Z(), [h, S] = s("desktop"), [f, p] = s(!1), [n, l] = s(null), [D, a] = s(!1), c = m(
+    (t) => {
+      if (t !== r) {
+        if (r === "source" && f) {
+          l(t), a(!0);
+          return;
+        }
+        d(t);
+      }
+    },
+    [r, f, d]
+  ), E = m(() => {
+    l(null), a(!1);
+  }, []), M = m(() => {
+    n && (p(!1), d(n)), l(null), a(!1);
+  }, [n, d]);
+  return /* @__PURE__ */ o("div", { className: "relative flex flex-col h-full", children: [
+    /* @__PURE__ */ o("div", { className: "h-11 px-4 flex items-center gap-1 border-b border-border bg-background relative", children: [
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => t("edit"),
-          className: d(
+          onClick: () => c("edit"),
+          className: u(
             "px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
-            o === "edit" ? "bg-accent text-foreground" : "text-foreground-muted hover:text-foreground hover:bg-accent/50"
+            r === "edit" ? "bg-accent text-foreground" : "text-foreground-muted hover:text-foreground hover:bg-accent/50"
           ),
           children: "Edit"
         }
@@ -33,10 +49,10 @@ function q({
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => t("preview"),
-          className: d(
+          onClick: () => c("preview"),
+          className: u(
             "px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
-            o === "preview" ? "bg-accent text-foreground" : "text-foreground-muted hover:text-foreground hover:bg-accent/50"
+            r === "preview" ? "bg-accent text-foreground" : "text-foreground-muted hover:text-foreground hover:bg-accent/50"
           ),
           children: "Preview"
         }
@@ -44,44 +60,44 @@ function q({
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => t("source"),
-          className: d(
+          onClick: () => c("source"),
+          className: u(
             "px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
-            o === "source" ? "bg-accent text-foreground" : "text-foreground-muted hover:text-foreground hover:bg-accent/50"
+            r === "source" ? "bg-accent text-foreground" : "text-foreground-muted hover:text-foreground hover:bg-accent/50"
           ),
           children: "Source"
         }
       ),
-      o === "preview" && /* @__PURE__ */ e(
-        S,
+      r === "preview" && /* @__PURE__ */ e(
+        A,
         {
-          value: n,
-          onValueChange: (g) => p(g),
+          value: h,
+          onValueChange: (t) => S(t),
           className: "absolute left-1/2 -translate-x-1/2",
-          children: /* @__PURE__ */ r(M, { className: "h-8", children: [
-            /* @__PURE__ */ r(s, { value: "desktop", className: "h-7 px-2 gap-1.5", children: [
-              /* @__PURE__ */ e(v, { className: "h-3.5 w-3.5" }),
+          children: /* @__PURE__ */ o(B, { className: "h-8", children: [
+            /* @__PURE__ */ o(g, { value: "desktop", className: "h-7 px-2 gap-1.5", children: [
+              /* @__PURE__ */ e(z, { className: "h-3.5 w-3.5" }),
               /* @__PURE__ */ e("span", { className: "hidden md:inline", children: "Desktop" })
             ] }),
-            /* @__PURE__ */ r(s, { value: "mobile", className: "h-7 px-2 gap-1.5", children: [
-              /* @__PURE__ */ e(N, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ o(g, { value: "mobile", className: "h-7 px-2 gap-1.5", children: [
+              /* @__PURE__ */ e(j, { className: "h-3.5 w-3.5" }),
               /* @__PURE__ */ e("span", { className: "hidden md:inline", children: "Mobile" })
             ] })
           ] })
         }
       ),
       /* @__PURE__ */ e("div", { className: "flex-1" }),
-      /* @__PURE__ */ r("div", { className: "flex items-center gap-0.5", children: [
+      /* @__PURE__ */ o("div", { className: "flex items-center gap-0.5", children: [
         /* @__PURE__ */ e(
           i,
           {
             variant: "ghost",
             size: "icon-sm",
-            onClick: m,
-            disabled: !h,
+            onClick: w,
+            disabled: !C,
             className: "h-7 w-7 rounded-md text-foreground-muted hover:text-foreground hover:bg-accent disabled:opacity-40",
             title: "Undo (Cmd+Z)",
-            children: /* @__PURE__ */ e(b, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ e(P, { className: "h-4 w-4" })
           }
         ),
         /* @__PURE__ */ e(
@@ -89,29 +105,75 @@ function q({
           {
             variant: "ghost",
             size: "icon-sm",
-            onClick: u,
-            disabled: !f,
+            onClick: k,
+            disabled: !y,
             className: "h-7 w-7 rounded-md text-foreground-muted hover:text-foreground hover:bg-accent disabled:opacity-40",
             title: "Redo (Cmd+Shift+Z)",
-            children: /* @__PURE__ */ e(w, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ e(R, { className: "h-4 w-4" })
           }
         ),
-        c && /* @__PURE__ */ e(P, {})
+        b && /* @__PURE__ */ e(H, {})
       ] })
     ] }),
-    /* @__PURE__ */ r("div", { className: "flex-1 min-h-0 overflow-hidden", children: [
-      o === "edit" && /* @__PURE__ */ e(
-        k,
+    /* @__PURE__ */ o("div", { className: "flex-1 min-h-0 overflow-hidden", children: [
+      r === "edit" && /* @__PURE__ */ e(
+        U,
         {
-          leftPanelOpen: a,
-          rightPanelOpen: l
+          leftPanelOpen: x,
+          rightPanelOpen: v
         }
       ),
-      o === "preview" && /* @__PURE__ */ e(C, { showHeader: !1, previewMode: n }),
-      o === "source" && /* @__PURE__ */ e(y, {})
-    ] })
+      r === "preview" && /* @__PURE__ */ e(L, { showHeader: !1, previewMode: h }),
+      r === "source" && /* @__PURE__ */ e(
+        V,
+        {
+          onApply: N,
+          onDirtyChange: p
+        }
+      )
+    ] }),
+    D && /* @__PURE__ */ e("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-black/40 p-4", children: /* @__PURE__ */ o(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": "discard-source-title",
+        className: "w-full max-w-md rounded-lg border border-border bg-popover p-5 shadow-lg",
+        children: [
+          /* @__PURE__ */ e(
+            "h2",
+            {
+              id: "discard-source-title",
+              className: "text-base font-semibold text-foreground",
+              children: "Discard un-applied source changes?"
+            }
+          ),
+          /* @__PURE__ */ e("p", { className: "mt-2 text-sm text-foreground-muted", children: "You have unsaved edits in Source. Leaving this tab will discard those changes." }),
+          /* @__PURE__ */ o("div", { className: "mt-5 flex justify-end gap-2", children: [
+            /* @__PURE__ */ e(
+              i,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: E,
+                children: "Keep Editing"
+              }
+            ),
+            /* @__PURE__ */ e(
+              i,
+              {
+                variant: "destructive",
+                size: "sm",
+                onClick: M,
+                children: "Discard Changes"
+              }
+            )
+          ] })
+        ]
+      }
+    ) })
   ] });
 }
 export {
-  q as EditorCanvas
+  _ as EditorCanvas
 };

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

@@ -3,6 +3,11 @@ import { LiquidSchema } from '../../types/liquid';
 interface MjmlEditorProps {
     value: string;
     onChange: (mjml: string) => void;
+    /**
+     * Called when Source tab "Apply" succeeds with valid MJML.
+     * Useful for triggering explicit save/persist actions.
+     */
+    onSourceApply?: (mjml: string) => void;
     className?: string;
     defaultTheme?: 'light' | 'dark' | 'system';
     liquidSchema?: LiquidSchema;
@@ -49,6 +54,6 @@ interface MjmlEditorProps {
      */
     defaultRightPanelOpen?: boolean;
 }
-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, onSourceApply, className, defaultTheme, liquidSchema, extensions, applyThemeToDocument, showThemeToggle, defaultLeftPanelOpen, defaultRightPanelOpen, }: 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":"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;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,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;AAuKD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAa,EACb,SAAS,EACT,YAAuB,EACvB,YAAY,EACZ,UAAU,EACV,oBAA2B,EAC3B,eAAsB,EACtB,oBAA2B,EAC3B,qBAA6B,GAC9B,EAAE,eAAe,2CAsDjB"}

package/dist/components/editor/MjmlEditor.js

@@ -1,25 +1,25 @@
-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 { 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 { jsx as e, jsxs as B, Fragment as M } from "react/jsx-runtime";
+import { useState as u, useEffect as a, useCallback as I, useRef as O } from "react";
+import { EditorProvider as j, useEditor as x } from "../../context/EditorContext.js";
+import { ThemeProvider as S, useTheme as C } from "../../context/ThemeContext.js";
+import { LiquidSchemaProvider as A } 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 { 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 { OutlineTree as R, GLOBAL_STYLES_ID as P } from "./OutlineTree.js";
+import { EditorCanvas as F } from "./EditorCanvas.js";
+import { BlockInspector as N } from "./BlockInspector.js";
+import { GlobalStylesPanel as $ } from "./GlobalStylesPanel.js";
+import { FloatingPanel as b } from "../ui/floating-panel.js";
+import { createEmptyDocument as L, parseMjml as z, serializeMjml as G } from "../../lib/mjml/parser.js";
+function H(n) {
   if (!n || n.trim() === "")
-    return P();
+    return L();
   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), L();
   }
 }
-function H({
+function _({
   className: n,
   children: o
 }) {
@@ -32,125 +32,134 @@ function H({
     }
   );
 }
-function _({
+function q({
   onChange: n,
-  showThemeToggle: o = !0,
-  defaultLeftPanelOpen: l = !0,
-  defaultRightPanelOpen: T = !1
+  onSourceApply: o,
+  showThemeToggle: l = !0,
+  defaultLeftPanelOpen: f = !0,
+  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(() => {
-    y.current = n;
-  }, [n]), d(() => {
+  const { state: r, undo: m, redo: p, canUndo: h, canRedo: g, deleteBlock: k, selectBlock: v } = x(), [c, T] = u(f), [d, i] = u(E), [s, D] = u("edit"), w = O(n);
+  return a(() => {
+    w.current = n;
+  }, [n]), a(() => {
     r.selectedBlockId && i(!0);
-  }, [r.selectedBlockId]), d(() => {
-    const v = z(r.document);
-    y.current(v);
-  }, [r.document]), d(() => {
-    const v = (t) => {
+  }, [r.selectedBlockId]), a(() => {
+    const y = G(r.document);
+    w.current(y);
+  }, [r.document]), a(() => {
+    const y = (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 ? g && p() : h && m();
           return;
         }
-        if ((t.key === "Delete" || t.key === "Backspace") && r.selectedBlockId && r.selectedBlockId !== B) {
-          t.preventDefault(), h(r.selectedBlockId);
+        if ((t.key === "Delete" || t.key === "Backspace") && r.selectedBlockId && r.selectedBlockId !== P) {
+          t.preventDefault(), k(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", y), () => window.removeEventListener("keydown", y);
   }, [
-    u,
-    f,
     m,
     p,
     h,
     g,
+    k,
+    v,
     r.selectedBlockId
-  ]), /* @__PURE__ */ w("div", { className: "relative h-full overflow-hidden", children: [
+  ]), /* @__PURE__ */ B("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,
-        rightPanelOpen: c,
-        showThemeToggle: o
+        activeTab: s,
+        onTabChange: D,
+        leftPanelOpen: c,
+        rightPanelOpen: d,
+        showThemeToggle: l,
+        onSourceApply: o
       }
     ) }),
-    E === "edit" && /* @__PURE__ */ w(L, { children: [
+    s === "edit" && /* @__PURE__ */ B(M, { children: [
       /* @__PURE__ */ e(
-        I,
+        b,
         {
           side: "left",
-          isOpen: s,
-          onToggle: () => k(!s),
+          isOpen: c,
+          onToggle: () => T(!c),
           width: 256,
-          children: /* @__PURE__ */ e(R, { onTogglePanel: () => k(!1) })
+          children: /* @__PURE__ */ e(R, { onTogglePanel: () => T(!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 === P ? /* @__PURE__ */ e(
+            $,
             {
               onTogglePanel: () => i(!1)
             }
-          ) : /* @__PURE__ */ e(F, { onTogglePanel: () => i(!1) })
+          ) : /* @__PURE__ */ e(N, { onTogglePanel: () => i(!1) })
         }
       )
     ] })
   ] });
 }
-function ne({
+function oe({
   value: n,
   onChange: o,
-  className: l,
-  defaultTheme: T = "system",
+  onSourceApply: l,
+  className: f,
+  defaultTheme: E = "system",
   liquidSchema: r,
-  extensions: u,
-  applyThemeToDocument: f = !0,
-  showThemeToggle: m = !0,
-  defaultLeftPanelOpen: p = !0,
-  defaultRightPanelOpen: h = !1
+  extensions: m,
+  applyThemeToDocument: p = !0,
+  showThemeToggle: h = !0,
+  defaultLeftPanelOpen: g = !0,
+  defaultRightPanelOpen: k = !1
 }) {
-  const [g, s] = a(!1);
-  d(() => {
-    s(!0);
+  const [v, c] = u(!1);
+  a(() => {
+    c(!0);
   }, []);
-  const [k] = a(() => G(n)), c = D(
-    (i) => {
-      o(i);
+  const [T] = u(() => H(n)), d = I(
+    (s) => {
+      o(s);
     },
     [o]
+  ), i = I(
+    (s) => {
+      l?.(s);
+    },
+    [l]
   );
-  return g ? /* @__PURE__ */ e(
-    x,
+  return v ? /* @__PURE__ */ e(
+    S,
     {
-      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: E,
+      applyToDocument: p,
+      children: /* @__PURE__ */ e(K, { extensions: m, children: /* @__PURE__ */ e(A, { schema: r, children: /* @__PURE__ */ e(_, { className: f, children: /* @__PURE__ */ e(j, { initialDocument: T, children: /* @__PURE__ */ e(
+        q,
         {
-          onChange: c,
-          showThemeToggle: m,
-          defaultLeftPanelOpen: p,
-          defaultRightPanelOpen: h
+          onChange: d,
+          onSourceApply: i,
+          showThemeToggle: h,
+          defaultLeftPanelOpen: g,
+          defaultRightPanelOpen: k
         }
       ) }) }) }) })
     }
-  ) : /* @__PURE__ */ e("div", { className: `h-full w-full bg-background ${l || ""}` });
+  ) : /* @__PURE__ */ e("div", { className: `h-full w-full bg-background ${f || ""}` });
 }
 export {
-  ne as MjmlEditor
+  oe as MjmlEditor
 };

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

@@ -1,2 +1,7 @@
-export declare function SourceEditor(): import("react/jsx-runtime").JSX.Element;
+interface SourceEditorProps {
+    onApply?: (mjml: string) => void;
+    onDirtyChange?: (isDirty: boolean) => void;
+}
+export declare function SourceEditor({ onApply, onDirtyChange }: SourceEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=SourceEditor.d.ts.map

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":"AAOA,wBAAgB,YAAY,4CAkF3B"}
+{"version":3,"file":"SourceEditor.d.ts","sourceRoot":"","sources":["../../../src/components/editor/SourceEditor.tsx"],"names":[],"mappings":"AAoCA,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,EAAE,iBAAiB,2CAwIzE"}

package/dist/components/editor/SourceEditor.js

@@ -1,70 +1,115 @@
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
-import { useState as n, useEffect as p } from "react";
-import { AlertTriangle as h } from "lucide-react";
-import { useEditor as g } from "../../context/EditorContext.js";
-import { serializeMjml as x, parseMjml as b } from "../../lib/mjml/parser.js";
-import { ResizableSplitPane as v } from "../ui/resizable-split-pane.js";
-import { SourcePreview as N } from "./SourcePreview.js";
-function E() {
-  const { state: m, setDocument: c } = g(), [a, i] = n(""), [o, t] = n(null), [d, l] = n(!1);
-  p(() => {
-    const e = x(m.document);
-    i(e), l(!1), t(null);
-  }, [m.document]);
-  const u = () => {
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { useState as d, useEffect as c, useCallback as u, useMemo as N } from "react";
+import { AlertTriangle as S } from "lucide-react";
+import j from "@uiw/react-codemirror";
+import { EditorState as E } from "@codemirror/state";
+import { indentUnit as k, bracketMatching as w, syntaxHighlighting as L, defaultHighlightStyle as K } from "@codemirror/language";
+import { lineNumbers as W, highlightActiveLineGutter as A, highlightActiveLine as C, EditorView as D, keymap as z } from "@codemirror/view";
+import { history as J, indentWithTab as P, defaultKeymap as H, historyKeymap as I } from "@codemirror/commands";
+import { highlightSelectionMatches as T, searchKeymap as U } from "@codemirror/search";
+import { xml as F } from "@codemirror/lang-xml";
+import { useEditor as G } from "../../context/EditorContext.js";
+import { serializeMjml as b, parseMjml as R } from "../../lib/mjml/parser.js";
+import { ResizableSplitPane as V } from "../ui/resizable-split-pane.js";
+import { SourcePreview as Y } from "./SourcePreview.js";
+function se({ onApply: f, onDirtyChange: o }) {
+  const { state: h, setDocument: p } = G(), [i, g] = d(""), [l, r] = d(null), [a, m] = d(!1);
+  c(() => {
+    const e = b(h.document);
+    g(e), m(!1), r(null);
+  }, [h.document]);
+  const n = u(() => {
     try {
-      const e = b(a);
+      const e = R(i);
       if (e.tagName !== "mjml") {
-        t("Invalid MJML: Document must have an <mjml> root element");
+        r("Invalid MJML: Document must have an <mjml> root element");
         return;
       }
-      c(e), t(null), l(!1);
+      const M = b(e);
+      p(e), f?.(M), r(null), m(!1);
     } catch (e) {
-      t(e instanceof Error ? e.message : "Failed to parse MJML");
+      r(e instanceof Error ? e.message : "Failed to parse MJML");
     }
-  }, f = (e) => {
-    i(e), l(!0), t(null);
-  };
-  return /* @__PURE__ */ s(
-    v,
+  }, [i, p, f]), x = N(
+    () => [
+      W(),
+      A(),
+      C(),
+      J(),
+      E.tabSize.of(2),
+      k.of("  "),
+      w(),
+      T(),
+      L(K),
+      D.lineWrapping,
+      z.of([
+        P,
+        ...H,
+        ...I,
+        ...U
+      ]),
+      F()
+    ],
+    []
+  ), y = u((e) => {
+    g(e), m(!0), r(null);
+  }, []), v = u(
+    (e) => {
+      e.defaultPrevented || (e.metaKey || e.ctrlKey) && e.key === "Enter" && (e.preventDefault(), n());
+    },
+    [n]
+  );
+  return c(() => {
+    o?.(a);
+  }, [a, o]), c(
+    () => () => {
+      o?.(!1);
+    },
+    [o]
+  ), /* @__PURE__ */ s(
+    V,
     {
       defaultLeftWidth: 50,
       minLeftWidth: 30,
       maxLeftWidth: 70,
       children: [
         /* @__PURE__ */ s("div", { className: "flex flex-col h-full bg-background", children: [
-          /* @__PURE__ */ r("div", { className: "px-4 pt-4", children: /* @__PURE__ */ s("div", { className: "flex items-start gap-3 p-3 rounded-md bg-amber-50 border border-amber-200 text-amber-800", children: [
-            /* @__PURE__ */ r(h, { className: "h-4 w-4 mt-0.5 flex-shrink-0" }),
-            /* @__PURE__ */ r("p", { className: "text-sm", children: "You are editing the raw MJML source. Changes may affect the visual editor." })
+          /* @__PURE__ */ t("div", { className: "px-4 pt-4", children: /* @__PURE__ */ s("div", { className: "flex items-start gap-3 p-3 rounded-md bg-amber-50 border border-amber-200 text-amber-800", children: [
+            /* @__PURE__ */ t(S, { className: "h-4 w-4 mt-0.5 flex-shrink-0" }),
+            /* @__PURE__ */ t("p", { className: "text-sm", children: "You are editing the raw MJML source. Changes may affect the visual editor." })
           ] }) }),
-          /* @__PURE__ */ r("div", { className: "flex-1 min-h-0 p-4", children: /* @__PURE__ */ r(
-            "textarea",
+          /* @__PURE__ */ t("div", { className: "flex-1 min-h-0 p-4", onKeyDown: v, children: /* @__PURE__ */ t(
+            j,
             {
-              value: a,
-              onChange: (e) => f(e.target.value),
-              className: "w-full h-full p-4 font-mono text-sm bg-muted text-foreground border border-border rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-ring",
+              value: i,
+              onChange: y,
+              extensions: x,
+              basicSetup: !1,
+              theme: "none",
+              className: "source-editor h-full overflow-hidden rounded-md border border-border bg-muted text-foreground",
+              height: "100%",
               spellCheck: !1
             }
           ) }),
           /* @__PURE__ */ s("div", { className: "px-4 pb-4 flex items-center gap-3", children: [
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ t(
               "button",
               {
-                onClick: u,
-                disabled: !d,
+                onClick: n,
+                disabled: !a,
                 className: "px-4 py-2 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed",
                 children: "Apply"
               }
             ),
-            d && !o && /* @__PURE__ */ r("span", { className: "text-sm text-foreground-muted", children: "Unsaved changes" }),
-            o && /* @__PURE__ */ r("span", { className: "text-sm text-destructive", children: o })
+            a && !l && /* @__PURE__ */ t("span", { className: "text-sm text-foreground-muted", children: "Unsaved changes" }),
+            l && /* @__PURE__ */ t("span", { className: "text-sm text-destructive", children: l })
           ] })
         ] }),
-        /* @__PURE__ */ r(N, { mjmlSource: a, debounceMs: 300 })
+        /* @__PURE__ */ t(Y, { mjmlSource: i, debounceMs: 300 })
       ]
     }
   );
 }
 export {
-  E as SourceEditor
+  se as SourceEditor
 };

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SourceEditor.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SourceEditor.test.d.ts","sourceRoot":"","sources":["../../../src/components/editor/SourceEditor.test.tsx"],"names":[],"mappings":""}

package/dist/components.css

@@ -340,6 +340,59 @@
   --block-selected-bg: oklch(0.96 0.02 250);
 }
 
+/* Source editor (CodeMirror) */
+.mjml-editor .source-editor .cm-editor {
+  height: 100%;
+  background: var(--muted);
+  color: var(--foreground);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+  font-size: 0.875rem;
+}
+
+.mjml-editor .source-editor .cm-scroller {
+  font-family: inherit;
+  line-height: 1.5;
+}
+
+.mjml-editor .source-editor .cm-focused {
+  outline: none;
+}
+
+.mjml-editor .source-editor .cm-gutters {
+  border-right: 1px solid var(--border);
+  background: color-mix(in oklab, var(--muted) 90%, var(--background) 10%);
+  color: var(--foreground-subtle);
+}
+
+.mjml-editor .source-editor .cm-activeLine,
+.mjml-editor .source-editor .cm-activeLineGutter {
+  background: color-mix(in oklab, var(--accent) 80%, transparent);
+}
+
+.mjml-editor .source-editor .cm-selectionBackground,
+.mjml-editor .source-editor .cm-content ::selection {
+  background: var(--selection);
+}
+
+.mjml-editor .source-editor .cm-searchMatch {
+  background: color-mix(in oklab, var(--selection) 70%, var(--accent) 30%);
+  border: 1px solid var(--border-strong);
+}
+
+.mjml-editor .source-editor .cm-searchMatch.cm-searchMatch-selected {
+  background: color-mix(in oklab, var(--selection) 60%, var(--accent) 40%);
+}
+
+.mjml-editor .source-editor .cm-matchingBracket {
+  background: color-mix(in oklab, var(--accent) 70%, transparent);
+  outline: 1px solid var(--border-strong);
+}
+
+.mjml-editor .source-editor .cm-cursor {
+  border-left-color: var(--foreground);
+}
+
 /* Tiptap Editor Styles */
 .ProseMirror {
   outline: none;

package/dist/lib/html-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html-utils.d.ts","sourceRoot":"","sources":["../../src/lib/html-utils.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAmBxD;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAcxD;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAgBxD"}
+{"version":3,"file":"html-utils.d.ts","sourceRoot":"","sources":["../../src/lib/html-utils.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAmBxD;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAcxD;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAwExD"}

package/dist/lib/html-utils.js

@@ -1,25 +1,55 @@
-function p(i) {
-  if (!i || i === "<p></p>")
+function x(e) {
+  if (!e || e === "<p></p>")
     return "";
-  let r = i.replace(/<p>/g, "");
-  return r = r.replace(/<\/p>/g, "<br />"), r = r.replace(/(<br\s*\/?>)+$/, ""), r = r.replace(/<br>/gi, "<br />"), r;
+  let t = e.replace(/<p>/g, "");
+  return t = t.replace(/<\/p>/g, "<br />"), t = t.replace(/(<br\s*\/?>)+$/, ""), t = t.replace(/<br>/gi, "<br />"), t;
 }
-function l(i) {
-  return !i || i.trim() === "" ? "<p></p>" : i.includes("<p>") ? i : i.split(/<br\s*\/?>/gi).map((e) => `<p>${e}</p>`).join("");
+function T(e) {
+  return !e || e.trim() === "" ? "<p></p>" : e.includes("<p>") ? e : e.split(/<br\s*\/?>/gi).map((i) => `<p>${i}</p>`).join("");
 }
-function s(i) {
-  if (!i) return i;
-  let r = i.replace(
-    /(\{\{[^{}]*\}\})/g,
-    '<span class="liquid-highlight">$1</span>'
-  );
-  return r = r.replace(
-    /(\{%[^{}]*%\})/g,
-    '<span class="liquid-highlight">$1</span>'
-  ), r;
+function N(e) {
+  if (!e || typeof document > "u")
+    return e;
+  try {
+    const t = document.createElement("div");
+    t.innerHTML = e;
+    const i = /(\{\{[^{}]*\}\}|\{%[^{}]*%\})/g, p = [], u = document.createTreeWalker(
+      t,
+      NodeFilter.SHOW_TEXT,
+      null
+    );
+    let l = u.nextNode();
+    for (; l; )
+      p.push(l), l = u.nextNode();
+    for (const r of p) {
+      const s = r.parentElement;
+      if (!s) continue;
+      const f = s.tagName.toLowerCase();
+      if (f === "script" || f === "style" || s.closest(".liquid-highlight")) continue;
+      const o = r.textContent || "";
+      i.lastIndex = 0;
+      const m = Array.from(o.matchAll(i));
+      if (m.length === 0) continue;
+      const c = document.createDocumentFragment();
+      let n = 0;
+      for (const g of m) {
+        const h = g[0], a = g.index ?? -1;
+        if (a < 0) continue;
+        a > n && c.appendChild(
+          document.createTextNode(o.slice(n, a))
+        );
+        const d = document.createElement("span");
+        d.className = "liquid-highlight", d.textContent = h, c.appendChild(d), n = a + h.length;
+      }
+      n < o.length && c.appendChild(document.createTextNode(o.slice(n))), r.parentNode?.replaceChild(c, r);
+    }
+    return t.innerHTML;
+  } catch {
+    return e;
+  }
 }
 export {
-  s as highlightLiquidTags,
-  l as mjmlToTiptapHtml,
-  p as sanitizeHtmlForMjml
+  N as highlightLiquidTags,
+  T as mjmlToTiptapHtml,
+  x as sanitizeHtmlForMjml
 };

package/dist/lib/html-utils.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=html-utils.test.d.ts.map

package/dist/lib/html-utils.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-utils.test.d.ts","sourceRoot":"","sources":["../../src/lib/html-utils.test.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@savvycal/mjml-editor",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -35,7 +35,14 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
+    "@codemirror/commands": "^6.10.2",
+    "@codemirror/lang-xml": "^6.1.0",
+    "@codemirror/language": "^6.12.1",
+    "@codemirror/search": "^6.6.0",
+    "@codemirror/state": "^6.5.4",
+    "@codemirror/view": "^6.39.14",
     "@floating-ui/react": "^0.27.16",
+    "@lezer/highlight": "^1.2.3",
     "@radix-ui/react-collapsible": "^1.1.11",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-popover": "^1.1.15",
@@ -51,6 +58,7 @@
     "@tiptap/react": "^2.10.0",
     "@tiptap/starter-kit": "^2.10.0",
     "@tiptap/suggestion": "^2.27.2",
+    "@uiw/react-codemirror": "^4.25.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.562.0",
@@ -61,6 +69,7 @@
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.1.18",
+    "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "@types/uuid": "^11.0.0",