@savvycal/mjml-editor 0.0.1 → 0.0.2

package/dist/components/editor/TiptapEditor.js

@@ -0,0 +1,330 @@
+import { jsxs as w, jsx as i, Fragment as J } from "react/jsx-runtime";
+import { forwardRef as Q, useMemo as _, useState as x, useRef as d, useCallback as u, useImperativeHandle as G } from "react";
+import { useEditor as W, EditorContent as X } from "@tiptap/react";
+import Y from "@tiptap/starter-kit";
+import Z from "@tiptap/extension-link";
+import ee from "@tiptap/extension-underline";
+import { useFloating as te, autoUpdate as ne, offset as ie, flip as re, shift as oe } from "@floating-ui/react";
+import { Check as le, Unlink as se, Bold as ce, Italic as ae, Underline as ue, Strikethrough as fe, Link as de } from "lucide-react";
+import { cn as me } from "../../lib/utils.js";
+import { Input as pe } from "../ui/input.js";
+import { Button as H } from "../ui/button.js";
+import { mjmlToTiptapHtml as ge, sanitizeHtmlForMjml as he } from "../../lib/html-utils.js";
+import { useLiquidSchema as ke } from "../../context/LiquidSchemaContext.js";
+import { LiquidSuggestion as be } from "../../extensions/LiquidSuggestion.js";
+import { LiquidHighlight as xe } from "../../extensions/LiquidHighlight.js";
+import { LiquidAutocomplete as ve } from "./LiquidAutocomplete.js";
+const $e = Q(
+  function({ content: v, onUpdate: S, style: L, className: $ }, j) {
+    const q = _(() => ge(v), []), [F, R] = x(!1), [U, p] = x(!1), [g, f] = x(""), C = d(null), h = d(null), k = ke(), [a, c] = x(null), I = d(a);
+    I.current = a;
+    const z = d(null), N = u(
+      (e, r) => {
+        if (!k) return [];
+        const n = e === "variable" ? k.variables : k.tags, l = r.trim().toLowerCase();
+        return n.filter((o) => o.name.toLowerCase().includes(l)).map((o) => ({
+          id: `${e}-${o.name}`,
+          name: o.name,
+          description: o.description,
+          type: e
+        }));
+      },
+      [k]
+    ), E = d(null), { refs: D, floatingStyles: V } = te({
+      placement: "top",
+      middleware: [ie(8), re(), oe({ padding: 8 })],
+      whileElementsMounted: ne
+    }), t = W({
+      extensions: [
+        Y.configure({
+          heading: !1,
+          blockquote: !1,
+          bulletList: !1,
+          orderedList: !1,
+          codeBlock: !1,
+          code: !1,
+          horizontalRule: !1,
+          bold: {},
+          italic: {},
+          strike: {},
+          hardBreak: {}
+        }),
+        ee,
+        Z.configure({
+          openOnClick: !1,
+          HTMLAttributes: {
+            target: "_blank",
+            rel: "noopener noreferrer"
+          }
+        }),
+        xe,
+        be.configure({
+          onStart: ({
+            query: e,
+            triggerType: r,
+            range: n,
+            clientRect: l
+          }) => {
+            const o = N(r, e);
+            o.length === 0 && e.trim() === "" || c({
+              active: !0,
+              items: o,
+              selectedIndex: 0,
+              triggerType: r,
+              range: n,
+              clientRect: l
+            });
+          },
+          onUpdate: ({
+            query: e,
+            triggerType: r,
+            range: n,
+            clientRect: l
+          }) => {
+            const o = N(r, e);
+            c(
+              (s) => s ? {
+                ...s,
+                items: o,
+                selectedIndex: 0,
+                range: n,
+                clientRect: l
+              } : null
+            );
+          },
+          onExit: () => {
+            c(null);
+          },
+          onKeyDown: (e) => {
+            const r = I.current;
+            if (!r?.active) return !1;
+            if (e.key === "ArrowDown")
+              return e.preventDefault(), c(
+                (n) => n ? {
+                  ...n,
+                  selectedIndex: Math.min(
+                    n.selectedIndex + 1,
+                    n.items.length - 1
+                  )
+                } : null
+              ), !0;
+            if (e.key === "ArrowUp")
+              return e.preventDefault(), c(
+                (n) => n ? {
+                  ...n,
+                  selectedIndex: Math.max(n.selectedIndex - 1, 0)
+                } : null
+              ), !0;
+            if (e.key === "Enter" || e.key === "Tab") {
+              if (e.preventDefault(), r.items.length > 0) {
+                const n = r.items[r.selectedIndex];
+                n && z.current?.(n);
+              }
+              return !0;
+            }
+            return e.key === "Escape" ? (e.preventDefault(), c(null), !0) : !1;
+          }
+        })
+      ],
+      content: q,
+      autofocus: !1,
+      immediatelyRender: !1,
+      editorProps: {
+        attributes: {
+          class: "outline-none"
+        }
+      },
+      onUpdate: ({ editor: e }) => {
+        const r = e.getHTML();
+        S(he(r));
+      },
+      onSelectionUpdate: ({ editor: e }) => {
+        const { from: r, to: n, empty: l } = e.state.selection;
+        if (h.current && (clearTimeout(h.current), h.current = null), l) {
+          U || (h.current = setTimeout(() => {
+            R(!1);
+          }, 100));
+          return;
+        }
+        const { view: o } = e, s = o.coordsAtPos(r), b = o.coordsAtPos(n), M = {
+          x: s.left,
+          y: s.top,
+          width: b.left - s.left,
+          height: b.bottom - s.top,
+          top: s.top,
+          left: s.left,
+          right: b.left,
+          bottom: b.bottom,
+          toJSON: () => M
+        };
+        E.current = {
+          getBoundingClientRect: () => M
+        }, D.setReference(E.current), R(!0);
+      }
+    }), K = u(() => {
+      if (!t) return;
+      const e = t.getAttributes("link").href || "";
+      f(e), p(!0), setTimeout(() => {
+        C.current?.focus(), C.current?.select();
+      }, 0);
+    }, [t]), T = u(() => {
+      t && (g && t.chain().focus().extendMarkRange("link").setLink({ href: g }).run(), p(!1), f(""));
+    }, [t, g]), P = u(() => {
+      t && (t.chain().focus().unsetLink().run(), p(!1), f(""));
+    }, [t]), O = u(() => {
+      p(!1), f(""), t?.commands.focus();
+    }, [t]), B = u(
+      (e) => {
+        const r = I.current;
+        if (!t || !r) return;
+        const { range: n, triggerType: l } = r, o = l === "variable" ? `{{ ${e.name} }}` : `{% ${e.name} %}`;
+        t.chain().focus().deleteRange(n).insertContent(o).run(), c(null);
+      },
+      [t]
+    );
+    if (z.current = B, G(j, () => ({
+      focus: () => {
+        t?.commands.focus();
+      }
+    })), !t)
+      return null;
+    const y = t.isActive("link");
+    return /* @__PURE__ */ w("div", { className: "relative cursor-text", children: [
+      F && /* @__PURE__ */ i(
+        "div",
+        {
+          ref: D.setFloating,
+          style: V,
+          className: "light z-50 flex items-center gap-0.5 rounded-lg border border-border bg-popover p-1 shadow-lg",
+          onMouseDown: (e) => e.preventDefault(),
+          children: U ? (
+            // Link input mode
+            /* @__PURE__ */ w("div", { className: "flex items-center gap-1 px-1", children: [
+              /* @__PURE__ */ i(
+                pe,
+                {
+                  ref: C,
+                  type: "url",
+                  placeholder: "https://...",
+                  value: g,
+                  onChange: (e) => f(e.target.value),
+                  onKeyDown: (e) => {
+                    e.key === "Enter" ? (e.preventDefault(), T()) : e.key === "Escape" && (e.preventDefault(), O());
+                  },
+                  className: "h-7 w-48 text-sm"
+                }
+              ),
+              /* @__PURE__ */ i(
+                H,
+                {
+                  size: "icon-sm",
+                  variant: "ghost",
+                  onClick: T,
+                  title: "Apply link",
+                  children: /* @__PURE__ */ i(le, { className: "size-4" })
+                }
+              ),
+              y && /* @__PURE__ */ i(
+                H,
+                {
+                  size: "icon-sm",
+                  variant: "ghost",
+                  onClick: P,
+                  title: "Remove link",
+                  children: /* @__PURE__ */ i(se, { className: "size-4" })
+                }
+              )
+            ] })
+          ) : (
+            // Format buttons mode
+            /* @__PURE__ */ w(J, { children: [
+              /* @__PURE__ */ i(
+                m,
+                {
+                  active: t.isActive("bold"),
+                  onClick: () => t.chain().focus().toggleBold().run(),
+                  title: "Bold (Cmd+B)",
+                  children: /* @__PURE__ */ i(ce, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ i(
+                m,
+                {
+                  active: t.isActive("italic"),
+                  onClick: () => t.chain().focus().toggleItalic().run(),
+                  title: "Italic (Cmd+I)",
+                  children: /* @__PURE__ */ i(ae, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ i(
+                m,
+                {
+                  active: t.isActive("underline"),
+                  onClick: () => t.chain().focus().toggleUnderline().run(),
+                  title: "Underline (Cmd+U)",
+                  children: /* @__PURE__ */ i(ue, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ i(
+                m,
+                {
+                  active: t.isActive("strike"),
+                  onClick: () => t.chain().focus().toggleStrike().run(),
+                  title: "Strikethrough",
+                  children: /* @__PURE__ */ i(fe, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ i(Se, {}),
+              /* @__PURE__ */ i(
+                m,
+                {
+                  active: y,
+                  onClick: K,
+                  title: y ? "Edit link" : "Add link",
+                  children: /* @__PURE__ */ i(de, { className: "size-4" })
+                }
+              )
+            ] })
+          )
+        }
+      ),
+      /* @__PURE__ */ i(X, { editor: t, style: L, className: $ }),
+      a?.active && /* @__PURE__ */ i(
+        ve,
+        {
+          items: a.items,
+          selectedIndex: a.selectedIndex,
+          onSelect: B,
+          clientRect: a.clientRect
+        }
+      )
+    ] });
+  }
+);
+function m({
+  active: A,
+  onClick: v,
+  title: S,
+  children: L
+}) {
+  return /* @__PURE__ */ i(
+    "button",
+    {
+      type: "button",
+      onClick: v,
+      title: S,
+      className: me(
+        "flex items-center justify-center size-7 rounded-md transition-colors",
+        "text-foreground hover:bg-accent",
+        A && "bg-accent text-accent-foreground"
+      ),
+      children: L
+    }
+  );
+}
+function Se() {
+  return /* @__PURE__ */ i("div", { className: "w-px h-5 bg-border mx-1" });
+}
+export {
+  $e as TiptapEditor
+};

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

@@ -0,0 +1,7 @@
+interface VisualEditorProps {
+    leftPanelOpen?: boolean;
+    rightPanelOpen?: boolean;
+}
+export declare function VisualEditor({ leftPanelOpen, rightPanelOpen, }: VisualEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=VisualEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VisualEditor.d.ts","sourceRoot":"","sources":["../../../src/components/editor/VisualEditor.tsx"],"names":[],"mappings":"AAeA,UAAU,iBAAiB;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,YAAY,CAAC,EAC3B,aAAa,EACb,cAAc,GACf,EAAE,iBAAiB,2CAwEnB"}

package/dist/components/editor/VisualEditor.js

@@ -0,0 +1,51 @@
+import { jsx as r, jsxs as g } from "react/jsx-runtime";
+import { useEditor as b } from "../../context/EditorContext.js";
+import { ScrollArea as p } from "../ui/scroll-area.js";
+import { VisualSection as N } from "./visual-blocks/VisualSection.js";
+import { useFontLoader as y } from "../../hooks/useFontLoader.js";
+import { useStyleLoader as _, VISUAL_EDITOR_SCOPE_CLASS as A } from "../../hooks/useStyleLoader.js";
+const E = 256, L = 300, i = 12, c = 24;
+function G({
+  leftPanelOpen: s,
+  rightPanelOpen: l
+}) {
+  const { state: a, selectBlock: m } = b();
+  y(), _();
+  const o = a.document.children?.find((t) => t.tagName === "mj-body"), e = o?.attributes.width || "600px", u = o?.attributes["background-color"], h = (t) => {
+    t.target === t.currentTarget && m(null);
+  }, d = s ? E + i + c : 16, n = l ? L + i + c : 16, f = (parseInt(e, 10) || 600) + d + n;
+  return /* @__PURE__ */ r(
+    p,
+    {
+      className: "h-full",
+      orientation: "both",
+      viewportStyle: { backgroundColor: u || "#ffffff" },
+      children: /* @__PURE__ */ r(
+        "div",
+        {
+          className: "py-8",
+          style: {
+            paddingLeft: d,
+            paddingRight: n,
+            minWidth: f
+          },
+          onClick: h,
+          children: /* @__PURE__ */ g(
+            "div",
+            {
+              className: `light mx-auto w-full ${A}`,
+              style: { maxWidth: e },
+              children: [
+                o?.children?.map((t) => /* @__PURE__ */ r(N, { node: t }, t._id)),
+                (!o?.children || o.children.length === 0) && /* @__PURE__ */ r("div", { className: "bg-surface rounded-lg border-2 border-dashed border-border p-12 text-center", children: /* @__PURE__ */ r("p", { className: "text-muted-foreground", children: "Add a section to get started" }) })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  G as VisualEditor
+};

package/dist/components/editor/visual-blocks/VisualBlock.d.ts

@@ -0,0 +1,7 @@
+import { MjmlNode } from '../../../types/mjml';
+interface VisualBlockProps {
+    node: MjmlNode;
+}
+export declare function VisualBlock({ node }: VisualBlockProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=VisualBlock.d.ts.map

package/dist/components/editor/visual-blocks/VisualBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/visual-blocks/VisualBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAS7C,UAAU,gBAAgB;IACxB,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,EAAE,gBAAgB,2CAuBrD"}

package/dist/components/editor/visual-blocks/VisualBlock.js

@@ -0,0 +1,34 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { VisualText as m } from "./VisualText.js";
+import { VisualImage as e } from "./VisualImage.js";
+import { VisualButton as i } from "./VisualButton.js";
+import { VisualDivider as s } from "./VisualDivider.js";
+import { VisualSpacer as u } from "./VisualSpacer.js";
+import { VisualSocial as o } from "./VisualSocial.js";
+import { VisualRaw as c } from "./VisualRaw.js";
+function g({ node: r }) {
+  switch (r.tagName) {
+    case "mj-text":
+      return /* @__PURE__ */ t(m, { node: r });
+    case "mj-image":
+      return /* @__PURE__ */ t(e, { node: r });
+    case "mj-button":
+      return /* @__PURE__ */ t(i, { node: r });
+    case "mj-divider":
+      return /* @__PURE__ */ t(s, { node: r });
+    case "mj-spacer":
+      return /* @__PURE__ */ t(u, { node: r });
+    case "mj-social":
+      return /* @__PURE__ */ t(o, { node: r });
+    case "mj-raw":
+      return /* @__PURE__ */ t(c, { node: r });
+    default:
+      return /* @__PURE__ */ a("div", { className: "p-2 bg-amber-50 border border-amber-200 text-amber-700 text-sm", children: [
+        "Unsupported block: ",
+        r.tagName
+      ] });
+  }
+}
+export {
+  g as VisualBlock
+};

package/dist/components/editor/visual-blocks/VisualButton.d.ts

@@ -0,0 +1,7 @@
+import { MjmlNode } from '../../../types/mjml';
+interface VisualButtonProps {
+    node: MjmlNode;
+}
+export declare function VisualButton({ node }: VisualButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=VisualButton.d.ts.map

package/dist/components/editor/visual-blocks/VisualButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualButton.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/visual-blocks/VisualButton.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAK7C,UAAU,iBAAiB;IACzB,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,EAAE,iBAAiB,2CAmLvD"}

package/dist/components/editor/visual-blocks/VisualButton.js

@@ -0,0 +1,111 @@
+import { jsxs as I, jsx as c } from "react/jsx-runtime";
+import { useState as L, useRef as O, useEffect as Q, useMemo as X } from "react";
+import { useEditor as Y } from "../../../context/EditorContext.js";
+import { cn as a } from "../../../lib/utils.js";
+import { highlightLiquidTags as Z } from "../../../lib/html-utils.js";
+import { buildPadding as $ } from "./helpers.js";
+import { useResolvedAttributes as tt } from "./useResolvedAttributes.js";
+import { LiquidInput as et } from "../LiquidInput.js";
+function dt({ node: o }) {
+  const { state: N, selectBlock: T, updateContent: _ } = Y(), d = N.selectedBlockId === o._id, [n, s] = L(!1), [l, f] = L(""), i = O(null), t = tt(o), A = (e) => {
+    e.stopPropagation(), e.preventDefault(), T(o._id);
+  }, P = (e) => {
+    e.stopPropagation(), e.preventDefault(), f(o.content || ""), s(!0);
+  }, j = () => {
+    s(!1), l !== o.content && _(o._id, l);
+  }, H = (e) => {
+    e.key === "Escape" ? s(!1) : e.key === "Enter" && (e.preventDefault(), i.current?.blur());
+  };
+  Q(() => {
+    n && i.current && (i.current.focus(), i.current.select());
+  }, [n]);
+  const V = t["background-color"] || "#414141", u = t.color || "#ffffff", g = t["font-size"] || "13px", p = t["font-family"] || "Ubuntu, Helvetica, Arial, sans-serif", b = t["font-weight"] || "normal", h = t["font-style"] || "normal", m = t["line-height"] || "120%", x = t["letter-spacing"], v = t["text-align"] || "center", y = t["text-decoration"] || "none", k = t["text-transform"] || "none", q = t["border-radius"] || "3px", C = t.border, w = t["border-top"], B = t["border-right"], D = t["border-bottom"], S = t["border-left"], E = t.align || "center", R = t["vertical-align"] || "middle", z = t["inner-padding"] || "10px 25px", K = $(t, "10px 25px"), M = t.width, F = t.height, U = t["container-background-color"], W = E === "left" ? "flex-start" : E === "right" ? "flex-end" : "center", G = R === "top" ? "flex-start" : R === "bottom" ? "flex-end" : "center", r = {
+    backgroundColor: V,
+    color: u,
+    fontSize: g,
+    fontFamily: p,
+    fontWeight: b,
+    fontStyle: h,
+    lineHeight: m,
+    letterSpacing: x || void 0,
+    textAlign: v,
+    textDecoration: y,
+    textTransform: k,
+    padding: z,
+    borderRadius: q,
+    width: M || void 0,
+    height: F || void 0
+  };
+  C && (r.border = C), w && (r.borderTop = w), B && (r.borderRight = B), D && (r.borderBottom = D), S && (r.borderLeft = S);
+  const J = X(
+    () => Z(o.content || "") || "Button",
+    [o.content]
+  );
+  return /* @__PURE__ */ I(
+    "div",
+    {
+      className: a(
+        "relative transition-all",
+        d && !n && "ring-2 ring-indigo-500 ring-offset-2",
+        t["css-class"]
+      ),
+      style: {
+        padding: K,
+        display: "flex",
+        justifyContent: W,
+        alignItems: G,
+        backgroundColor: U || void 0
+      },
+      onClick: A,
+      onDoubleClick: P,
+      children: [
+        /* @__PURE__ */ I(
+          "span",
+          {
+            className: a(
+              "relative inline-block cursor-pointer",
+              n && "ring-2 ring-indigo-500"
+            ),
+            style: r,
+            children: [
+              /* @__PURE__ */ c(
+                "span",
+                {
+                  className: a(n && "invisible"),
+                  dangerouslySetInnerHTML: { __html: J }
+                }
+              ),
+              n && /* @__PURE__ */ c(
+                et,
+                {
+                  ref: i,
+                  value: l,
+                  onChange: f,
+                  onBlur: j,
+                  onKeyDown: H,
+                  className: "absolute inset-0 w-full h-full outline-none bg-transparent",
+                  style: {
+                    color: u,
+                    fontSize: g,
+                    fontFamily: p,
+                    fontWeight: b,
+                    fontStyle: h,
+                    lineHeight: m,
+                    letterSpacing: x || void 0,
+                    textAlign: v,
+                    textDecoration: y,
+                    textTransform: k
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        d && !n && /* @__PURE__ */ c("div", { className: "absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-indigo-600 bg-white px-1 rounded shadow-sm whitespace-nowrap", children: "Double-click to edit" })
+      ]
+    }
+  );
+}
+export {
+  dt as VisualButton
+};

package/dist/components/editor/visual-blocks/VisualColumn.d.ts

@@ -0,0 +1,8 @@
+import { MjmlNode } from '../../../types/mjml';
+interface VisualColumnProps {
+    node: MjmlNode;
+    totalColumns: number;
+}
+export declare function VisualColumn({ node, totalColumns }: VisualColumnProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=VisualColumn.d.ts.map

package/dist/components/editor/visual-blocks/VisualColumn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualColumn.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/visual-blocks/VisualColumn.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI7C,UAAU,iBAAiB;IACzB,IAAI,EAAE,QAAQ,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,iBAAiB,2CA4HrE"}

package/dist/components/editor/visual-blocks/VisualColumn.js

@@ -0,0 +1,44 @@
+import { jsx as n, jsxs as S, Fragment as P } from "react/jsx-runtime";
+import { useEditor as V } from "../../../context/EditorContext.js";
+import { VisualBlock as x } from "./VisualBlock.js";
+import { cn as E } from "../../../lib/utils.js";
+import { buildPadding as F } from "./helpers.js";
+import { useResolvedAttributes as $ } from "./useResolvedAttributes.js";
+function M({ node: i, totalColumns: L }) {
+  const { state: T, selectBlock: _ } = V(), w = T.selectedBlockId === i._id, r = $(i), s = (e) => {
+    e.stopPropagation(), _(i._id);
+  }, u = r.width;
+  let c;
+  u ? c = u : c = `${100 / L}%`;
+  const A = r["background-color"] || "transparent", N = F(r, "0"), h = r["vertical-align"] || "top", B = r.border, k = r["border-top"], C = r["border-right"], R = r["border-bottom"], v = r["border-left"], y = r["border-radius"], l = r["inner-background-color"], a = r["inner-border"], b = r["inner-border-top"], f = r["inner-border-right"], g = r["inner-border-bottom"], m = r["inner-border-left"], p = r["inner-border-radius"], j = r.direction || "ltr", I = l || a || b || f || g || m || p, d = i.children || [], t = {
+    width: c,
+    backgroundColor: A,
+    padding: N,
+    alignSelf: h === "top" ? "flex-start" : h === "bottom" ? "flex-end" : "center",
+    direction: j
+  };
+  B && (t.border = B), k && (t.borderTop = k), C && (t.borderRight = C), R && (t.borderBottom = R), v && (t.borderLeft = v), y && (t.borderRadius = y);
+  const o = {};
+  return l && (o.backgroundColor = l), a && (o.border = a), b && (o.borderTop = b), f && (o.borderRight = f), g && (o.borderBottom = g), m && (o.borderLeft = m), p && (o.borderRadius = p), /* @__PURE__ */ n(
+    "div",
+    {
+      className: E(
+        "relative transition-all",
+        w && "ring-2 ring-indigo-500 ring-inset",
+        r["css-class"]
+      ),
+      style: t,
+      onClick: s,
+      children: I ? /* @__PURE__ */ S("div", { style: o, children: [
+        d.map((e) => /* @__PURE__ */ n(x, { node: e }, e._id)),
+        d.length === 0 && /* @__PURE__ */ n("div", { className: "py-4", onClick: s })
+      ] }) : /* @__PURE__ */ S(P, { children: [
+        d.map((e) => /* @__PURE__ */ n(x, { node: e }, e._id)),
+        d.length === 0 && /* @__PURE__ */ n("div", { className: "py-4", onClick: s })
+      ] })
+    }
+  );
+}
+export {
+  M as VisualColumn
+};

package/dist/components/editor/visual-blocks/VisualDivider.d.ts

@@ -0,0 +1,7 @@
+import { MjmlNode } from '../../../types/mjml';
+interface VisualDividerProps {
+    node: MjmlNode;
+}
+export declare function VisualDivider({ node }: VisualDividerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=VisualDivider.d.ts.map

package/dist/components/editor/visual-blocks/VisualDivider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualDivider.d.ts","sourceRoot":"","sources":["../../../../src/components/editor/visual-blocks/VisualDivider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI7C,UAAU,kBAAkB;IAC1B,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,EAAE,kBAAkB,2CAoDzD"}

package/dist/components/editor/visual-blocks/VisualDivider.js

@@ -0,0 +1,41 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useEditor as f } from "../../../context/EditorContext.js";
+import { cn as k } from "../../../lib/utils.js";
+import { buildPadding as C } from "./helpers.js";
+import { useResolvedAttributes as v } from "./useResolvedAttributes.js";
+function T({ node: r }) {
+  const { state: n, selectBlock: s } = f(), c = n.selectedBlockId === r._id, o = v(r), d = (h) => {
+    h.stopPropagation(), s(r._id);
+  }, l = o["border-color"] || "#000000", a = o["border-width"] || "4px", g = o["border-style"] || "solid", p = o.width || "100%", t = o.align || "center", u = C(o, "10px 25px"), i = o["container-background-color"], b = t === "right" || t === "center" ? "auto" : "0", m = t === "left" || t === "center" ? "auto" : "0";
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: k(
+        "relative cursor-pointer transition-all",
+        c && "ring-2 ring-indigo-500 ring-inset",
+        o["css-class"]
+      ),
+      style: {
+        padding: u,
+        ...i && { backgroundColor: i }
+      },
+      onClick: d,
+      children: /* @__PURE__ */ e(
+        "div",
+        {
+          style: {
+            width: p,
+            marginLeft: b,
+            marginRight: m,
+            borderTopColor: l,
+            borderTopWidth: a,
+            borderTopStyle: g
+          }
+        }
+      )
+    }
+  );
+}
+export {
+  T as VisualDivider
+};