@blocknote/xl-pdf-exporter 0.32.0 → 0.34.0

package/src/pdf/pdfExporter.test.tsx

@@ -8,12 +8,14 @@ import {
   defaultStyleSpecs,
   PageBreak,
 } from "@blocknote/core";
+import { ColumnBlock, ColumnListBlock } from "@blocknote/xl-multi-column";
 import { Text } from "@react-pdf/renderer";
 import { testDocument } from "@shared/testDocument.js";
 import reactElementToJSXString from "react-element-to-jsx-string";
 import { describe, expect, it } from "vitest";
 import { pdfDefaultSchemaMappings } from "./defaultSchema/index.js";
 import { PDFExporter } from "./pdfExporter.js";
+import { partialBlocksToBlocksForTesting } from "@shared/formatConversionTestUtil.js";
 // import * as ReactPDF from "@react-pdf/renderer";
 // expect.extend({ toMatchImageSnapshot });
 // import { toMatchImageSnapshot } from "jest-image-snapshot";
@@ -28,6 +30,8 @@ describe("exporter", () => {
       blockSpecs: {
         ...defaultBlockSpecs,
         pageBreak: PageBreak,
+        column: ColumnBlock,
+        columnList: ColumnListBlock,
         extraBlock: createBlockSpec(
           {
             content: "none",
@@ -158,7 +162,12 @@ describe("exporter", () => {
   it("should export a document", async () => {
     const exporter = new PDFExporter(
       BlockNoteSchema.create({
-        blockSpecs: { ...defaultBlockSpecs, pageBreak: PageBreak },
+        blockSpecs: {
+          ...defaultBlockSpecs,
+          pageBreak: PageBreak,
+          column: ColumnBlock,
+          columnList: ColumnListBlock,
+        },
       }),
       pdfDefaultSchemaMappings,
     );
@@ -191,7 +200,12 @@ describe("exporter", () => {
   it("should export a document with header and footer", async () => {
     const exporter = new PDFExporter(
       BlockNoteSchema.create({
-        blockSpecs: { ...defaultBlockSpecs, pageBreak: PageBreak },
+        blockSpecs: {
+          ...defaultBlockSpecs,
+          pageBreak: PageBreak,
+          column: ColumnBlock,
+          columnList: ColumnListBlock,
+        },
       }),
       pdfDefaultSchemaMappings,
     );
@@ -210,4 +224,77 @@ describe("exporter", () => {
     //   `${__dirname}/exampleWithHeaderAndFooter.pdf`
     // );
   });
+  it("should export a document with a multi-column block", async () => {
+    const schema = BlockNoteSchema.create({
+      blockSpecs: {
+        ...defaultBlockSpecs,
+        pageBreak: PageBreak,
+        column: ColumnBlock,
+        columnList: ColumnListBlock,
+      },
+    });
+    const exporter = new PDFExporter(schema, pdfDefaultSchemaMappings);
+    const transformed = await exporter.toReactPDFDocument(
+      partialBlocksToBlocksForTesting(schema, [
+        {
+          type: "columnList",
+          children: [
+            {
+              type: "column",
+              props: {
+                width: 0.8,
+              },
+              children: [
+                {
+                  type: "paragraph",
+                  content: "This paragraph is in a column!",
+                },
+              ],
+            },
+            {
+              type: "column",
+              props: {
+                width: 1.4,
+              },
+              children: [
+                {
+                  type: "heading",
+                  content: "So is this heading!",
+                },
+              ],
+            },
+            {
+              type: "column",
+              props: {
+                width: 0.8,
+              },
+              children: [
+                {
+                  type: "paragraph",
+                  content: "You can have multiple blocks in a column too",
+                },
+                {
+                  type: "bulletListItem",
+                  content: "Block 1",
+                },
+                {
+                  type: "bulletListItem",
+                  content: "Block 2",
+                },
+                {
+                  type: "bulletListItem",
+                  content: "Block 3",
+                },
+              ],
+            },
+          ],
+        },
+      ]),
+    );
+    const str = reactElementToJSXString(transformed);
+
+    await expect(str).toMatchFileSnapshot(
+      "__snapshots__/exampleWithMultiColumn.jsx",
+    );
+  });
 });

package/src/pdf/pdfExporter.tsx

@@ -10,7 +10,6 @@ import {
   StyleSchema,
   StyledText,
 } from "@blocknote/core";
-import { Fragment } from "react";
 import {
   Document,
   Font,
@@ -22,6 +21,7 @@ import {
   View,
 } from "@react-pdf/renderer";
 import { corsProxyResolveFileUrl } from "@shared/api/corsProxy.js";
+import { Fragment } from "react";
 import { loadFontDataUrl } from "../../../../shared/util/fileUtil.js";
 
 import { Style } from "./types.js";
@@ -146,9 +146,10 @@ export class PDFExporter<
         b as any,
         nestingLevel,
         numberedListIndex,
+        children,
       ); // TODO: any
 
-      if (b.type === "pageBreak") {
+      if (["pageBreak", "columnList", "column"].includes(b.type)) {
         ret.push(self);
         continue;
       }

package/types/src/pdf/defaultSchema/blocks.d.ts

@@ -1,3 +1,4 @@
 import { BlockMapping, DefaultBlockSchema, pageBreakSchema } from "@blocknote/core";
+import { multiColumnSchema } from "@blocknote/xl-multi-column";
 import { Link, Text } from "@react-pdf/renderer";
-export declare const pdfBlockMappingForDefaultSchema: BlockMapping<DefaultBlockSchema & typeof pageBreakSchema.blockSchema, any, any, React.ReactElement<Text>, React.ReactElement<Text> | React.ReactElement<Link>>;
+export declare const pdfBlockMappingForDefaultSchema: BlockMapping<DefaultBlockSchema & typeof pageBreakSchema.blockSchema & typeof multiColumnSchema.blockSchema, any, any, React.ReactElement<Text>, React.ReactElement<Text> | React.ReactElement<Link>>;