@savvycal/mjml-editor 0.6.0 → 0.7.0

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

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

package/dist/components/editor/SourceEditor.js

@@ -1,116 +1,111 @@
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import { useState as f, useRef as g, useEffect as p, useCallback as b, useMemo as N } from "react";
-import { AlertTriangle as y } from "lucide-react";
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import { useState as f, useRef as g, useEffect as p, useCallback as v, useMemo as y } from "react";
 import k from "@uiw/react-codemirror";
-import { EditorState as M } from "@codemirror/state";
-import { indentUnit as E, bracketMatching as j, syntaxHighlighting as w, HighlightStyle as C } from "@codemirror/language";
-import { lineNumbers as L, highlightActiveLineGutter as D, highlightActiveLine as W, EditorView as R, keymap as A } from "@codemirror/view";
-import { history as T, indentWithTab as z, defaultKeymap as H, historyKeymap as J } from "@codemirror/commands";
-import { highlightSelectionMatches as K, searchKeymap as U } from "@codemirror/search";
-import { xml as V } from "@codemirror/lang-xml";
-import { tags as r } from "@lezer/highlight";
-import { useEditor as _ } from "../../context/EditorContext.js";
-import { serializeMjml as x, parseMjml as B } from "../../lib/mjml/parser.js";
-import { ResizableSplitPane as I } from "../ui/resizable-split-pane.js";
+import { EditorState as N } from "@codemirror/state";
+import { indentUnit as M, bracketMatching as E, syntaxHighlighting as j, HighlightStyle as C } from "@codemirror/language";
+import { lineNumbers as w, highlightActiveLineGutter as L, highlightActiveLine as D, EditorView as W, keymap as R } from "@codemirror/view";
+import { history as z, indentWithTab as A, defaultKeymap as H, historyKeymap as K } from "@codemirror/commands";
+import { highlightSelectionMatches as T, searchKeymap as U } from "@codemirror/search";
+import { xml as _ } from "@codemirror/lang-xml";
+import { tags as t } from "@lezer/highlight";
+import { useEditor as B } from "../../context/EditorContext.js";
+import { serializeMjml as b, parseMjml as I } from "../../lib/mjml/parser.js";
+import { ResizableSplitPane as J } from "../ui/resizable-split-pane.js";
 import { SourcePreview as O } from "./SourcePreview.js";
-const P = 350, Y = C.define([
+const P = 350, V = C.define([
   {
-    tag: r.tagName,
+    tag: t.tagName,
     color: "var(--cm-tag, oklch(0.74 0.1 158))",
     fontWeight: "600"
   },
   {
-    tag: r.attributeName,
+    tag: t.attributeName,
     color: "var(--cm-attribute-name, oklch(0.76 0.09 80))"
   },
   {
-    tag: [r.attributeValue, r.string],
+    tag: [t.attributeValue, t.string],
     color: "var(--cm-attribute-value, oklch(0.77 0.1 255))"
   },
   {
-    tag: [r.angleBracket, r.bracket],
+    tag: [t.angleBracket, t.bracket],
     color: "var(--cm-punctuation, oklch(0.7 0.02 250))"
   },
-  { tag: r.comment, color: "var(--cm-comment, oklch(0.63 0.01 250))" },
+  { tag: t.comment, color: "var(--cm-comment, oklch(0.63 0.01 250))" },
   {
-    tag: r.invalid,
+    tag: t.invalid,
     color: "var(--cm-invalid, oklch(0.7 0.16 25))",
     textDecoration: "underline"
   }
 ]);
-function le() {
-  const { state: s, setDocument: u } = _(), [a, d] = f(""), [c, i] = f(null), l = g(!1), m = g("");
+function ae() {
+  const { state: s, setDocument: u } = B(), [o, d] = f(""), [a, i] = f(null), c = g(!1), l = g("");
   p(() => {
-    if (l.current) {
-      l.current = !1;
+    if (c.current) {
+      c.current = !1;
       return;
     }
-    const e = x(s.document);
-    m.current = e, d(e), i(null);
+    const e = b(s.document);
+    l.current = e, d(e), i(null);
   }, [s.document]);
-  const h = b(
+  const h = v(
     (e) => {
       try {
-        const o = B(e);
-        if (o.tagName !== "mjml") {
+        const r = I(e);
+        if (r.tagName !== "mjml") {
           i("Invalid MJML: Document must have an <mjml> root element");
           return;
         }
-        m.current = x(o), l.current = !0, u(o), i(null);
-      } catch (o) {
-        i(o instanceof Error ? o.message : "Failed to parse MJML");
+        l.current = b(r), c.current = !0, u(r), i(null);
+      } catch (r) {
+        i(r instanceof Error ? r.message : "Failed to parse MJML");
       }
     },
     [u]
-  ), v = N(
+  ), x = y(
     () => [
+      w(),
       L(),
       D(),
-      W(),
+      z(),
+      N.tabSize.of(2),
+      M.of("  "),
+      E(),
       T(),
-      M.tabSize.of(2),
-      E.of("  "),
-      j(),
-      K(),
-      w(Y),
-      R.lineWrapping,
-      A.of([
-        z,
+      j(V),
+      W.lineWrapping,
+      R.of([
+        A,
         ...H,
-        ...J,
+        ...K,
         ...U
       ]),
-      V()
+      _()
     ],
     []
-  ), S = b((e) => {
+  ), S = v((e) => {
     d(e), i(null);
   }, []);
   return p(() => {
-    if (a === m.current)
+    if (o === l.current)
       return;
     const e = window.setTimeout(() => {
-      h(a);
+      h(o);
     }, P);
     return () => window.clearTimeout(e);
-  }, [a, h]), /* @__PURE__ */ n(
-    I,
+  }, [o, h]), /* @__PURE__ */ m(
+    J,
     {
       defaultLeftWidth: 50,
       minLeftWidth: 30,
       maxLeftWidth: 70,
       children: [
-        /* @__PURE__ */ n("div", { className: "flex flex-col h-full bg-background", children: [
-          /* @__PURE__ */ t("div", { className: "px-4 pt-4", children: /* @__PURE__ */ n("div", { className: "flex items-start gap-3 p-3 rounded-md bg-amber-50 border border-amber-200 text-amber-800", children: [
-            /* @__PURE__ */ t(y, { className: "h-4 w-4 mt-0.5 flex-shrink-0" }),
-            /* @__PURE__ */ t("p", { className: "text-sm", children: "You are editing raw MJML source. Valid changes sync to the visual editor automatically." })
-          ] }) }),
-          /* @__PURE__ */ t("div", { className: "flex-1 min-h-0 p-4", children: /* @__PURE__ */ t(
+        /* @__PURE__ */ m("div", { className: "flex flex-col h-full bg-background", children: [
+          /* @__PURE__ */ n("div", { className: "flex-1 min-h-0 p-4", children: /* @__PURE__ */ n(
             k,
             {
-              value: a,
+              value: o,
               onChange: S,
-              extensions: v,
+              extensions: x,
               basicSetup: !1,
               theme: "none",
               className: "source-editor h-full overflow-hidden rounded-md border border-border bg-muted text-foreground",
@@ -118,16 +113,16 @@ function le() {
               spellCheck: !1
             }
           ) }),
-          /* @__PURE__ */ n("div", { className: "px-4 pb-4 flex items-center gap-3", children: [
-            !c && /* @__PURE__ */ t("span", { className: "text-sm text-foreground-muted", children: "Changes sync automatically" }),
-            c && /* @__PURE__ */ t("span", { className: "text-sm text-destructive", children: c })
+          /* @__PURE__ */ m("div", { className: "px-4 pb-4 flex items-center gap-3", children: [
+            !a && /* @__PURE__ */ n("span", { className: "text-sm text-foreground-muted", children: "Changes sync automatically" }),
+            a && /* @__PURE__ */ n("span", { className: "text-sm text-destructive", children: a })
           ] })
         ] }),
-        /* @__PURE__ */ t(O, { mjmlSource: a, debounceMs: 300 })
+        /* @__PURE__ */ n(O, { mjmlSource: o, debounceMs: 300 })
       ]
     }
   );
 }
 export {
-  le as SourceEditor
+  ae as SourceEditor
 };

package/package.json

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