fix(email-renderer): preserve AMP section and spacer layout

packages/email-renderer/src/blocks.ts

@@ -32,6 +32,22 @@ const html = (value: unknown) =>
     .replaceAll('"', """)
     .replaceAll("'", "'");
 const attrs = (node: BlockNode) => node.props as Record<string, unknown>;
+export const ampLayoutClass = (node: BlockNode) =>
+  "wrn-layout-" + Array.from(node.id, char => char.codePointAt(0)!.toString(16)).join("-");
+
+export function ampLayoutCss(node: BlockNode): string {
+  const props = attrs(node);
+  if (node.type === "layout.section") {
+    const background = safeCssValue(props.background, /^(#[0-9a-f]{3,8}|rgba?\([0-9., %]+\))$/i) || "#ffffff";
+    const padding = safeCssValue(props.padding, /^\d+(?:\.\d+)?(?:px|rem|em|%)?(?:\s+\d+(?:\.\d+)?(?:px|rem|em|%)?){0,3}$/) || "24px";
+    return `.${ampLayoutClass(node)}{background:${background};padding:${padding}}`;
+  }
+  if (node.type === "content.spacer") {
+    const height = safeCssValue(props.height, /^\d{1,4}$/) || "24";
+    return `.${ampLayoutClass(node)}{height:${height}px;line-height:${height}px;font-size:1px}`;
+  }
+  return "";
+}
 const multilineText = (value: unknown) => html(value).replace(/\r\n?|\n/g, "<br />");
 const imageDimension = (fallback: string): ValueSchema<string> => ({
   kind: "string",
@@ -155,7 +171,7 @@ export const sectionBlock = defineBlock({
       ),
     ampEmail: ({ node, slots }) =>
       emailCell(
-        `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="section"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">${slots.content}</table></td></tr></table>`,
+        `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="${ampLayoutClass(node)}"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">${slots.content}</table></td></tr></table>`,
         node,
       ),
     mjml: ({ node, slots }) => {
@@ -382,7 +398,7 @@ export const spacerBlock = leaf(
         `<div style="font-size:1px;height:${html(attrs(node).height)}px;line-height:${html(attrs(node).height)}px;">&nbsp;</div>`,
         node,
       ),
-    ampEmail: ({ node }) => emailCell(`<div class="spacer">&nbsp;</div>`, node),
+    ampEmail: ({ node }) => emailCell(`<div class="${ampLayoutClass(node)}">&nbsp;</div>`, node),
     mjml: ({ node }) => `<mj-spacer height="${html(attrs(node).height)}px" />`,
   },
   () => "\n",