email-editor-core 0.0.4

package/dist/renderer/blocks/title.js

@@ -0,0 +1,49 @@
+/**
+ * TITLE BLOCK RENDERER
+ *
+ * Responsibility: Render a single title block to HTML
+ * - Receives: TitleBlock
+ * - Returns: HTML string for this block only
+ * - Owns: All styling for title blocks
+ * - Does NOT: Know about other blocks, templates, or document structure
+ */
+import { parseInlineFormatting } from '../parseInlineFormatting.js';
+/**
+ * Render a title block to HTML
+ *
+ * @param block - The title block to render
+ * @returns HTML string for this block
+ */
+export function renderTitleBlock(block) {
+    // Determine heading tag based on level
+    const tag = block.level || 'h2';
+    // Font size based on heading level
+    const fontSizeMap = {
+        h1: '28px',
+        h2: '24px',
+        h3: '20px',
+    };
+    const fontSize = fontSizeMap[tag] || '24px';
+    // Default colors if not specified
+    const color = block.color || '#1a1a1a';
+    const paddingBottom = block.paddingBottom || 20;
+    // Inline styles for title
+    const styles = [
+        `font-size: ${fontSize}`,
+        'font-weight: 700',
+        `color: ${color}`,
+        `padding-bottom: ${paddingBottom}px`,
+        'margin-top: 0',
+        'line-height: 1.3',
+    ].join(';');
+    // HTML table wrapper (email compatibility)
+    return `
+    <table width="100%" cellpadding="0" cellspacing="0" border="0">
+      <tr>
+        <td style="${styles}">
+          ${parseInlineFormatting(block.content)}
+        </td>
+      </tr>
+    </table>
+  `.trim();
+}

package/dist/renderer/parseInlineFormatting.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Parse inline formatting tokens in text
+ *
+ * Converts tokens like:
+ * - {{bold:#HEX_COLOR}}text{{/bold}} to safe inline <span> with color and font-weight
+ * - {{link:URL}}text{{/link}} to safe inline <a> with href and inline styles
+ * - {{link:URL|bold|color:#HEX}}text{{/link}} to <a> with combined formatting
+ * - {{style:weight|color:#HEX}}text{{/style}} to <span> with unified styling
+ *
+ * @param text - The text string containing formatting tokens
+ * @returns HTML string with formatted spans and links
+ */
+export declare function parseInlineFormatting(text: string): string;
+//# sourceMappingURL=parseInlineFormatting.d.ts.map

package/dist/renderer/parseInlineFormatting.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseInlineFormatting.d.ts","sourceRoot":"","sources":["../../src/renderer/parseInlineFormatting.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAoFH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAqG1D"}

package/dist/renderer/parseInlineFormatting.js

@@ -0,0 +1,178 @@
+/**
+ * Parse inline formatting tokens in text
+ *
+ * Converts tokens like:
+ * - {{bold:#HEX_COLOR}}text{{/bold}} to safe inline <span> with color and font-weight
+ * - {{link:URL}}text{{/link}} to safe inline <a> with href and inline styles
+ * - {{link:URL|bold|color:#HEX}}text{{/link}} to <a> with combined formatting
+ * - {{style:weight|color:#HEX}}text{{/style}} to <span> with unified styling
+ *
+ * @param text - The text string containing formatting tokens
+ * @returns HTML string with formatted spans and links
+ */
+/**
+ * Validate if URL is safe to use in href
+ */
+function isValidUrl(url) {
+    if (!url || typeof url !== 'string')
+        return false;
+    // Whitelist: allow https://, http://, mailto:, https://wa.me/
+    if (url.startsWith('https://'))
+        return true;
+    if (url.startsWith('http://'))
+        return true;
+    if (url.startsWith('mailto:'))
+        return true;
+    if (url.startsWith('https://wa.me/'))
+        return true;
+    // Blacklist: reject javascript:, data:, vbscript:, file:
+    if (url.startsWith('javascript:'))
+        return false;
+    if (url.startsWith('data:'))
+        return false;
+    if (url.startsWith('vbscript:'))
+        return false;
+    if (url.startsWith('file:'))
+        return false;
+    return false;
+}
+/**
+ * Parse link modifiers from token
+ * Format: {{link:URL|bold|color:#HEX}}
+ * Returns: { url, hasBold, color }
+ */
+function parseLinkModifiers(spec) {
+    const parts = spec.split('|').map((p) => p.trim());
+    const url = parts[0];
+    let hasBold = false;
+    let color = null;
+    for (let i = 1; i < parts.length; i++) {
+        const part = parts[i];
+        if (part === 'bold') {
+            hasBold = true;
+        }
+        else if (part.startsWith('color:')) {
+            const colorValue = part.substring(6); // Remove "color:" prefix
+            // Validate hex color
+            if (/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(colorValue)) {
+                color = colorValue;
+            }
+        }
+    }
+    return { url, hasBold, color };
+}
+/**
+ * Parse style modifiers from token
+ * Format: {{style:weight|color:#HEX}}
+ * Weight ∈ normal, semibold, bold (optional)
+ * Color format: color:#HEX (optional)
+ * Returns: { weight, color, isValid }
+ */
+function parseStyleModifiers(spec) {
+    const parts = spec.split('|').map((p) => p.trim());
+    let weight = null;
+    let color = null;
+    let hasOption = false;
+    for (let i = 0; i < parts.length; i++) {
+        const part = parts[i];
+        // Check for weight
+        if (part === 'normal' || part === 'semibold' || part === 'bold') {
+            weight = part;
+            hasOption = true;
+        }
+        else if (part.startsWith('color:')) {
+            const colorValue = part.substring(6); // Remove "color:" prefix
+            // Validate hex color
+            if (/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(colorValue)) {
+                color = colorValue;
+                hasOption = true;
+            }
+        }
+    }
+    // At least one option must exist
+    return { weight, color, isValid: hasOption };
+}
+export function parseInlineFormatting(text) {
+    let result = text;
+    // Step 1: Parse bold tokens first
+    const boldRegex = /\{\{bold:(#[0-9A-Fa-f]{3}|#[0-9A-Fa-f]{6})\}\}(.*?)\{\{\/bold\}\}/g;
+    let boldMatch;
+    while ((boldMatch = boldRegex.exec(text)) !== null) {
+        const color = boldMatch[1]; // e.g., #008867
+        const contentText = boldMatch[2]; // The text to format
+        const fullToken = boldMatch[0]; // The entire {{bold:#...}}...{{/bold}}
+        // Create the replacement span with inline styles
+        const replacement = `<span style="color:${color};font-weight:700;">${contentText}</span>`;
+        // Replace only this specific token occurrence
+        result = result.replace(fullToken, replacement);
+    }
+    // Step 2: Parse unified style tokens
+    // Regex to match {{style:modifiers}}...{{/style}}
+    const styleRegex = /\{\{style:([^}]+)\}\}(.*?)\{\{\/style\}\}/g;
+    let styleMatch;
+    while ((styleMatch = styleRegex.exec(result)) !== null) {
+        const spec = styleMatch[1]; // e.g., "bold|color:#008867"
+        const contentText = styleMatch[2]; // The text to format
+        const fullToken = styleMatch[0]; // The entire {{style:...}}...{{/style}}
+        // Parse style modifiers
+        const { weight, color, isValid } = parseStyleModifiers(spec);
+        // Skip invalid tokens (at least one option must exist)
+        if (!isValid) {
+            result = result.replace(fullToken, contentText);
+            continue;
+        }
+        // Build inline styles for the span
+        const styles = [];
+        // Add color if specified
+        if (color) {
+            styles.push(`color:${color}`);
+        }
+        // Add font-weight based on weight value
+        if (weight === 'bold') {
+            styles.push('font-weight:700');
+        }
+        else if (weight === 'semibold') {
+            styles.push('font-weight:600');
+        }
+        else if (weight === 'normal') {
+            styles.push('font-weight:400');
+        }
+        // Create the replacement span with inline styles
+        const replacement = `<span style="${styles.join(';')};">${contentText}</span>`;
+        // Replace only this specific token occurrence
+        result = result.replace(fullToken, replacement);
+    }
+    // Step 3: Parse combined link tokens with optional modifiers
+    // Regex to match {{link:URL|modifiers}}...{{/link}}
+    const combinedLinkRegex = /\{\{link:([^}]+)\}\}(.*?)\{\{\/link\}\}/g;
+    let combinedLinkMatch;
+    while ((combinedLinkMatch = combinedLinkRegex.exec(result)) !== null) {
+        const spec = combinedLinkMatch[1]; // e.g., "URL|bold|color:#008867"
+        const linkText = combinedLinkMatch[2]; // The text to display
+        const fullToken = combinedLinkMatch[0]; // The entire {{link:...}}...{{/link}}
+        // Parse URL and modifiers
+        const { url, hasBold, color } = parseLinkModifiers(spec);
+        // Validate URL before rendering
+        if (!isValidUrl(url)) {
+            // Invalid URL: render plain text without link
+            result = result.replace(fullToken, linkText);
+            continue;
+        }
+        // Build inline styles for the anchor
+        const styles = [];
+        const linkColor = color || '#008867'; // Default color
+        styles.push(`color:${linkColor}`);
+        styles.push('text-decoration:none');
+        if (hasBold) {
+            styles.push('font-weight:700');
+        }
+        else {
+            styles.push('font-weight:600');
+        }
+        // Create the replacement anchor with inline styles
+        const replacement = `<a href="${url}" style="${styles.join(';')};" target="_blank" rel="noopener noreferrer">${linkText}</a>`;
+        // Replace only this specific token occurrence
+        result = result.replace(fullToken, replacement);
+    }
+    return result;
+}

package/dist/renderer/renderBlock.d.ts

@@ -0,0 +1,21 @@
+/**
+ * BLOCK DISPATCHER
+ *
+ * Responsibility: Route blocks to correct renderer
+ * - Receives: Block (union type of all block types)
+ * - Returns: HTML string for that block
+ * - Does NOT: Generate HTML itself, contain block logic, know about document structure
+ */
+import type { Block } from '../types.js';
+/**
+ * Render any block to HTML
+ *
+ * Routes block to correct renderer based on block type.
+ * Each block type handler owns its complete HTML generation.
+ *
+ * @param block - The block to render (any block type)
+ * @returns HTML string for this block
+ * @throws Error if block type is unknown
+ */
+export declare function renderBlock(block: Block): string;
+//# sourceMappingURL=renderBlock.d.ts.map

package/dist/renderer/renderBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderBlock.d.ts","sourceRoot":"","sources":["../../src/renderer/renderBlock.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAQzC;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CAyBhD"}

package/dist/renderer/renderBlock.js

@@ -0,0 +1,44 @@
+/**
+ * BLOCK DISPATCHER
+ *
+ * Responsibility: Route blocks to correct renderer
+ * - Receives: Block (union type of all block types)
+ * - Returns: HTML string for that block
+ * - Does NOT: Generate HTML itself, contain block logic, know about document structure
+ */
+import { renderTitleBlock } from './blocks/title.js';
+import { renderParagraphBlock } from './blocks/paragraph.js';
+import { renderImageBlock } from './blocks/image.js';
+import { renderButtonBlock } from './blocks/button.js';
+import { renderDividerBlock } from './blocks/divider.js';
+import { renderHighlightBlock } from './blocks/highlight.js';
+/**
+ * Render any block to HTML
+ *
+ * Routes block to correct renderer based on block type.
+ * Each block type handler owns its complete HTML generation.
+ *
+ * @param block - The block to render (any block type)
+ * @returns HTML string for this block
+ * @throws Error if block type is unknown
+ */
+export function renderBlock(block) {
+    switch (block.type) {
+        case 'title':
+            return renderTitleBlock(block);
+        case 'paragraph':
+            return renderParagraphBlock(block);
+        case 'image':
+            return renderImageBlock(block);
+        case 'button':
+            return renderButtonBlock(block);
+        case 'divider':
+            return renderDividerBlock(block);
+        case 'highlight-box':
+            return renderHighlightBlock(block);
+        default:
+            // TypeScript exhaustiveness check - this should never happen in production
+            // but provides helpful error message if a new block type is added but not handled
+            throw new Error(`Unknown block type: ${block.type}`);
+    }
+}

package/dist/renderer/renderEmail.d.ts

@@ -0,0 +1,26 @@
+/**
+ * EMAIL RENDERER
+ *
+ * Responsibility: Assemble complete HTML email document
+ * - Receives: EmailDocument
+ * - Returns: Complete HTML email string
+ * - Does NOT: Generate block HTML (delegates to renderBlock), know about specific block types
+ */
+import type { EmailDocument } from "../types.js";
+/**
+ * Render complete HTML email from EmailDocument
+ *
+ * Generates a fully-formed HTML email with:
+ * - DOCTYPE and basic HTML structure
+ * - Email-safe inline styles in head
+ * - Header section (logo/company info)
+ * - Body blocks (rendered by block renderer)
+ * - Help section (contact information)
+ * - Compliance section (legal notice)
+ * - Footer section (company info, social links)
+ *
+ * @param email - The EmailDocument to render
+ * @returns Complete HTML email string
+ */
+export declare function renderEmail(email: EmailDocument): string;
+//# sourceMappingURL=renderEmail.d.ts.map

package/dist/renderer/renderEmail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderEmail.d.ts","sourceRoot":"","sources":["../../src/renderer/renderEmail.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAmRxD"}

package/dist/renderer/renderEmail.js

@@ -0,0 +1,275 @@
+/**
+ * EMAIL RENDERER
+ *
+ * Responsibility: Assemble complete HTML email document
+ * - Receives: EmailDocument
+ * - Returns: Complete HTML email string
+ * - Does NOT: Generate block HTML (delegates to renderBlock), know about specific block types
+ */
+import { renderBlock } from "./renderBlock.js";
+/**
+ * Render complete HTML email from EmailDocument
+ *
+ * Generates a fully-formed HTML email with:
+ * - DOCTYPE and basic HTML structure
+ * - Email-safe inline styles in head
+ * - Header section (logo/company info)
+ * - Body blocks (rendered by block renderer)
+ * - Help section (contact information)
+ * - Compliance section (legal notice)
+ * - Footer section (company info, social links)
+ *
+ * @param email - The EmailDocument to render
+ * @returns Complete HTML email string
+ */
+export function renderEmail(email) {
+    // Render all body blocks
+    const bodyBlocksHtml = email.body.blocks
+        .map((block) => renderBlock(block))
+        .join("\n");
+    // Build help section HTML
+    let helpSectionHtml = "";
+    if (email.helpSection) {
+        const contactItemsHtml = (email.helpSection.contactItems || [])
+            .map((item) => {
+            // Map icon URL based on contact type
+            let iconUrl = "";
+            if (item.type === "email") {
+                iconUrl = "https://nobi.id/icons/icon-mail.png";
+            }
+            else if (item.type === "phone" || item.type === "whatsapp") {
+                iconUrl = "https://nobi.id/icons/icon-phone.png";
+            }
+            return `
+                                        <table cellpadding="0" cellspacing="0" role="presentation"
+                                            style="margin-bottom: 8px;">
+                                            <tr>
+                                                <td style="padding-right: 8px;" valign="middle">
+                                                    <img src="${iconUrl}" height="20"
+                                                        width="20" style="display: block;" alt="${item.label}" />
+                                                </td>
+                                                <td valign="middle">
+                                                    <a href="${item.href}"
+                                                        style="color: #008867; font-size: 14px; text-decoration: none;">
+                                                        ${item.value}
+                                                    </a>
+                                                </td>
+                                            </tr>
+                                        </table>`;
+        })
+            .join("\n");
+        helpSectionHtml = `
+                    <tr>
+                        <td style="padding: 40px; background-color: #f6f6f6;">
+                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                                <tr>
+                                    <!-- Kolom Teks -->
+                                    <td class="stack-column" valign="top" style="padding-right: 20px; width: 60%;">
+                                        <h3
+                                            style="font-size: 20px; font-weight: 600; color: #1a1a1a; margin-bottom: 16px;">
+                                            ${email.helpSection.title ||
+            "Butuh Bantuan untuk Mulai?"}
+                                        </h3>
+                                        <p
+                                            style="line-height: 1.5; margin-top: 12px; color: #444; margin-bottom: 16px;">
+                                            ${email.helpSection.description ||
+            ""}
+                                        </p>
+                                        ${contactItemsHtml}
+                                    </td>
+
+                                    <!-- Kolom Gambar -->
+                                    <td class="stack-column" style="width: 40%; text-align: right;" valign="middle">
+                                        <img src="${email.helpSection.imageUrl || ""}" alt="${email.helpSection.title || "Help"}"
+                                            width="150" style="border-radius: 5px; height: 150px; width: auto;" />
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>`;
+    }
+    // Build footer social links HTML (table-based icons)
+    let socialLinksHtml = "";
+    if (email.footer.socialLinks && email.footer.socialLinks.length > 0) {
+        const socialIconsHtml = email.footer.socialLinks
+            .map((link, index) => {
+            // Map icon URL based on platform
+            let iconUrl = "";
+            if (link.platform === "instagram") {
+                iconUrl =
+                    "https://cdn.tools.unlayer.com/social/icons/circle-black/instagram.png";
+            }
+            else if (link.platform === "twitter") {
+                iconUrl =
+                    "https://cdn.tools.unlayer.com/social/icons/circle-black/twitter.png";
+            }
+            else if (link.platform === "linkedin") {
+                iconUrl =
+                    "https://cdn.tools.unlayer.com/social/icons/circle-black/linkedin.png";
+            }
+            else if (link.platform === "facebook") {
+                iconUrl =
+                    "https://cdn.tools.unlayer.com/social/icons/circle-black/facebook.png";
+            }
+            else if (link.platform === "email") {
+                iconUrl =
+                    "https://cdn.tools.unlayer.com/social/icons/circle-black/email.png";
+            }
+            else if (link.platform === "whatsapp") {
+                iconUrl =
+                    "https://cdn.tools.unlayer.com/social/icons/circle-black/whatsapp.png";
+            }
+            // Last item has margin-right: 0px, others have 5px
+            const isLast = index === email.footer.socialLinks.length - 1;
+            const marginRight = isLast ? "0px" : "5px";
+            return `
+                                                    <table role="presentation" border="0" cellspacing="0"
+                                                        cellpadding="0" width="32" height="32"
+                                                        style="width:32px!important;height:32px!important;display:inline-block;border-collapse:collapse;table-layout:fixed;border-spacing:0;vertical-align:top;margin-right:${marginRight}">
+                                                        <tbody>
+                                                            <tr style="vertical-align:top">
+                                                                <td valign="middle"
+                                                                    style="word-break:break-word;border-collapse:collapse!important;vertical-align:top">
+                                                                    <a href="${link.url}" title="${link.platform}"
+                                                                        target="_blank">
+                                                                        <img src="${iconUrl}" 
+                                                                            alt="${link.platform}" title="${link.platform}" width="32"
+                                                                            style="outline:none;text-decoration:none;clear:both;display:block!important;border:none;height:auto;float:none;max-width:32px!important"
+                                                                            class="CToWUd" data-bit="iit">
+                                                                    </a>
+                                                                </td>
+                                                            </tr>
+                                                        </tbody>
+                                                    </table>`;
+        })
+            .join("\n");
+        socialLinksHtml = socialIconsHtml;
+    }
+    // Build compliance section HTML
+    const complianceText = email.complianceSection.text || "";
+    const sandboxNumber = email.complianceSection.sandboxNumber
+        ? `<strong>${email.complianceSection.sandboxNumber}</strong>`
+        : "";
+    // HTML email structure with email-safe styling
+    const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${email.templateType}</title>
+  <style type="text/css">
+    /* Reset styles for better email client compatibility */
+    body {
+      margin: 0;
+      padding: 0;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      line-height: 1.6;
+      color: #1a1a1a;
+    }
+    table {
+      border-collapse: collapse;
+    }
+    img {
+      display: block;
+      outline: none;
+      border: none;
+      text-decoration: none;
+    }
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+  </style>
+</head>
+<body style="margin: 0; padding: 0; background-color: #f8fafc;">
+  <!-- Outer container -->
+  <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f8fafc">
+    <!-- HEADER SECTION -->
+    <tr>
+        <td align="center">
+            <span style="display:inline-block; margin:20px 0;">
+                ${email.header.logoUrl
+        ? `<img src="${email.header.logoUrl}" alt="Logo" style="height: ${email.header.logoHeight || 32}px; max-width: 100%;" />`
+        : '<h1 style="margin: 0; font-size: 24px; font-weight: bold; color: #1a1a1a;">Email</h1>'}
+            </span>
+        </td>
+    </tr>
+
+    <tr>
+      <td align="center">
+        <!-- Main email container (max 600px width) -->
+        <table width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" style="max-width: 100%;">
+          <!-- BODY BLOCKS SECTION -->
+          <tr>
+            <td style="padding: 20px;">
+              ${bodyBlocksHtml}
+            </td>
+          </tr>
+
+          <!-- HELP SECTION (if provided) -->
+          ${helpSectionHtml}
+
+          <!-- COMPLIANCE SECTION -->
+          <table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #e4f4f0;">
+            <tr>
+              <td align="center" style="padding: 0;">
+                <table width="100%" cellpadding="12" cellspacing="0"
+                  style="max-width: 600px; background-color: #e4f4f0; border-radius: 0;">
+                  <tr>
+                    <td align="center"
+                        style="font-family: Arial, sans-serif; color: #006950; font-size: 15px; line-height: 1.5;">
+                        <strong>PT Dana Kripto Indonesia</strong><br />
+                        sebagai peserta sandbox OJK dengan nomor surat
+                        <strong>${sandboxNumber}</strong>
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
+          </table>
+
+          <!-- FOOTER SECTION -->
+          <tr>
+            <td style="
+              padding: 30px 40px 20px 40px;
+              background-color: #006950;
+              color: white;
+              font-size: 14px;
+            " class="responsive-padding-x">
+              ${email.footer.logoUrl
+        ? `<img src="${email.footer.logoUrl}" height="20"
+                  style="margin-bottom: 8px" />`
+        : ""}
+              <p style="margin: 4px 0; font-weight: 700;">${email.footer.companyName || "PT. Company Indonesia"}</p>
+              ${email.footer.address
+        ? `<p style="margin: 4px 0">${email.footer.address}</p>`
+        : ""}
+              <table style="font-family:'Open Sans',sans-serif" role="presentation" cellpadding="0"
+                cellspacing="0" width="100%" border="0">
+                <tbody>
+                  <tr>
+                    <td style="word-break:break-word;padding-top:10px;font-family:'Open Sans',sans-serif"
+                      align="left">
+
+                      <div align="left" style="direction:ltr">
+                        <div style="display:table;max-width:${email.footer.socialLinks &&
+        email.footer.socialLinks.length > 0
+        ? email.footer.socialLinks.length * 37 + "px"
+        : "0"}">
+                          ${socialLinksHtml}
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`;
+    return html.trim();
+}