fix(xl-email-exporter): better defaults, customize textStyles, output inline styles (#1856)

Author: nperez0111

docs/content/docs/features/export/email.mdx

@@ -55,16 +55,33 @@ See the [full example](/examples/interoperability/converting-blocks-to-react-ema
 - **header**: Add content to the top of the email (must be a React-Email compatible component)
 - **footer**: Add content to the bottom of the email (must be a React-Email compatible component)
 - **head**: Inject elements into the [Head element](https://react.email/docs/components/head)
+- **container**: Customize the container element (A component which will wrap the email content including the header and footer)
 
 Example usage:
 
-```tsx
-import { Text } from "@react-email/components";
+```tsx twoslash
+import React from "react";
+import {
+  ReactEmailExporter,
+  reactEmailDefaultSchemaMappings,
+} from "@blocknote/xl-email-exporter";
+import { BlockNoteEditor } from "@blocknote/core";
+import { Text, Container } from "@react-email/components";
+
+const editor = BlockNoteEditor.create();
+
+// ---cut---
+const exporter = new ReactEmailExporter(
+  editor.schema,
+  reactEmailDefaultSchemaMappings,
+);
+
 const html = await exporter.toReactEmailDocument(editor.document, {
   preview: "This is a preview of the email content",
   header: <Text>Header</Text>,
   footer: <Text>Footer</Text>,
   head: <title>My email</title>,
+  container: ({ children }) => <Container>{children}</Container>,
 });
 ```
 
@@ -106,3 +123,41 @@ const defaultOptions = {
   colors: COLORS_DEFAULT, // defaults from @blocknote/core
 };
 ```
+
+### Custom styles
+
+Want to tweak the default styles of the email? You can use `reactEmailDefaultSchemaMappingsWithStyles` to create a custom mapping with your own styles.
+
+```tsx
+import {
+  ReactEmailExporter,
+  reactEmailDefaultSchemaMappingsWithStyles,
+} from "@blocknote/xl-email-exporter";
+import { Text } from "@react-email/components";
+
+const { blockMapping, inlineContentMapping, styleMapping } =
+  reactEmailDefaultSchemaMappingsWithStyles({
+    textStyles: {
+      paragraph: {
+        style: {
+          fontSize: 16,
+          lineHeight: 1.5,
+          margin: 3,
+          minHeight: 24,
+        },
+      },
+    },
+  });
+
+new ReactEmailExporter(schema, {
+  // You can still use the default block mapping, but you can also overwrite it
+  blockMapping: {
+    ...blockMapping,
+    audio: (block, exporter) => {
+      return <Text>Audio block</Text>;
+    },
+  },
+  inlineContentMapping,
+  styleMapping,
+});
+```

docs/package.json

@@ -84,7 +84,7 @@
     "fumadocs-typescript": "^4.0.6",
     "fumadocs-ui": "^15.5.4",
     "import-in-the-middle": "^1.14.2",
-    "next": "^15.4.1",
+    "next": "^15.4.3",
     "nodemailer": "^6.10.1",
     "partykit": "^0.0.115",
     "pg": "^8.15.5",

examples/05-interoperability/08-converting-blocks-to-react-email/src/App.tsx

@@ -1,5 +1,7 @@
 import {
   BlockNoteSchema,
+  COLORS_DARK_MODE_DEFAULT,
+  COLORS_DEFAULT,
   combineByGroup,
   filterSuggestionItems,
   withPageBreak,
@@ -10,7 +12,9 @@ import "@blocknote/mantine/style.css";
 import {
   SuggestionMenuController,
   getDefaultReactSlashMenuItems,
+  useBlockNoteContext,
   useCreateBlockNote,
+  usePrefersColorScheme,
 } from "@blocknote/react";
 import {
   ReactEmailExporter,
@@ -314,13 +318,22 @@ export default function App() {
     ],
   });
 
+  const existingContext = useBlockNoteContext();
+  const systemColorScheme = usePrefersColorScheme();
+  const colorScheme =
+    existingContext?.colorSchemePreference || systemColorScheme;
+
   const onChange = async () => {
     if (!editor || !editor.document) {
       return;
     }
     const exporter = new ReactEmailExporter(
       editor.schema,
       reactEmailDefaultSchemaMappings,
+      {
+        colors:
+          colorScheme === "dark" ? COLORS_DARK_MODE_DEFAULT : COLORS_DEFAULT,
+      },
     );
     const emailHtml = await exporter.toReactEmailDocument(editor.document);
 

examples/05-interoperability/08-converting-blocks-to-react-email/src/styles.css

@@ -21,8 +21,6 @@
 
 .email {
   min-height: 500px;
-  display: flex;
-  align-items: stretch;
 }
 
 /* hack to get react-email to show on website */