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

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 */