diff --git a/docs/content/docs/features/export/email.mdx b/docs/content/docs/features/export/email.mdx
index b85f466ba5..7422c7ac80 100644
--- a/docs/content/docs/features/export/email.mdx
+++ b/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: Header,
footer: Footer,
head: My email,
+ container: ({ children }) => {children},
});
```
@@ -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 Audio block;
+ },
+ },
+ inlineContentMapping,
+ styleMapping,
+});
+```
diff --git a/docs/package.json b/docs/package.json
index 358bd32d45..3389fb11a9 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -83,7 +83,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",
diff --git a/examples/05-interoperability/08-converting-blocks-to-react-email/src/App.tsx b/examples/05-interoperability/08-converting-blocks-to-react-email/src/App.tsx
index c74855be0e..6b70999d78 100644
--- a/examples/05-interoperability/08-converting-blocks-to-react-email/src/App.tsx
+++ b/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,6 +318,11 @@ export default function App() {
],
});
+ const existingContext = useBlockNoteContext();
+ const systemColorScheme = usePrefersColorScheme();
+ const colorScheme =
+ existingContext?.colorSchemePreference || systemColorScheme;
+
const onChange = async () => {
if (!editor || !editor.document) {
return;
@@ -321,6 +330,10 @@ export default function App() {
const exporter = new ReactEmailExporter(
editor.schema,
reactEmailDefaultSchemaMappings,
+ {
+ colors:
+ colorScheme === "dark" ? COLORS_DARK_MODE_DEFAULT : COLORS_DEFAULT,
+ },
);
const emailHtml = await exporter.toReactEmailDocument(editor.document);
diff --git a/examples/05-interoperability/08-converting-blocks-to-react-email/src/styles.css b/examples/05-interoperability/08-converting-blocks-to-react-email/src/styles.css
index ea15fbecd3..1ccbb9d746 100644
--- a/examples/05-interoperability/08-converting-blocks-to-react-email/src/styles.css
+++ b/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 */
diff --git a/packages/xl-email-exporter/src/react-email/__snapshots__/reactEmailExporter.test.tsx.snap b/packages/xl-email-exporter/src/react-email/__snapshots__/reactEmailExporter.test.tsx.snap
index 3bd0a6b1bc..5334c2cd62 100644
--- a/packages/xl-email-exporter/src/react-email/__snapshots__/reactEmailExporter.test.tsx.snap
+++ b/packages/xl-email-exporter/src/react-email/__snapshots__/reactEmailExporter.test.tsx.snap
@@ -1,35 +1,35 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`react email exporter > should export a document (HTML snapshot) > __snapshots__/reactEmailExporter 1`] = `"
Welcome to this demo 🙌!
Hello World nested
Hello World double nested
This paragraph has a background color
Paragraph
Heading
Heading right
justified paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Bullet List Item right. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
"`;
+exports[`react email exporter > should export a document (HTML snapshot) > __snapshots__/reactEmailExporter 1`] = `"
Welcome to this demo 🙌!
Hello World nested
Hello World double nested
This paragraph has a background color
Paragraph
Heading
Heading right
justified paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Bullet List Item right. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
justified paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Bullet List Item right. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
justified paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Bullet List Item right. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
justified paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Bullet List Item right. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
justified paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Bullet List Item right. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
