fix(email): wrap root blocks in valid MJML layouts

packages/email-renderer/src/blocks.ts

@@ -32,6 +32,8 @@ const html = (value: unknown) =>
     .replaceAll('"', """)
     .replaceAll("'", "'");
 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;
 export const ampLayoutClass = (node: BlockNode) =>
   "wrn-layout-" + Array.from(node.id, char => char.codePointAt(0)!.toString(16)).join("-");
 
@@ -228,7 +230,9 @@ export const columnsBlock = defineBlock({
       ),
     ampEmail: ({ node, slots }) =>
       emailCell(`<table role="presentation" width="100%"><tr class="wrn-columns">${slots.columns}</tr></table>`, node),
-    mjml: ({ slots }) => slots.columns,
+    mjml: ({ node, slots, context }) => isEmailRootChild(node, context)
+      ? `<mj-section padding="0">${slots.columns}</mj-section>`
+      : slots.columns,
   },
   textRenderer: ({ slots }) => slots.columns,
 } satisfies BlockDefinition);
@@ -285,7 +289,15 @@ const leaf = (
       slots: {},
     },
     create: ({ id }) => ({ id: id(), type, version: 1, props: {}, styles: {}, slots: {} }),
-    renderers,
+    renderers: {
+      ...renderers,
+      ...(renderers?.mjml ? { mjml: async (input) => {
+        const content = await renderers.mjml!(input);
+        return isEmailRootChild(input.node, input.context)
+          ? `<mj-section padding="0"><mj-column padding="0">${content}</mj-column></mj-section>`
+          : content;
+      } } : {}),
+    },
     textRenderer,
   });