-
-
Notifications
You must be signed in to change notification settings - Fork 642
fix: allow configuring the email body's styles #2182
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
@blocknote/ariakit
@blocknote/code-block
@blocknote/core
@blocknote/mantine
@blocknote/react
@blocknote/server-util
@blocknote/shadcn
@blocknote/xl-ai
@blocknote/xl-docx-exporter
@blocknote/xl-email-exporter
@blocknote/xl-multi-column
@blocknote/xl-odt-exporter
@blocknote/xl-pdf-exporter
commit: |
| options?.bodyStyles ?? { | ||
| fontFamily: | ||
| "'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif", | ||
| fontSize: "16px", | ||
| lineHeight: "1.5", | ||
| color: "#333", | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would be nice to align the defaults in the mdx with the default here. For me these values in the export were a mystery before I found them here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@noudadrichem sorry I don't completely understand by "the defaults in the mdx"
Do you mean the defaults for the individual blocks in the export like here:
BlockNote/packages/xl-email-exporter/src/react-email/defaultSchema/blocks.tsx
Lines 40 to 116 in 0ef29d2
| const defaultTextStyle: TextProps["style"] = { | |
| fontSize: 16, | |
| lineHeight: 1.5, | |
| margin: 3, | |
| minHeight: 24, | |
| }; | |
| // Default styles for Text components | |
| export const defaultReactEmailTextStyles = { | |
| paragraph: { | |
| style: defaultTextStyle, | |
| }, | |
| bulletListItem: { | |
| style: defaultTextStyle, | |
| }, | |
| toggleListItem: { | |
| style: defaultTextStyle, | |
| }, | |
| numberedListItem: { | |
| style: defaultTextStyle, | |
| }, | |
| checkListItem: { | |
| style: defaultTextStyle, | |
| }, | |
| quote: { | |
| style: defaultTextStyle, | |
| }, | |
| tableError: { | |
| style: defaultTextStyle, | |
| }, | |
| tableCell: { | |
| style: defaultTextStyle, | |
| }, | |
| caption: { | |
| style: defaultTextStyle, | |
| }, | |
| heading1: { | |
| style: { | |
| fontSize: 48, | |
| margin: 3, | |
| }, | |
| }, | |
| heading2: { | |
| style: { | |
| fontSize: 36, | |
| margin: 3, | |
| }, | |
| }, | |
| heading3: { | |
| style: { | |
| fontSize: 24, | |
| margin: 3, | |
| }, | |
| }, | |
| heading4: { | |
| style: { | |
| fontSize: 20, | |
| margin: 3, | |
| }, | |
| }, | |
| heading5: { | |
| style: { | |
| fontSize: 18, | |
| margin: 3, | |
| }, | |
| }, | |
| heading6: { | |
| style: { | |
| fontSize: 16, | |
| margin: 3, | |
| }, | |
| }, | |
| codeBlock: { | |
| style: defaultTextStyle, | |
| }, | |
| } satisfies ReactEmailTextStyles; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In the docs maybe? Like a callout that if not specified it'd be these values?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated the docs
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I meant the docs indeed: docs/content/docs/features/export/email.mdx
Summary
This allows customize the React email exporter's body element (which we add some default styles to)
Rationale
This allows customizing things like the email's fontSize
Changes
expose an additional option to the conversion function
Impact
Testing
Added a snap with using something other than the defaults
Screenshots/Video
Checklist
Additional Notes