@savvycal/mjml-editor 0.0.1 → 0.0.2

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

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

package/dist/components/editor/InteractivePreview.js

@@ -0,0 +1,120 @@
+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"
+}) {
+  const { state: n, selectBlock: d } = E(), r = x(null), [m, g] = v(n.document);
+  i(() => {
+    const e = setTimeout(() => {
+      g(n.document);
+    }, 300);
+    return () => clearTimeout(e);
+  }, [n.document]);
+  const { html: u, errors: s } = k(() => y(m), [m]), a = w(
+    (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 = `
+    (function() {
+      document.addEventListener('click', function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        // Find the closest element with a block- class
+        var target = e.target;
+        while (target && target !== document.body) {
+          var blockClass = Array.from(target.classList || []).find(function(c) {
+            return c.startsWith('block-');
+          });
+          if (blockClass) {
+            var blockId = blockClass.replace('block-', '');
+            window.parent.postMessage({ type: 'BLOCK_SELECTED', blockId: blockId }, '*');
+            return;
+          }
+          target = target.parentElement;
+        }
+      }, true);
+
+      // Prevent default link behavior
+      document.addEventListener('click', function(e) {
+        if (e.target.closest('a')) {
+          e.preventDefault();
+        }
+      }, true);
+    })();
+  `;
+  return i(() => {
+    if (r.current) {
+      const e = r.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 = `
+          [class*="block-"] {
+            cursor: pointer;
+            transition: outline 0.15s ease;
+          }
+          [class*="block-"]:hover {
+            outline: 1px dashed #94a3b8 !important;
+            outline-offset: -1px;
+          }
+          ${c}
+        `, e.head.appendChild(b);
+      }
+    }
+  }, [u, c, f]), i(() => {
+    if (r.current) {
+      const e = r.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;
+      }
+    }
+  }, [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,
+        " warning",
+        s.length !== 1 ? "s" : ""
+      ] })
+    ] }),
+    /* @__PURE__ */ l("div", { className: "flex-1 overflow-auto bg-muted flex justify-center", children: /* @__PURE__ */ l(
+      "iframe",
+      {
+        ref: r,
+        title: "Email Preview",
+        className: "h-full border-0 bg-white transition-all duration-200",
+        style: {
+          width: p === "mobile" ? C : "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: [
+          "Line ",
+          e.line,
+          ":"
+        ] }),
+        " ",
+        e.message
+      ] }, t)) })
+    ] })
+  ] });
+}
+export {
+  B as InteractivePreview
+};

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

@@ -0,0 +1,10 @@
+import { LiquidSuggestion } from '../../types/liquid';
+interface LiquidAutocompleteProps {
+    items: LiquidSuggestion[];
+    selectedIndex: number;
+    onSelect: (item: LiquidSuggestion) => void;
+    clientRect: (() => DOMRect | null) | null;
+}
+export declare function LiquidAutocomplete({ items, selectedIndex, onSelect, clientRect, }: LiquidAutocompleteProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=LiquidAutocomplete.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LiquidAutocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/editor/LiquidAutocomplete.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,UAAU,uBAAuB;IAC/B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC3C,UAAU,EAAE,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;CAC3C;AAED,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,aAAa,EACb,QAAQ,EACR,UAAU,GACX,EAAE,uBAAuB,2CAqFzB"}

package/dist/components/editor/LiquidAutocomplete.js

@@ -0,0 +1,70 @@
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import { useRef as l, useCallback as g, useLayoutEffect as b, useEffect as h } from "react";
+import { useFloating as x, autoUpdate as v, offset as w, flip as y, shift as N } from "@floating-ui/react";
+import { cn as E } from "../../lib/utils.js";
+function j({
+  items: s,
+  selectedIndex: r,
+  onSelect: d,
+  clientRect: n
+}) {
+  const a = l(null), m = l(null), f = l(null), { refs: t, floatingStyles: c } = x({
+    placement: "bottom-start",
+    middleware: [w(4), y(), N({ padding: 8 })],
+    whileElementsMounted: v
+  }), u = g(
+    (e) => {
+      m.current = e, t.setFloating(e);
+    },
+    [t]
+  );
+  return b(() => {
+    if (n) {
+      const e = n();
+      e && (f.current = {
+        getBoundingClientRect: () => e
+      }, t.setReference(f.current));
+    }
+  }, [n, t]), h(() => {
+    a.current?.scrollIntoView({
+      block: "nearest"
+    });
+  }, [r]), s.length === 0 ? /* @__PURE__ */ o(
+    "div",
+    {
+      ref: u,
+      style: c,
+      className: "light z-50 rounded-lg border border-border bg-popover p-2 shadow-lg text-sm text-muted-foreground",
+      children: "No matches found"
+    }
+  ) : /* @__PURE__ */ o(
+    "div",
+    {
+      ref: u,
+      style: c,
+      className: "light z-50 flex flex-col rounded-lg border border-border bg-popover shadow-lg max-h-64 overflow-y-auto",
+      onMouseDown: (e) => e.preventDefault(),
+      children: s.map((e, i) => /* @__PURE__ */ p(
+        "button",
+        {
+          ref: i === r ? a : null,
+          type: "button",
+          onClick: () => d(e),
+          className: E(
+            "flex flex-col items-start px-3 py-2 text-left text-sm transition-colors",
+            "hover:bg-accent",
+            i === r && "bg-accent"
+          ),
+          children: [
+            /* @__PURE__ */ o("span", { className: "font-medium text-foreground", children: e.name }),
+            e.description && /* @__PURE__ */ o("span", { className: "text-xs text-muted-foreground", children: e.description })
+          ]
+        },
+        e.id
+      ))
+    }
+  );
+}
+export {
+  j as LiquidAutocomplete
+};

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

@@ -0,0 +1,12 @@
+interface LiquidInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    value: string;
+    onChange: (value: string) => void;
+}
+export interface LiquidInputRef {
+    focus: () => void;
+    select: () => void;
+    blur: () => void;
+}
+export declare const LiquidInput: import('react').ForwardRefExoticComponent<LiquidInputProps & import('react').RefAttributes<LiquidInputRef>>;
+export {};
+//# sourceMappingURL=LiquidInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LiquidInput.d.ts","sourceRoot":"","sources":["../../../src/components/editor/LiquidInput.tsx"],"names":[],"mappings":"AAoBA,UAAU,gBAAiB,SAAQ,IAAI,CACrC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,UAAU,CACX;IACC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,eAAO,MAAM,WAAW,6GAsQvB,CAAC"}

package/dist/components/editor/LiquidInput.js

@@ -0,0 +1,185 @@
+import { jsxs as I, Fragment as $, jsx as p } from "react/jsx-runtime";
+import { forwardRef as F, useRef as L, useState as T, useCallback as c, useImperativeHandle as B, useEffect as E } from "react";
+import { useFloating as K, autoUpdate as N, offset as j, flip as z, shift as A } from "@floating-ui/react";
+import { cn as O } from "../../lib/utils.js";
+import { useLiquidSchema as P } from "../../context/LiquidSchemaContext.js";
+const W = F(
+  function({ value: d, onChange: g, className: S, style: v, ...i }, D) {
+    const o = L(null), h = P(), [n, s] = T(null), { refs: x, floatingStyles: k } = K({
+      placement: "bottom-start",
+      middleware: [j(4), z(), A({ padding: 8 })],
+      whileElementsMounted: N
+    }), q = c(
+      (e) => {
+        x.setFloating(e);
+      },
+      [x]
+    );
+    B(D, () => ({
+      focus: () => o.current?.focus(),
+      select: () => o.current?.select(),
+      blur: () => o.current?.blur()
+    }));
+    const y = c(
+      (e, t) => {
+        if (!h) return [];
+        const l = e === "variable" ? h.variables : h.tags, u = t.trim().toLowerCase();
+        return l.filter((r) => r.name.toLowerCase().includes(u)).map((r) => ({
+          id: `${e}-${r.name}`,
+          name: r.name,
+          description: r.description,
+          type: e
+        }));
+      },
+      [h]
+    ), w = c(
+      (e, t) => {
+        const l = e.slice(0, t), u = l.match(/\{\{([^{}]*)$/);
+        if (u) {
+          const f = l.lastIndexOf("{{"), a = u[1], m = y("variable", a);
+          if (m.length > 0 || a.trim() === "") {
+            s({
+              active: !0,
+              items: m,
+              selectedIndex: 0,
+              triggerType: "variable",
+              triggerStart: f
+            });
+            return;
+          }
+        }
+        const r = l.match(/\{%([^{}]*)$/);
+        if (r) {
+          const f = l.lastIndexOf("{%"), a = r[1], m = y("tag", a);
+          if (m.length > 0 || a.trim() === "") {
+            s({
+              active: !0,
+              items: m,
+              selectedIndex: 0,
+              triggerType: "tag",
+              triggerStart: f
+            });
+            return;
+          }
+        }
+        s(null);
+      },
+      [y]
+    ), C = c(
+      (e) => {
+        const t = e.target.value;
+        g(t), w(t, e.target.selectionStart || 0);
+      },
+      [g, w]
+    ), b = c(
+      (e) => {
+        if (!n || !o.current) return;
+        const { triggerStart: t, triggerType: l } = n, u = o.current.selectionStart || d.length, r = l === "variable" ? `{{ ${e.name} }}` : `{% ${e.name} %}`, f = d.slice(0, t) + r + d.slice(u);
+        g(f), s(null);
+        const a = t + r.length;
+        setTimeout(() => {
+          o.current?.setSelectionRange(a, a);
+        }, 0);
+      },
+      [n, d, g]
+    ), M = c(
+      (e) => {
+        if (!n?.active) {
+          i.onKeyDown?.(e);
+          return;
+        }
+        if (e.key === "ArrowDown") {
+          e.preventDefault(), s(
+            (t) => t ? {
+              ...t,
+              selectedIndex: Math.min(
+                t.selectedIndex + 1,
+                t.items.length - 1
+              )
+            } : null
+          );
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault(), s(
+            (t) => t ? {
+              ...t,
+              selectedIndex: Math.max(t.selectedIndex - 1, 0)
+            } : null
+          );
+          return;
+        }
+        if (e.key === "Enter" || e.key === "Tab") {
+          if (n.items.length > 0) {
+            e.preventDefault();
+            const t = n.items[n.selectedIndex];
+            t && b(t);
+          }
+          return;
+        }
+        if (e.key === "Escape") {
+          e.preventDefault(), s(null);
+          return;
+        }
+        i.onKeyDown?.(e);
+      },
+      [n, b, i]
+    ), R = c(
+      (e) => {
+        setTimeout(() => {
+          s(null);
+        }, 150), i.onBlur?.(e);
+      },
+      [i]
+    );
+    return E(() => {
+      x.setReference(o.current);
+    }, [x]), /* @__PURE__ */ I($, { children: [
+      /* @__PURE__ */ p(
+        "input",
+        {
+          ref: o,
+          type: "text",
+          value: d,
+          onChange: C,
+          onKeyDown: M,
+          onBlur: R,
+          className: S,
+          style: v,
+          autoComplete: "off",
+          "data-1p-ignore": !0,
+          ...i
+        }
+      ),
+      n?.active && n.items.length > 0 && /* @__PURE__ */ p(
+        "div",
+        {
+          ref: q,
+          style: k,
+          className: "light z-50 flex flex-col rounded-lg border border-border bg-popover shadow-lg max-h-64 overflow-y-auto",
+          onMouseDown: (e) => e.preventDefault(),
+          children: n.items.map((e, t) => /* @__PURE__ */ I(
+            "button",
+            {
+              type: "button",
+              onClick: () => b(e),
+              className: O(
+                "flex flex-col items-start px-3 py-2 text-left text-sm transition-colors",
+                "hover:bg-accent",
+                t === n.selectedIndex && "bg-accent"
+              ),
+              children: [
+                /* @__PURE__ */ p("span", { className: "font-medium text-foreground", children: e.name }),
+                e.description && /* @__PURE__ */ p("span", { className: "text-xs text-muted-foreground", children: e.description })
+              ]
+            },
+            e.id
+          ))
+        }
+      )
+    ] });
+  }
+);
+export {
+  W as LiquidInput
+};

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

@@ -0,0 +1,11 @@
+import { LiquidSchema } from '../../types/liquid';
+interface MjmlEditorProps {
+    value: string;
+    onChange: (mjml: string) => void;
+    className?: string;
+    defaultTheme?: 'light' | 'dark' | 'system';
+    liquidSchema?: LiquidSchema;
+}
+export declare function MjmlEditor({ value, onChange, className, defaultTheme, liquidSchema, }: MjmlEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MjmlEditor.d.ts.map

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

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

package/dist/components/editor/MjmlEditor.js

@@ -0,0 +1,111 @@
+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();
+  try {
+    return S(r);
+  } catch (e) {
+    return console.error("Failed to parse MJML:", e), T();
+  }
+}
+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) => {
+      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();
+          return;
+        }
+        if ((t.key === "Delete" || t.key === "Backspace") && e.selectedBlockId && e.selectedBlockId !== y) {
+          t.preventDefault(), d(e.selectedBlockId);
+          return;
+        }
+        if (t.key === "Escape" && e.selectedBlockId) {
+          t.preventDefault(), s(null);
+          return;
+        }
+      }
+    };
+    return window.addEventListener("keydown", o), () => window.removeEventListener("keydown", o);
+  }, [
+    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,
+      {
+        activeTab: k,
+        onTabChange: B,
+        leftPanelOpen: u,
+        rightPanelOpen: p
+      }
+    ) }),
+    k === "edit" && /* @__PURE__ */ v(I, { children: [
+      /* @__PURE__ */ n(
+        E,
+        {
+          side: "left",
+          isOpen: u,
+          onToggle: () => g(!u),
+          width: 256,
+          children: /* @__PURE__ */ n(D, { onTogglePanel: () => g(!1) })
+        }
+      ),
+      /* @__PURE__ */ n(
+        E,
+        {
+          side: "right",
+          isOpen: p,
+          onToggle: () => m(!p),
+          width: 300,
+          children: e.selectedBlockId === y ? /* @__PURE__ */ n(
+            C,
+            {
+              onTogglePanel: () => m(!1)
+            }
+          ) : /* @__PURE__ */ n(j, { onTogglePanel: () => m(!1) })
+        }
+      )
+    ] })
+  ] });
+}
+function Y({
+  value: r,
+  onChange: e,
+  className: l,
+  defaultTheme: i = "system",
+  liquidSchema: c
+}) {
+  const [a] = f(() => K(r)), d = P(
+    (s) => {
+      e(s);
+    },
+    [e]
+  );
+  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 }) }) }) }) });
+}
+export {
+  Y as MjmlEditor
+};

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

@@ -0,0 +1,7 @@
+export declare const GLOBAL_STYLES_ID = "__global_styles__";
+interface OutlineTreeProps {
+    onTogglePanel?: () => void;
+}
+export declare function OutlineTree({ onTogglePanel }: OutlineTreeProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=OutlineTree.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OutlineTree.d.ts","sourceRoot":"","sources":["../../../src/components/editor/OutlineTree.tsx"],"names":[],"mappings":"AA8BA,eAAO,MAAM,gBAAgB,sBAAsB,CAAC;AA+NpD,UAAU,gBAAgB;IACxB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,WAAW,CAAC,EAAE,aAAa,EAAE,EAAE,gBAAgB,2CAiI9D"}