@savvycal/mjml-editor 0.0.3 → 0.1.0

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

@@ -16,7 +16,22 @@ interface MjmlEditorProps {
      * @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, applyThemeToDocument, }: 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;IAC5B;;;;;;;;;OASG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAuJD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,YAAuB,EACvB,YAAY,EACZ,oBAA2B,GAC5B,EAAE,eAAe,2CAuCjB"}
+{"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,137 +1,154 @@
-import { jsx as t, jsxs as T, Fragment as I } from "react/jsx-runtime";
-import { useState as d, useEffect as c, useCallback as b, useRef as P } from "react";
-import { EditorProvider as L, useEditor as D } from "../../context/EditorContext.js";
-import { ThemeProvider as M, useTheme as O } from "../../context/ThemeContext.js";
-import { LiquidSchemaProvider as j } from "../../context/LiquidSchemaContext.js";
-import { OutlineTree as x, GLOBAL_STYLES_ID as y } from "./OutlineTree.js";
-import { EditorCanvas as C } from "./EditorCanvas.js";
-import { BlockInspector as S } from "./BlockInspector.js";
-import { GlobalStylesPanel as K } from "./GlobalStylesPanel.js";
-import { FloatingPanel as E } from "../ui/floating-panel.js";
-import { createEmptyDocument as w, parseMjml as R, serializeMjml as A } from "../../lib/mjml/parser.js";
-function F(n) {
+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 w();
+    return b();
   try {
-    return R(n);
-  } catch (e) {
-    return console.error("Failed to parse MJML:", e), w();
+    return N(n);
+  } catch (o) {
+    return console.error("Failed to parse MJML:", o), b();
   }
 }
-function N({
+function G({
   className: n,
-  children: e
+  children: o
 }) {
-  const { resolvedTheme: o } = O();
-  return /* @__PURE__ */ t(
+  const { resolvedTheme: l } = C();
+  return /* @__PURE__ */ e(
     "div",
     {
-      className: `mjml-editor ${o} relative h-full w-full overflow-hidden bg-background text-foreground antialiased ${n || ""}`,
-      children: e
+      className: `mjml-editor ${l} relative h-full w-full overflow-hidden bg-background text-foreground antialiased ${n || ""}`,
+      children: o
     }
   );
 }
-function $({ onChange: n }) {
-  const { state: e, undo: o, redo: s, canUndo: a, canRedo: u, deleteBlock: m, selectBlock: f } = D(), [l, p] = d(!0), [i, h] = d(!0), [k, B] = d("edit"), v = P(n);
-  return c(() => {
-    v.current = n;
-  }, [n]), c(() => {
-    e.selectedBlockId && h(!0);
-  }, [e.selectedBlockId]), c(() => {
-    const g = A(e.document);
-    v.current(g);
-  }, [e.document]), c(() => {
-    const g = (r) => {
-      if (!(r.target instanceof HTMLInputElement || r.target instanceof HTMLTextAreaElement || r.target?.isContentEditable)) {
-        if ((r.metaKey || r.ctrlKey) && r.key === "z") {
-          r.preventDefault(), r.shiftKey ? u && s() : a && 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 ? m && u() : f && d();
           return;
         }
-        if ((r.key === "Delete" || r.key === "Backspace") && e.selectedBlockId && e.selectedBlockId !== y) {
-          r.preventDefault(), m(e.selectedBlockId);
+        if ((t.key === "Delete" || t.key === "Backspace") && r.selectedBlockId && r.selectedBlockId !== B) {
+          t.preventDefault(), p(r.selectedBlockId);
           return;
         }
-        if (r.key === "Escape" && e.selectedBlockId) {
-          r.preventDefault(), f(null);
+        if (t.key === "Escape" && r.selectedBlockId) {
+          t.preventDefault(), h(null);
           return;
         }
       }
     };
-    return window.addEventListener("keydown", g), () => window.removeEventListener("keydown", g);
+    return window.addEventListener("keydown", v), () => window.removeEventListener("keydown", v);
   }, [
-    o,
-    s,
-    a,
+    d,
     u,
-    m,
     f,
-    e.selectedBlockId
-  ]), /* @__PURE__ */ T("div", { className: "relative h-full overflow-hidden", children: [
-    /* @__PURE__ */ t("div", { className: "absolute inset-0 bg-canvas", children: /* @__PURE__ */ t(
-      C,
+    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: l,
-        rightPanelOpen: i
+        activeTab: y,
+        onTabChange: P,
+        leftPanelOpen: i,
+        rightPanelOpen: s,
+        showThemeToggle: o
       }
     ) }),
-    k === "edit" && /* @__PURE__ */ T(I, { children: [
-      /* @__PURE__ */ t(
-        E,
+    y === "edit" && /* @__PURE__ */ w(L, { children: [
+      /* @__PURE__ */ e(
+        I,
         {
           side: "left",
-          isOpen: l,
-          onToggle: () => p(!l),
+          isOpen: i,
+          onToggle: () => g(!i),
           width: 256,
-          children: /* @__PURE__ */ t(x, { onTogglePanel: () => p(!1) })
+          children: /* @__PURE__ */ e(K, { onTogglePanel: () => g(!1) })
         }
       ),
-      /* @__PURE__ */ t(
-        E,
+      /* @__PURE__ */ e(
+        I,
         {
           side: "right",
-          isOpen: i,
-          onToggle: () => h(!i),
+          isOpen: s,
+          onToggle: () => k(!s),
           width: 300,
-          children: e.selectedBlockId === y ? /* @__PURE__ */ t(
-            K,
+          children: r.selectedBlockId === B ? /* @__PURE__ */ e(
+            F,
             {
-              onTogglePanel: () => h(!1)
+              onTogglePanel: () => k(!1)
             }
-          ) : /* @__PURE__ */ t(S, { onTogglePanel: () => h(!1) })
+          ) : /* @__PURE__ */ e(A, { onTogglePanel: () => k(!1) })
         }
       )
     ] })
   ] });
 }
-function X({
+function te({
   value: n,
-  onChange: e,
-  className: o,
-  defaultTheme: s = "system",
-  liquidSchema: a,
-  applyThemeToDocument: u = !0
+  onChange: o,
+  className: l,
+  defaultTheme: T = "system",
+  liquidSchema: r,
+  applyThemeToDocument: d = !0,
+  showThemeToggle: u = !0,
+  defaultLeftPanelOpen: f = !0,
+  defaultRightPanelOpen: m = !1
 }) {
-  const [m, f] = d(!1);
-  c(() => {
-    f(!0);
+  const [p, h] = c(!1);
+  a(() => {
+    h(!0);
   }, []);
-  const [l] = d(() => F(n)), p = b(
-    (i) => {
-      e(i);
+  const [i] = c(() => z(n)), g = D(
+    (s) => {
+      o(s);
     },
-    [e]
+    [o]
   );
-  return m ? /* @__PURE__ */ t(
-    M,
+  return p ? /* @__PURE__ */ e(
+    x,
     {
-      defaultTheme: s,
-      applyToDocument: u,
-      children: /* @__PURE__ */ t(j, { schema: a, children: /* @__PURE__ */ t(N, { className: o, children: /* @__PURE__ */ t(L, { initialDocument: l, children: /* @__PURE__ */ t($, { onChange: p }) }) }) })
+      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__ */ t("div", { className: `h-full w-full bg-background ${o || ""}` });
+  ) : /* @__PURE__ */ e("div", { className: `h-full w-full bg-background ${l || ""}` });
 }
 export {
-  X as MjmlEditor
+  te as MjmlEditor
 };

package/package.json

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