@savvycal/mjml-editor 0.0.2 → 0.1.0

package/README.md

@@ -35,26 +35,41 @@ pnpm add @savvycal/mjml-editor
 
 ### Peer Dependencies
 
-This library requires React 18 or 19:
+This library requires React 18+ and Tailwind CSS v4:
 
 ```bash
-npm install react react-dom
+npm install react react-dom tailwindcss @tailwindcss/vite tw-animate-css
 ```
 
 ### Styles
 
-You must import the library's CSS in your application:
+This library is designed to work with Tailwind CSS v4. Instead of bundling all styles, the library exports CSS files that integrate with your app's Tailwind build, ensuring no style conflicts and minimal CSS overhead.
 
-```tsx
-import '@savvycal/mjml-editor/styles.css';
+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";
 ```
 
+**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
+
 ## Usage
 
 ```tsx
 import { useState } from 'react';
 import { MjmlEditor } from '@savvycal/mjml-editor';
-import '@savvycal/mjml-editor/styles.css';
 
 function App() {
   const [mjml, setMjml] = useState(initialMjml);
@@ -77,6 +92,7 @@ function App() {
 | `className` | `string` | Optional CSS class for the container |
 | `defaultTheme` | `'light' \| 'dark' \| 'system'` | Theme preference (default: `'system'`) |
 | `liquidSchema` | `LiquidSchema` | Optional schema for Liquid template autocomplete |
+| `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`) |
 
 ## Liquid Template Support
 
@@ -84,7 +100,6 @@ The editor provides autocomplete for Liquid template variables and tags. Pass a
 
 ```tsx
 import { MjmlEditor, type LiquidSchema } from '@savvycal/mjml-editor';
-import '@savvycal/mjml-editor/styles.css';
 
 const liquidSchema: LiquidSchema = {
   variables: [

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

@@ -5,7 +5,8 @@ interface EditorCanvasProps {
     onTabChange: (tab: EditorTabType) => void;
     leftPanelOpen?: boolean;
     rightPanelOpen?: boolean;
+    showThemeToggle?: boolean;
 }
-export declare function EditorCanvas({ activeTab, onTabChange, leftPanelOpen, rightPanelOpen, }: EditorCanvasProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditorCanvas({ activeTab, onTabChange, leftPanelOpen, rightPanelOpen, showThemeToggle, }: 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;CAC1B;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,WAAW,EACX,aAAa,EACb,cAAc,GACf,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;CAC3B;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,WAAW,EACX,aAAa,EACb,cAAc,EACd,eAAsB,GACvB,EAAE,iBAAiB,2CA0GnB"}

package/dist/components/editor/EditorCanvas.js

@@ -1,21 +1,22 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { useState as g } from "react";
-import { Monitor as x, Smartphone as v, Undo2 as N, Redo2 as b } from "lucide-react";
-import { VisualEditor as w } from "./VisualEditor.js";
-import { InteractivePreview as k } from "./InteractivePreview.js";
-import { SourceEditor as C } from "./SourceEditor.js";
-import { useEditor as y } from "../../context/EditorContext.js";
+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 { Button as i } from "../ui/button.js";
-import { Tabs as E, TabsList as S, TabsTrigger as s } from "../ui/tabs.js";
-import { ThemeToggle as M } from "../ui/theme-toggle.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 L({
+function q({
   activeTab: o,
   onTabChange: t,
   leftPanelOpen: a,
-  rightPanelOpen: l
+  rightPanelOpen: l,
+  showThemeToggle: c = !0
 }) {
-  const { undo: c, redo: m, canUndo: u, canRedo: h } = y(), [n, f] = g("desktop");
+  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: [
       /* @__PURE__ */ e(
@@ -52,18 +53,18 @@ function L({
         }
       ),
       o === "preview" && /* @__PURE__ */ e(
-        E,
+        S,
         {
           value: n,
-          onValueChange: (p) => f(p),
+          onValueChange: (g) => p(g),
           className: "absolute left-1/2 -translate-x-1/2",
-          children: /* @__PURE__ */ r(S, { className: "h-8", children: [
+          children: /* @__PURE__ */ r(M, { className: "h-8", children: [
             /* @__PURE__ */ r(s, { value: "desktop", className: "h-7 px-2 gap-1.5", children: [
-              /* @__PURE__ */ e(x, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ e(v, { 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(v, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ e(N, { className: "h-3.5 w-3.5" }),
               /* @__PURE__ */ e("span", { className: "hidden md:inline", children: "Mobile" })
             ] })
           ] })
@@ -76,11 +77,11 @@ function L({
           {
             variant: "ghost",
             size: "icon-sm",
-            onClick: c,
-            disabled: !u,
+            onClick: m,
+            disabled: !h,
             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(N, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ e(b, { className: "h-4 w-4" })
           }
         ),
         /* @__PURE__ */ e(
@@ -88,29 +89,29 @@ function L({
           {
             variant: "ghost",
             size: "icon-sm",
-            onClick: m,
-            disabled: !h,
+            onClick: u,
+            disabled: !f,
             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(b, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ e(w, { className: "h-4 w-4" })
           }
         ),
-        /* @__PURE__ */ e(M, {})
+        c && /* @__PURE__ */ e(P, {})
       ] })
     ] }),
     /* @__PURE__ */ r("div", { className: "flex-1 min-h-0 overflow-hidden", children: [
       o === "edit" && /* @__PURE__ */ e(
-        w,
+        k,
         {
           leftPanelOpen: a,
           rightPanelOpen: l
         }
       ),
-      o === "preview" && /* @__PURE__ */ e(k, { showHeader: !1, previewMode: n }),
-      o === "source" && /* @__PURE__ */ e(C, {})
+      o === "preview" && /* @__PURE__ */ e(C, { showHeader: !1, previewMode: n }),
+      o === "source" && /* @__PURE__ */ e(y, {})
     ] })
   ] });
 }
 export {
-  L as EditorCanvas
+  q as EditorCanvas
 };

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,2CAoKzB"}
+{"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,2CAkLzB"}

package/dist/components/editor/InteractivePreview.js

@@ -1,27 +1,37 @@
-import { jsxs as o, jsx as l } from "react/jsx-runtime";
-import { useRef as x, useState as v, useEffect as i, useMemo as k, useCallback as w } from "react";
-import { useEditor as E } from "../../context/EditorContext.js";
-import { renderMjmlInteractive as y } from "../../lib/mjml/renderer.js";
-const C = 375;
-function B({
-  showHeader: h = !0,
-  previewMode: p = "desktop"
+import { jsxs as r, jsx as s } from "react/jsx-runtime";
+import { useRef as w, useState as b, useEffect as c, 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"
 }) {
-  const { state: n, selectBlock: d } = E(), r = x(null), [m, g] = v(n.document);
-  i(() => {
+  const { state: n, selectBlock: d } = y(), o = w(null), [m, x] = b(n.document), [v, k] = b({
+    html: "",
+    errors: []
+  });
+  c(() => {
     const e = setTimeout(() => {
-      g(n.document);
+      x(n.document);
     }, 300);
     return () => clearTimeout(e);
-  }, [n.document]);
-  const { html: u, errors: s } = k(() => y(m), [m]), a = w(
+  }, [n.document]), c(() => {
+    let e = !1;
+    return C(m).then((t) => {
+      e || k(t);
+    }), () => {
+      e = !0;
+    };
+  }, [m]);
+  const { html: u, errors: l } = v, i = E(
     (e) => {
       e.data?.type === "BLOCK_SELECTED" && d(e.data.blockId);
     },
     [d]
   );
-  i(() => (window.addEventListener("message", a), () => window.removeEventListener("message", a)), [a]);
-  const c = n.selectedBlockId ? `.block-${n.selectedBlockId} { outline: 2px solid #6366f1 !important; outline-offset: -2px; position: relative; }` : "", f = `
+  c(() => (window.addEventListener("message", i), () => window.removeEventListener("message", i)), [i]);
+  const a = n.selectedBlockId ? `.block-${n.selectedBlockId} { outline: 2px solid #6366f1 !important; outline-offset: -2px; position: relative; }` : "", f = `
     (function() {
       document.addEventListener('click', function(e) {
         e.preventDefault();
@@ -50,15 +60,15 @@ function B({
       }, true);
     })();
   `;
-  return i(() => {
-    if (r.current) {
-      const e = r.current.contentDocument;
+  return c(() => {
+    if (o.current) {
+      const e = o.current.contentDocument;
       if (e) {
         e.open(), e.write(u), e.close();
         const t = e.createElement("script");
         t.textContent = f, e.body.appendChild(t);
-        const b = e.createElement("style");
-        b.textContent = `
+        const h = e.createElement("style");
+        h.textContent = `
           [class*="block-"] {
             cursor: pointer;
             transition: outline 0.15s ease;
@@ -67,44 +77,44 @@ function B({
             outline: 1px dashed #94a3b8 !important;
             outline-offset: -1px;
           }
-          ${c}
-        `, e.head.appendChild(b);
+          ${a}
+        `, e.head.appendChild(h);
       }
     }
-  }, [u, c, f]), i(() => {
-    if (r.current) {
-      const e = r.current.contentDocument;
+  }, [u, a, f]), c(() => {
+    if (o.current) {
+      const e = o.current.contentDocument;
       if (e) {
         let t = e.getElementById("selection-highlight");
-        t || (t = e.createElement("style"), t.id = "selection-highlight", e.head.appendChild(t)), t.textContent = c;
+        t || (t = e.createElement("style"), t.id = "selection-highlight", e.head.appendChild(t)), t.textContent = a;
       }
     }
-  }, [n.selectedBlockId, c]), /* @__PURE__ */ o("div", { className: "flex flex-col h-full", children: [
-    h && /* @__PURE__ */ o("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__ */ o("span", { className: "text-xs font-medium text-amber-600 bg-amber-50 px-2 py-0.5 rounded-md", children: [
-        s.length,
+  }, [n.selectedBlockId, a]), /* @__PURE__ */ r("div", { className: "flex flex-col h-full", children: [
+    p && /* @__PURE__ */ r("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__ */ r("span", { className: "text-xs font-medium text-amber-600 bg-amber-50 px-2 py-0.5 rounded-md", children: [
+        l.length,
         " warning",
-        s.length !== 1 ? "s" : ""
+        l.length !== 1 ? "s" : ""
       ] })
     ] }),
-    /* @__PURE__ */ l("div", { className: "flex-1 overflow-auto bg-muted flex justify-center", children: /* @__PURE__ */ l(
+    /* @__PURE__ */ s("div", { className: "flex-1 overflow-auto bg-muted flex justify-center", children: /* @__PURE__ */ s(
       "iframe",
       {
-        ref: r,
+        ref: o,
         title: "Email Preview",
         className: "h-full border-0 bg-white transition-all duration-200",
         style: {
-          width: p === "mobile" ? C : "100%",
+          width: g === "mobile" ? I : "100%",
           maxWidth: "100%"
         },
         sandbox: "allow-same-origin allow-scripts"
       }
     ) }),
-    s.length > 0 && /* @__PURE__ */ o("div", { className: "max-h-28 overflow-auto border-t border-border bg-amber-50/50 p-3", children: [
-      /* @__PURE__ */ l("div", { className: "text-xs font-semibold text-amber-700 mb-2", children: "Warnings" }),
-      /* @__PURE__ */ l("div", { className: "space-y-1", children: s.map((e, t) => /* @__PURE__ */ o("div", { className: "text-xs text-amber-600", children: [
-        /* @__PURE__ */ o("span", { className: "font-mono", children: [
+    l.length > 0 && /* @__PURE__ */ r("div", { className: "max-h-28 overflow-auto border-t border-border bg-amber-50/50 p-3", children: [
+      /* @__PURE__ */ s("div", { className: "text-xs font-semibold text-amber-700 mb-2", children: "Warnings" }),
+      /* @__PURE__ */ s("div", { className: "space-y-1", children: l.map((e, t) => /* @__PURE__ */ r("div", { className: "text-xs text-amber-600", children: [
+        /* @__PURE__ */ r("span", { className: "font-mono", children: [
           "Line ",
           e.line,
           ":"
@@ -116,5 +126,5 @@ function B({
   ] });
 }
 export {
-  B as InteractivePreview
+  S as InteractivePreview
 };

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

@@ -5,7 +5,33 @@ interface MjmlEditorProps {
     className?: string;
     defaultTheme?: 'light' | 'dark' | 'system';
     liquidSchema?: LiquidSchema;
+    /**
+     * Whether to apply the theme class to document.documentElement.
+     * This is needed for Radix UI portals (popovers, menus, etc.) which
+     * render outside the editor container.
+     *
+     * Set to false if your app manages document-level theme classes
+     * and you want to prevent conflicts.
+     *
+     * @default true
+     */
+    applyThemeToDocument?: boolean;
+    /**
+     * Whether to show the theme toggle in the toolbar.
+     * @default true
+     */
+    showThemeToggle?: boolean;
+    /**
+     * Whether the tree panel (left) is open by default.
+     * @default true
+     */
+    defaultLeftPanelOpen?: boolean;
+    /**
+     * Whether the inspector panel (right) is open by default.
+     * @default false
+     */
+    defaultRightPanelOpen?: boolean;
 }
-export declare function MjmlEditor({ value, onChange, className, defaultTheme, liquidSchema, }: MjmlEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function MjmlEditor({ value, onChange, className, defaultTheme, liquidSchema, 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,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;CAC7B;AA4HD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,YAAuB,EACvB,YAAY,GACb,EAAE,eAAe,2CAuBjB"}
+{"version":3,"file":"MjmlEditor.d.ts","sourceRoot":"","sources":["../../../src/components/editor/MjmlEditor.tsx"],"names":[],"mappings":"AAeA,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;;;;;;;;;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,oBAA2B,EAC3B,eAAsB,EACtB,oBAA2B,EAC3B,qBAA6B,GAC9B,EAAE,eAAe,2CA4CjB"}

package/dist/components/editor/MjmlEditor.js

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

package/dist/components/editor/SourceEditor.js

@@ -42,7 +42,7 @@ function E() {
             {
               value: a,
               onChange: (e) => f(e.target.value),
-              className: "w-full h-full p-4 font-mono text-sm bg-muted border border-border rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-ring",
+              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",
               spellCheck: !1
             }
           ) }),

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

@@ -1 +1 @@
-{"version":3,"file":"SourcePreview.d.ts","sourceRoot":"","sources":["../../../src/components/editor/SourcePreview.tsx"],"names":[],"mappings":"AAGA,UAAU,kBAAkB;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,UAAgB,GACjB,EAAE,kBAAkB,2CAkEpB"}
+{"version":3,"file":"SourcePreview.d.ts","sourceRoot":"","sources":["../../../src/components/editor/SourcePreview.tsx"],"names":[],"mappings":"AAGA,UAAU,kBAAkB;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,UAAgB,GACjB,EAAE,kBAAkB,2CAkFpB"}