@savvycal/mjml-editor 0.4.0 → 0.6.0

package/README.md

@@ -15,15 +15,15 @@ A React-based visual editor for MJML email templates. Built for embedding in app
 
 ## Supported Components
 
-| Component | Description |
-|-----------|-------------|
-| `mj-section` | Row containers with background color/image |
-| `mj-column` | Responsive columns within sections |
-| `mj-text` | Text content with typography settings |
-| `mj-image` | Images with dimensions, alt text, and links |
-| `mj-button` | Call-to-action buttons with styling |
-| `mj-divider` | Horizontal separators |
-| `mj-spacer` | Vertical spacing |
+| Component    | Description                                 |
+| ------------ | ------------------------------------------- |
+| `mj-section` | Row containers with background color/image  |
+| `mj-column`  | Responsive columns within sections          |
+| `mj-text`    | Text content with typography settings       |
+| `mj-image`   | Images with dimensions, alt text, and links |
+| `mj-button`  | Call-to-action buttons with styling         |
+| `mj-divider` | Horizontal separators                       |
+| `mj-spacer`  | Vertical spacing                            |
 
 ## Installation
 
@@ -48,20 +48,22 @@ This library is designed to work with Tailwind CSS v4. Instead of bundling all s
 Add the following imports to your app's main CSS file:
 
 ```css
-@import "@savvycal/mjml-editor/preset.css";
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "@savvycal/mjml-editor/components.css";
+@import '@savvycal/mjml-editor/preset.css';
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import '@savvycal/mjml-editor/components.css';
 ```
 
 **Note:** `preset.css` must come before `tailwindcss` so that `@theme` tokens are registered before Tailwind generates its utilities.
 
 The `preset.css` file includes:
+
 - `@source` directive that tells Tailwind to scan the library's dist files for utility classes (works with npm, yarn, and pnpm)
 - `@theme` tokens that map CSS variables to Tailwind utilities
 - Custom utilities (`bg-checkered`, `shadow-framer`, etc.)
 
 The `components.css` file includes:
+
 - Scoped CSS variables for the editor theme (light/dark mode)
 - Tiptap/ProseMirror editor styles
 
@@ -74,26 +76,23 @@ import { MjmlEditor } from '@savvycal/mjml-editor';
 function App() {
   const [mjml, setMjml] = useState(initialMjml);
 
-  return (
-    <MjmlEditor
-      value={mjml}
-      onChange={setMjml}
-    />
-  );
+  return <MjmlEditor value={mjml} onChange={setMjml} />;
 }
 ```
 
 ### Props
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `value` | `string` | MJML markup string (required) |
-| `onChange` | `(mjml: string) => void` | Called when the document changes (required) |
-| `className` | `string` | Optional CSS class for the container |
-| `defaultTheme` | `'light' \| 'dark' \| 'system'` | Theme preference (default: `'system'`) |
-| `liquidSchema` | `LiquidSchema` | Optional schema for Liquid template autocomplete |
-| `extensions` | `EditorExtensions` | Optional extensions for custom features beyond standard MJML |
-| `applyThemeToDocument` | `boolean` | Whether to apply theme class to `document.documentElement`. Needed for dropdown/popover theming. Set to `false` if your app manages document-level theme classes. (default: `true`) |
+| Prop                   | Type                            | Description                                                                                                                                                                         |
+| ---------------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`                | `string`                        | MJML markup string (required)                                                                                                                                                       |
+| `onChange`             | `(mjml: string) => void`        | Called when the document changes (required)                                                                                                                                         |
+| `className`            | `string`                        | Optional CSS class for the container                                                                                                                                                |
+| `defaultTheme`         | `'light' \| 'dark' \| 'system'` | Theme preference (default: `'system'`)                                                                                                                                              |
+| `liquidSchema`         | `LiquidSchema`                  | Optional schema for Liquid template autocomplete                                                                                                                                    |
+| `extensions`           | `EditorExtensions`              | Optional extensions for custom features beyond standard MJML                                                                                                                        |
+| `applyThemeToDocument` | `boolean`                       | Whether to apply theme class to `document.documentElement`. Needed for dropdown/popover theming. Set to `false` if your app manages document-level theme classes. (default: `true`) |
+
+When using the Source tab, valid MJML edits are applied automatically as you type.
 
 ## Liquid Template Support
 
@@ -119,11 +118,7 @@ function App() {
   const [mjml, setMjml] = useState(initialMjml);
 
   return (
-    <MjmlEditor
-      value={mjml}
-      onChange={setMjml}
-      liquidSchema={liquidSchema}
-    />
+    <MjmlEditor value={mjml} onChange={setMjml} liquidSchema={liquidSchema} />
   );
 }
 ```
@@ -159,11 +154,13 @@ function App() {
 Enables the `sc-if` attribute for server-side conditional rendering using Liquid expressions.
 
 When enabled:
+
 - A "Condition (Liquid)" field appears in the Advanced section of the inspector for all block types
 - Blocks with conditions display an "if" badge indicator in both the canvas and outline tree
 - The Advanced section auto-expands when a block has a condition
 
 **How it works:**
+
 - The `sc-if` attribute is preserved in the MJML output for server-side processing
 - The attribute is stripped from preview rendering to avoid MJML validation warnings
 - Your server processes the Liquid condition and conditionally renders the block
@@ -195,12 +192,12 @@ The library exports TypeScript types for integration:
 
 ```tsx
 import type {
-  MjmlNode,          // MJML document node structure
-  MjmlTagName,       // Union of supported MJML tag names
-  ContentBlockType,  // Union of content block types
-  EditorExtensions,  // Extensions configuration
-  LiquidSchema,      // Schema for Liquid autocomplete
-  LiquidSchemaItem,  // Individual variable/tag definition
+  MjmlNode, // MJML document node structure
+  MjmlTagName, // Union of supported MJML tag names
+  ContentBlockType, // Union of content block types
+  EditorExtensions, // Extensions configuration
+  LiquidSchema, // Schema for Liquid autocomplete
+  LiquidSchemaItem, // Individual variable/tag definition
 } from '@savvycal/mjml-editor';
 ```
 
@@ -216,13 +213,13 @@ interface EditorExtensions {
 
 ```typescript
 interface LiquidSchemaItem {
-  name: string;         // Variable or tag name (e.g., "user.name")
+  name: string; // Variable or tag name (e.g., "user.name")
   description?: string; // Description shown in autocomplete
 }
 
 interface LiquidSchema {
   variables: LiquidSchemaItem[]; // {{ variable }} syntax
-  tags: LiquidSchemaItem[];      // {% tag %} syntax
+  tags: LiquidSchemaItem[]; // {% tag %} syntax
 }
 ```
 
@@ -234,22 +231,22 @@ The library exports theme utilities if you need to integrate with or control the
 import { ThemeProvider, useTheme, ThemeToggle } from '@savvycal/mjml-editor';
 ```
 
-| Export | Description |
-|--------|-------------|
-| `ThemeProvider` | Context provider for theme management |
-| `useTheme()` | Hook returning `{ theme, setTheme }` |
-| `ThemeToggle` | Pre-built UI component for theme switching |
+| Export          | Description                                |
+| --------------- | ------------------------------------------ |
+| `ThemeProvider` | Context provider for theme management      |
+| `useTheme()`    | Hook returning `{ theme, setTheme }`       |
+| `ThemeToggle`   | Pre-built UI component for theme switching |
 
 Note: `MjmlEditor` includes its own `ThemeProvider`, so you don't need to wrap it. These exports are for advanced use cases where you need theme access outside the editor.
 
 ## Keyboard Shortcuts
 
-| Shortcut | Action |
-|----------|--------|
-| `Cmd/Ctrl + Z` | Undo |
-| `Cmd/Ctrl + Shift + Z` | Redo |
+| Shortcut               | Action                |
+| ---------------------- | --------------------- |
+| `Cmd/Ctrl + Z`         | Undo                  |
+| `Cmd/Ctrl + Shift + Z` | Redo                  |
 | `Delete` / `Backspace` | Delete selected block |
-| `Escape` | Deselect block |
+| `Escape`               | Deselect block        |
 
 ## Contributing
 

package/dist/components/editor/EditorCanvas.js

@@ -17,7 +17,7 @@ function q({
   showThemeToggle: c = !0
 }) {
   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: [
+  return /* @__PURE__ */ r("div", { className: "relative 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: [
       /* @__PURE__ */ e(
         "button",

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":"AA2DA,wBAAgB,YAAY,4CA4H3B"}

package/dist/components/editor/SourceEditor.js

@@ -1,70 +1,133 @@
-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);
+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 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 { SourcePreview as O } from "./SourcePreview.js";
+const P = 350, Y = C.define([
+  {
+    tag: r.tagName,
+    color: "var(--cm-tag, oklch(0.74 0.1 158))",
+    fontWeight: "600"
+  },
+  {
+    tag: r.attributeName,
+    color: "var(--cm-attribute-name, oklch(0.76 0.09 80))"
+  },
+  {
+    tag: [r.attributeValue, r.string],
+    color: "var(--cm-attribute-value, oklch(0.77 0.1 255))"
+  },
+  {
+    tag: [r.angleBracket, r.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: r.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("");
   p(() => {
-    const e = x(m.document);
-    i(e), l(!1), t(null);
-  }, [m.document]);
-  const u = () => {
-    try {
-      const e = b(a);
-      if (e.tagName !== "mjml") {
-        t("Invalid MJML: Document must have an <mjml> root element");
-        return;
-      }
-      c(e), t(null), l(!1);
-    } catch (e) {
-      t(e instanceof Error ? e.message : "Failed to parse MJML");
+    if (l.current) {
+      l.current = !1;
+      return;
     }
-  }, f = (e) => {
-    i(e), l(!0), t(null);
-  };
-  return /* @__PURE__ */ s(
-    v,
+    const e = x(s.document);
+    m.current = e, d(e), i(null);
+  }, [s.document]);
+  const h = b(
+    (e) => {
+      try {
+        const o = B(e);
+        if (o.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");
+      }
+    },
+    [u]
+  ), v = N(
+    () => [
+      L(),
+      D(),
+      W(),
+      T(),
+      M.tabSize.of(2),
+      E.of("  "),
+      j(),
+      K(),
+      w(Y),
+      R.lineWrapping,
+      A.of([
+        z,
+        ...H,
+        ...J,
+        ...U
+      ]),
+      V()
+    ],
+    []
+  ), S = b((e) => {
+    d(e), i(null);
+  }, []);
+  return p(() => {
+    if (a === m.current)
+      return;
+    const e = window.setTimeout(() => {
+      h(a);
+    }, P);
+    return () => window.clearTimeout(e);
+  }, [a, h]), /* @__PURE__ */ n(
+    I,
     {
       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__ */ 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__ */ 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", children: /* @__PURE__ */ t(
+            k,
             {
               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",
+              onChange: S,
+              extensions: v,
+              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(
-              "button",
-              {
-                onClick: u,
-                disabled: !d,
-                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 })
+          /* @__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__ */ r(N, { mjmlSource: a, debounceMs: 300 })
+        /* @__PURE__ */ t(O, { mjmlSource: a, debounceMs: 300 })
       ]
     }
   );
 }
 export {
-  E as SourceEditor
+  le 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

@@ -70,9 +70,21 @@
 
   /* Block states */
   --block-hover: oklch(0.97 0.02 250);
-  --block-selected: oklch(0.40 0.15 250);
+  --block-selected: oklch(0.4 0.15 250);
   --block-selected-bg: oklch(0.96 0.02 250);
 
+  /* Source editor syntax colors */
+  --cm-tag: oklch(0.56 0.11 158);
+  --cm-attribute-name: oklch(0.53 0.11 78);
+  --cm-attribute-value: oklch(0.53 0.11 255);
+  --cm-punctuation: oklch(0.46 0.02 250);
+  --cm-comment: oklch(0.57 0.01 250);
+  --cm-invalid: oklch(0.56 0.2 25);
+  --cm-caret: oklch(0.48 0.14 250);
+  --cm-selection-bg: color-mix(in oklab, var(--ring) 24%, transparent);
+  --cm-selection-fg: var(--foreground);
+  --cm-active-line-bg: color-mix(in oklab, var(--ring) 12%, transparent);
+
   /* Chart colors */
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
@@ -92,10 +104,11 @@
 }
 
 /* Dark mode at root level (for Radix UI portals that render outside .mjml-editor) */
-:root.dark, .dark {
+:root.dark,
+.dark {
   --background: var(--color-zinc-950);
   --background-subtle: var(--color-zinc-900);
-  --canvas: oklch(0.10 0.005 250);
+  --canvas: oklch(0.1 0.005 250);
   --surface: var(--color-zinc-800);
   --foreground: var(--color-zinc-50);
   --foreground-muted: var(--color-zinc-400);
@@ -115,22 +128,32 @@
   --border: var(--color-zinc-700);
   --border-subtle: var(--color-zinc-800);
   --border-strong: var(--color-zinc-600);
-  --ring: oklch(0.60 0.15 250);
+  --ring: oklch(0.6 0.15 250);
   --selection: oklch(0.25 0.06 250);
   --selection-foreground: oklch(0.75 0.12 250);
   --input: var(--color-zinc-800);
-  --destructive: oklch(0.60 0.22 25);
+  --destructive: oklch(0.6 0.22 25);
   --inspector: var(--color-zinc-950);
   --inspector-header: var(--color-zinc-900);
   --toolbar: var(--color-zinc-950);
   --toolbar-border: var(--color-zinc-800);
-  --block-hover: oklch(0.20 0.03 250);
-  --block-selected: oklch(0.50 0.15 250);
+  --block-hover: oklch(0.2 0.03 250);
+  --block-selected: oklch(0.5 0.15 250);
   --block-selected-bg: oklch(0.22 0.04 250);
-  --chart-1: oklch(0.70 0.20 41);
+  --cm-tag: oklch(0.78 0.11 158);
+  --cm-attribute-name: oklch(0.81 0.1 80);
+  --cm-attribute-value: oklch(0.79 0.11 255);
+  --cm-punctuation: oklch(0.72 0.02 250);
+  --cm-comment: oklch(0.64 0.01 250);
+  --cm-invalid: oklch(0.72 0.17 25);
+  --cm-caret: oklch(0.82 0.11 250);
+  --cm-selection-bg: color-mix(in oklab, var(--ring) 44%, transparent);
+  --cm-selection-fg: var(--foreground);
+  --cm-active-line-bg: color-mix(in oklab, var(--ring) 24%, transparent);
+  --chart-1: oklch(0.7 0.2 41);
   --chart-2: oklch(0.65 0.12 185);
-  --chart-3: oklch(0.50 0.08 227);
-  --chart-4: oklch(0.80 0.17 84);
+  --chart-3: oklch(0.5 0.08 227);
+  --chart-4: oklch(0.8 0.17 84);
   --chart-5: oklch(0.75 0.17 70);
   --sidebar: var(--color-zinc-950);
   --sidebar-foreground: var(--color-zinc-50);
@@ -139,7 +162,7 @@
   --sidebar-accent: var(--color-zinc-800);
   --sidebar-accent-foreground: var(--color-zinc-200);
   --sidebar-border: var(--color-zinc-800);
-  --sidebar-ring: oklch(0.60 0.15 250);
+  --sidebar-ring: oklch(0.6 0.15 250);
 }
 
 /* Scoped CSS variable defaults - applied to .mjml-editor container */
@@ -203,9 +226,21 @@
 
   /* Block states */
   --block-hover: oklch(0.97 0.02 250);
-  --block-selected: oklch(0.40 0.15 250);
+  --block-selected: oklch(0.4 0.15 250);
   --block-selected-bg: oklch(0.96 0.02 250);
 
+  /* Source editor syntax colors */
+  --cm-tag: oklch(0.56 0.11 158);
+  --cm-attribute-name: oklch(0.53 0.11 78);
+  --cm-attribute-value: oklch(0.53 0.11 255);
+  --cm-punctuation: oklch(0.46 0.02 250);
+  --cm-comment: oklch(0.57 0.01 250);
+  --cm-invalid: oklch(0.56 0.2 25);
+  --cm-caret: oklch(0.48 0.14 250);
+  --cm-selection-bg: color-mix(in oklab, var(--ring) 24%, transparent);
+  --cm-selection-fg: var(--foreground);
+  --cm-active-line-bg: color-mix(in oklab, var(--ring) 12%, transparent);
+
   /* Chart colors */
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
@@ -230,7 +265,7 @@
   /* Core backgrounds */
   --background: var(--color-zinc-950);
   --background-subtle: var(--color-zinc-900);
-  --canvas: oklch(0.10 0.005 250);
+  --canvas: oklch(0.1 0.005 250);
   --surface: var(--color-zinc-800);
 
   /* Foregrounds */
@@ -266,13 +301,13 @@
   --border-strong: var(--color-zinc-600);
 
   /* Focus/Selection */
-  --ring: oklch(0.60 0.15 250);
+  --ring: oklch(0.6 0.15 250);
   --selection: oklch(0.25 0.06 250);
   --selection-foreground: oklch(0.75 0.12 250);
   --input: var(--color-zinc-800);
 
   /* Destructive */
-  --destructive: oklch(0.60 0.22 25);
+  --destructive: oklch(0.6 0.22 25);
 
   /* Inspector */
   --inspector: var(--color-zinc-950);
@@ -283,15 +318,27 @@
   --toolbar-border: var(--color-zinc-800);
 
   /* Block states */
-  --block-hover: oklch(0.20 0.03 250);
-  --block-selected: oklch(0.50 0.15 250);
+  --block-hover: oklch(0.2 0.03 250);
+  --block-selected: oklch(0.5 0.15 250);
   --block-selected-bg: oklch(0.22 0.04 250);
 
+  /* Source editor syntax colors */
+  --cm-tag: oklch(0.78 0.11 158);
+  --cm-attribute-name: oklch(0.81 0.1 80);
+  --cm-attribute-value: oklch(0.79 0.11 255);
+  --cm-punctuation: oklch(0.72 0.02 250);
+  --cm-comment: oklch(0.64 0.01 250);
+  --cm-invalid: oklch(0.72 0.17 25);
+  --cm-caret: oklch(0.82 0.11 250);
+  --cm-selection-bg: color-mix(in oklab, var(--ring) 44%, transparent);
+  --cm-selection-fg: var(--foreground);
+  --cm-active-line-bg: color-mix(in oklab, var(--ring) 24%, transparent);
+
   /* Chart colors - adjusted for dark bg */
-  --chart-1: oklch(0.70 0.20 41);
+  --chart-1: oklch(0.7 0.2 41);
   --chart-2: oklch(0.65 0.12 185);
-  --chart-3: oklch(0.50 0.08 227);
-  --chart-4: oklch(0.80 0.17 84);
+  --chart-3: oklch(0.5 0.08 227);
+  --chart-4: oklch(0.8 0.17 84);
   --chart-5: oklch(0.75 0.17 70);
 
   /* Sidebar */
@@ -302,7 +349,7 @@
   --sidebar-accent: var(--color-zinc-800);
   --sidebar-accent-foreground: var(--color-zinc-200);
   --sidebar-border: var(--color-zinc-800);
-  --sidebar-ring: oklch(0.60 0.15 250);
+  --sidebar-ring: oklch(0.6 0.15 250);
 }
 
 /* Force light mode within .light scope (e.g., email canvas preview) */
@@ -336,10 +383,87 @@
   --input: var(--color-zinc-300);
   --destructive: oklch(0.55 0.22 25);
   --block-hover: oklch(0.97 0.02 250);
-  --block-selected: oklch(0.40 0.15 250);
+  --block-selected: oklch(0.4 0.15 250);
   --block-selected-bg: oklch(0.96 0.02 250);
 }
 
+/* Source editor (CodeMirror) */
+.mjml-editor .source-editor .cm-editor {
+  height: 100%;
+  background: color-mix(in oklab, var(--muted) 78%, var(--background) 22%);
+  color: var(--foreground);
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.mjml-editor .source-editor .cm-scroller {
+  font-family: inherit;
+  line-height: inherit;
+}
+
+.mjml-editor .source-editor .cm-content,
+.mjml-editor .source-editor .cm-gutterElement {
+  font-family: inherit;
+  font-size: inherit;
+  letter-spacing: normal;
+  font-variant-ligatures: none;
+}
+
+.mjml-editor .source-editor .cm-content {
+  caret-color: var(--cm-caret);
+}
+
+.mjml-editor .source-editor .cm-line {
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+.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: var(--cm-active-line-bg);
+}
+
+.mjml-editor .source-editor .cm-selectionBackground,
+.mjml-editor .source-editor .cm-content ::selection {
+  background: var(--cm-selection-bg);
+}
+
+.mjml-editor .source-editor .cm-content ::selection {
+  color: var(--cm-selection-fg);
+}
+
+.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,
+.mjml-editor .source-editor .cm-dropCursor {
+  border-left-color: var(--cm-caret) !important;
+}
+
 /* 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.6.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",