@savvycal/mjml-editor 0.0.1 → 0.0.2

package/dist/components/editor/OutlineTree.js

@@ -0,0 +1,282 @@
+import { jsxs as s, jsx as e, Fragment as H } from "react/jsx-runtime";
+import { useRef as j, useState as _, useEffect as L } from "react";
+import { Tree as G } from "react-arborist";
+import { PanelLeftClose as V, Plus as I, Palette as F, Mail as W, ChevronDown as Y, ChevronRight as y, GripVertical as q, Columns as P, Trash2 as J, MoveVertical as S, Minus as T, MousePointerClick as A, Image as D, Type as z } from "lucide-react";
+import { useEditor as M } from "../../context/EditorContext.js";
+import { Button as d } from "../ui/button.js";
+import { Popover as K, PopoverTrigger as Q, PopoverContent as U } from "../ui/popover.js";
+import { contentBlockTypes as X } from "../../lib/mjml/schema.js";
+import { cn as m } from "../../lib/utils.js";
+const C = "__global_styles__", Z = {
+  "mj-section": /* @__PURE__ */ e("div", { className: "w-4 h-4 border border-current rounded-sm" }),
+  "mj-column": /* @__PURE__ */ e(P, { className: "h-4 w-4" }),
+  "mj-text": /* @__PURE__ */ e(z, { className: "h-4 w-4" }),
+  "mj-image": /* @__PURE__ */ e(D, { className: "h-4 w-4" }),
+  "mj-button": /* @__PURE__ */ e(A, { className: "h-4 w-4" }),
+  "mj-divider": /* @__PURE__ */ e(T, { className: "h-4 w-4" }),
+  "mj-spacer": /* @__PURE__ */ e(S, { className: "h-4 w-4" })
+}, $ = {
+  "mj-text": /* @__PURE__ */ e(z, { className: "h-4 w-4" }),
+  "mj-image": /* @__PURE__ */ e(D, { className: "h-4 w-4" }),
+  "mj-button": /* @__PURE__ */ e(A, { className: "h-4 w-4" }),
+  "mj-divider": /* @__PURE__ */ e(T, { className: "h-4 w-4" }),
+  "mj-spacer": /* @__PURE__ */ e(S, { className: "h-4 w-4" })
+};
+function ee(t) {
+  return {
+    "mj-section": "Section",
+    "mj-column": "Column",
+    "mj-text": "Text",
+    "mj-image": "Image",
+    "mj-button": "Button",
+    "mj-divider": "Divider",
+    "mj-spacer": "Spacer",
+    "mj-wrapper": "Wrapper",
+    "mj-group": "Group",
+    "mj-hero": "Hero",
+    "mj-navbar": "Navbar",
+    "mj-social": "Social",
+    "mj-raw": "Raw HTML"
+  }[t] || t.replace("mj-", "").replace(/-/g, " ");
+}
+function te(t) {
+  return [
+    "mj-section",
+    "mj-column",
+    "mj-wrapper",
+    "mj-group",
+    "mj-hero"
+  ].includes(t);
+}
+function k(t) {
+  return t === "mj-column";
+}
+function B(t) {
+  return t === "mj-section" || t === "mj-group";
+}
+function oe({ node: t, style: c, dragHandle: f }) {
+  const { state: x, selectBlock: u, deleteBlock: N, addBlock: p, addColumn: v } = M(), [w, a] = _(!1), o = t.data, b = x.selectedBlockId === o._id, r = t.children && t.children.length > 0, l = te(o.tagName), h = (n) => {
+    n.stopPropagation(), t.select(), u(o._id);
+  }, i = (n) => {
+    n.stopPropagation(), N(o._id);
+  }, g = (n) => {
+    n.stopPropagation(), t.toggle();
+  }, O = (n) => {
+    const E = o.children?.length || 0;
+    p(o._id, E, n), a(!1);
+  }, R = () => {
+    v(o._id), a(!1);
+  };
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      style: c,
+      className: m(
+        "group flex items-center h-8 pr-2 cursor-pointer",
+        "hover:bg-accent/50 transition-colors",
+        b && "bg-accent",
+        t.state.isDragging && "opacity-50"
+      ),
+      onClick: h,
+      children: [
+        l ? /* @__PURE__ */ e(
+          "button",
+          {
+            className: m(
+              "flex items-center justify-center w-5 h-5",
+              "text-foreground-muted hover:text-foreground transition-colors"
+            ),
+            onClick: g,
+            children: r ? t.isOpen ? /* @__PURE__ */ e(Y, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ e(y, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ e(y, { className: "h-3.5 w-3.5 opacity-30" })
+          }
+        ) : /* @__PURE__ */ e("div", { className: "w-5" }),
+        /* @__PURE__ */ e("div", { className: "flex items-center justify-center w-5 h-5 text-foreground-muted", children: Z[o.tagName] || /* @__PURE__ */ e("div", { className: "w-3 h-3 bg-foreground-muted rounded-sm" }) }),
+        /* @__PURE__ */ e("span", { className: "flex-1 ml-2 text-sm truncate text-foreground", children: ee(o.tagName) }),
+        /* @__PURE__ */ s(
+          "div",
+          {
+            className: m(
+              "flex items-center gap-0.5",
+              "opacity-0 group-hover:opacity-100 transition-opacity"
+            ),
+            children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  ref: f,
+                  className: m(
+                    "flex items-center justify-center w-6 h-6 cursor-grab rounded-md",
+                    "text-foreground-muted hover:text-foreground hover:bg-accent/50"
+                  ),
+                  children: /* @__PURE__ */ e(q, { className: "h-3.5 w-3.5" })
+                }
+              ),
+              (k(o.tagName) || B(o.tagName)) && /* @__PURE__ */ s(K, { open: w, onOpenChange: a, children: [
+                /* @__PURE__ */ e(Q, { asChild: !0, children: /* @__PURE__ */ e(
+                  d,
+                  {
+                    variant: "ghost",
+                    size: "icon-sm",
+                    className: "h-6 w-6 text-foreground-muted hover:text-foreground",
+                    onClick: (n) => n.stopPropagation(),
+                    children: /* @__PURE__ */ e(I, { className: "h-3.5 w-3.5" })
+                  }
+                ) }),
+                /* @__PURE__ */ s(
+                  U,
+                  {
+                    className: "w-48 p-1.5 shadow-framer-lg",
+                    align: "start",
+                    onClick: (n) => n.stopPropagation(),
+                    children: [
+                      B(o.tagName) && /* @__PURE__ */ s(
+                        d,
+                        {
+                          variant: "ghost",
+                          size: "sm",
+                          className: "w-full justify-start gap-3 h-8 px-3 text-sm font-normal hover:bg-accent",
+                          onClick: R,
+                          children: [
+                            /* @__PURE__ */ e(P, { className: "h-4 w-4 text-foreground-muted" }),
+                            "Column"
+                          ]
+                        }
+                      ),
+                      k(o.tagName) && /* @__PURE__ */ e(H, { children: X.map((n) => /* @__PURE__ */ s(
+                        d,
+                        {
+                          variant: "ghost",
+                          size: "sm",
+                          className: "w-full justify-start gap-3 h-8 px-3 text-sm font-normal hover:bg-accent",
+                          onClick: () => O(n.type),
+                          children: [
+                            /* @__PURE__ */ e("span", { className: "text-foreground-muted", children: $[n.type] }),
+                            n.label
+                          ]
+                        },
+                        n.type
+                      )) })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e(
+                d,
+                {
+                  variant: "ghost",
+                  size: "icon-sm",
+                  className: "h-6 w-6 text-foreground-muted hover:text-destructive",
+                  onClick: i,
+                  children: /* @__PURE__ */ e(J, { className: "h-3.5 w-3.5" })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function he({ onTogglePanel: t }) {
+  const { state: c, moveBlock: f, addSection: x, selectBlock: u } = M(), N = j(null), p = j(null), [v, w] = _(400);
+  L(() => {
+    const r = p.current;
+    if (!r) return;
+    const l = new ResizeObserver((h) => {
+      for (const i of h)
+        w(i.contentRect.height);
+    });
+    return l.observe(r), () => l.disconnect();
+  }, []);
+  const a = c.document.children?.find((r) => r.tagName === "mj-body"), o = a?.children || [], b = ({
+    dragIds: r,
+    parentId: l,
+    index: h
+  }) => {
+    const i = r[0], g = l || a?._id;
+    i && g && f(i, g, h);
+  };
+  return /* @__PURE__ */ s("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ s("div", { className: "flex items-center justify-between h-11 px-3 border-b border-border bg-background", children: [
+      /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-foreground", children: "Email Structure" }),
+      t && /* @__PURE__ */ e(
+        d,
+        {
+          variant: "ghost",
+          size: "icon-sm",
+          onClick: t,
+          className: "h-7 w-7 rounded-md text-foreground-muted hover:text-foreground hover:bg-accent",
+          title: "Collapse panel",
+          children: /* @__PURE__ */ e(V, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "px-3 py-2 border-b border-border", children: /* @__PURE__ */ s(
+      d,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: x,
+        className: "w-full h-8 gap-1.5 text-xs font-medium",
+        children: [
+          /* @__PURE__ */ e(I, { className: "h-3.5 w-3.5" }),
+          "Add Section"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ s("div", { className: "px-3 py-1 border-b border-border space-y-0.5", children: [
+      /* @__PURE__ */ s(
+        "button",
+        {
+          onClick: () => u(C),
+          className: m(
+            "flex items-center gap-2 w-full h-8 px-2 rounded-md text-sm",
+            "hover:bg-accent/50 transition-colors",
+            c.selectedBlockId === C && "bg-accent"
+          ),
+          children: [
+            /* @__PURE__ */ e(F, { className: "h-4 w-4 text-foreground-muted" }),
+            /* @__PURE__ */ e("span", { className: "text-foreground", children: "Global Styles" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ s(
+        "button",
+        {
+          onClick: () => u(a?._id || null),
+          className: m(
+            "flex items-center gap-2 w-full h-8 px-2 rounded-md text-sm",
+            "hover:bg-accent/50 transition-colors",
+            c.selectedBlockId === a?._id && "bg-accent"
+          ),
+          children: [
+            /* @__PURE__ */ e(W, { className: "h-4 w-4 text-foreground-muted" }),
+            /* @__PURE__ */ e("span", { className: "text-foreground", children: "Body" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { ref: p, className: "flex-1 min-h-0", children: o.length > 0 ? /* @__PURE__ */ e(
+      G,
+      {
+        ref: N,
+        data: o,
+        idAccessor: (r) => r._id,
+        childrenAccessor: (r) => r.children || null,
+        openByDefault: !0,
+        width: "100%",
+        height: v,
+        indent: 16,
+        rowHeight: 32,
+        paddingTop: 8,
+        paddingBottom: 8,
+        onMove: b,
+        children: oe
+      }
+    ) : /* @__PURE__ */ e("div", { className: "flex-1 px-3 py-8 text-center text-sm text-muted-foreground", children: "No content yet" }) })
+  ] });
+}
+export {
+  C as GLOBAL_STYLES_ID,
+  he as OutlineTree
+};

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

@@ -0,0 +1,2 @@
+export declare function SourceEditor(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SourceEditor.d.ts.map

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

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

package/dist/components/editor/SourceEditor.js

@@ -0,0 +1,70 @@
+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 = () => {
+    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");
+    }
+  }, f = (e) => {
+    i(e), l(!0), t(null);
+  };
+  return /* @__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__ */ r("div", { className: "flex-1 min-h-0 p-4", children: /* @__PURE__ */ r(
+            "textarea",
+            {
+              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",
+              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__ */ r(N, { mjmlSource: a, debounceMs: 300 })
+      ]
+    }
+  );
+}
+export {
+  E as SourceEditor
+};

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

@@ -0,0 +1,7 @@
+interface SourcePreviewProps {
+    mjmlSource: string;
+    debounceMs?: number;
+}
+export declare function SourcePreview({ mjmlSource, debounceMs, }: SourcePreviewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SourcePreview.d.ts.map

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

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

package/dist/components/editor/SourcePreview.js

@@ -0,0 +1,55 @@
+import { jsxs as r, jsx as n } from "react/jsx-runtime";
+import { useRef as f, useState as u, useEffect as m, useMemo as b } from "react";
+import { renderMjmlString as x } from "../../lib/mjml/renderer.js";
+function v({
+  mjmlSource: s,
+  debounceMs: i = 300
+}) {
+  const o = f(null), [l, c] = u(s);
+  m(() => {
+    const e = setTimeout(() => {
+      c(s);
+    }, i);
+    return () => clearTimeout(e);
+  }, [s, i]);
+  const { html: a, errors: t } = b(() => l.trim() ? x(l) : { html: "", errors: [] }, [l]);
+  return m(() => {
+    if (o.current) {
+      const e = o.current.contentDocument;
+      e && (e.open(), e.write(a), e.close());
+    }
+  }, [a]), /* @__PURE__ */ r("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ r("div", { className: "h-11 px-4 flex items-center justify-between border-b border-border bg-background", children: [
+      /* @__PURE__ */ n("span", { className: "text-sm font-semibold text-foreground", children: "Preview" }),
+      t.length > 0 && /* @__PURE__ */ r("span", { className: "text-xs font-medium text-amber-600 bg-amber-50 px-2 py-0.5 rounded-md", children: [
+        t.length,
+        " warning",
+        t.length !== 1 ? "s" : ""
+      ] })
+    ] }),
+    /* @__PURE__ */ n("div", { className: "flex-1 overflow-auto bg-muted", children: /* @__PURE__ */ n(
+      "iframe",
+      {
+        ref: o,
+        title: "Source Preview",
+        className: "w-full h-full border-0 bg-white",
+        sandbox: "allow-same-origin"
+      }
+    ) }),
+    t.length > 0 && /* @__PURE__ */ r("div", { className: "max-h-28 overflow-auto border-t border-border bg-amber-50/50 p-3", children: [
+      /* @__PURE__ */ n("div", { className: "text-xs font-semibold text-amber-700 mb-2", children: "Warnings" }),
+      /* @__PURE__ */ n("div", { className: "space-y-1", children: t.map((e, d) => /* @__PURE__ */ r("div", { className: "text-xs text-amber-600", children: [
+        /* @__PURE__ */ r("span", { className: "font-mono", children: [
+          "Line ",
+          e.line,
+          ":"
+        ] }),
+        " ",
+        e.message
+      ] }, d)) })
+    ] })
+  ] });
+}
+export {
+  v as SourcePreview
+};

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

@@ -0,0 +1,12 @@
+interface TiptapEditorProps {
+    content: string;
+    onUpdate: (html: string) => void;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export interface TiptapEditorRef {
+    focus: () => void;
+}
+export declare const TiptapEditor: import('react').ForwardRefExoticComponent<TiptapEditorProps & import('react').RefAttributes<TiptapEditorRef>>;
+export {};
+//# sourceMappingURL=TiptapEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TiptapEditor.d.ts","sourceRoot":"","sources":["../../../src/components/editor/TiptapEditor.tsx"],"names":[],"mappings":"AAyCA,UAAU,iBAAiB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,+GAobxB,CAAC"}