diff --git a/docs/content/docs/features/export/email.mdx b/docs/content/docs/features/export/email.mdx index 7422c7ac80..a6599b7694 100644 --- a/docs/content/docs/features/export/email.mdx +++ b/docs/content/docs/features/export/email.mdx @@ -56,6 +56,7 @@ See the [full example](/examples/interoperability/converting-blocks-to-react-ema - **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) +- **bodyStyles**: Customize the body styles (a `CSSProperties` object), providing an object here will completely override the default styles with what you provide Example usage: @@ -82,6 +83,14 @@ const html = await exporter.toReactEmailDocument(editor.document, { footer: Footer, head: My email, container: ({ children }) => {children}, + // These are the default body styles that are set by default + bodyStyles: { + fontFamily: + "'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif", + fontSize: "16px", + lineHeight: "1.5", + color: "#333", + }, }); ``` 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 cfc448f101..0766ced3fe 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 @@ -14,6 +14,8 @@ exports[`react email exporter > should handle document with code blocks > __snap exports[`react email exporter > should handle document with complex nested structure > __snapshots__/reactEmailExporterComplexNested 1`] = `"

Complex Document

This is a paragraph with bold and italic text, plus a link.

"`; +exports[`react email exporter > should handle document with custom body styles > __snapshots__/reactEmailExporterCustomBodyStyles 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.

  1. Numbered List Item

Check List Item

Wide CellTable CellTable Cell
Wide CellTable CellTable Cell
Wide CellTable CellTable Cell
Open file
From https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg
Open video file

From https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm

Open audio file

From https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3

audio.mp3

Audio file caption

Inline Content:

Styled Text Link

Table Cell 1Table Cell 2Table Cell 3
Table Cell 4Table Cell Bold 5Table Cell 6
Table Cell 7Table Cell 8Table Cell 9
const helloWorld = (message) => {
  console.log("Hello World", message);
};
"`; + exports[`react email exporter > should handle document with headings of different levels > __snapshots__/reactEmailExporterHeadings 1`] = `"

Heading 1

Heading 2

Heading 3

"`; exports[`react email exporter > should handle document with links > __snapshots__/reactEmailExporterWithLinks 1`] = `"

Click here

"`; diff --git a/packages/xl-email-exporter/src/react-email/reactEmailExporter.test.tsx b/packages/xl-email-exporter/src/react-email/reactEmailExporter.test.tsx index 6075852536..7688f2e833 100644 --- a/packages/xl-email-exporter/src/react-email/reactEmailExporter.test.tsx +++ b/packages/xl-email-exporter/src/react-email/reactEmailExporter.test.tsx @@ -783,4 +783,19 @@ describe("react email exporter", () => { expect(html).toMatchSnapshot("__snapshots__/reactEmailExporterMixedLists"); }); + + it("should handle document with custom body styles", async () => { + const exporter = new ReactEmailExporter( + BlockNoteSchema.create(), + reactEmailDefaultSchemaMappings, + ); + + const html = await exporter.toReactEmailDocument(testDocument as any, { + bodyStyles: { fontFamily: "Arial, sans-serif" }, + }); + + expect(html).toMatchSnapshot( + "__snapshots__/reactEmailExporterCustomBodyStyles", + ); + }); }); diff --git a/packages/xl-email-exporter/src/react-email/reactEmailExporter.tsx b/packages/xl-email-exporter/src/react-email/reactEmailExporter.tsx index 191ae980ad..5c9c8a2fe6 100644 --- a/packages/xl-email-exporter/src/react-email/reactEmailExporter.tsx +++ b/packages/xl-email-exporter/src/react-email/reactEmailExporter.tsx @@ -292,6 +292,16 @@ export class ReactEmailExporter< * Customize the container element */ container?: React.FC<{ children: React.ReactNode }>; + /** + * Customize the body styles + * @default { + * fontFamily: "'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif", + * fontSize: "16px", + * lineHeight: "1.5", + * color: "#333", + * } + */ + bodyStyles?: CSSProperties; }, ) { const transformedBlocks = await this.transformBlocks(blocks); @@ -304,13 +314,15 @@ export class ReactEmailExporter< {options?.head} {options?.preview && {options.preview}}