@blocknote/xl-pdf-exporter 0.21.0 → 0.23.0

package/src/pdf/defaultSchema/blocks.tsx

@@ -2,6 +2,8 @@ import {
   BlockMapping,
   DefaultBlockSchema,
   DefaultProps,
+  pageBreakSchema,
+  StyledText,
 } from "@blocknote/core";
 import { Image, Link, Path, Svg, Text, View } from "@react-pdf/renderer";
 import {
@@ -16,7 +18,7 @@ const PIXELS_PER_POINT = 0.75;
 const FONT_SIZE = 16;
 
 export const pdfBlockMappingForDefaultSchema: BlockMapping<
-  DefaultBlockSchema,
+  DefaultBlockSchema & typeof pageBreakSchema.blockSchema,
   any,
   any,
   React.ReactElement<Text>,
@@ -69,7 +71,38 @@ export const pdfBlockMappingForDefaultSchema: BlockMapping<
     );
   },
   codeBlock: (block) => {
-    return <Text>{block.type + " not implemented"}</Text>;
+    const textContent = (block.content as StyledText<any>[])[0]?.text || "";
+    const lines = textContent.split("\n").map((line, index) => {
+      const indent = line.match(/^\s*/)?.[0].length || 0;
+
+      return (
+        <Text
+          key={`line_${index}`}
+          style={{
+            marginLeft: indent * 9.5 * PIXELS_PER_POINT,
+          }}>
+          {line.trimStart() || <>&nbsp;</>}
+        </Text>
+      );
+    });
+
+    return (
+      <View
+        wrap={false}
+        style={{
+          padding: 24 * PIXELS_PER_POINT,
+          backgroundColor: "#161616",
+          color: "#ffffff",
+          lineHeight: 1.25,
+          fontSize: FONT_SIZE * PIXELS_PER_POINT,
+          fontFamily: "GeistMono",
+        }}>
+        {lines}
+      </View>
+    );
+  },
+  pageBreak: () => {
+    return <View break />;
   },
   audio: (block, exporter) => {
     return (

package/src/pdf/defaultSchema/styles.tsx

@@ -62,7 +62,7 @@ export const pdfStyleMappingForDefaultSchema: StyleMapping<
       return {};
     }
     return {
-      fontFamily: "Courier",
+      fontFamily: "GeistMono",
     };
   },
 };

package/src/pdf/pdfExporter.test.tsx

@@ -6,10 +6,11 @@ import {
   defaultBlockSpecs,
   defaultInlineContentSpecs,
   defaultStyleSpecs,
+  PageBreak,
 } from "@blocknote/core";
 import { Text } from "@react-pdf/renderer";
 import { testDocument } from "@shared/testDocument.js";
-import { prettyDOM, render } from "@testing-library/react";
+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";
@@ -26,6 +27,7 @@ describe("exporter", () => {
     const schema = BlockNoteSchema.create({
       blockSpecs: {
         ...defaultBlockSpecs,
+        pageBreak: PageBreak,
         extraBlock: createBlockSpec(
           {
             content: "none",
@@ -155,13 +157,15 @@ describe("exporter", () => {
 
   it("should export a document", async () => {
     const exporter = new PDFExporter(
-      BlockNoteSchema.create(),
+      BlockNoteSchema.create({
+        blockSpecs: { ...defaultBlockSpecs, pageBreak: PageBreak },
+      }),
       pdfDefaultSchemaMappings
     );
 
     const transformed = await exporter.toReactPDFDocument(testDocument);
-    const view = render(transformed);
-    const str = prettyDOM(view.container, undefined, { highlight: false });
+    const str = reactElementToJSXString(transformed);
+
     expect(str).toMatchFileSnapshot("__snapshots__/example.jsx");
 
     // would be nice to compare pdf images, but currently doesn't work on mac os (due to node canvas installation issue)
@@ -186,7 +190,9 @@ describe("exporter", () => {
 
   it("should export a document with header and footer", async () => {
     const exporter = new PDFExporter(
-      BlockNoteSchema.create(),
+      BlockNoteSchema.create({
+        blockSpecs: { ...defaultBlockSpecs, pageBreak: PageBreak },
+      }),
       pdfDefaultSchemaMappings
     );
 
@@ -194,8 +200,7 @@ describe("exporter", () => {
       header: <Text>Header</Text>,
       footer: <Text>Footer</Text>,
     });
-    const view = render(transformed);
-    const str = prettyDOM(view.container, undefined, { highlight: false });
+    const str = reactElementToJSXString(transformed);
     expect(str).toMatchFileSnapshot(
       "__snapshots__/exampleWithHeaderAndFooter.jsx"
     );

package/src/pdf/pdfExporter.tsx

@@ -63,7 +63,6 @@ export class PDFExporter<
       fontSize: FONT_SIZE * PIXELS_PER_POINT, //  pixels
       lineHeight: 1.5,
     },
-    section: {},
     block: {},
     blockChildren: {},
     header: {},
@@ -145,6 +144,11 @@ export class PDFExporter<
         numberedListIndex
       ); // TODO: any
 
+      if (b.type === "pageBreak") {
+        ret.push(self);
+        continue;
+      }
+
       const style = this.blocknoteDefaultPropsToReactPDFStyle(b.props as any);
       ret.push(
         <>
@@ -216,6 +220,14 @@ export class PDFExporter<
       fontWeight: "bold",
     });
 
+    font = await loadFontDataUrl(
+      await import("@shared/assets/fonts/GeistMono-Regular.ttf")
+    );
+    Font.register({
+      family: "GeistMono",
+      src: font,
+    });
+
     this.fontsRegistered = true;
   }
 
@@ -247,9 +259,7 @@ export class PDFExporter<
               {options.header}
             </View>
           )}
-          <View style={this.styles.section}>
-            {await this.transformBlocks(blocks)}
-          </View>
+          {await this.transformBlocks(blocks)}
           {options.footer && (
             <View
               fixed

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

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

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

@@ -138,6 +138,10 @@ export declare const pdfDefaultSchemaMappings: {
                 type: "numberedListItem";
                 content: "inline";
                 propSchema: {
+                    start: {
+                        default: undefined;
+                        type: "number";
+                    };
                     backgroundColor: {
                         default: "default";
                     };
@@ -154,6 +158,10 @@ export declare const pdfDefaultSchemaMappings: {
                 type: "numberedListItem";
                 content: "inline";
                 propSchema: {
+                    start: {
+                        default: undefined;
+                        type: "number";
+                    };
                     backgroundColor: {
                         default: "default";
                     };
@@ -439,6 +447,23 @@ export declare const pdfDefaultSchemaMappings: {
                 fileBlockAccept: string[];
             }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
         };
+    }> & import("@blocknote/core").BlockSchemaFromSpecs<{
+        pageBreak: {
+            config: {
+                type: "pageBreak";
+                propSchema: {};
+                content: "none";
+                isFileBlock: false;
+                isSelectable: false;
+            };
+            implementation: import("@blocknote/core").TiptapBlockImplementation<{
+                type: "pageBreak";
+                propSchema: {};
+                content: "none";
+                isFileBlock: false;
+                isSelectable: false;
+            }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
+        };
     }>, any, any, import("react").ReactElement<import("@react-pdf/renderer").Text, string | import("react").JSXElementConstructor<any>>, import("react").ReactElement<import("@react-pdf/renderer").Text, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<import("@react-pdf/renderer").Link, string | import("react").JSXElementConstructor<any>>>;
     inlineContentMapping: import("@blocknote/core").InlineContentMapping<import("@blocknote/core").InlineContentSchemaFromSpecs<{
         text: {

package/types/src/pdf/pdfExporter.d.ts

@@ -27,7 +27,6 @@ export declare class PDFExporter<B extends BlockSchema, S extends StyleSchema, I
             fontSize: number;
             lineHeight: number;
         };
-        section: {};
         block: {};
         blockChildren: {};
         header: {};