@savvycal/mjml-editor 0.0.1 → 0.0.2

package/dist/extensions/LiquidHighlight.js

@@ -0,0 +1,58 @@
+import { Extension as u } from "@tiptap/core";
+import { Plugin as g, PluginKey as h } from "@tiptap/pm/state";
+import { Decoration as d, DecorationSet as m } from "@tiptap/pm/view";
+const a = new h("liquidHighlight"), c = /\{\{[^{}]*\}\}/g, l = /\{%[^{}]*%\}/g;
+function p(t) {
+  const e = [];
+  return t.descendants((r, n) => {
+    if (!r.isText || !r.text) return;
+    const o = r.text;
+    let i;
+    for (c.lastIndex = 0; (i = c.exec(o)) !== null; )
+      e.push({
+        from: n + i.index,
+        to: n + i.index + i[0].length,
+        type: "variable"
+      });
+    for (l.lastIndex = 0; (i = l.exec(o)) !== null; )
+      e.push({
+        from: n + i.index,
+        to: n + i.index + i[0].length,
+        type: "tag"
+      });
+  }), e;
+}
+function s(t) {
+  const r = p(t).map(
+    (n) => d.inline(n.from, n.to, {
+      class: "liquid-highlight"
+    })
+  );
+  return m.create(t, r);
+}
+const y = u.create({
+  name: "liquidHighlight",
+  addProseMirrorPlugins() {
+    return [
+      new g({
+        key: a,
+        state: {
+          init(t, { doc: e }) {
+            return s(e);
+          },
+          apply(t, e) {
+            return t.docChanged ? s(t.doc) : e.map(t.mapping, t.doc);
+          }
+        },
+        props: {
+          decorations(t) {
+            return a.getState(t);
+          }
+        }
+      })
+    ];
+  }
+});
+export {
+  y as LiquidHighlight
+};

package/dist/extensions/LiquidSuggestion.d.ts

@@ -0,0 +1,18 @@
+import { Extension } from '@tiptap/core';
+export interface SuggestionProps {
+    query: string;
+    triggerType: 'variable' | 'tag';
+    range: {
+        from: number;
+        to: number;
+    };
+    clientRect: (() => DOMRect | null) | null;
+}
+export interface LiquidSuggestionOptions {
+    onStart: (props: SuggestionProps) => void;
+    onUpdate: (props: SuggestionProps) => void;
+    onExit: () => void;
+    onKeyDown: (event: KeyboardEvent) => boolean;
+}
+export declare const LiquidSuggestion: Extension<LiquidSuggestionOptions, any>;
+//# sourceMappingURL=LiquidSuggestion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LiquidSuggestion.d.ts","sourceRoot":"","sources":["../../src/extensions/LiquidSuggestion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,UAAU,GAAG,KAAK,CAAC;IAChC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,UAAU,EAAE,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;CAC3C;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC3C,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,OAAO,CAAC;CAC9C;AAqCD,eAAO,MAAM,gBAAgB,yCA0I3B,CAAC"}

package/dist/extensions/LiquidSuggestion.js

@@ -0,0 +1,119 @@
+import { Extension as y } from "@tiptap/core";
+import { Plugin as m, PluginKey as d } from "@tiptap/pm/state";
+const f = new d("liquidSuggestion");
+function l(i, r) {
+  return () => {
+    const t = i.coordsAtPos(r);
+    return {
+      x: t.left,
+      y: t.top,
+      width: 0,
+      height: t.bottom - t.top,
+      top: t.top,
+      left: t.left,
+      right: t.left,
+      bottom: t.bottom,
+      toJSON: () => ({
+        x: t.left,
+        y: t.top,
+        width: 0,
+        height: t.bottom - t.top,
+        top: t.top,
+        left: t.left,
+        right: t.left,
+        bottom: t.bottom
+      })
+    };
+  };
+}
+const v = y.create({
+  name: "liquidSuggestion",
+  addOptions() {
+    return {
+      onStart: () => {
+      },
+      onUpdate: () => {
+      },
+      onExit: () => {
+      },
+      onKeyDown: () => !1
+    };
+  },
+  addProseMirrorPlugins() {
+    const { options: i } = this;
+    return [
+      new m({
+        key: f,
+        state: {
+          init() {
+            return {
+              active: !1,
+              triggerType: null,
+              from: 0,
+              query: ""
+            };
+          },
+          apply(r, t, o, e) {
+            const { selection: s } = e, { $from: n } = s;
+            if (!s.empty)
+              return t.active ? { active: !1, triggerType: null, from: 0, query: "" } : t;
+            const a = n.parent.textBetween(
+              0,
+              n.parentOffset,
+              void 0,
+              ""
+            ), u = a.match(/\{\{([^{}]*)$/);
+            if (u) {
+              const c = n.pos - n.parentOffset + a.lastIndexOf("{{"), g = u[1];
+              return {
+                active: !0,
+                triggerType: "variable",
+                from: c,
+                query: g
+              };
+            }
+            const p = a.match(/\{%([^{}]*)$/);
+            if (p) {
+              const c = n.pos - n.parentOffset + a.lastIndexOf("{%"), g = p[1];
+              return {
+                active: !0,
+                triggerType: "tag",
+                from: c,
+                query: g
+              };
+            }
+            return t.active ? { active: !1, triggerType: null, from: 0, query: "" } : t;
+          }
+        },
+        view() {
+          return {
+            update: (r, t) => {
+              const o = f.getState(t), e = f.getState(r.state);
+              if (!o || !e) return;
+              const s = !o.active && e.active, n = o.active && !e.active, a = o.active && e.active && (o.query !== e.query || o.from !== e.from);
+              n && i.onExit(), s && e.triggerType && i.onStart({
+                query: e.query,
+                triggerType: e.triggerType,
+                range: { from: e.from, to: r.state.selection.from },
+                clientRect: l(r, e.from)
+              }), a && e.triggerType && i.onUpdate({
+                query: e.query,
+                triggerType: e.triggerType,
+                range: { from: e.from, to: r.state.selection.from },
+                clientRect: l(r, e.from)
+              });
+            }
+          };
+        },
+        props: {
+          handleKeyDown(r, t) {
+            return f.getState(r.state)?.active ? i.onKeyDown(t) : !1;
+          }
+        }
+      })
+    ];
+  }
+});
+export {
+  v as LiquidSuggestion
+};

package/dist/hooks/useFontLoader.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Hook that injects <link> tags into the document head for each mj-font.
+ * This enables custom fonts to render in the visual editor.
+ */
+export declare function useFontLoader(): void;
+//# sourceMappingURL=useFontLoader.d.ts.map

package/dist/hooks/useFontLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFontLoader.d.ts","sourceRoot":"","sources":["../../src/hooks/useFontLoader.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,wBAAgB,aAAa,SA6C5B"}

package/dist/hooks/useFontLoader.js

@@ -0,0 +1,21 @@
+import { useEffect as l } from "react";
+import { useEditor as m } from "../context/EditorContext.js";
+const t = "mjml-editor-font-";
+function d() {
+  const { fonts: c } = m();
+  l(() => (document.querySelectorAll(`link[id^="${t}"]`).forEach((e) => {
+    const o = e.id.replace(t, "").replace(/-/g, " ");
+    c.some(
+      (n) => n.name === o || n.name.replace(/\s+/g, "-") === e.id.replace(t, "")
+    ) || e.remove();
+  }), c.forEach((e) => {
+    const o = `${t}${e.name.replace(/\s+/g, "-")}`;
+    let r = document.getElementById(o);
+    r ? r.href !== e.href && (r.href = e.href) : (r = document.createElement("link"), r.id = o, r.rel = "stylesheet", r.href = e.href, document.head.appendChild(r));
+  }), () => {
+    document.querySelectorAll(`link[id^="${t}"]`).forEach((e) => e.remove());
+  }), [c]);
+}
+export {
+  d as useFontLoader
+};

package/dist/hooks/useStyleLoader.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Scope class applied to the visual editor container.
+ * CSS from mj-style blocks is scoped to this class to prevent leaking.
+ */
+export declare const VISUAL_EDITOR_SCOPE_CLASS = "mjml-visual-editor-scope";
+/**
+ * Hook that injects a scoped <style> tag into the document head for mj-style CSS.
+ * This enables css-class styles to render in the visual editor.
+ */
+export declare function useStyleLoader(): void;
+//# sourceMappingURL=useStyleLoader.d.ts.map

package/dist/hooks/useStyleLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStyleLoader.d.ts","sourceRoot":"","sources":["../../src/hooks/useStyleLoader.ts"],"names":[],"mappings":"AAOA;;;GAGG;AACH,eAAO,MAAM,yBAAyB,6BAA6B,CAAC;AAEpE;;;GAGG;AACH,wBAAgB,cAAc,SAkC7B"}

package/dist/hooks/useStyleLoader.js

@@ -0,0 +1,26 @@
+import { useMemo as c, useEffect as r } from "react";
+import { useEditor as d } from "../context/EditorContext.js";
+import { extractStyles as l } from "../lib/mjml/attributes.js";
+import { scopeCSS as i } from "../lib/mjml/scopeCSS.js";
+const t = "mjml-editor-styles", u = "mjml-visual-editor-scope";
+function a() {
+  const { state: o } = d(), m = c(
+    () => l(o.document).join(`
+`),
+    [o.document]
+  ), n = c(
+    () => i(m, u),
+    [m]
+  );
+  r(() => {
+    let e = document.getElementById(t);
+    return e || (e = document.createElement("style"), e.id = t, document.head.appendChild(e)), e.textContent = n, () => {
+      const s = document.getElementById(t);
+      s && s.remove();
+    };
+  }, [n]);
+}
+export {
+  u as VISUAL_EDITOR_SCOPE_CLASS,
+  a as useStyleLoader
+};

package/dist/index.d.ts

@@ -1,150 +1,6 @@
-import { JSX } from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-
-export declare type ContentBlockType = 'mj-text' | 'mj-image' | 'mj-button' | 'mj-divider' | 'mj-spacer';
-
-export declare type EditorAction = {
-    type: 'SELECT_BLOCK';
-    payload: string | null;
-} | {
-    type: 'UPDATE_ATTRIBUTES';
-    payload: {
-        id: string;
-        attributes: Record<string, string>;
-    };
-} | {
-    type: 'UPDATE_CONTENT';
-    payload: {
-        id: string;
-        content: string;
-    };
-} | {
-    type: 'ADD_BLOCK';
-    payload: {
-        parentId: string;
-        index: number;
-        block: MjmlNode;
-    };
-} | {
-    type: 'DELETE_BLOCK';
-    payload: string;
-} | {
-    type: 'MOVE_BLOCK';
-    payload: {
-        id: string;
-        newParentId: string;
-        newIndex: number;
-    };
-} | {
-    type: 'SET_DOCUMENT';
-    payload: MjmlNode;
-} | {
-    type: 'UNDO';
-} | {
-    type: 'REDO';
-} | {
-    type: 'UPDATE_MJML_ATTRIBUTE';
-    payload: {
-        attributeType: 'all' | 'element' | 'class';
-        target: string | null;
-        attributes: Record<string, string>;
-    };
-} | {
-    type: 'ADD_CLASS';
-    payload: string;
-} | {
-    type: 'REMOVE_CLASS';
-    payload: string;
-} | {
-    type: 'RENAME_CLASS';
-    payload: {
-        oldName: string;
-        newName: string;
-    };
-} | {
-    type: 'ADD_FONT';
-    payload: MjmlFont;
-} | {
-    type: 'REMOVE_FONT';
-    payload: string;
-} | {
-    type: 'UPDATE_FONT';
-    payload: MjmlFont;
-};
-
-export declare interface EditorState {
-    document: MjmlNode;
-    selectedBlockId: string | null;
-    history: MjmlNode[];
-    historyIndex: number;
-}
-
-/**
- * Complete Liquid schema passed to MjmlEditor
- */
-export declare interface LiquidSchema {
-    /** Variables accessible via {{ variable_name }} syntax */
-    variables: LiquidSchemaItem[];
-    /** Tags accessible via {% tag_name %} syntax */
-    tags: LiquidSchemaItem[];
-}
-
-/**
- * Schema item for Liquid variables and tags
- */
-export declare interface LiquidSchemaItem {
-    /** The name/path of the variable or tag (e.g., "user.name" or "if") */
-    name: string;
-    /** Optional description shown in the autocomplete popup */
-    description?: string;
-}
-
-export declare function MjmlEditor({ value, onChange, className, defaultTheme, liquidSchema, }: MjmlEditorProps): JSX.Element;
-
-declare interface MjmlEditorProps {
-    value: string;
-    onChange: (mjml: string) => void;
-    className?: string;
-    defaultTheme?: 'light' | 'dark' | 'system';
-    liquidSchema?: LiquidSchema;
-}
-
-declare interface MjmlFont {
-    name: string;
-    href: string;
-}
-
-export declare interface MjmlNode {
-    tagName: string;
-    attributes: Record<string, string>;
-    children?: MjmlNode[];
-    content?: string;
-    _id?: string;
-}
-
-export declare type MjmlTagName = 'mjml' | 'mj-head' | 'mj-body' | 'mj-wrapper' | 'mj-section' | 'mj-column' | 'mj-text' | 'mj-image' | 'mj-button' | 'mj-divider' | 'mj-spacer' | 'mj-title' | 'mj-preview' | 'mj-attributes' | 'mj-all' | 'mj-class' | 'mj-style' | 'mj-font';
-
-declare type ResolvedTheme = 'light' | 'dark';
-
-declare type Theme = 'light' | 'dark' | 'system';
-
-declare interface ThemeContextValue {
-    theme: Theme;
-    resolvedTheme: ResolvedTheme;
-    setTheme: (theme: Theme) => void;
-    toggleTheme: () => void;
-}
-
-export declare function ThemeProvider({ children, defaultTheme, storageKey, }: ThemeProviderProps): JSX.Element;
-
-declare interface ThemeProviderProps {
-    children: ReactNode;
-    defaultTheme?: Theme;
-    storageKey?: string;
-}
-
-export declare function ThemeToggle(): JSX.Element;
-
-export declare function useTheme(): ThemeContextValue;
-
-export { }
+export { MjmlEditor } from './components/editor/MjmlEditor';
+export { ThemeProvider, useTheme } from './context/ThemeContext';
+export { ThemeToggle } from './components/ui/theme-toggle';
+export type { MjmlNode, MjmlTagName, ContentBlockType, EditorState, EditorAction, } from './types/mjml';
+export type { LiquidSchema, LiquidSchemaItem } from './types/liquid';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAG5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,YAAY,EACV,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,YAAY,GACb,MAAM,cAAc,CAAC;AAEtB,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC"}