@marlinjai/email-editor-core 0.3.0 → 0.4.0

package/dist/server.js

@@ -32,18 +32,25 @@ var server_exports = {};
 __export(server_exports, {
   DEFAULT_MJML_ATTRIBUTES: () => DEFAULT_MJML_ATTRIBUTES,
   EDITOR_DATA_ATTRIBUTE: () => EDITOR_DATA_ATTRIBUTE,
+  EDITOR_MARKER: () => EDITOR_MARKER,
   MAX_MJML_BYTES: () => MAX_MJML_BYTES,
   MAX_MJML_DEPTH: () => MAX_MJML_DEPTH,
   MAX_MJML_ELEMENTS: () => MAX_MJML_ELEMENTS,
   MJMLCompiler: () => MJMLCompiler,
   MJMLExporter: () => MJMLExporter,
+  MjmlBuilder: () => MjmlBuilder,
   MjmlImportError: () => MjmlImportError,
+  addPx: () => addPx,
+  base64Utf8: () => base64Utf8,
   createMJMLCompiler: () => createMJMLCompiler,
   createMJMLExporter: () => createMJMLExporter,
   encodeEditorData: () => encodeEditorData,
   exportTemplate: () => exportTemplate,
   importMjml: () => importMjml,
-  isMjmlImportError: () => isMjmlImportError
+  isMjmlImportError: () => isMjmlImportError,
+  mjmlOptions: () => mjmlOptions,
+  paddingWithGap: () => paddingWithGap,
+  stripEditorMarkup: () => stripEditorMarkup
 });
 module.exports = __toCommonJS(server_exports);
 
@@ -82,6 +89,9 @@ function spacingToCss(p) {
   const t = p.top ?? "0", r = p.right ?? "0", b = p.bottom ?? "0", l = p.left ?? "0";
   return `padding:${t} ${r} ${b} ${l};`;
 }
+function identity(b) {
+  return `class="el-${b.type} el-${b.id}"`;
+}
 function textToHtml(b) {
   const styles = [];
   if (b.color) styles.push(`color:${b.color}`);
@@ -91,11 +101,11 @@ function textToHtml(b) {
   if (b.align) styles.push(`text-align:${b.align}`);
   styles.push("margin:0");
   const padding = spacingToCss(b.padding);
-  return `<div style="${styles.join(";")};${padding}">${b.content}</div>`;
+  return `<div ${identity(b)} style="${styles.join(";")};${padding}">${b.content}</div>`;
 }
 function imageToHtml(b) {
   const align = b.align ?? "center";
-  const wrap = `style="text-align:${align};${spacingToCss(b.padding)}"`;
+  const wrap = `${identity(b)} style="text-align:${align};${spacingToCss(b.padding)}"`;
   const widthAttr = b.width ? ` width="${escapeAttr(b.width)}"` : "";
   const heightAttr = b.height ? ` height="${escapeAttr(b.height)}"` : "";
   const radius = b.borderRadius ? `border-radius:${b.borderRadius};` : "";
@@ -110,7 +120,7 @@ function buttonToHtml(b) {
   const radius = b.borderRadius ?? "3px";
   const innerPadding = b.innerPadding ?? "10px 25px";
   const border = b.border ? `border:${b.border};` : "";
-  return `<div style="text-align:${align};${spacingToCss(b.padding)}">
+  return `<div ${identity(b)} style="text-align:${align};${spacingToCss(b.padding)}">
     <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse:separate;line-height:100%;display:inline-block;">
       <tr>
         <td align="center" valign="middle" role="presentation" style="background-color:${bg};border-radius:${radius};${border}padding:${innerPadding};">
@@ -125,12 +135,12 @@ function dividerToHtml(b) {
   const w = b.borderWidth ?? "1px";
   const style = b.borderStyle ?? "solid";
   const width = b.width ?? "100%";
-  return `<div style="${spacingToCss(b.padding)}">
+  return `<div ${identity(b)} style="${spacingToCss(b.padding)}">
     <div style="border-top:${w} ${style} ${color};width:${width};font-size:1px;line-height:1px;">&nbsp;</div>
   </div>`;
 }
 function spacerToHtml(b) {
-  return `<div style="height:${b.height};line-height:${b.height};font-size:1px;">&nbsp;</div>`;
+  return `<div ${identity(b)} style="height:${b.height};line-height:${b.height};font-size:1px;">&nbsp;</div>`;
 }
 function socialToHtml(b) {
   const items = (b.links ?? []).map((link) => {
@@ -139,7 +149,7 @@ function socialToHtml(b) {
       <img src="${escapeAttr(icon)}" alt="${escapeAttr(link.platform)}" width="24" height="24" style="display:inline-block;border:0;" />
     </a>`;
   }).join("");
-  return `<div style="text-align:center;">${items}</div>`;
+  return `<div ${identity(b)} style="text-align:center;">${items}</div>`;
 }
 function blockToRawHtml(block) {
   if (!isLeafBlockType(block.type)) {
@@ -181,7 +191,7 @@ function buildGradientCSS(gradient) {
   return `linear-gradient(${gradient.angle}deg, ${stopList})`;
 }
 
-// src/compiler/MJMLCompiler.ts
+// src/compiler/MjmlBuilder.ts
 var DEFAULT_MJML_ATTRIBUTES = `
         <mj-all font-family="Georgia, serif" />
         <mj-text font-size="14px" line-height="1.6" />
@@ -190,8 +200,30 @@ var EDITOR_DATA_ATTRIBUTE = {
   social: "data-ee-social",
   subColumns: "data-ee-subcols"
 };
+function base64Utf8(text) {
+  const bytes = new TextEncoder().encode(text);
+  let binary = "";
+  for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
+  return btoa(binary);
+}
+var EDITOR_MARKER = { begin: "<!--ee:begin-->", end: "<!--ee:end-->" };
+function stripEditorMarkup(markup) {
+  return markup.replace(/<!--ee:begin-->[\s\S]*?<!--ee:end-->/g, "").replace(/<!--\/?ee:raw:[^>]*-->/g, "");
+}
+function rawMarkers(id, html, editor) {
+  return editor ? `<!--ee:raw:${id}-->${html}<!--/ee:raw:${id}-->` : html;
+}
+function textInlineStyles(block) {
+  const styles = [];
+  if (block.align) styles.push(`text-align:${block.align}`);
+  if (block.color) styles.push(`color:${block.color}`);
+  if (block.fontSize) styles.push(`font-size:${block.fontSize}`);
+  if (block.fontFamily) styles.push(`font-family:${block.fontFamily}`);
+  if (block.lineHeight) styles.push(`line-height:${block.lineHeight}`);
+  return styles;
+}
 function encodeEditorData(value) {
-  return Buffer.from(JSON.stringify(value), "utf8").toString("base64");
+  return base64Utf8(JSON.stringify(value));
 }
 function finishAttributes(attrs, classes, extra) {
   const out = [...attrs];
@@ -219,13 +251,37 @@ function spacingToString(spacing) {
   if (!top && !right && !bottom && !left) return "";
   return [top || "0", right || "0", bottom || "0", left || "0"].join(" ");
 }
-var MJMLCompiler = class {
+var MJML_SECTION_PADDING = { top: "20px", right: "0", bottom: "20px", left: "0" };
+function addPx(a, b) {
+  const px = (v) => v === "0" ? 0 : /^-?\d+(\.\d+)?px$/.test(v) ? Number.parseFloat(v) : NaN;
+  const sum = px(a) + px(b);
+  if (Number.isNaN(sum)) return void 0;
+  return `${Number.isInteger(sum) ? sum : Number(sum.toFixed(2))}px`;
+}
+function paddingWithGap(spacing, gap) {
+  const base = spacing ?? MJML_SECTION_PADDING;
+  const top = addPx(base.top || "0", gap);
+  return top === void 0 ? base : { ...base, top };
+}
+function mjmlOptions(options = {}) {
+  return {
+    // Never resolve <mj-include>: its path is read from the server's disk,
+    // and a stored document (a Raw block's html) must not reach local files.
+    ignoreIncludes: true,
+    validationLevel: "soft",
+    minify: false,
+    ...options.webFonts === false ? { fonts: {} } : {}
+  };
+}
+var MjmlBuilder = class {
   constructor() {
     /**
      * Set true while emitting a column with sub-columns. Causes generateHead
      * to inject the responsive media query exactly once per template.
      */
     this.needsSubColumnStyles = false;
+    /** Set for the duration of one build in editor mode; see {@link BuildOptions}. */
+    this.editor = false;
     /**
      * Platform brand colors for social icons
      */
@@ -239,40 +295,25 @@ var MJMLCompiler = class {
       github: "#181717"
     };
   }
-  /**
-   * Compile email template to MJML and HTML
-   */
-  compile(template, options = {}) {
-    try {
-      this.needsSubColumnStyles = false;
-      const mjml = this.templateToMJML(template);
-      const result = (0, import_mjml.default)(mjml, {
-        // Never resolve <mj-include>: its path is read from the server's disk,
-        // and a stored document (a Raw block's html) must not reach local files.
-        ignoreIncludes: true,
-        validationLevel: "soft",
-        minify: false,
-        ...options.webFonts === false ? { fonts: {} } : {}
-      });
-      return {
-        mjml,
-        html: result.html,
-        errors: result.errors.length > 0 ? result.errors.map((e) => e.formattedMessage) : void 0
-      };
-    } catch (error) {
-      return {
-        mjml: "",
-        html: "",
-        errors: [error instanceof Error ? error.message : "Unknown compilation error"]
-      };
-    }
+  /** `fragment` fenced as an editor addition, or nothing outside editor mode. */
+  ee(fragment) {
+    return this.editor ? `${EDITOR_MARKER.begin}${fragment}${EDITOR_MARKER.end}` : "";
+  }
+  /** The label of a ghost: what the node is, so the person can find and unhide it. */
+  ghostText(cssClasses, label) {
+    return `<mj-text css-class="ee-ghost ${cssClasses.join(" ")}" padding="8px 25px" font-size="12px" line-height="1.4" color="#6b7280" container-background-color="#f3f4f6"><span style="display:block;border:1px dashed #9ca3af;padding:6px 10px;">${label} (hidden)</span></mj-text>`;
   }
   /**
    * The MJML markup for a document, without compiling it to HTML.
    */
-  toMJML(template) {
+  toMJML(template, options = {}) {
     this.needsSubColumnStyles = false;
-    return this.templateToMJML(template);
+    this.editor = options.editor === true;
+    try {
+      return this.templateToMJML(template);
+    } finally {
+      this.editor = false;
+    }
   }
   /**
    * Convert template to MJML markup
@@ -379,7 +420,9 @@ var MJMLCompiler = class {
    * renders at standard width, which the inspector explains).
    */
   wrapperToMJML(wrapper) {
-    if (wrapper.hidden) return "";
+    if (wrapper.hidden) {
+      return this.ee(`<mj-wrapper css-class="ee-ghost el-wrapper el-${wrapper.id}" padding="0"><mj-section padding="0"><mj-column>${this.ghostText([], "Container")}</mj-column></mj-section></mj-wrapper>`);
+    }
     const attrs = [];
     const cssClasses = ["el-wrapper", `el-${wrapper.id}`];
     this.pushBackground(attrs, cssClasses, wrapper);
@@ -395,7 +438,13 @@ var MJMLCompiler = class {
     if (wrapper.gap) attrs.push(`gap="${quoted(wrapper.gap)}"`);
     if (wrapper.textAlign) attrs.push(`text-align="${quoted(wrapper.textAlign)}"`);
     for (const c of (wrapper.cssClass ?? "").split(/\s+/)) if (c && !cssClasses.includes(quoted(c))) cssClasses.push(quoted(c));
-    const sections = wrapper.sections.map((section) => this.sectionToMJML(section)).filter(Boolean).join("\n");
+    let first = true;
+    const sections = wrapper.sections.map((section) => {
+      if (section.hidden) return this.sectionToMJML(section);
+      const out = this.sectionToMJML(section, first ? void 0 : wrapper.gap);
+      first = false;
+      return out;
+    }).filter(Boolean).join("\n");
     return `
 <mj-wrapper ${finishAttributes(attrs, cssClasses, wrapper.extraAttributes)}>
   ${sections}
@@ -420,12 +469,14 @@ var MJMLCompiler = class {
    * Convert section to MJML
    * Supports background images, full-width, and mj-group for non-stacking columns
    */
-  sectionToMJML(section) {
-    if (section.hidden) return "";
+  sectionToMJML(section, gapAbove) {
+    if (section.hidden) {
+      return this.ee(`<mj-section css-class="ee-ghost el-section el-${section.id}" padding="0"><mj-column>${this.ghostText([], "Section")}</mj-column></mj-section>`);
+    }
     if (section.bodyRaw) {
       const blocks = section.columns.flatMap((c) => c.blocks).filter((b) => !b.hidden);
       if (blocks.every((b) => b.type === "raw") && section.columns.every((c) => !c.subColumns?.length)) {
-        return blocks.map((b) => `<mj-raw>${b.html}</mj-raw>`).join("\n");
+        return blocks.map((b) => `<mj-raw>${rawMarkers(b.id, b.html, this.editor)}</mj-raw>`).join("\n");
       }
     }
     const attrs = [];
@@ -434,8 +485,9 @@ var MJMLCompiler = class {
     if (section.fullWidth) {
       attrs.push('full-width="full-width"');
     }
-    if (section.padding) {
-      const padding = spacingToString(section.padding);
+    const sectionPadding = gapAbove ? paddingWithGap(section.padding, gapAbove) : section.padding;
+    if (sectionPadding) {
+      const padding = spacingToString(sectionPadding);
       if (padding) attrs.push(`padding="${padding}"`);
     }
     const columns = section.columns.map((col) => this.columnToMJML(col)).join("\n");
@@ -485,9 +537,10 @@ var MJMLCompiler = class {
       if (padding) attrs.push(`padding="${padding}"`);
     }
     const blocks = column.blocks.map((block) => this.blockToMJML(block)).join("\n");
+    const floor = column.blocks.length === 0 ? this.ee('<mj-spacer height="48px" css-class="ee-ghost ee-empty" />') : "";
     return `
 <mj-column ${finishAttributes(attrs, cssClasses, column.extraAttributes)}>
-  ${blocks}
+  ${blocks}${floor}
 </mj-column>
     `.trim();
   }
@@ -511,7 +564,7 @@ var MJMLCompiler = class {
       const hasPadding = sc.paddingTop || sc.paddingRight || sc.paddingBottom || sc.paddingLeft;
       const padding = hasPadding ? `padding:${sc.paddingTop || "0"} ${sc.paddingRight || "0"} ${sc.paddingBottom || "0"} ${sc.paddingLeft || "0"};` : "padding:10px;";
       const bg = sc.backgroundColor ? `background-color:${sc.backgroundColor};` : "";
-      return `<td class="ee-sub-col" width="${widths[i]}%" valign="${valign}" style="${padding}${bg}">${inner}</td>`;
+      return `<td class="ee-sub-col el-subcolumn el-${sc.id}" width="${widths[i]}%" valign="${valign}" style="${padding}${bg}">${inner}</td>`;
     }).join("");
     const colAttrs = [];
     if (column.width) colAttrs.push(`width="${column.width}%"`);
@@ -535,7 +588,7 @@ var MJMLCompiler = class {
    * Convert block to MJML based on type
    */
   blockToMJML(block) {
-    if (block.hidden) return "";
+    if (block.hidden) return this.ee(this.ghostText([`el-${block.type}`, `el-${block.id}`], block.type.charAt(0).toUpperCase() + block.type.slice(1)));
     switch (block.type) {
       case "text":
         return this.textBlockToMJML(block);
@@ -579,27 +632,12 @@ var MJMLCompiler = class {
    */
   textBlockToMJML(block) {
     const attrs = [];
-    const inlineStyles = [];
-    if (block.align) {
-      attrs.push(`align="${block.align}"`);
-      inlineStyles.push(`text-align:${block.align}`);
-    }
-    if (block.color) {
-      attrs.push(`color="${block.color}"`);
-      inlineStyles.push(`color:${block.color}`);
-    }
-    if (block.fontSize) {
-      attrs.push(`font-size="${block.fontSize}"`);
-      inlineStyles.push(`font-size:${block.fontSize}`);
-    }
-    if (block.fontFamily) {
-      attrs.push(`font-family="${block.fontFamily}"`);
-      inlineStyles.push(`font-family:${block.fontFamily}`);
-    }
-    if (block.lineHeight) {
-      attrs.push(`line-height="${block.lineHeight}"`);
-      inlineStyles.push(`line-height:${block.lineHeight}`);
-    }
+    const inlineStyles = textInlineStyles(block);
+    if (block.align) attrs.push(`align="${block.align}"`);
+    if (block.color) attrs.push(`color="${block.color}"`);
+    if (block.fontSize) attrs.push(`font-size="${block.fontSize}"`);
+    if (block.fontFamily) attrs.push(`font-family="${block.fontFamily}"`);
+    if (block.lineHeight) attrs.push(`line-height="${block.lineHeight}"`);
     if (block.padding) {
       const padding = spacingToString(block.padding);
       if (padding) attrs.push(`padding="${padding}"`);
@@ -677,7 +715,7 @@ var MJMLCompiler = class {
       github: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>'
     };
     const svg = svgIcons[platform] || svgIcons.facebook;
-    return `data:image/svg+xml;base64,${Buffer.from(svg).toString("base64")}`;
+    return `data:image/svg+xml;base64,${base64Utf8(svg)}`;
   }
   /**
    * Convert social block to MJML using raw HTML table for reliable horizontal layout
@@ -785,7 +823,7 @@ ${items}
    * Convert raw HTML block to MJML
    */
   rawBlockToMJML(block) {
-    return `<mj-raw css-class="el-raw el-${block.id}">${block.html}</mj-raw>`;
+    return `<mj-raw css-class="el-raw el-${block.id}">${rawMarkers(block.id, block.html, this.editor)}</mj-raw>`;
   }
   /**
    * Convert navbar block to MJML
@@ -913,6 +951,30 @@ ${dataRows}
     `.trim();
   }
 };
+
+// src/compiler/MJMLCompiler.ts
+var MJMLCompiler = class extends MjmlBuilder {
+  /**
+   * Compile email template to MJML and HTML
+   */
+  async compile(template, options = {}) {
+    try {
+      const mjml = this.toMJML(template, { editor: options.editor });
+      const result = await (0, import_mjml.default)(mjml, mjmlOptions(options));
+      return {
+        mjml,
+        html: result.html,
+        errors: result.errors.length > 0 ? result.errors.map((e) => e.formattedMessage) : void 0
+      };
+    } catch (error) {
+      return {
+        mjml: "",
+        html: "",
+        errors: [error instanceof Error ? error.message : "Unknown compilation error"]
+      };
+    }
+  }
+};
 function createMJMLCompiler() {
   return new MJMLCompiler();
 }
@@ -932,10 +994,10 @@ var MJMLExporter = class {
   /**
    * Export template to MJML + HTML
    */
-  export(template) {
+  async export(template) {
     const mjml = this.exportMJML(template);
     try {
-      const result = (0, import_mjml2.default)(mjml, {
+      const result = await (0, import_mjml2.default)(mjml, {
         // Never resolve <mj-include>: see MJMLCompiler.compile.
         ignoreIncludes: true,
         validationLevel: this.options.validationLevel,
@@ -1666,6 +1728,12 @@ function decodeEditorData(value) {
     return null;
   }
 }
+function subtractPx(a, b) {
+  const px = (v) => v === "0" ? 0 : /^-?\d+(\.\d+)?px$/.test(v) ? Number.parseFloat(v) : NaN;
+  const diff = px(a) - px(b);
+  if (Number.isNaN(diff) || diff < 0) return void 0;
+  return diff === 0 ? "0" : `${Number.isInteger(diff) ? diff : Number(diff.toFixed(2))}px`;
+}
 function parsePadding(value) {
   const parts = value.trim().split(/\s+/);
   if (parts.length < 1 || parts.length > 4 || parts.some((p) => !/^-?[0-9.]+(px|%|em|rem)?$/.test(p))) return null;
@@ -1972,6 +2040,24 @@ var Importer = class {
     if (typeof node.content === "string" && node.content.trim()) {
       this.warn("stray_text", "info", path, node, "Text directly in mj-wrapper is ignored by MJML, and by the import.");
     }
+    if (wrapper.gap) {
+      let first = true;
+      for (const section of wrapper.sections) {
+        if (section.bodyRaw) continue;
+        if (first) {
+          first = false;
+          continue;
+        }
+        const top = section.padding?.top;
+        if (!top) continue;
+        const without = subtractPx(top, wrapper.gap);
+        if (without === void 0) continue;
+        const padding = { ...section.padding, top: without };
+        const isDefault = padding.top === "20px" && (padding.right ?? "0") === "0" && padding.bottom === "20px" && (padding.left ?? "0") === "0";
+        if (isDefault) delete section.padding;
+        else section.padding = padding;
+      }
+    }
     return wrapper;
   }
   section(node, path) {
@@ -2368,7 +2454,7 @@ var Importer = class {
     return block;
   }
   // Fallbacks: compile the whole source once, with each fallback marked, and cut them out.
-  resolveFallbacks(metadata) {
+  async resolveFallbacks(metadata) {
     if (this.fallbacks.length === 0) return;
     const marker = (i, edge) => ({
       tagName: "mj-raw",
@@ -2382,7 +2468,7 @@ var Importer = class {
     }
     let html = "";
     try {
-      html = (0, import_mjml3.default)(serialize(this.root), { ignoreIncludes: true, validationLevel: "skip", minify: false, keepComments: true }).html;
+      html = (await (0, import_mjml3.default)(serialize(this.root), { ignoreIncludes: true, validationLevel: "skip", minify: false, keepComments: true })).html;
     } catch {
       html = "";
     }
@@ -2446,7 +2532,7 @@ function supportingCss(fullHtml, fragments, breakpoint = "480px") {
   }
   return out.join("\n");
 }
-function importMjml(source) {
+async function importMjml(source) {
   if (typeof source !== "string") throw new MjmlImportError("not_mjml", "The MJML must be a string.");
   scanMjml(source, ENDING_TAGS);
   const root = parseMjml(source);
@@ -2462,7 +2548,7 @@ function importMjml(source) {
   }
   const metadata = importer.head(head, body);
   const sections = importer.body(body);
-  importer.resolveFallbacks(metadata);
+  await importer.resolveFallbacks(metadata);
   importer.summarize();
   const document = { version: CURRENT_TEMPLATE_VERSION, metadata, sections };
   try {
@@ -2477,16 +2563,23 @@ function importMjml(source) {
 0 && (module.exports = {
   DEFAULT_MJML_ATTRIBUTES,
   EDITOR_DATA_ATTRIBUTE,
+  EDITOR_MARKER,
   MAX_MJML_BYTES,
   MAX_MJML_DEPTH,
   MAX_MJML_ELEMENTS,
   MJMLCompiler,
   MJMLExporter,
+  MjmlBuilder,
   MjmlImportError,
+  addPx,
+  base64Utf8,
   createMJMLCompiler,
   createMJMLExporter,
   encodeEditorData,
   exportTemplate,
   importMjml,
-  isMjmlImportError
+  isMjmlImportError,
+  mjmlOptions,
+  paddingWithGap,
+  stripEditorMarkup
 });