@savvycal/mjml-editor 0.0.1 → 0.0.3

package/dist/context/EditorContext.js

@@ -0,0 +1,576 @@
+import { jsx as J } from "react/jsx-runtime";
+import { useReducer as W, useCallback as h, useMemo as D, createContext as $, useContext as q } from "react";
+import { v4 as N } from "uuid";
+import { cloneNode as m, addIds as j, findNodeById as U, moveNode as z, deleteNode as G, insertNode as Q, updateNode as F } from "../lib/mjml/parser.js";
+import { getDefaultBlock as X, getSchemaForTag as Y } from "../lib/mjml/schema.js";
+import { extractMjmlAttributes as Z, getDefinedClasses as ee, resolveNodeAttributes as te, getInheritedValue as ne, extractFonts as oe } from "../lib/mjml/attributes.js";
+function de(e) {
+  let d = e.children?.find((o) => o.tagName === "mj-head"), t = !1;
+  d || (d = {
+    tagName: "mj-head",
+    attributes: {},
+    children: [],
+    _id: N()
+  }, t = !0);
+  let n = d.children?.find((o) => o.tagName === "mj-attributes");
+  if (n || (n = {
+    tagName: "mj-attributes",
+    attributes: {},
+    children: [],
+    _id: N()
+  }, d = {
+    ...d,
+    children: [...d.children || [], n]
+  }, t = !0), !t)
+    return e;
+  const r = e.children?.filter((o) => o.tagName !== "mj-head") || [];
+  return {
+    ...e,
+    children: [d, ...r]
+  };
+}
+function v(e, d, t, n) {
+  const r = de(e), o = r.children?.find((s) => s.tagName === "mj-head");
+  if (!o) return e;
+  const l = o.children?.find(
+    (s) => s.tagName === "mj-attributes"
+  );
+  if (!l) return e;
+  const i = [...l.children || []];
+  if (d === "all") {
+    const s = i.findIndex((I) => I.tagName === "mj-all"), f = {
+      tagName: "mj-all",
+      attributes: s >= 0 ? { ...i[s].attributes, ...n } : n,
+      _id: s >= 0 ? i[s]._id : N()
+    };
+    s >= 0 ? i[s] = f : i.unshift(f);
+  } else if (d === "element" && t) {
+    const s = i.findIndex((I) => I.tagName === t), f = {
+      tagName: t,
+      attributes: s >= 0 ? { ...i[s].attributes, ...n } : n,
+      _id: s >= 0 ? i[s]._id : N()
+    };
+    s >= 0 ? i[s] = f : i.push(f);
+  } else if (d === "class" && t) {
+    const s = i.findIndex(
+      (I) => I.tagName === "mj-class" && I.attributes.name === t
+    ), f = {
+      tagName: "mj-class",
+      attributes: s >= 0 ? {
+        ...i[s].attributes,
+        name: t,
+        ...n
+      } : { name: t, ...n },
+      _id: s >= 0 ? i[s]._id : N()
+    };
+    s >= 0 ? i[s] = f : i.push(f);
+  }
+  const a = {
+    ...l,
+    children: i
+  }, y = {
+    ...o,
+    children: o.children?.map(
+      (s) => s.tagName === "mj-attributes" ? a : s
+    )
+  };
+  return {
+    ...r,
+    children: r.children?.map(
+      (s) => s.tagName === "mj-head" ? y : s
+    )
+  };
+}
+function re(e, d) {
+  return v(e, "class", d, {});
+}
+function ie(e, d) {
+  const t = e.children?.find((i) => i.tagName === "mj-head");
+  if (!t) return e;
+  const n = t.children?.find(
+    (i) => i.tagName === "mj-attributes"
+  );
+  if (!n) return e;
+  const r = n.children?.filter(
+    (i) => !(i.tagName === "mj-class" && i.attributes.name === d)
+  ) || [], o = {
+    ...n,
+    children: r
+  }, l = {
+    ...t,
+    children: t.children?.map(
+      (i) => i.tagName === "mj-attributes" ? o : i
+    )
+  };
+  return {
+    ...e,
+    children: e.children?.map(
+      (i) => i.tagName === "mj-head" ? l : i
+    )
+  };
+}
+function ce(e, d, t) {
+  const n = e.children?.find((a) => a.tagName === "mj-head");
+  if (!n) return e;
+  const r = n.children?.find(
+    (a) => a.tagName === "mj-attributes"
+  );
+  if (!r) return e;
+  const o = r.children?.map((a) => a.tagName === "mj-class" && a.attributes.name === d ? {
+    ...a,
+    attributes: { ...a.attributes, name: t }
+  } : a) || [], l = {
+    ...r,
+    children: o
+  }, i = {
+    ...n,
+    children: n.children?.map(
+      (a) => a.tagName === "mj-attributes" ? l : a
+    )
+  };
+  return {
+    ...e,
+    children: e.children?.map(
+      (a) => a.tagName === "mj-head" ? i : a
+    )
+  };
+}
+function se(e) {
+  let d = e.children?.find((t) => t.tagName === "mj-head");
+  if (!d) {
+    d = {
+      tagName: "mj-head",
+      attributes: {},
+      children: [],
+      _id: N()
+    };
+    const t = e.children?.filter((n) => n.tagName !== "mj-head") || [];
+    return {
+      ...e,
+      children: [d, ...t]
+    };
+  }
+  return e;
+}
+function R(e, d, t) {
+  const n = se(e), r = n.children?.find((y) => y.tagName === "mj-head");
+  if (!r) return e;
+  const o = r.children?.findIndex(
+    (y) => y.tagName === "mj-font" && y.attributes.name === d
+  ) ?? -1, l = {
+    tagName: "mj-font",
+    attributes: { name: d, href: t },
+    _id: o >= 0 ? r.children[o]._id : N()
+  };
+  let i;
+  o >= 0 ? (i = [...r.children], i[o] = l) : i = [l, ...r.children || []];
+  const a = { ...r, children: i };
+  return {
+    ...n,
+    children: n.children?.map(
+      (y) => y.tagName === "mj-head" ? a : y
+    )
+  };
+}
+function le(e, d) {
+  const t = e.children?.find((o) => o.tagName === "mj-head");
+  if (!t?.children) return e;
+  const n = t.children.filter(
+    (o) => !(o.tagName === "mj-font" && o.attributes.name === d)
+  ), r = { ...t, children: n };
+  return {
+    ...e,
+    children: e.children?.map(
+      (o) => o.tagName === "mj-head" ? r : o
+    )
+  };
+}
+function ae(e, d) {
+  switch (d.type) {
+    case "SELECT_BLOCK":
+      return { ...e, selectedBlockId: d.payload };
+    case "UPDATE_ATTRIBUTES": {
+      const { id: t, attributes: n } = d.payload, r = F(e.document, t, (l) => ({
+        ...l,
+        attributes: { ...l.attributes, ...n }
+      })), o = [
+        ...e.history.slice(0, e.historyIndex + 1),
+        m(r)
+      ].slice(-50);
+      return {
+        ...e,
+        document: r,
+        history: o,
+        historyIndex: o.length - 1
+      };
+    }
+    case "UPDATE_CONTENT": {
+      const { id: t, content: n } = d.payload, r = F(e.document, t, (l) => ({
+        ...l,
+        content: n
+      })), o = [
+        ...e.history.slice(0, e.historyIndex + 1),
+        m(r)
+      ].slice(-50);
+      return {
+        ...e,
+        document: r,
+        history: o,
+        historyIndex: o.length - 1
+      };
+    }
+    case "ADD_BLOCK": {
+      const { parentId: t, index: n, block: r } = d.payload, o = Q(e.document, t, n, r), l = [
+        ...e.history.slice(0, e.historyIndex + 1),
+        m(o)
+      ].slice(-50);
+      return {
+        ...e,
+        document: o,
+        selectedBlockId: r._id || null,
+        history: l,
+        historyIndex: l.length - 1
+      };
+    }
+    case "DELETE_BLOCK": {
+      const t = G(e.document, d.payload), n = [
+        ...e.history.slice(0, e.historyIndex + 1),
+        m(t)
+      ].slice(-50);
+      return {
+        ...e,
+        document: t,
+        selectedBlockId: e.selectedBlockId === d.payload ? null : e.selectedBlockId,
+        history: n,
+        historyIndex: n.length - 1
+      };
+    }
+    case "MOVE_BLOCK": {
+      const { id: t, newParentId: n, newIndex: r } = d.payload, o = z(e.document, t, n, r), l = [
+        ...e.history.slice(0, e.historyIndex + 1),
+        m(o)
+      ].slice(-50);
+      return {
+        ...e,
+        document: o,
+        history: l,
+        historyIndex: l.length - 1
+      };
+    }
+    case "SET_DOCUMENT": {
+      const t = j(d.payload);
+      return {
+        ...e,
+        document: t,
+        selectedBlockId: null,
+        history: [m(t)],
+        historyIndex: 0
+      };
+    }
+    case "UNDO": {
+      if (e.historyIndex <= 0) return e;
+      const t = e.historyIndex - 1;
+      return {
+        ...e,
+        document: m(e.history[t]),
+        historyIndex: t
+      };
+    }
+    case "REDO": {
+      if (e.historyIndex >= e.history.length - 1) return e;
+      const t = e.historyIndex + 1;
+      return {
+        ...e,
+        document: m(e.history[t]),
+        historyIndex: t
+      };
+    }
+    case "UPDATE_MJML_ATTRIBUTE": {
+      const { attributeType: t, target: n, attributes: r } = d.payload, o = v(
+        e.document,
+        t,
+        n,
+        r
+      ), l = [
+        ...e.history.slice(0, e.historyIndex + 1),
+        m(o)
+      ].slice(-50);
+      return {
+        ...e,
+        document: o,
+        history: l,
+        historyIndex: l.length - 1
+      };
+    }
+    case "ADD_CLASS": {
+      const t = re(e.document, d.payload), n = [
+        ...e.history.slice(0, e.historyIndex + 1),
+        m(t)
+      ].slice(-50);
+      return {
+        ...e,
+        document: t,
+        history: n,
+        historyIndex: n.length - 1
+      };
+    }
+    case "REMOVE_CLASS": {
+      const t = ie(
+        e.document,
+        d.payload
+      ), n = [
+        ...e.history.slice(0, e.historyIndex + 1),
+        m(t)
+      ].slice(-50);
+      return {
+        ...e,
+        document: t,
+        history: n,
+        historyIndex: n.length - 1
+      };
+    }
+    case "RENAME_CLASS": {
+      const { oldName: t, newName: n } = d.payload, r = ce(
+        e.document,
+        t,
+        n
+      ), o = [
+        ...e.history.slice(0, e.historyIndex + 1),
+        m(r)
+      ].slice(-50);
+      return {
+        ...e,
+        document: r,
+        history: o,
+        historyIndex: o.length - 1
+      };
+    }
+    case "ADD_FONT": {
+      const { name: t, href: n } = d.payload, r = R(e.document, t, n), o = [
+        ...e.history.slice(0, e.historyIndex + 1),
+        m(r)
+      ].slice(-50);
+      return {
+        ...e,
+        document: r,
+        history: o,
+        historyIndex: o.length - 1
+      };
+    }
+    case "REMOVE_FONT": {
+      const t = le(
+        e.document,
+        d.payload
+      ), n = [
+        ...e.history.slice(0, e.historyIndex + 1),
+        m(t)
+      ].slice(-50);
+      return {
+        ...e,
+        document: t,
+        history: n,
+        historyIndex: n.length - 1
+      };
+    }
+    case "UPDATE_FONT": {
+      const { name: t, href: n } = d.payload, r = R(e.document, t, n), o = [
+        ...e.history.slice(0, e.historyIndex + 1),
+        m(r)
+      ].slice(-50);
+      return {
+        ...e,
+        document: r,
+        history: o,
+        historyIndex: o.length - 1
+      };
+    }
+    default:
+      return e;
+  }
+}
+const P = $(null);
+function Ne({
+  children: e,
+  initialDocument: d
+}) {
+  const [t, n] = W(ae, {
+    document: j(d),
+    selectedBlockId: null,
+    history: [m(j(d))],
+    historyIndex: 0
+  }), r = h((c) => {
+    n({ type: "SELECT_BLOCK", payload: c });
+  }, []), o = h(
+    (c, u) => {
+      n({ type: "UPDATE_ATTRIBUTES", payload: { id: c, attributes: u } });
+    },
+    []
+  ), l = h((c, u) => {
+    n({ type: "UPDATE_CONTENT", payload: { id: c, content: u } });
+  }, []), i = h(
+    (c, u, p) => {
+      const x = X(p), V = {
+        tagName: p,
+        attributes: x.attributes,
+        content: x.content,
+        _id: N()
+      };
+      n({ type: "ADD_BLOCK", payload: { parentId: c, index: u, block: V } });
+    },
+    []
+  ), a = h(() => {
+    const c = t.document.children?.find((x) => x.tagName === "mj-body");
+    if (!c?._id) return;
+    const u = {
+      tagName: "mj-section",
+      attributes: {},
+      _id: N(),
+      children: [
+        {
+          tagName: "mj-column",
+          attributes: {},
+          _id: N(),
+          children: []
+        }
+      ]
+    }, p = c.children?.length || 0;
+    n({
+      type: "ADD_BLOCK",
+      payload: { parentId: c._id, index: p, block: u }
+    });
+  }, [t.document]), y = h(
+    (c) => {
+      const u = U(t.document, c);
+      if (!u) return;
+      const p = {
+        tagName: "mj-column",
+        attributes: {},
+        _id: N(),
+        children: []
+      }, x = u.children?.length || 0;
+      n({
+        type: "ADD_BLOCK",
+        payload: { parentId: c, index: x, block: p }
+      });
+    },
+    [t.document]
+  ), s = h((c) => {
+    n({ type: "DELETE_BLOCK", payload: c });
+  }, []), f = h(
+    (c, u, p) => {
+      n({ type: "MOVE_BLOCK", payload: { id: c, newParentId: u, newIndex: p } });
+    },
+    []
+  ), I = h((c) => {
+    n({ type: "SET_DOCUMENT", payload: c });
+  }, []), b = h(() => {
+    n({ type: "UNDO" });
+  }, []), E = h(() => {
+    n({ type: "REDO" });
+  }, []), _ = D(() => t.selectedBlockId ? U(t.document, t.selectedBlockId) : null, [t.document, t.selectedBlockId]), g = D(
+    () => Z(t.document),
+    [t.document]
+  ), A = D(
+    () => ee(t.document),
+    [t.document]
+  ), C = h(
+    (c) => te(c, g),
+    [g]
+  ), T = h(
+    (c, u) => {
+      const p = Y(c.tagName);
+      return ne(c, u, g, p);
+    },
+    [g]
+  ), w = h(
+    (c, u, p) => {
+      n({
+        type: "UPDATE_MJML_ATTRIBUTE",
+        payload: { attributeType: c, target: u, attributes: p }
+      });
+    },
+    []
+  ), B = h((c) => {
+    n({ type: "ADD_CLASS", payload: c });
+  }, []), O = h((c) => {
+    n({ type: "REMOVE_CLASS", payload: c });
+  }, []), M = h((c, u) => {
+    n({ type: "RENAME_CLASS", payload: { oldName: c, newName: u } });
+  }, []), k = D(() => oe(t.document), [t.document]), L = h((c, u) => {
+    n({ type: "ADD_FONT", payload: { name: c, href: u } });
+  }, []), S = h((c) => {
+    n({ type: "REMOVE_FONT", payload: c });
+  }, []), H = h((c, u) => {
+    n({ type: "UPDATE_FONT", payload: { name: c, href: u } });
+  }, []), K = D(
+    () => ({
+      state: t,
+      selectBlock: r,
+      updateAttributes: o,
+      updateContent: l,
+      addBlock: i,
+      addSection: a,
+      addColumn: y,
+      deleteBlock: s,
+      moveBlock: f,
+      setDocument: I,
+      undo: b,
+      redo: E,
+      canUndo: t.historyIndex > 0,
+      canRedo: t.historyIndex < t.history.length - 1,
+      selectedBlock: _,
+      // mj-attributes support
+      mjmlAttributes: g,
+      definedClasses: A,
+      getResolvedAttributes: C,
+      getInheritedValue: T,
+      updateMjmlAttribute: w,
+      addClass: B,
+      removeClass: O,
+      renameClass: M,
+      // mj-font support
+      fonts: k,
+      addFont: L,
+      removeFont: S,
+      updateFont: H
+    }),
+    [
+      t,
+      r,
+      o,
+      l,
+      i,
+      a,
+      y,
+      s,
+      f,
+      I,
+      b,
+      E,
+      _,
+      g,
+      A,
+      C,
+      T,
+      w,
+      B,
+      O,
+      M,
+      k,
+      L,
+      S,
+      H
+    ]
+  );
+  return /* @__PURE__ */ J(P.Provider, { value: K, children: e });
+}
+function Ie() {
+  const e = q(P);
+  if (!e)
+    throw new Error("useEditor must be used within an EditorProvider");
+  return e;
+}
+export {
+  Ne as EditorProvider,
+  Ie as useEditor
+};

package/dist/context/LiquidSchemaContext.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { LiquidSchema } from '../types/liquid';
+interface LiquidSchemaProviderProps {
+    children: ReactNode;
+    schema?: LiquidSchema;
+}
+export declare function LiquidSchemaProvider({ children, schema, }: LiquidSchemaProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useLiquidSchema(): LiquidSchema | undefined;
+export {};
+//# sourceMappingURL=LiquidSchemaContext.d.ts.map

package/dist/context/LiquidSchemaContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiquidSchemaContext.d.ts","sourceRoot":"","sources":["../../src/context/LiquidSchemaContext.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAInD,UAAU,yBAAyB;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,MAAM,GACP,EAAE,yBAAyB,2CAM3B;AAED,wBAAgB,eAAe,6BAE9B"}

package/dist/context/LiquidSchemaContext.js

@@ -0,0 +1,16 @@
+import { jsx as r } from "react/jsx-runtime";
+import { createContext as i, useContext as n } from "react";
+const e = i(void 0);
+function m({
+  children: t,
+  schema: o
+}) {
+  return /* @__PURE__ */ r(e.Provider, { value: o, children: t });
+}
+function d() {
+  return n(e);
+}
+export {
+  m as LiquidSchemaProvider,
+  d as useLiquidSchema
+};

package/dist/context/ThemeContext.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+type Theme = 'light' | 'dark' | 'system';
+type ResolvedTheme = 'light' | 'dark';
+interface ThemeContextValue {
+    theme: Theme;
+    resolvedTheme: ResolvedTheme;
+    setTheme: (theme: Theme) => void;
+    toggleTheme: () => void;
+}
+interface ThemeProviderProps {
+    children: ReactNode;
+    defaultTheme?: Theme;
+    storageKey?: string;
+    /**
+     * Whether to apply the theme class to document.documentElement.
+     * This is needed for Radix UI portals (popovers, menus, etc.) which
+     * render outside the .mjml-editor container.
+     *
+     * Set to false if the host app manages document-level theme classes
+     * and you want to prevent conflicts.
+     *
+     * @default true
+     */
+    applyToDocument?: boolean;
+}
+export declare function ThemeProvider({ children, defaultTheme, storageKey, applyToDocument, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useTheme(): ThemeContextValue;
+export {};
+//# sourceMappingURL=ThemeContext.d.ts.map

package/dist/context/ThemeContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/context/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,KAAK,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AACzC,KAAK,aAAa,GAAG,OAAO,GAAG,MAAM,CAAC;AAEtC,UAAU,iBAAiB;IACzB,KAAK,EAAE,KAAK,CAAC;IACb,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAsBD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAY,EACZ,UAAwB,EACxB,eAAsB,GACvB,EAAE,kBAAkB,2CAgDpB;AAGD,wBAAgB,QAAQ,sBAMvB"}

package/dist/context/ThemeContext.js

@@ -0,0 +1,55 @@
+import { jsx as y } from "react/jsx-runtime";
+import { useState as d, useEffect as h, useCallback as a, useMemo as S, createContext as E, useContext as x } from "react";
+const u = E(null), l = "mjml-editor-theme";
+function p() {
+  return typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function C() {
+  if (typeof window > "u") return "system";
+  const e = localStorage.getItem(l);
+  return e === "light" || e === "dark" || e === "system" ? e : "system";
+}
+function P({
+  children: e,
+  defaultTheme: f,
+  storageKey: s = l,
+  applyToDocument: m = !0
+}) {
+  const [n, g] = d(
+    () => f ?? C()
+  ), [T, w] = d(p);
+  h(() => {
+    const t = window.matchMedia("(prefers-color-scheme: dark)"), c = (k) => {
+      w(k.matches ? "dark" : "light");
+    };
+    return t.addEventListener("change", c), () => t.removeEventListener("change", c);
+  }, []);
+  const r = n === "system" ? T : n;
+  h(() => {
+    if (!m) return;
+    const t = document.documentElement;
+    t.classList.remove("light", "dark"), t.classList.add(r);
+  }, [r, m]);
+  const o = a(
+    (t) => {
+      g(t), localStorage.setItem(s, t);
+    },
+    [s]
+  ), i = a(() => {
+    o(r === "light" ? "dark" : "light");
+  }, [r, o]), v = S(
+    () => ({ theme: n, resolvedTheme: r, setTheme: o, toggleTheme: i }),
+    [n, r, o, i]
+  );
+  return /* @__PURE__ */ y(u.Provider, { value: v, children: e });
+}
+function b() {
+  const e = x(u);
+  if (!e)
+    throw new Error("useTheme must be used within a ThemeProvider");
+  return e;
+}
+export {
+  P as ThemeProvider,
+  b as useTheme
+};

package/dist/extensions/LiquidHighlight.d.ts

@@ -0,0 +1,3 @@
+import { Extension } from '@tiptap/core';
+export declare const LiquidHighlight: Extension<any, any>;
+//# sourceMappingURL=LiquidHighlight.d.ts.map

package/dist/extensions/LiquidHighlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiquidHighlight.d.ts","sourceRoot":"","sources":["../../src/extensions/LiquidHighlight.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAyDzC,eAAO,MAAM,eAAe,qBA8B1B,CAAC"}