@marlinjai/email-editor-core 0.2.0

package/dist/chunk-MBTNU2JZ.mjs

@@ -0,0 +1,395 @@
+// src/schema/gradient.ts
+function buildGradientCSS(gradient) {
+  if (gradient.stops.length === 0) return void 0;
+  const stopList = gradient.stops.map((s) => `${s.color} ${s.position}%`).join(", ");
+  if (gradient.type === "radial") {
+    return `radial-gradient(circle, ${stopList})`;
+  }
+  return `linear-gradient(${gradient.angle}deg, ${stopList})`;
+}
+
+// src/store/mst/models/BlockModel.ts
+import { types } from "mobx-state-tree";
+var BlockType = /* @__PURE__ */ ((BlockType2) => {
+  BlockType2["TEXT"] = "text";
+  BlockType2["IMAGE"] = "image";
+  BlockType2["BUTTON"] = "button";
+  BlockType2["DIVIDER"] = "divider";
+  BlockType2["SPACER"] = "spacer";
+  BlockType2["SOCIAL"] = "social";
+  BlockType2["HERO"] = "hero";
+  BlockType2["ACCORDION"] = "accordion";
+  BlockType2["RAW"] = "raw";
+  BlockType2["NAVBAR"] = "navbar";
+  BlockType2["CAROUSEL"] = "carousel";
+  BlockType2["TABLE"] = "table";
+  BlockType2["HEADER"] = "header";
+  BlockType2["FOOTER"] = "footer";
+  return BlockType2;
+})(BlockType || {});
+var SocialLinkModel = types.model("SocialLink", {
+  platform: types.string,
+  url: types.string,
+  color: types.maybe(types.string)
+});
+var NavbarLinkModel = types.model("NavbarLink", {
+  href: types.string,
+  label: types.string,
+  color: types.maybe(types.string)
+});
+var CarouselImageModel = types.model("CarouselImage", {
+  src: types.string,
+  alt: types.maybe(types.string),
+  href: types.maybe(types.string),
+  thumbnailSrc: types.maybe(types.string)
+});
+var AccordionItemModel = types.model("AccordionItem", {
+  title: types.string,
+  content: types.string
+});
+var SpacingModel = types.model("Spacing", {
+  top: types.maybe(types.string),
+  right: types.maybe(types.string),
+  bottom: types.maybe(types.string),
+  left: types.maybe(types.string)
+});
+var BlockModel = types.model("Block", {
+  id: types.identifier,
+  type: types.enumeration("BlockType", Object.values(BlockType)),
+  hidden: types.optional(types.boolean, false),
+  // === Common Text Properties ===
+  content: types.optional(types.string, ""),
+  color: types.maybe(types.string),
+  backgroundColor: types.maybe(types.string),
+  fontSize: types.maybe(types.string),
+  fontFamily: types.maybe(types.string),
+  align: types.maybe(types.enumeration(["left", "center", "right", "justify"])),
+  lineHeight: types.maybe(types.string),
+  // === Spacing ===
+  paddingTop: types.maybe(types.string),
+  paddingRight: types.maybe(types.string),
+  paddingBottom: types.maybe(types.string),
+  paddingLeft: types.maybe(types.string),
+  // === Image Properties ===
+  src: types.maybe(types.string),
+  alt: types.maybe(types.string),
+  width: types.maybe(types.string),
+  height: types.maybe(types.string),
+  // === Button Properties ===
+  href: types.maybe(types.string),
+  label: types.maybe(types.string),
+  borderRadius: types.maybe(types.string),
+  border: types.maybe(types.string),
+  innerPadding: types.maybe(types.string),
+  // === Divider Properties ===
+  borderColor: types.maybe(types.string),
+  borderWidth: types.maybe(types.string),
+  borderStyle: types.maybe(types.enumeration(["solid", "dashed", "dotted"])),
+  // === Spacer Properties ===
+  // (uses height from image properties)
+  // === Social Properties ===
+  links: types.optional(types.array(SocialLinkModel), []),
+  iconSize: types.maybe(types.string),
+  iconPadding: types.maybe(types.string),
+  mode: types.maybe(types.enumeration(["horizontal", "vertical", "fixed-height", "fluid-height"])),
+  // === Hero Properties ===
+  backgroundImage: types.maybe(types.string),
+  backgroundHeight: types.maybe(types.string),
+  backgroundWidth: types.maybe(types.string),
+  verticalAlign: types.maybe(types.enumeration(["top", "middle", "bottom"])),
+  // === Accordion Properties ===
+  items: types.optional(types.array(AccordionItemModel), []),
+  iconPosition: types.maybe(types.enumeration(["left", "right"])),
+  // === Raw Properties ===
+  html: types.maybe(types.string),
+  // === Navbar Properties ===
+  navLinks: types.optional(types.array(NavbarLinkModel), []),
+  hamburger: types.optional(types.boolean, false),
+  baseUrl: types.maybe(types.string),
+  icoColor: types.maybe(types.string),
+  // === Carousel Properties ===
+  images: types.optional(types.array(CarouselImageModel), []),
+  thumbnails: types.maybe(types.enumeration(["visible", "hidden"])),
+  iconWidth: types.maybe(types.string),
+  tbBorderRadius: types.maybe(types.string),
+  // === Table Properties ===
+  headers: types.optional(types.array(types.string), []),
+  rows: types.optional(types.array(types.array(types.string)), []),
+  cellpadding: types.maybe(types.string),
+  cellspacing: types.maybe(types.string),
+  // === Locked Blocks (Header/Footer) ===
+  locked: types.optional(types.boolean, false)
+}).actions((self) => ({
+  /**
+   * Update any style property by name
+   */
+  updateStyle(property, value) {
+    if (property in self) {
+      self[property] = value;
+    }
+  },
+  /**
+   * Update multiple properties at once
+   */
+  updateProperties(updates) {
+    Object.entries(updates).forEach(([key, value]) => {
+      if (key in self) {
+        self[key] = value;
+      }
+    });
+  },
+  /**
+   * Set block content (for text blocks)
+   */
+  setContent(content) {
+    self.content = content;
+  },
+  /**
+   * Toggle block visibility
+   */
+  toggleHidden() {
+    self.hidden = !self.hidden;
+  },
+  /**
+   * Set padding values
+   */
+  setPadding(padding) {
+    if (padding.top !== void 0) self.paddingTop = padding.top;
+    if (padding.right !== void 0) self.paddingRight = padding.right;
+    if (padding.bottom !== void 0) self.paddingBottom = padding.bottom;
+    if (padding.left !== void 0) self.paddingLeft = padding.left;
+  },
+  /**
+   * Add a social link
+   */
+  addSocialLink(platform, url, color) {
+    self.links.push(SocialLinkModel.create({ platform, url, color }));
+  },
+  /**
+   * Remove a social link by index
+   */
+  removeSocialLink(index) {
+    self.links.splice(index, 1);
+  },
+  /**
+   * Add a navbar link
+   */
+  addNavbarLink(href, label, color) {
+    self.navLinks.push(NavbarLinkModel.create({ href, label, color }));
+  },
+  /**
+   * Remove a navbar link by index
+   */
+  removeNavbarLink(index) {
+    self.navLinks.splice(index, 1);
+  },
+  /**
+   * Add a carousel image
+   */
+  addCarouselImage(src, alt, href, thumbnailSrc) {
+    self.images.push(CarouselImageModel.create({ src, alt, href, thumbnailSrc }));
+  },
+  /**
+   * Remove a carousel image by index
+   */
+  removeCarouselImage(index) {
+    self.images.splice(index, 1);
+  },
+  /**
+   * Add an accordion item
+   */
+  addAccordionItem(title, content) {
+    self.items.push(AccordionItemModel.create({ title, content }));
+  },
+  /**
+   * Remove an accordion item by index
+   */
+  removeAccordionItem(index) {
+    self.items.splice(index, 1);
+  },
+  /**
+   * Add a table row
+   */
+  addTableRow(cells) {
+    self.rows.push(cells);
+  },
+  /**
+   * Remove a table row by index
+   */
+  removeTableRow(index) {
+    self.rows.splice(index, 1);
+  }
+})).views((self) => ({
+  /**
+   * Computed style object for React rendering
+   */
+  get computedStyle() {
+    const style = {};
+    if (self.color) style.color = self.color;
+    if (self.backgroundColor) style.backgroundColor = self.backgroundColor;
+    if (self.fontSize) style.fontSize = self.fontSize;
+    if (self.fontFamily) style.fontFamily = self.fontFamily;
+    if (self.align) style.textAlign = self.align;
+    if (self.lineHeight) style.lineHeight = self.lineHeight;
+    if (self.paddingTop) style.paddingTop = self.paddingTop;
+    if (self.paddingRight) style.paddingRight = self.paddingRight;
+    if (self.paddingBottom) style.paddingBottom = self.paddingBottom;
+    if (self.paddingLeft) style.paddingLeft = self.paddingLeft;
+    if (self.borderRadius) style.borderRadius = self.borderRadius;
+    if (self.border) style.border = self.border;
+    return style;
+  },
+  /**
+   * Get padding as a single object
+   */
+  get padding() {
+    return {
+      top: self.paddingTop || void 0,
+      right: self.paddingRight || void 0,
+      bottom: self.paddingBottom || void 0,
+      left: self.paddingLeft || void 0
+    };
+  },
+  /**
+   * Get padding as a CSS string (e.g., "10px 20px 10px 20px")
+   */
+  get paddingString() {
+    const { paddingTop, paddingRight, paddingBottom, paddingLeft } = self;
+    if (!paddingTop && !paddingRight && !paddingBottom && !paddingLeft) {
+      return void 0;
+    }
+    return `${paddingTop || "0"} ${paddingRight || "0"} ${paddingBottom || "0"} ${paddingLeft || "0"}`;
+  },
+  /**
+   * MJML attributes for export
+   */
+  get mjmlAttributes() {
+    const attrs = {};
+    if (self.color) attrs.color = self.color;
+    if (self.backgroundColor) attrs["background-color"] = self.backgroundColor;
+    if (self.fontSize) attrs["font-size"] = self.fontSize;
+    if (self.fontFamily) attrs["font-family"] = self.fontFamily;
+    if (self.align) attrs.align = self.align;
+    if (self.lineHeight) attrs["line-height"] = self.lineHeight;
+    const paddingParts = [];
+    if (self.paddingTop) paddingParts.push(`top:${self.paddingTop}`);
+    if (self.paddingRight) paddingParts.push(`right:${self.paddingRight}`);
+    if (self.paddingBottom) paddingParts.push(`bottom:${self.paddingBottom}`);
+    if (self.paddingLeft) paddingParts.push(`left:${self.paddingLeft}`);
+    if (paddingParts.length > 0) {
+      const padding = `${self.paddingTop || "0"} ${self.paddingRight || "0"} ${self.paddingBottom || "0"} ${self.paddingLeft || "0"}`;
+      attrs.padding = padding;
+    }
+    if (self.src) attrs.src = self.src;
+    if (self.alt) attrs.alt = self.alt;
+    if (self.width) attrs.width = self.width;
+    if (self.height) attrs.height = self.height;
+    if (self.href) attrs.href = self.href;
+    if (self.borderRadius) attrs["border-radius"] = self.borderRadius;
+    if (self.border) attrs.border = self.border;
+    if (self.innerPadding) attrs["inner-padding"] = self.innerPadding;
+    if (self.borderColor) attrs["border-color"] = self.borderColor;
+    if (self.borderWidth) attrs["border-width"] = self.borderWidth;
+    if (self.borderStyle) attrs["border-style"] = self.borderStyle;
+    return attrs;
+  },
+  /**
+   * Check if this is a text-based block
+   */
+  get isTextBlock() {
+    return self.type === "text" /* TEXT */;
+  },
+  /**
+   * Check if this is an image block
+   */
+  get isImageBlock() {
+    return self.type === "image" /* IMAGE */;
+  },
+  /**
+   * Check if this is a button block
+   */
+  get isButtonBlock() {
+    return self.type === "button" /* BUTTON */;
+  },
+  /**
+   * Check if this block is locked (header/footer)
+   */
+  get isLocked() {
+    return self.locked || self.type === "header" /* HEADER */ || self.type === "footer" /* FOOTER */;
+  },
+  /**
+   * Get display name for layers panel
+   */
+  get displayName() {
+    switch (self.type) {
+      case "text" /* TEXT */:
+        const text = self.content.replace(/<[^>]*>/g, "").trim();
+        return text.length > 20 ? text.substring(0, 20) + "..." : text || "Text";
+      case "image" /* IMAGE */:
+        return self.alt || "Image";
+      case "button" /* BUTTON */:
+        return self.label || "Button";
+      case "divider" /* DIVIDER */:
+        return "Divider";
+      case "spacer" /* SPACER */:
+        return `Spacer (${self.height || "20px"})`;
+      case "social" /* SOCIAL */:
+        return "Social Links";
+      case "hero" /* HERO */:
+        return "Hero";
+      case "accordion" /* ACCORDION */:
+        return "Accordion";
+      case "raw" /* RAW */:
+        return "Custom HTML";
+      case "navbar" /* NAVBAR */:
+        return "Navigation";
+      case "carousel" /* CAROUSEL */:
+        return "Carousel";
+      case "table" /* TABLE */:
+        return "Table";
+      case "header" /* HEADER */:
+        return "Header";
+      case "footer" /* FOOTER */:
+        return "Footer";
+      default:
+        return "Block";
+    }
+  }
+}));
+
+// src/registry/blockCategories.ts
+var LEAF_BLOCK_TYPES = [
+  "text" /* TEXT */,
+  "image" /* IMAGE */,
+  "button" /* BUTTON */,
+  "divider" /* DIVIDER */,
+  "spacer" /* SPACER */,
+  "social" /* SOCIAL */
+];
+var CONTAINER_BLOCK_TYPES = [
+  "hero" /* HERO */,
+  "accordion" /* ACCORDION */,
+  "raw" /* RAW */,
+  "navbar" /* NAVBAR */,
+  "carousel" /* CAROUSEL */,
+  "table" /* TABLE */,
+  "header" /* HEADER */,
+  "footer" /* FOOTER */
+];
+function isLeafBlockType(t) {
+  return LEAF_BLOCK_TYPES.includes(t);
+}
+
+export {
+  buildGradientCSS,
+  BlockType,
+  SocialLinkModel,
+  NavbarLinkModel,
+  CarouselImageModel,
+  AccordionItemModel,
+  SpacingModel,
+  BlockModel,
+  LEAF_BLOCK_TYPES,
+  CONTAINER_BLOCK_TYPES,
+  isLeafBlockType
+};