Preserve global typography and metadata in MJML exports

packages/email-renderer/src/blocks.ts

@@ -34,6 +34,10 @@ const html = (value: unknown) =>
 const attrs = (node: BlockNode) => node.props as Record<string, unknown>;
 const isEmailRootChild = (node: BlockNode, context: unknown) =>
   (context as { rootBlockIds?: string[] } | undefined)?.rootBlockIds?.includes(node.id) ?? false;
+const mjmlDocumentHead = (node: BlockNode, context: unknown) => {
+  const meta = context as { emailSubject?: string; emailPreheader?: string } | undefined;
+  return `<mj-head><mj-title>${html(meta?.emailSubject)}</mj-title>${meta?.emailPreheader ? `<mj-preview>${html(meta.emailPreheader)}</mj-preview>` : ""}<mj-attributes><mj-all font-family="${html(attrs(node).fontFamily ?? "Arial, sans-serif")}" /><mj-text color="${html(attrs(node).textColor ?? "#111827")}" /></mj-attributes></mj-head>`;
+};
 export const ampLayoutClass = (node: BlockNode) =>
   "wrn-layout-" + Array.from(node.id, char => char.codePointAt(0)!.toString(16)).join("-");
 
@@ -158,8 +162,8 @@ export const emailDocumentBlock = defineBlock({
       `<table data-block-id="${html(node.id)}" role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;background:${html(attrs(node).background ?? "#f3f4f6")};color:${html(attrs(node).textColor ?? "#111827")};font-family:${html(attrs(node).fontFamily ?? "Arial, sans-serif")};"><tr><td align="center">${attrs(node).logoUrl ? `<img src="${html(attrs(node).logoUrl)}" alt="${html(attrs(node).logoAlt)}" style="display:block;height:auto;max-width:200px;padding:20px;" />` : ""}<table role="presentation" class="wrn-email" width="${html(attrs(node).width)}" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;max-width:100%;width:${html(attrs(node).width)}px;background:${html(attrs(node).contentBackground ?? "#ffffff")};color:${html(attrs(node).textColor ?? "#111827")};font-family:${html(attrs(node).fontFamily ?? "Arial, sans-serif")};">${slots.content}</table></td></tr></table>`,
     ampEmail: ({ node, slots }) =>
       `<table role="presentation" width="100%" class="email-bg"><tr><td align="center">${attrs(node).logoUrl ? `<amp-img class="marketing-image" src="${html(attrs(node).logoUrl)}" alt="${html(attrs(node).logoAlt)}" width="200" height="64" layout="fixed"></amp-img>` : ""}<table role="presentation" width="${html(attrs(node).width)}" class="email-body">${slots.content}</table></td></tr></table>`,
-    mjml: ({ node, slots }) =>
-      `<mjml><mj-body width="${html(attrs(node).width ?? "600")}px" background-color="${html(attrs(node).background ?? "#f3f4f6")}">${attrs(node).logoUrl ? `<mj-section padding="20px"><mj-column><mj-image src="${html(attrs(node).logoUrl)}" alt="${html(attrs(node).logoAlt)}" width="200px" padding="0" /></mj-column></mj-section>` : ""}${slots.content}</mj-body></mjml>`,
+    mjml: ({ node, slots, context }) =>
+      `<mjml>${mjmlDocumentHead(node, context)}<mj-body width="${html(attrs(node).width ?? "600")}px" background-color="${html(attrs(node).background ?? "#f3f4f6")}">${attrs(node).logoUrl ? `<mj-section padding="20px"><mj-column><mj-image src="${html(attrs(node).logoUrl)}" alt="${html(attrs(node).logoAlt)}" width="200px" padding="0" /></mj-column></mj-section>` : ""}${slots.content}</mj-body></mjml>`,
   },
   textRenderer: ({ slots }) => slots.content,
 } satisfies BlockDefinition);

packages/email-renderer/src/email.ts

@@ -140,6 +140,8 @@ export async function renderEmail(
     direction: options.direction ?? "ltr",
     countdownImageUrl: options.countdownImageUrl,
     brandLinkColor: String(source.root.props.linkColor ?? "#2563eb"),
+    emailSubject: String(source.meta.subject),
+    emailPreheader: String(source.meta.preheader ?? ""),
     rootBlockIds: Object.values(source.root.slots).flat().map(node => node.id),
   };
   const [htmlResult, textResult, mjmlResult] = await Promise.all([