Merge branch 'main' into fix/1844

Author: nperez0111

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/03-ui-components/17-advanced-tables-2/.bnexample.json

@@ -0,0 +1,11 @@
+{
+  "playground": true,
+  "docs": true,
+  "author": "must",
+  "tags": [
+    "Intermediate",
+    "UI Components",
+    "Tables",
+    "Appearance & Styling"
+  ]
+}

examples/03-ui-components/17-advanced-tables-2/README.md

@@ -0,0 +1,54 @@
+# Advanced Tables with Calculated Columns
+
+This example demonstrates advanced table features including automatic calculations. It shows how to create a table with calculated columns that automatically update when values change.
+
+## Features
+
+- **Automatic Calculations**: Quantity × Price = Total for each row
+- **Grand Total**: Automatically calculated sum of all totals
+- **Real-time Updates**: Calculations update immediately when you change quantity or price values
+- **Split cells**: Merge and split table cells
+- **Cell background color**: Color individual cells
+- **Cell text color**: Change text color in cells
+- **Table row and column headers**: Use headers for better organization
+
+## How It Works
+
+The example uses the `onChange` event listener to detect when table content changes. When a table is updated, it automatically:
+
+1. Extracts quantity and price values from each data row
+2. Calculates the total (quantity × price) for each row
+3. Updates the total column with the calculated values
+4. Calculates and updates the grand total
+
+## Code Highlights
+
+```tsx
+<BlockNoteView
+  editor={editor}
+  onChange={(editor, { getChanges }) => {
+    const changes = getChanges();
+
+    changes.forEach((change) => {
+      if (change.type === "update" && change.block.type === "table") {
+        const updatedRows = calculateTableTotals(change.block);
+        if (updatedRows) {
+          editor.updateBlock(change.block, {
+            type: "table",
+            content: {
+              ...change.block.content,
+              rows: updatedRows as any,
+            } as any,
+          });
+        }
+      }
+    });
+  }}
+></BlockNoteView>
+```
+
+**Relevant Docs:**
+
+- [Tables](/docs/features/blocks/tables)
+- [Editor Setup](/docs/getting-started/editor-setup)
+- [Events](/docs/reference/editor/events)

examples/03-ui-components/17-advanced-tables-2/index.html

@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Advanced Tables with Calculated Columns</title>
+    <script>
+      <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

examples/03-ui-components/17-advanced-tables-2/main.tsx

@@ -0,0 +1,11 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./src/App.jsx";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

examples/03-ui-components/17-advanced-tables-2/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@blocknote/example-ui-components-advanced-tables-2",
+  "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "private": true,
+  "version": "0.12.4",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build:prod": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@blocknote/core": "latest",
+    "@blocknote/react": "latest",
+    "@blocknote/ariakit": "latest",
+    "@blocknote/mantine": "latest",
+    "@blocknote/shadcn": "latest",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.3.4"
+  }
+}