@maildeno/editor 0.4.3 → 0.4.5

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # Changelog
 
+## 0.4.5
+
+Packaging only. No API change, no behaviour change.
+
+### Changed
+
+**The 15 runtime dependencies moved to devDependencies.** TipTap,
+ProseMirror, reka-ui, @vueuse/core, prettier and @internationalized/date
+are all bundled into `dist` at build time, so declaring them as runtime
+dependencies made npm install a second, unused copy of each into every
+consumer's node_modules.
+
+`dist` imports exactly one external module — `vue` — which is already the
+sole peerDependency. Verified across every emitted chunk, and by
+installing the package with nothing but Vue and building a consumer:
+32/32 scoped selectors present, no unresolved imports.
+
+Installing the package now pulls **25 MB across 15 packages instead of
+71 MB across 45**.
+
+If any of these is ever externalised rather than bundled, it has to move
+back. `dist` importing anything other than `vue` is the signal.
+
+## 0.4.4
+
+Packaging only. No API change, no behaviour change in the editor itself.
+The published package drops from 8.13 MB unpacked to 5.48 MB, 32.6% smaller.
+
+### Changed
+
+**React Email export formats with prettier's babel-ts parser** instead of
+the typescript parser. `prettier/plugins/typescript` is 900kB of source
+against babel's 318kB and was the largest single file in the package.
+Output is byte-identical on the TSX this package generates, verified
+across generics, JSX, inline style objects and mapped children. The
+typescript parser is the stricter of the two, which matters for arbitrary
+user code but not for TSX `react-email.ts` generated moments earlier.
+Saves 600kB.
+
+**Both build passes are minified.** They have to agree: the two passes
+share chunks by content hash, so identical output collapses to one file
+and differing output ships two. Minifying only the element pass made the
+package *larger* — 8.68 MB — because every prettier chunk was then
+carried twice, once minified and once not. Saves 1.92MB with both on.
+
+**`element-scoped-styles.css` is no longer emitted.** Nothing referenced
+it: not `src/`, not the framework guides, not the README, not the exports
+map. The shadow root reads those rules from the substituted string inside
+the chunk, and Vite only extracted the file because library mode always
+does. `dist/editor.css` is unaffected and `./style.css` still resolves.
+Saves 72kB.
+
 ## 0.4.3
 
 ### Fixed

package/dist/RowPreviewLegacyComponent-3QuwvWmT.js

@@ -0,0 +1,402 @@
+import { Fragment as b, computed as G, createBlock as V, createCommentVNode as v, createElementBlock as a, createElementVNode as c, createTextVNode as q, defineComponent as J, normalizeStyle as r, openBlock as o, renderList as S, resolveDynamicComponent as O, toDisplayString as x } from "vue";
+var K = ["innerHTML"], Q = ["src", "alt"], U = ["src", "alt"], X = {
+  style: {
+    width: "30%",
+    height: "30%",
+    color: "#9ca3af"
+  },
+  fill: "currentColor",
+  viewBox: "0 0 20 20"
+}, Y = ["src", "alt"], Z = ["src", "alt"], _ = ["innerHTML"], tt = { key: 8 }, et = { key: 0 }, nt = ["src", "alt"], it = {
+  key: 1,
+  style: {
+    "font-size": "7px",
+    color: "#9ca3af",
+    "font-style": "italic"
+  }
+}, ot = {
+  key: 11,
+  class: "rounded truncate",
+  style: {
+    "font-size": "7px",
+    color: "#9ca3af",
+    background: "#f3f4f6",
+    padding: "1px 3px"
+  }
+}, at = /* @__PURE__ */ J({
+  __name: "RowPreviewLegacyComponent",
+  props: {
+    comp: {},
+    scale: {}
+  },
+  setup(e) {
+    const y = e, l = G(() => y.comp.componentType ?? y.comp.type);
+    function u(t) {
+      return t ? t.replace(/<span[^>]*\bdata-merge="([^"]+)"(?:[^>]*\bdata-merge-default="([^"]*)")?[^>]*>.*?<\/span>/gs, (n, i, g) => {
+        const d = i.trim(), f = g?.trim();
+        return f ? `{{ ${d}|'${f}' }}` : `{{ ${d} }}`;
+      }) : "";
+    }
+    function m(t) {
+      const n = t?.backgroundGradient;
+      if (n?.useGradient === !0 && Array.isArray(n?.gradient?.colors) && n.gradient.colors.length >= 2) {
+        const { type: i, direction: g, colors: d } = n.gradient, f = d.map((p) => `${p.color} ${p.position}%`).join(", ");
+        return i === "radial" ? `radial-gradient(circle at center, ${f})` : `linear-gradient(${g}, ${f})`;
+      }
+      return t?.backgroundColor || "transparent";
+    }
+    function s(t) {
+      if (t && (t.includes(" ") || [
+        "Roboto",
+        "Open Sans",
+        "Lato",
+        "Montserrat",
+        "Poppins",
+        "Nunito",
+        "Raleway",
+        "Plus Jakarta Sans"
+      ].some((n) => t.includes(n))) && typeof document < "u") {
+        const n = `https://fonts.googleapis.com/css2?family=${t.replace(/ /g, "+")}:wght@300;400;500;600;700;800&display=swap`;
+        if (!document.querySelector(`link[href="${n}"]`)) {
+          const i = document.createElement("link");
+          i.href = n, i.rel = "stylesheet", document.head.appendChild(i);
+        }
+      }
+    }
+    function k(t) {
+      return t?.fontFamily && s(t.fontFamily), {
+        fontSize: Math.max(7, t?.fontSize || 24) + "px",
+        color: t?.color || "#111111",
+        fontWeight: t?.fontWeight || "bold",
+        fontFamily: t?.fontFamily || "Arial, sans-serif",
+        textAlign: t?.align || "left",
+        lineHeight: String(t?.lineHeight ?? 1.2),
+        letterSpacing: `${t?.letterSpacing ?? 0}px`,
+        textTransform: t?.textTransform || "none",
+        textDecoration: t?.textDecoration || "none",
+        background: m(t),
+        margin: `${t?.margin?.top ?? 0}px ${t?.margin?.right ?? 0}px ${t?.margin?.bottom ?? 4}px ${t?.margin?.left ?? 0}px`,
+        padding: `${t?.padding?.top ?? 0}px ${t?.padding?.right ?? 0}px ${t?.padding?.bottom ?? 0}px ${t?.padding?.left ?? 0}px`
+      };
+    }
+    function w(t) {
+      return t?.fontFamily && s(t.fontFamily), {
+        fontSize: Math.max(6, t?.fontSize || 16) + "px",
+        color: t?.color || "#111111",
+        fontFamily: t?.fontFamily || "Arial, sans-serif",
+        fontWeight: t?.fontWeight || "normal",
+        fontStyle: t?.fontStyle || "normal",
+        textAlign: t?.align || "left",
+        lineHeight: String(t?.lineHeight ?? 1.5),
+        letterSpacing: `${t?.letterSpacing ?? 0}px`,
+        textTransform: t?.textTransform || "none",
+        textDecoration: t?.textDecoration || "none",
+        background: m(t),
+        margin: `${t?.margin?.top ?? 0}px ${t?.margin?.right ?? 0}px ${t?.margin?.bottom ?? 4}px ${t?.margin?.left ?? 0}px`,
+        padding: `${t?.padding?.top ?? 0}px ${t?.padding?.right ?? 0}px ${t?.padding?.bottom ?? 0}px ${t?.padding?.left ?? 0}px`
+      };
+    }
+    function F(t) {
+      return {
+        margin: `${t?.margin?.top ?? 0}px ${t?.margin?.right ?? 0}px ${t?.margin?.bottom ?? 0}px ${t?.margin?.left ?? 0}px`,
+        padding: `${t?.padding?.top ?? 0}px ${t?.padding?.right ?? 0}px ${t?.padding?.bottom ?? 0}px ${t?.padding?.left ?? 0}px`,
+        textAlign: t?.align || "left"
+      };
+    }
+    function z(t) {
+      const n = t?.align || "left";
+      return {
+        width: (t?.width || 100) + "%",
+        height: t?.height || "auto",
+        borderRadius: (t?.borderRadius || 0) + "px",
+        border: `${t?.border?.width || 0}px ${t?.border?.style || "solid"} ${t?.border?.color || "#000000"}`,
+        display: "block",
+        margin: n === "center" ? "0 auto" : n === "right" ? "0 0 0 auto" : "0"
+      };
+    }
+    function A(t) {
+      return {
+        margin: `${t?.margin?.top ?? 0}px ${t?.margin?.right ?? 0}px ${t?.margin?.bottom ?? 0}px ${t?.margin?.left ?? 0}px`,
+        padding: `${t?.padding?.top ?? 0}px ${t?.padding?.right ?? 0}px ${t?.padding?.bottom ?? 0}px ${t?.padding?.left ?? 0}px`,
+        textAlign: t?.align || "left",
+        maxWidth: "100%"
+      };
+    }
+    function C(t) {
+      const n = t?.align || "left";
+      return {
+        width: "100%",
+        maxWidth: "100%",
+        paddingBottom: "56.25%",
+        height: "0",
+        position: "relative",
+        display: "inline-block",
+        borderRadius: (t?.borderRadius || 0) + "px",
+        border: `${t?.border?.width || 0}px ${t?.border?.style || "solid"} ${t?.border?.color || "#000000"}`,
+        overflow: "hidden",
+        marginLeft: n === "center" || n === "right" ? "auto" : "0",
+        marginRight: n === "center" ? "auto" : "0",
+        boxSizing: "border-box"
+      };
+    }
+    function H() {
+      return {
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+        display: "block"
+      };
+    }
+    function M() {
+      return {
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        background: "#e5e7eb",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      };
+    }
+    function T(t) {
+      return {
+        margin: `${t?.margin?.top ?? 0}px ${t?.margin?.right ?? 0}px ${t?.margin?.bottom ?? 4}px ${t?.margin?.left ?? 0}px`,
+        textAlign: t?.align || "center"
+      };
+    }
+    function L(t) {
+      t?.fontFamily && s(t.fontFamily);
+      const n = !!t?.icon;
+      return {
+        background: m(t),
+        color: t?.color || "#ffffff",
+        fontSize: Math.max(5, t?.fontSize || 16) + "px",
+        fontWeight: t?.fontWeight || "500",
+        fontFamily: t?.fontFamily || "Arial, sans-serif",
+        letterSpacing: `${t?.letterSpacing ?? 0}px`,
+        padding: `${t?.padding?.top ?? 8}px ${t?.padding?.right ?? 16}px ${t?.padding?.bottom ?? 8}px ${t?.padding?.left ?? 16}px`,
+        borderRadius: (t?.borderRadius || 4) + "px",
+        border: `${t?.border?.width || 0}px ${t?.border?.style || "solid"} ${t?.border?.color || "#000000"}`,
+        ...n ? {
+          display: "inline-flex",
+          alignItems: "center",
+          verticalAlign: "middle"
+        } : { display: "inline-block" },
+        lineHeight: "1.2",
+        textDecoration: "none"
+      };
+    }
+    function h(t) {
+      const n = Math.max(4, t?.iconSize ?? 20), i = t?.iconGap ?? 8, g = t?.iconPosition !== "after";
+      return {
+        display: "block",
+        width: n + "px",
+        height: n + "px",
+        flexShrink: "0",
+        marginRight: g ? i + "px" : "0",
+        marginLeft: g ? "0" : i + "px"
+      };
+    }
+    function $(t) {
+      const n = t.target;
+      n.style.display = "none";
+    }
+    function R(t) {
+      return {
+        margin: `${t?.margin?.top ?? 0}px ${t?.margin?.right ?? 0}px ${t?.margin?.bottom ?? 4}px ${t?.margin?.left ?? 0}px`,
+        padding: `${t?.padding?.top ?? 0}px ${t?.padding?.right ?? 0}px ${t?.padding?.bottom ?? 0}px ${t?.padding?.left ?? 0}px`,
+        textAlign: t?.align || "left"
+      };
+    }
+    function W(t) {
+      return t?.fontFamily && s(t.fontFamily), {
+        color: t?.color || "#007bff",
+        fontSize: Math.max(6, t?.fontSize || 16) + "px",
+        fontWeight: t?.fontWeight || "normal",
+        fontFamily: t?.fontFamily || "Arial, sans-serif",
+        letterSpacing: `${t?.letterSpacing ?? 0}px`,
+        textDecoration: t?.textDecoration || "underline"
+      };
+    }
+    function D(t) {
+      return t?.fontFamily && s(t.fontFamily), {
+        margin: `${t?.margin?.top ?? 0}px ${t?.margin?.right ?? 0}px ${t?.margin?.bottom ?? 0}px ${t?.margin?.left ?? 0}px`,
+        padding: `${t?.padding?.top ?? 0}px ${t?.padding?.right ?? 0}px ${t?.padding?.bottom ?? 0}px ${t?.padding?.left ?? 16}px`,
+        fontSize: Math.max(6, t?.fontSize || 16) + "px",
+        fontFamily: t?.fontFamily || "Arial, sans-serif",
+        lineHeight: String(t?.lineHeight ?? 1.5),
+        letterSpacing: `${t?.letterSpacing ?? 0}px`,
+        color: t?.color || "#111111",
+        background: m(t)
+      };
+    }
+    function I(t) {
+      return {
+        margin: `${t?.margin?.top ?? 0}px ${t?.margin?.right ?? 0}px ${t?.margin?.bottom ?? 0}px ${t?.margin?.left ?? 0}px`,
+        padding: `${t?.padding?.top ?? 0}px ${t?.padding?.right ?? 0}px ${t?.padding?.bottom ?? 0}px ${t?.padding?.left ?? 0}px`,
+        textAlign: t?.align || "left"
+      };
+    }
+    function P(t) {
+      const n = t?.align || "left";
+      return {
+        width: (t?.width || 100) + "%",
+        height: (t?.height || 1) + "px",
+        background: m(t),
+        border: "none",
+        margin: n === "center" ? "0 auto" : n === "right" ? "0 0 0 auto" : "0"
+      };
+    }
+    function B(t) {
+      return {
+        width: "100%",
+        height: (t?.height || 16) + "px",
+        background: m(t)
+      };
+    }
+    function E(t) {
+      return t?.fontFamily && s(t.fontFamily), {
+        margin: `${t?.margin?.top ?? 0}px ${t?.margin?.right ?? 0}px ${t?.margin?.bottom ?? 0}px ${t?.margin?.left ?? 0}px`,
+        padding: `${t?.padding?.top ?? 0}px ${t?.padding?.right ?? 0}px ${t?.padding?.bottom ?? 0}px ${t?.padding?.left ?? 0}px`,
+        textAlign: t?.align || "left",
+        lineHeight: "0",
+        background: m(t)
+      };
+    }
+    function j(t, n, i) {
+      t?.fontFamily && s(t.fontFamily);
+      const g = t?.mobileStack === !0, d = t?.spacing ?? 8, f = n === 0, p = n === i - 1;
+      return {
+        display: "inline-block",
+        marginLeft: f ? "0px" : `${d / 2}px`,
+        marginRight: p ? "0px" : `${d / 2}px`,
+        fontSize: Math.max(6, t?.fontSize ?? 14) + "px",
+        lineHeight: String(t?.lineHeight ?? 1.4),
+        letterSpacing: (t?.letterSpacing ?? 0) + "px",
+        color: t?.color || "#111111",
+        fontWeight: t?.fontWeight || "normal",
+        fontFamily: t?.fontFamily ? `'${t.fontFamily}', Arial, sans-serif` : "Arial, sans-serif",
+        fontStyle: t?.fontStyle || "normal",
+        textTransform: t?.textTransform || "none",
+        textDecoration: t?.textDecoration || "none",
+        whiteSpace: g ? "normal" : "nowrap",
+        cursor: "default"
+      };
+    }
+    function N(t) {
+      return {
+        margin: `${t?.margin?.top ?? 0}px ${t?.margin?.right ?? 0}px ${t?.margin?.bottom ?? 0}px ${t?.margin?.left ?? 0}px`,
+        padding: `${t?.padding?.top ?? 0}px ${t?.padding?.right ?? 0}px ${t?.padding?.bottom ?? 0}px ${t?.padding?.left ?? 0}px`,
+        textAlign: t?.align || "left",
+        display: "flex",
+        flexWrap: "wrap",
+        gap: (t?.spacing ?? 8) + "px",
+        justifyContent: t?.align === "center" ? "center" : t?.align === "right" ? "flex-end" : "flex-start"
+      };
+    }
+    return (t, n) => l.value === "heading" ? (o(), V(O(e.comp.props?.level || "h2"), {
+      key: 0,
+      style: r(k(e.comp.props)),
+      class: "truncate",
+      innerHTML: u(e.comp.props?.content) || "Heading"
+    }, null, 8, ["style", "innerHTML"])) : l.value === "paragraph" ? (o(), a("p", {
+      key: 1,
+      style: r([w(e.comp.props), {
+        display: "-webkit-box",
+        "-webkit-line-clamp": "2",
+        "-webkit-box-orient": "vertical"
+      }]),
+      class: "overflow-hidden",
+      innerHTML: u(e.comp.props?.content) || "Text"
+    }, null, 12, K)) : l.value === "image" ? (o(), a("div", {
+      key: 2,
+      style: r(F(e.comp.props))
+    }, [c("img", {
+      src: e.comp.props?.src,
+      alt: e.comp.props?.alt || "",
+      style: r(z(e.comp.props))
+    }, null, 12, Q)], 4)) : l.value === "video" ? (o(), a("div", {
+      key: 3,
+      style: r(A(e.comp.props))
+    }, [c("div", { style: r(C(e.comp.props)) }, [e.comp.props?.coverImage ? (o(), a("img", {
+      key: 0,
+      src: e.comp.props.coverImage,
+      alt: e.comp.props?.alt || "Video",
+      style: r(H())
+    }, null, 12, U)) : (o(), a("div", {
+      key: 1,
+      style: r(M())
+    }, [(o(), a("svg", X, [...n[0] || (n[0] = [c("path", {
+      "fill-rule": "evenodd",
+      d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z",
+      "clip-rule": "evenodd"
+    }, null, -1)])]))], 4))], 4)], 4)) : l.value === "button" ? (o(), a("div", {
+      key: 4,
+      style: r(T(e.comp.props))
+    }, [c("span", {
+      style: r(L(e.comp.props)),
+      class: "inline-block truncate"
+    }, [
+      e.comp.props?.icon && e.comp.props?.iconPosition !== "after" ? (o(), a("img", {
+        key: 0,
+        src: e.comp.props.icon,
+        alt: e.comp.props?.iconAlt || "",
+        style: r(h(e.comp.props)),
+        onError: $
+      }, null, 44, Y)) : v("", !0),
+      q(" " + x(e.comp.props?.text || "Button") + " ", 1),
+      e.comp.props?.icon && e.comp.props?.iconPosition === "after" ? (o(), a("img", {
+        key: 1,
+        src: e.comp.props.icon,
+        alt: e.comp.props?.iconAlt || "",
+        style: r(h(e.comp.props)),
+        onError: $
+      }, null, 44, Z)) : v("", !0)
+    ], 4)], 4)) : l.value === "anchor" ? (o(), a("div", {
+      key: 5,
+      style: r(R(e.comp.props))
+    }, [c("span", {
+      style: r(W(e.comp.props)),
+      class: "truncate block"
+    }, x(e.comp.props?.text || "Link"), 5)], 4)) : l.value === "list" ? (o(), a("div", {
+      key: 6,
+      style: r(D(e.comp.props)),
+      innerHTML: u(e.comp.props?.content) || "<ul><li>Item</li></ul>"
+    }, null, 12, _)) : l.value === "divider" ? (o(), a("div", {
+      key: 7,
+      style: r(I(e.comp.props))
+    }, [c("hr", { style: r(P(e.comp.props)) }, null, 4)], 4)) : l.value === "spacer" ? (o(), a("div", tt, [c("div", { style: r(B(e.comp.props)) }, null, 4)])) : l.value === "menu" ? (o(), a("div", {
+      key: 9,
+      style: r(E(e.comp.props))
+    }, [e.comp.props?.items?.some((i) => i.enabled && i.label) ? (o(!0), a(b, { key: 1 }, S(e.comp.props.items.filter((i) => i.enabled && i.label), (i, g) => (o(), a("span", {
+      key: i._id || g,
+      style: r(j(e.comp.props, Number(g), e.comp.props.items.filter((d) => d.enabled && d.label).length))
+    }, x(i.label), 5))), 128)) : (o(), a("div", et, " Menu "))], 4)) : l.value === "socials" ? (o(), a("div", {
+      key: 10,
+      style: r(N(e.comp.props))
+    }, [e.comp.props?.platforms?.some((i) => i.enabled && i.link) ? (o(!0), a(b, { key: 0 }, S(e.comp.props.platforms.filter((i) => i.enabled && i.link), (i) => (o(), a("span", {
+      key: i.name,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    }, [c("img", {
+      src: i.icon,
+      alt: i.name,
+      style: r({
+        width: (e.comp.props?.iconSize || 24) + "px",
+        height: (e.comp.props?.iconSize || 24) + "px",
+        display: "block"
+      })
+    }, null, 12, nt)]))), 128)) : (o(), a("span", it, "Socials"))], 4)) : (o(), a("div", ot, x(l.value), 1));
+  }
+}), lt = at;
+export {
+  lt as default
+};