@savvycal/mjml-editor 0.2.0 → 0.3.0

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

@@ -1 +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,2CAkI9D"}
+{"version":3,"file":"OutlineTree.d.ts","sourceRoot":"","sources":["../../../src/components/editor/OutlineTree.tsx"],"names":[],"mappings":"AAoCA,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,2CAsK9D"}

package/dist/components/editor/OutlineTree.js

@@ -1,28 +1,29 @@
-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 { jsxs as a, jsx as e, Fragment as H } from "react/jsx-runtime";
+import { useRef as C, useState as T, useEffect as L, useCallback as G } from "react";
+import { Tree as V } from "react-arborist";
+import { PanelLeftClose as F, Plus as I, Palette as W, Mail as Y, ChevronDown as q, ChevronRight as y, GripVertical as J, Columns as P, Trash2 as K, MoveVertical as S, Minus as A, MousePointerClick as D, Image as O, 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 = {
+import { Button as m } from "../ui/button.js";
+import { Popover as Q, PopoverTrigger as U, PopoverContent as X } from "../ui/popover.js";
+import { contentBlockTypes as Z } from "../../lib/mjml/schema.js";
+import { isContentBlock as $, canBeChildOf as ee } from "../../lib/mjml/nesting-rules.js";
+import { cn as h } from "../../lib/utils.js";
+const k = "__global_styles__", te = {
   "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-image": /* @__PURE__ */ e(O, { className: "h-4 w-4" }),
+  "mj-button": /* @__PURE__ */ e(D, { className: "h-4 w-4" }),
+  "mj-divider": /* @__PURE__ */ e(A, { className: "h-4 w-4" }),
   "mj-spacer": /* @__PURE__ */ e(S, { className: "h-4 w-4" })
-}, $ = {
+}, re = {
   "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-image": /* @__PURE__ */ e(O, { className: "h-4 w-4" }),
+  "mj-button": /* @__PURE__ */ e(D, { className: "h-4 w-4" }),
+  "mj-divider": /* @__PURE__ */ e(A, { className: "h-4 w-4" }),
   "mj-spacer": /* @__PURE__ */ e(S, { className: "h-4 w-4" })
 };
-function ee(t) {
+function oe(t) {
   return {
     "mj-section": "Section",
     "mj-column": "Column",
@@ -39,7 +40,7 @@ function ee(t) {
     "mj-raw": "Raw HTML"
   }[t] || t.replace("mj-", "").replace(/-/g, " ");
 }
-function te(t) {
+function ne(t) {
   return [
     "mj-section",
     "mj-column",
@@ -48,54 +49,54 @@ function te(t) {
     "mj-hero"
   ].includes(t);
 }
-function k(t) {
+function B(t) {
   return t === "mj-column";
 }
-function B(t) {
+function _(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);
+function ae({ node: t, style: d, dragHandle: f }) {
+  const { state: N, selectBlock: u, deleteBlock: x, addBlock: g, addColumn: v } = M(), [b, s] = T(!1), r = t.data, w = N.selectedBlockId === r._id, j = t.children && t.children.length > 0, o = ne(r.tagName), l = (n) => {
+    n.stopPropagation(), t.select(), u(r._id);
   }, i = (n) => {
-    n.stopPropagation(), N(o._id);
-  }, g = (n) => {
+    n.stopPropagation(), x(r._id);
+  }, c = (n) => {
     n.stopPropagation(), t.toggle();
-  }, O = (n) => {
-    const E = o.children?.length || 0;
-    p(o._id, E, n), a(!1);
+  }, p = (n) => {
+    const E = r.children?.length || 0;
+    g(r._id, E, n), s(!1);
   }, R = () => {
-    v(o._id), a(!1);
+    v(r._id), s(!1);
   };
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ a(
     "div",
     {
-      style: c,
-      className: m(
+      style: d,
+      className: h(
         "group flex items-center h-8 pr-2 cursor-pointer",
         "hover:bg-accent/50 transition-colors",
-        b && "bg-accent",
+        w && "bg-accent",
         t.state.isDragging && "opacity-50"
       ),
-      onClick: h,
+      onClick: l,
       children: [
-        l ? /* @__PURE__ */ e(
+        o ? /* @__PURE__ */ e(
           "button",
           {
-            className: m(
+            className: h(
               "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" })
+            onClick: c,
+            children: j ? t.isOpen ? /* @__PURE__ */ e(q, { 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(
+        /* @__PURE__ */ e("div", { className: "flex items-center justify-center w-5 h-5 text-foreground-muted", children: te[r.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: oe(r.tagName) }),
+        /* @__PURE__ */ a(
           "div",
           {
-            className: m(
+            className: h(
               "flex items-center gap-0.5",
               "opacity-0 group-hover:opacity-100 transition-opacity"
             ),
@@ -104,16 +105,16 @@ function oe({ node: t, style: c, dragHandle: f }) {
                 "div",
                 {
                   ref: f,
-                  className: m(
+                  className: h(
                     "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" })
+                  children: /* @__PURE__ */ e(J, { 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,
+              (B(r.tagName) || _(r.tagName)) && /* @__PURE__ */ a(Q, { open: b, onOpenChange: s, children: [
+                /* @__PURE__ */ e(U, { asChild: !0, children: /* @__PURE__ */ e(
+                  m,
                   {
                     variant: "ghost",
                     size: "icon-sm",
@@ -122,15 +123,15 @@ function oe({ node: t, style: c, dragHandle: f }) {
                     children: /* @__PURE__ */ e(I, { className: "h-3.5 w-3.5" })
                   }
                 ) }),
-                /* @__PURE__ */ s(
-                  U,
+                /* @__PURE__ */ a(
+                  X,
                   {
                     className: "w-48 p-1.5 shadow-framer-lg",
                     align: "start",
                     onClick: (n) => n.stopPropagation(),
                     children: [
-                      B(o.tagName) && /* @__PURE__ */ s(
-                        d,
+                      _(r.tagName) && /* @__PURE__ */ a(
+                        m,
                         {
                           variant: "ghost",
                           size: "sm",
@@ -142,15 +143,15 @@ function oe({ node: t, style: c, dragHandle: f }) {
                           ]
                         }
                       ),
-                      k(o.tagName) && /* @__PURE__ */ e(H, { children: X.map((n) => /* @__PURE__ */ s(
-                        d,
+                      B(r.tagName) && /* @__PURE__ */ e(H, { children: Z.map((n) => /* @__PURE__ */ a(
+                        m,
                         {
                           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),
+                          onClick: () => p(n.type),
                           children: [
-                            /* @__PURE__ */ e("span", { className: "text-foreground-muted", children: $[n.type] }),
+                            /* @__PURE__ */ e("span", { className: "text-foreground-muted", children: re[n.type] }),
                             n.label
                           ]
                         },
@@ -161,13 +162,13 @@ function oe({ node: t, style: c, dragHandle: f }) {
                 )
               ] }),
               /* @__PURE__ */ e(
-                d,
+                m,
                 {
                   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" })
+                  children: /* @__PURE__ */ e(K, { className: "h-3.5 w-3.5" })
                 }
               )
             ]
@@ -177,47 +178,61 @@ function oe({ node: t, style: c, dragHandle: f }) {
     }
   );
 }
-function he({ onTogglePanel: t }) {
-  const { state: c, moveBlock: f, addSection: x, selectBlock: u } = M(), N = j(null), p = j(null), [v, w] = _(400);
+function fe({ onTogglePanel: t }) {
+  const { state: d, moveBlock: f, addSection: N, selectBlock: u } = M(), x = C(null), g = C(null), [v, b] = T(400);
   L(() => {
-    const r = p.current;
-    if (!r) return;
-    const l = new ResizeObserver((h) => {
-      for (const i of h)
-        w(i.contentRect.height);
+    const o = g.current;
+    if (!o) return;
+    const l = new ResizeObserver((i) => {
+      for (const c of i)
+        b(c.contentRect.height);
     });
-    return l.observe(r), () => l.disconnect();
+    return l.observe(o), () => l.disconnect();
   }, []);
-  const a = c.document.children?.find((r) => r.tagName === "mj-body"), o = a?.children || [], b = ({
-    dragIds: r,
+  const s = d.document.children?.find((o) => o.tagName === "mj-body"), r = s?.children || [], w = ({
+    dragIds: o,
     parentId: l,
-    index: h
+    index: i
   }) => {
-    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: [
+    const c = o[0], p = l || s?._id;
+    c && p && f(c, p, i);
+  }, j = G(
+    ({
+      parentNode: o,
+      dragNodes: l
+    }) => {
+      const i = o?.data?.tagName || "mj-body";
+      if ($(i))
+        return !0;
+      for (const c of l)
+        if (!ee(c.data.tagName, i) || o && c.isAncestorOf(o))
+          return !0;
+      return !1;
+    },
+    []
+  );
+  return /* @__PURE__ */ a("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ a("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,
+        m,
         {
           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" })
+          children: /* @__PURE__ */ e(F, { className: "h-4 w-4" })
         }
       )
     ] }),
-    /* @__PURE__ */ e("div", { className: "px-3 py-2 border-b border-border", children: /* @__PURE__ */ s(
-      d,
+    /* @__PURE__ */ e("div", { className: "px-3 py-2 border-b border-border", children: /* @__PURE__ */ a(
+      m,
       {
         variant: "outline",
         size: "sm",
-        onClick: x,
-        disabled: !a,
+        onClick: N,
+        disabled: !s,
         className: "w-full h-8 gap-1.5 text-xs font-medium",
         children: [
           /* @__PURE__ */ e(I, { className: "h-3.5 w-3.5" }),
@@ -225,45 +240,45 @@ function he({ onTogglePanel: t }) {
         ]
       }
     ) }),
-    /* @__PURE__ */ s("div", { className: "px-3 py-1 border-b border-border space-y-0.5", children: [
-      /* @__PURE__ */ s(
+    /* @__PURE__ */ a("div", { className: "px-3 py-1 border-b border-border space-y-0.5", children: [
+      /* @__PURE__ */ a(
         "button",
         {
-          onClick: () => u(C),
-          className: m(
+          onClick: () => u(k),
+          className: h(
             "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"
+            d.selectedBlockId === k && "bg-accent"
           ),
           children: [
-            /* @__PURE__ */ e(F, { className: "h-4 w-4 text-foreground-muted" }),
+            /* @__PURE__ */ e(W, { className: "h-4 w-4 text-foreground-muted" }),
             /* @__PURE__ */ e("span", { className: "text-foreground", children: "Global Styles" })
           ]
         }
       ),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ a(
         "button",
         {
-          onClick: () => u(a?._id || null),
-          className: m(
+          onClick: () => u(s?._id || null),
+          className: h(
             "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"
+            d.selectedBlockId === s?._id && "bg-accent"
           ),
           children: [
-            /* @__PURE__ */ e(W, { className: "h-4 w-4 text-foreground-muted" }),
+            /* @__PURE__ */ e(Y, { 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,
+    /* @__PURE__ */ e("div", { ref: g, className: "flex-1 min-h-0", children: r.length > 0 ? /* @__PURE__ */ e(
+      V,
       {
-        ref: N,
-        data: o,
-        idAccessor: (r) => r._id,
-        childrenAccessor: (r) => r.children || null,
+        ref: x,
+        data: r,
+        idAccessor: (o) => o._id,
+        childrenAccessor: (o) => o.children || null,
         openByDefault: !0,
         width: "100%",
         height: v,
@@ -271,13 +286,14 @@ function he({ onTogglePanel: t }) {
         rowHeight: 32,
         paddingTop: 8,
         paddingBottom: 8,
-        onMove: b,
-        children: oe
+        onMove: w,
+        disableDrop: j,
+        children: ae
       }
     ) : /* @__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
+  k as GLOBAL_STYLES_ID,
+  fe as OutlineTree
 };

package/dist/lib/mjml/nesting-rules.d.ts

@@ -0,0 +1,19 @@
+/**
+ * MJML Nesting Rules
+ *
+ * Defines which MJML elements can be children of which parents.
+ * Used to validate drag-and-drop operations in the tree.
+ */
+/**
+ * Map of parent tag names to their allowed child tag names
+ */
+export declare const ALLOWED_CHILDREN: Record<string, string[]>;
+/**
+ * Check if a child tag can be placed inside a parent tag
+ */
+export declare function canBeChildOf(childTag: string, parentTag: string): boolean;
+/**
+ * Check if a tag is a content block (leaf node that cannot have children)
+ */
+export declare function isContentBlock(tagName: string): boolean;
+//# sourceMappingURL=nesting-rules.d.ts.map

package/dist/lib/mjml/nesting-rules.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nesting-rules.d.ts","sourceRoot":"","sources":["../../../src/lib/mjml/nesting-rules.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CA4BrD,CAAC;AAEF;;GAEG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAEzE;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAEvD"}

package/dist/lib/mjml/nesting-rules.js

@@ -0,0 +1,40 @@
+const j = {
+  "mj-body": ["mj-section", "mj-wrapper", "mj-hero"],
+  "mj-wrapper": ["mj-section"],
+  "mj-section": ["mj-column", "mj-group"],
+  "mj-group": ["mj-column"],
+  "mj-column": [
+    "mj-text",
+    "mj-image",
+    "mj-button",
+    "mj-divider",
+    "mj-spacer",
+    "mj-social",
+    "mj-navbar",
+    "mj-table",
+    "mj-raw",
+    "mj-accordion",
+    "mj-carousel"
+  ],
+  "mj-hero": [
+    "mj-text",
+    "mj-image",
+    "mj-button",
+    "mj-divider",
+    "mj-spacer",
+    "mj-social",
+    "mj-navbar",
+    "mj-raw"
+  ]
+};
+function o(m, e) {
+  return j[e]?.includes(m) ?? !1;
+}
+function r(m) {
+  return !j[m];
+}
+export {
+  j as ALLOWED_CHILDREN,
+  o as canBeChildOf,
+  r as isContentBlock
+};

package/dist/lib/mjml/nesting-rules.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=nesting-rules.test.d.ts.map

package/dist/lib/mjml/nesting-rules.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nesting-rules.test.d.ts","sourceRoot":"","sources":["../../../src/lib/mjml/nesting-rules.test.ts"],"names":[],"mappings":""}

package/package.json

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