Merge pull request #2623 from ankaboot-source/fix/campaign-inline-cid-images

fix: render campaign base64 images via CID attachments

Author: baderdean

supabase/functions/_shared/inline-images.test.ts

@@ -0,0 +1,27 @@
+import { assertEquals } from "https://deno.land/std@0.224.0/assert/mod.ts";
+import { inlineDataImagesAsCid } from "./inline-images.ts";
+
+Deno.test(
+  "inlineDataImagesAsCid converts data image sources to cid attachments",
+  () => {
+    const html = '<p><img src="data:image/png;base64,QUJDRA==" alt="x" /></p>';
+    const result = inlineDataImagesAsCid(html);
+
+    assertEquals(result.attachments.length, 1);
+    assertEquals(result.attachments[0].encoding, "base64");
+    assertEquals(result.attachments[0].contentType, "image/png");
+    assertEquals(
+      result.html.includes('src="cid:inline-image-1@leadminer"'),
+      true,
+    );
+  },
+);
+
+Deno.test("inlineDataImagesAsCid reuses same cid for duplicate payload", () => {
+  const dataUri = "data:image/jpeg;base64,QUJDREVGRw==";
+  const html = `<img src="${dataUri}" /><img src="${dataUri}" />`;
+  const result = inlineDataImagesAsCid(html);
+
+  assertEquals(result.attachments.length, 1);
+  assertEquals(result.html.match(/cid:inline-image-1@leadminer/g)?.length, 2);
+});

supabase/functions/_shared/inline-images.ts

@@ -0,0 +1,73 @@
+export type InlineImageAttachment = {
+  filename: string;
+  content: string;
+  encoding: "base64";
+  cid: string;
+  contentType: string;
+  disposition: "inline";
+};
+
+type InlineImageTransformResult = {
+  html: string;
+  attachments: InlineImageAttachment[];
+};
+
+const DATA_IMAGE_SRC_REGEX =
+  /src\s*=\s*(["'])(data:image\/([a-zA-Z0-9.+-]+);base64,([a-zA-Z0-9+/=\r\n]+))\1/gi;
+
+function extensionFromMime(mimeSubtype: string): string {
+  const normalized = mimeSubtype.toLowerCase();
+  if (normalized === "jpeg") return "jpg";
+  if (normalized === "svg+xml") return "svg";
+  return normalized;
+}
+
+export function inlineDataImagesAsCid(
+  html: string,
+): InlineImageTransformResult {
+  if (!html.includes("data:image/")) {
+    return { html, attachments: [] };
+  }
+
+  let index = 0;
+  const attachments: InlineImageAttachment[] = [];
+  const cidByPayload = new Map<string, string>();
+
+  const rewrittenHtml = html.replace(
+    DATA_IMAGE_SRC_REGEX,
+    (
+      full,
+      quote: string,
+      _dataUri: string,
+      mimeSubtype: string,
+      payload: string,
+    ) => {
+      const normalizedPayload = payload.replace(/\s+/g, "");
+      if (!normalizedPayload) {
+        return full;
+      }
+
+      let cid = cidByPayload.get(normalizedPayload);
+      if (!cid) {
+        index += 1;
+        cid = `inline-image-${index}@leadminer`;
+        cidByPayload.set(normalizedPayload, cid);
+        attachments.push({
+          filename: `inline-image-${index}.${extensionFromMime(mimeSubtype)}`,
+          content: normalizedPayload,
+          encoding: "base64",
+          cid,
+          contentType: `image/${mimeSubtype.toLowerCase()}`,
+          disposition: "inline",
+        });
+      }
+
+      return `src=${quote}cid:${cid}${quote}`;
+    },
+  );
+
+  return {
+    html: rewrittenHtml,
+    attachments,
+  };
+}

supabase/functions/email-campaigns/email.ts

@@ -1,4 +1,8 @@
 import nodemailer from "nodemailer";
+import {
+  inlineDataImagesAsCid,
+  type InlineImageAttachment,
+} from "../_shared/inline-images.ts";
 
 const host = Deno.env.get("SMTP_HOST");
 const port = Deno.env.get("SMTP_PORT");
@@ -10,6 +14,7 @@ type SendEmailOptions = {
   from?: string;
   replyTo?: string;
   text?: string;
+  attachments?: InlineImageAttachment[];
   transport?: {
     host: string;
     port: number;
@@ -35,7 +40,9 @@ function getDefaultTransport() {
   };
 }
 
-export async function verifyTransport(transport?: SendEmailOptions["transport"]) {
+export async function verifyTransport(
+  transport?: SendEmailOptions["transport"],
+) {
   const transporter = nodemailer.createTransport(
     transport ?? getDefaultTransport(),
   );
@@ -51,16 +58,22 @@ export async function sendEmail(
   const transporter = nodemailer.createTransport(
     options.transport ?? getDefaultTransport(),
   );
+  const inlinePayload = inlineDataImagesAsCid(html);
+  const attachments = [
+    ...(options.attachments ?? []),
+    ...inlinePayload.attachments,
+  ];
 
   const info = await transporter.sendMail({
     from: options.from ?? defaultFrom,
     to,
     subject,
-    html,
+    html: inlinePayload.html,
     text: options.text,
     replyTo: options.replyTo,
+    attachments,
   });
 
   console.log("Email sent:", { to, messageId: info.messageId });
   // console.log("Preview URL: %s", nodemailer.getTestMessageUrl(info)); // For local testing only
-}
+}