@blocknote/xl-email-exporter 0.35.0 → 0.36.1

package/src/react-email/defaultSchema/blocks.tsx

@@ -1,10 +1,10 @@
 import {
+  BlockMapping,
   DefaultBlockSchema,
   mapTableCell,
   pageBreakSchema,
   StyledText,
 } from "@blocknote/core";
-import { BlockMapping } from "@blocknote/core/src/exporter/mapping.js";
 import {
   CodeBlock,
   dracula,
@@ -15,27 +15,169 @@ import {
   Text,
 } from "@react-email/components";
 
-export const reactEmailBlockMappingForDefaultSchema: BlockMapping<
+// Define TextProps type based on React Email Text component
+type TextProps = React.ComponentPropsWithoutRef<typeof Text>;
+
+// Define the styles interface for configurable Text components
+export interface ReactEmailTextStyles {
+  paragraph?: Partial<TextProps>;
+  bulletListItem?: Partial<TextProps>;
+  toggleListItem?: Partial<TextProps>;
+  numberedListItem?: Partial<TextProps>;
+  checkListItem?: Partial<TextProps>;
+  quote?: Partial<TextProps>;
+  tableError?: Partial<TextProps>;
+  tableCell?: Partial<TextProps>;
+  caption?: Partial<TextProps>;
+  heading1?: Partial<TextProps>;
+  heading2?: Partial<TextProps>;
+  heading3?: Partial<TextProps>;
+  heading4?: Partial<TextProps>;
+  heading5?: Partial<TextProps>;
+  heading6?: Partial<TextProps>;
+  codeBlock?: Partial<React.ComponentProps<typeof CodeBlock>>;
+}
+
+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;
+
+export const createReactEmailBlockMappingForDefaultSchema = (
+  textStyles: ReactEmailTextStyles = defaultReactEmailTextStyles,
+): BlockMapping<
   DefaultBlockSchema & typeof pageBreakSchema.blockSchema,
   any,
   any,
   React.ReactElement<any>,
   React.ReactElement<typeof Link> | React.ReactElement<HTMLSpanElement>
-> = {
+> => ({
   paragraph: (block, t) => {
-    return <Text>{t.transformInlineContent(block.content)}</Text>;
+    return (
+      <Text
+        {...textStyles.paragraph}
+        style={{
+          ...defaultReactEmailTextStyles.paragraph.style,
+          ...textStyles.paragraph?.style,
+        }}
+      >
+        {t.transformInlineContent(block.content)}
+      </Text>
+    );
   },
   bulletListItem: (block, t) => {
     // Return only the <li> for grouping in the exporter
-    return <Text>{t.transformInlineContent(block.content)}</Text>;
+    return (
+      <Text
+        {...textStyles.bulletListItem}
+        style={{
+          ...defaultReactEmailTextStyles.bulletListItem.style,
+          ...textStyles.bulletListItem?.style,
+        }}
+      >
+        {t.transformInlineContent(block.content)}
+      </Text>
+    );
   },
   toggleListItem: (block, t) => {
     // Return only the <li> for grouping in the exporter
-    return <Text>{t.transformInlineContent(block.content)}</Text>;
+    return (
+      <Text
+        {...textStyles.toggleListItem}
+        style={{
+          ...defaultReactEmailTextStyles.toggleListItem.style,
+          ...textStyles.toggleListItem?.style,
+        }}
+      >
+        {t.transformInlineContent(block.content)}
+      </Text>
+    );
   },
   numberedListItem: (block, t, _nestingLevel) => {
     // Return only the <li> for grouping in the exporter
-    return <Text>{t.transformInlineContent(block.content)}</Text>;
+    return (
+      <Text
+        {...textStyles.numberedListItem}
+        style={{
+          ...defaultReactEmailTextStyles.numberedListItem.style,
+          ...textStyles.numberedListItem?.style,
+        }}
+      >
+        {t.transformInlineContent(block.content)}
+      </Text>
+    );
   },
   checkListItem: (block, t) => {
     // Render a checkbox using inline SVG for better appearance in email
@@ -85,7 +227,13 @@ export const reactEmailBlockMappingForDefaultSchema: BlockMapping<
       </svg>
     );
     return (
-      <Text>
+      <Text
+        {...textStyles.checkListItem}
+        style={{
+          ...defaultReactEmailTextStyles.checkListItem.style,
+          ...textStyles.checkListItem?.style,
+        }}
+      >
         {checkboxSvg}
         <span>{t.transformInlineContent(block.content)}</span>
       </Text>
@@ -93,7 +241,14 @@ export const reactEmailBlockMappingForDefaultSchema: BlockMapping<
   },
   heading: (block, t) => {
     return (
-      <Heading as={`h${block.props.level}`}>
+      <Heading
+        as={`h${block.props.level}`}
+        {...textStyles[`heading${block.props.level}`]}
+        style={{
+          ...defaultReactEmailTextStyles[`heading${block.props.level}`].style,
+          ...textStyles[`heading${block.props.level}`]?.style,
+        }}
+      >
         {t.transformInlineContent(block.content)}
       </Heading>
     );
@@ -108,6 +263,11 @@ export const reactEmailBlockMappingForDefaultSchema: BlockMapping<
         fontFamily="'CommitMono', monospace"
         language={block.props.language as PrismLanguage}
         theme={dracula}
+        {...textStyles.codeBlock}
+        style={{
+          ...defaultReactEmailTextStyles.codeBlock.style,
+          ...textStyles.codeBlock?.style,
+        }}
       />
     );
   },
@@ -136,7 +296,11 @@ export const reactEmailBlockMappingForDefaultSchema: BlockMapping<
           defaultText="Open audio file"
           icon={icon}
         />
-        <Caption caption={block.props.caption} width={previewWidth} />
+        <Caption
+          caption={block.props.caption}
+          width={previewWidth}
+          textStyles={textStyles}
+        />
       </div>
     );
   },
@@ -165,7 +329,11 @@ export const reactEmailBlockMappingForDefaultSchema: BlockMapping<
           defaultText="Open video file"
           icon={icon}
         />
-        <Caption caption={block.props.caption} width={previewWidth} />
+        <Caption
+          caption={block.props.caption}
+          width={previewWidth}
+          textStyles={textStyles}
+        />
       </div>
     );
   },
@@ -194,7 +362,11 @@ export const reactEmailBlockMappingForDefaultSchema: BlockMapping<
           defaultText="Open file"
           icon={icon}
         />
-        <Caption caption={block.props.caption} width={previewWidth} />
+        <Caption
+          caption={block.props.caption}
+          width={previewWidth}
+          textStyles={textStyles}
+        />
       </div>
     );
   },
@@ -211,7 +383,7 @@ export const reactEmailBlockMappingForDefaultSchema: BlockMapping<
     // Render table using standard HTML table elements for email compatibility
     const table = block.content;
     if (!table || typeof table !== "object" || !Array.isArray(table.rows)) {
-      return <Text>Table data not available</Text>;
+      return <Text {...textStyles.tableError}>Table data not available</Text>;
     }
     const headerRowsCount = (table.headerRows as number) ?? 0;
     const headerColsCount = (table.headerCols as number) ?? 0;
@@ -247,17 +419,24 @@ export const reactEmailBlockMappingForDefaultSchema: BlockMapping<
                     style={{
                       border: "1px solid #ddd",
                       padding: "8px 12px",
-                      background: isHeader
-                        ? "#f5f5f5"
-                        : normalizedCell.props.backgroundColor !== "default"
-                          ? normalizedCell.props.backgroundColor
-                          : "#fff",
-                      fontWeight: isHeader ? "bold" : "normal",
+                      background:
+                        normalizedCell.props.backgroundColor !== "default"
+                          ? t.options.colors[
+                              normalizedCell.props
+                                .backgroundColor as keyof typeof t.options.colors
+                            ].background
+                          : "inherit",
+                      fontWeight: isHeader ? "bold" : undefined,
                       textAlign: normalizedCell.props.textAlignment || "left",
                       color:
                         normalizedCell.props.textColor !== "default"
-                          ? normalizedCell.props.textColor
+                          ? t.options.colors[
+                              normalizedCell.props
+                                .textColor as keyof typeof t.options.colors
+                            ].text
                           : "inherit",
+                      ...defaultReactEmailTextStyles.tableCell.style,
+                      ...textStyles.tableCell?.style,
                     }}
                     {...((normalizedCell.props.colspan || 1) > 1 && {
                       colSpan: normalizedCell.props.colspan || 1,
@@ -280,14 +459,15 @@ export const reactEmailBlockMappingForDefaultSchema: BlockMapping<
     // Render block quote with a left border and subtle background for email compatibility
     return (
       <Text
+        {...textStyles.quote}
         style={{
-          borderLeft: "4px solid #bdbdbd",
-          background: "#f9f9f9",
-          padding: "12px 16px",
-          margin: "16px 0",
+          borderLeft: "2px solid #bdbdbd",
+          padding: "0px 12px",
           fontStyle: "italic",
-          color: "#555",
+          color: t.options.colors.gray.text,
           display: "block",
+          ...defaultReactEmailTextStyles.quote.style,
+          ...textStyles.quote?.style,
         }}
       >
         {t.transformInlineContent(block.content)}
@@ -306,7 +486,11 @@ export const reactEmailBlockMappingForDefaultSchema: BlockMapping<
       />
     );
   },
-};
+});
+
+// Export the original mapping for backward compatibility
+export const reactEmailBlockMappingForDefaultSchema =
+  createReactEmailBlockMappingForDefaultSchema();
 
 // Helper for file-like blocks (audio, video, file)
 function FileLink({
@@ -338,12 +522,30 @@ function FileLink({
   );
 }
 
-function Caption({ caption, width }: { caption?: string; width?: number }) {
+function Caption({
+  caption,
+  width,
+  textStyles,
+}: {
+  caption?: string;
+  width?: number;
+  textStyles: ReactEmailTextStyles;
+}) {
   if (!caption) {
     return null;
   }
   return (
-    <Text style={{ width, fontSize: 13, color: "#888", margin: "4px 0 0 0" }}>
+    <Text
+      {...textStyles.caption}
+      style={{
+        width,
+        fontSize: 13,
+        color: "#888",
+        margin: "4px 0 0 0",
+        ...defaultReactEmailTextStyles.caption.style,
+        ...textStyles.caption?.style,
+      }}
+    >
       {caption}
     </Text>
   );

package/src/react-email/defaultSchema/index.ts

@@ -1,9 +1,77 @@
-import { reactEmailBlockMappingForDefaultSchema } from "./blocks.js";
-import { reactEmailInlineContentMappingForDefaultSchema } from "./inlinecontent.js";
-import { reactEmailStyleMappingForDefaultSchema } from "./styles.js";
+import {
+  reactEmailBlockMappingForDefaultSchema,
+  createReactEmailBlockMappingForDefaultSchema,
+  type ReactEmailTextStyles,
+  defaultReactEmailTextStyles,
+} from "./blocks.js";
+import {
+  reactEmailInlineContentMappingForDefaultSchema,
+  createReactEmailInlineContentMappingForDefaultSchema,
+  type ReactEmailLinkStyles,
+  defaultReactEmailLinkStyles,
+} from "./inlinecontent.js";
+import {
+  reactEmailStyleMappingForDefaultSchema,
+  createReactEmailStyleMappingForDefaultSchema,
+  type ReactEmailStyleTransformStyles,
+  defaultReactEmailStyleTransformStyles,
+} from "./styles.js";
+
+// Re-export for backward compatibility
+export { reactEmailBlockMappingForDefaultSchema } from "./blocks.js";
+export { reactEmailInlineContentMappingForDefaultSchema } from "./inlinecontent.js";
+export { reactEmailStyleMappingForDefaultSchema } from "./styles.js";
+
+// Export the new configurable functions
+export {
+  createReactEmailBlockMappingForDefaultSchema,
+  type ReactEmailTextStyles,
+  defaultReactEmailTextStyles,
+} from "./blocks.js";
+export {
+  createReactEmailInlineContentMappingForDefaultSchema,
+  type ReactEmailLinkStyles,
+  defaultReactEmailLinkStyles,
+} from "./inlinecontent.js";
+export {
+  createReactEmailStyleMappingForDefaultSchema,
+  type ReactEmailStyleTransformStyles,
+  defaultReactEmailStyleTransformStyles,
+} from "./styles.js";
+
+// Export the combined styles interface
+export interface ReactEmailDefaultSchemaStyles {
+  textStyles?: ReactEmailTextStyles;
+  linkStyles?: ReactEmailLinkStyles;
+  styleTransformStyles?: ReactEmailStyleTransformStyles;
+}
+
+// Export the default combined styles
+export const defaultReactEmailDefaultSchemaStyles: ReactEmailDefaultSchemaStyles =
+  {
+    textStyles: defaultReactEmailTextStyles,
+    linkStyles: defaultReactEmailLinkStyles,
+    styleTransformStyles: defaultReactEmailStyleTransformStyles,
+  };
 
 export const reactEmailDefaultSchemaMappings = {
   blockMapping: reactEmailBlockMappingForDefaultSchema,
   inlineContentMapping: reactEmailInlineContentMappingForDefaultSchema,
   styleMapping: reactEmailStyleMappingForDefaultSchema,
 };
+
+export const reactEmailDefaultSchemaMappingsWithStyles = (
+  styles: ReactEmailDefaultSchemaStyles = defaultReactEmailDefaultSchemaStyles,
+): typeof reactEmailDefaultSchemaMappings => {
+  return {
+    blockMapping: createReactEmailBlockMappingForDefaultSchema(
+      styles.textStyles,
+    ),
+    inlineContentMapping: createReactEmailInlineContentMappingForDefaultSchema(
+      styles.linkStyles,
+    ),
+    styleMapping: createReactEmailStyleMappingForDefaultSchema(
+      styles.styleTransformStyles,
+    ),
+  };
+};

package/src/react-email/defaultSchema/inlinecontent.tsx

@@ -1,19 +1,31 @@
 import {
   DefaultInlineContentSchema,
   DefaultStyleSchema,
+  InlineContentMapping,
 } from "@blocknote/core";
-import { InlineContentMapping } from "@blocknote/core/src/exporter/mapping.js";
 import { Link } from "@react-email/components";
 
-export const reactEmailInlineContentMappingForDefaultSchema: InlineContentMapping<
+// Define the styles interface for configurable Link components
+export interface ReactEmailLinkStyles {
+  link?: Partial<React.ComponentPropsWithoutRef<typeof Link>>;
+}
+
+// Default styles for Link components
+export const defaultReactEmailLinkStyles: ReactEmailLinkStyles = {
+  link: {},
+};
+
+export const createReactEmailInlineContentMappingForDefaultSchema = (
+  linkStyles: ReactEmailLinkStyles = defaultReactEmailLinkStyles,
+): InlineContentMapping<
   DefaultInlineContentSchema,
   DefaultStyleSchema,
   React.ReactElement<typeof Link> | React.ReactElement<HTMLSpanElement>,
   React.ReactElement<HTMLSpanElement>
-> = {
+> => ({
   link: (ic, t) => {
     return (
-      <Link href={ic.href}>
+      <Link href={ic.href} {...linkStyles.link}>
         {...ic.content.map((content) => {
           return t.transformStyledText(content);
         })}
@@ -23,4 +35,8 @@ export const reactEmailInlineContentMappingForDefaultSchema: InlineContentMappin
   text: (ic, t) => {
     return t.transformStyledText(ic);
   },
-};
+});
+
+// Export the original mapping for backward compatibility
+export const reactEmailInlineContentMappingForDefaultSchema =
+  createReactEmailInlineContentMappingForDefaultSchema();

package/src/react-email/defaultSchema/styles.tsx

@@ -1,10 +1,17 @@
 import { DefaultStyleSchema, StyleMapping } from "@blocknote/core";
 import { CSSProperties } from "react";
 
-export const reactEmailStyleMappingForDefaultSchema: StyleMapping<
-  DefaultStyleSchema,
-  CSSProperties
-> = {
+// Define the styles interface for configurable style transformations
+// This can be extended in the future to allow customizing style transformations
+export type ReactEmailStyleTransformStyles = Record<string, never>;
+
+// Default styles for style transformations
+export const defaultReactEmailStyleTransformStyles: ReactEmailStyleTransformStyles =
+  {};
+
+export const createReactEmailStyleMappingForDefaultSchema = (
+  _styleTransformStyles: ReactEmailStyleTransformStyles = defaultReactEmailStyleTransformStyles,
+): StyleMapping<DefaultStyleSchema, CSSProperties> => ({
   bold: (val) => {
     if (!val) {
       return {};
@@ -37,17 +44,24 @@ export const reactEmailStyleMappingForDefaultSchema: StyleMapping<
       textDecoration: "line-through",
     };
   },
-  backgroundColor: (val) => {
+  backgroundColor: (val, exporter) => {
+    if (!val) {
+      return {};
+    }
     return {
-      backgroundColor: val,
+      backgroundColor:
+        exporter.options.colors[val as keyof typeof exporter.options.colors]
+          .background,
     };
   },
-  textColor: (val) => {
+  textColor: (val, exporter) => {
     if (!val) {
       return {};
     }
     return {
-      color: val,
+      color:
+        exporter.options.colors[val as keyof typeof exporter.options.colors]
+          .text,
     };
   },
   code: (val) => {
@@ -55,7 +69,11 @@ export const reactEmailStyleMappingForDefaultSchema: StyleMapping<
       return {};
     }
     return {
-      fontFamily: "Courier",
+      fontFamily: "GeistMono",
     };
   },
-};
+});
+
+// Export the original mapping for backward compatibility
+export const reactEmailStyleMappingForDefaultSchema =
+  createReactEmailStyleMappingForDefaultSchema();

package/src/react-email/reactEmailExporter.tsx

@@ -12,7 +12,6 @@ import {
 } from "@blocknote/core";
 import {
   Body,
-  Container,
   Head,
   Html,
   Link,
@@ -63,7 +62,14 @@ export class ReactEmailExporter<
   public transformStyledText(styledText: StyledText<S>) {
     const stylesArray = this.mapStyles(styledText.styles);
     const styles = Object.assign({}, ...stylesArray);
-    return <span style={styles}>{styledText.text}</span>;
+    return (
+      <span
+        style={styles}
+        dangerouslySetInnerHTML={{
+          __html: styledText.text.replace(/\n/g, "<br />"),
+        }}
+      />
+    );
   }
 
   private async renderGroupedListBlocks(
@@ -95,10 +101,10 @@ export class ReactEmailExporter<
         );
       }
       listItems.push(
-        <React.Fragment key={block.id}>
+        <li key={block.id}>
           {liContent}
           {nestedList.length > 0 && nestedList}
-        </React.Fragment>,
+        </li>,
       );
     }
     let element: React.ReactElement;
@@ -226,7 +232,11 @@ export class ReactEmailExporter<
     let i = 0;
     while (i < blocks.length) {
       const b = blocks[i];
-      if (b.type === "bulletListItem" || b.type === "numberedListItem") {
+      if (
+        b.type === "bulletListItem" ||
+        b.type === "numberedListItem" ||
+        b.type === "toggleListItem"
+      ) {
         const { element, nextIndex } = await this.renderGroupedListBlocks(
           blocks,
           i,
@@ -278,9 +288,18 @@ export class ReactEmailExporter<
        * @see https://react.email/components
        */
       footer?: React.ReactElement;
+      /**
+       * Customize the container element
+       */
+      container?: React.FC<{ children: React.ReactNode }>;
     },
   ) {
     const transformedBlocks = await this.transformBlocks(blocks);
+    const DefaultContainer =
+      options?.container ||
+      (({ children }: { children: React.ReactNode }) => (
+        <React.Fragment>{children}</React.Fragment>
+      ));
     return renderEmail(
       <Html>
         <Head>{options?.head}</Head>
@@ -295,11 +314,11 @@ export class ReactEmailExporter<
         >
           {options?.preview && <Preview>{options.preview}</Preview>}
           <Tailwind>
-            <Container>
+            <DefaultContainer>
               {options?.header}
               {transformedBlocks}
               {options?.footer}
-            </Container>
+            </DefaultContainer>
           </Tailwind>
         </Body>
       </Html>,