@blocknote/xl-pdf-exporter 0.31.3 → 0.32.0

package/src/pdf/__snapshots__/exampleWithHeaderAndFooter.jsx

@@ -19,7 +19,7 @@
         Header
       </TEXT>
     </VIEW>
-    <React.Fragment key=".1:0">
+    <React.Fragment key=".1:$">
       <VIEW
         style={{
           alignItems: undefined,
@@ -52,7 +52,7 @@
           marginLeft: 18
         }}
       >
-        <React.Fragment key=".0">
+        <React.Fragment key=".$">
           <VIEW
             style={{
               alignItems: undefined,
@@ -73,7 +73,7 @@
               marginLeft: 18
             }}
           >
-            <React.Fragment key=".0">
+            <React.Fragment key=".$">
               <VIEW
                 style={{
                   alignItems: undefined,
@@ -94,7 +94,7 @@
         </React.Fragment>
       </VIEW>
     </React.Fragment>
-    <React.Fragment key=".1:1">
+    <React.Fragment key=".1:$">
       <VIEW
         style={{
           alignItems: undefined,
@@ -115,7 +115,7 @@
         </TEXT>
       </VIEW>
     </React.Fragment>
-    <React.Fragment key=".1:2">
+    <React.Fragment key=".1:$">
       <VIEW
         style={{
           alignItems: undefined,
@@ -132,7 +132,7 @@
         </TEXT>
       </VIEW>
     </React.Fragment>
-    <React.Fragment key=".1:3">
+    <React.Fragment key=".1:$">
       <VIEW
         style={{
           alignItems: undefined,
@@ -154,7 +154,7 @@
         </TEXT>
       </VIEW>
     </React.Fragment>
-    <React.Fragment key=".1:4">
+    <React.Fragment key=".1:$">
       <VIEW
         style={{
           alignItems: 'flex-end',
@@ -176,7 +176,7 @@
         </TEXT>
       </VIEW>
     </React.Fragment>
-    <React.Fragment key=".1:5">
+    <React.Fragment key=".1:$">
       <VIEW
         style={{
           alignItems: undefined,
@@ -194,7 +194,7 @@
       </VIEW>
     </React.Fragment>
     <VIEW break />
-    <React.Fragment key=".1:7">
+    <React.Fragment key=".1:$">
       <VIEW
         style={{
           alignItems: undefined,
@@ -217,7 +217,7 @@
           marginLeft: 18
         }}
       >
-        <React.Fragment key=".0">
+        <React.Fragment key=".$">
           <VIEW
             style={{
               alignItems: undefined,
@@ -236,7 +236,7 @@
             </ListItem>
           </VIEW>
         </React.Fragment>
-        <React.Fragment key=".1">
+        <React.Fragment key=".$">
           <VIEW
             style={{
               alignItems: 'flex-end',
@@ -255,7 +255,7 @@
             </ListItem>
           </VIEW>
         </React.Fragment>
-        <React.Fragment key=".2">
+        <React.Fragment key=".$">
           <VIEW
             style={{
               alignItems: undefined,
@@ -274,7 +274,7 @@
             </ListItem>
           </VIEW>
         </React.Fragment>
-        <React.Fragment key=".3">
+        <React.Fragment key=".$">
           <VIEW
             style={{
               alignItems: undefined,
@@ -297,7 +297,7 @@
               marginLeft: 18
             }}
           >
-            <React.Fragment key=".0">
+            <React.Fragment key=".$">
               <VIEW
                 style={{
                   alignItems: undefined,
@@ -316,7 +316,7 @@
                 </ListItem>
               </VIEW>
             </React.Fragment>
-            <React.Fragment key=".1">
+            <React.Fragment key=".$">
               <VIEW
                 style={{
                   alignItems: undefined,
@@ -335,7 +335,7 @@
                 </ListItem>
               </VIEW>
             </React.Fragment>
-            <React.Fragment key=".2">
+            <React.Fragment key=".$">
               <VIEW
                 style={{
                   alignItems: 'flex-end',
@@ -354,7 +354,7 @@
                 </ListItem>
               </VIEW>
             </React.Fragment>
-            <React.Fragment key=".3">
+            <React.Fragment key=".$">
               <VIEW
                 style={{
                   alignItems: 'center',
@@ -377,7 +377,7 @@
         </React.Fragment>
       </VIEW>
     </React.Fragment>
-    <React.Fragment key=".1:8">
+    <React.Fragment key=".1:$">
       <VIEW
         style={{
           alignItems: undefined,
@@ -396,7 +396,7 @@
         </ListItem>
       </VIEW>
     </React.Fragment>
-    <React.Fragment key=".1:9">
+    <React.Fragment key=".1:$">
       <VIEW
         style={{
           alignItems: undefined,
@@ -415,7 +415,7 @@
         </ListItem>
       </VIEW>
     </React.Fragment>
-    <React.Fragment key=".1:a">
+    <React.Fragment key=".1:$">
       <VIEW
         style={{
           alignItems: undefined,
@@ -607,7 +607,7 @@
         />
       </VIEW>
     </React.Fragment>
-    <React.Fragment key=".1:b">
+    <React.Fragment key=".1:$">
       <VIEW
         style={{
           alignItems: undefined,
@@ -642,7 +642,7 @@
         </VIEW>
       </VIEW>
     </React.Fragment>
-    <React.Fragment key=".1:c">
+    <React.Fragment key=".1:$">
       <VIEW
         style={{
           alignItems: undefined,
@@ -670,7 +670,7 @@
         </VIEW>
       </VIEW>
     </React.Fragment>
-    <React.Fragment key=".1:d">
+    <React.Fragment key=".1:$">
       <VIEW
         style={{
           alignItems: 'flex-end',
@@ -690,7 +690,7 @@
         </VIEW>
       </VIEW>
     </React.Fragment>
-    <React.Fragment key=".1:e">
+    <React.Fragment key=".1:$">
       <VIEW
         style={{
           alignItems: undefined,
@@ -733,7 +733,7 @@
         </VIEW>
       </VIEW>
     </React.Fragment>
-    <React.Fragment key=".1:f">
+    <React.Fragment key=".1:$">
       <VIEW
         style={{
           alignItems: undefined,
@@ -776,7 +776,7 @@
         </VIEW>
       </VIEW>
     </React.Fragment>
-    <React.Fragment key=".1:g">
+    <React.Fragment key=".1:$">
       <VIEW
         style={{
           alignItems: undefined,
@@ -789,7 +789,7 @@
         <TEXT />
       </VIEW>
     </React.Fragment>
-    <React.Fragment key=".1:h">
+    <React.Fragment key=".1:$">
       <VIEW
         style={{
           alignItems: undefined,
@@ -832,7 +832,7 @@
         </VIEW>
       </VIEW>
     </React.Fragment>
-    <React.Fragment key=".1:i">
+    <React.Fragment key=".1:$">
       <VIEW
         style={{
           alignItems: undefined,
@@ -853,7 +853,7 @@
         </TEXT>
       </VIEW>
     </React.Fragment>
-    <React.Fragment key=".1:j">
+    <React.Fragment key=".1:$">
       <VIEW
         style={{
           alignItems: undefined,
@@ -885,7 +885,7 @@
         </TEXT>
       </VIEW>
     </React.Fragment>
-    <React.Fragment key=".1:k">
+    <React.Fragment key=".1:$">
       <VIEW
         style={{
           alignItems: undefined,
@@ -1079,7 +1079,7 @@
         />
       </VIEW>
     </React.Fragment>
-    <React.Fragment key=".1:l">
+    <React.Fragment key=".1:$">
       <VIEW
         style={{
           alignItems: undefined,

package/src/pdf/defaultSchema/blocks.tsx

@@ -10,6 +10,7 @@ import {
   BULLET_MARKER,
   CHECK_MARKER_CHECKED,
   CHECK_MARKER_UNCHECKED,
+  CHEVRON_MARKER,
   ListItem,
 } from "../util/listItem.js";
 import { Table } from "../util/table/Table.js";
@@ -26,12 +27,23 @@ export const pdfBlockMappingForDefaultSchema: BlockMapping<
 > = {
   paragraph: (block, exporter) => {
     // const style = blocknoteDefaultPropsToReactPDFStyle(block.props);
-    return <Text>{exporter.transformInlineContent(block.content)}</Text>;
+    return (
+      <Text key={"paragraph" + block.id}>
+        {exporter.transformInlineContent(block.content)}
+      </Text>
+    );
+  },
+  toggleListItem: (block, exporter) => {
+    return (
+      <ListItem listMarker={CHEVRON_MARKER}>
+        <Text>{exporter.transformInlineContent(block.content)}</Text>
+      </ListItem>
+    );
   },
   bulletListItem: (block, exporter) => {
     // const style = t(block.props);
     return (
-      <ListItem listMarker={BULLET_MARKER}>
+      <ListItem listMarker={BULLET_MARKER} key={"bulletListItem" + block.id}>
         <Text>{exporter.transformInlineContent(block.content)}</Text>
       </ListItem>
     );
@@ -40,7 +52,10 @@ export const pdfBlockMappingForDefaultSchema: BlockMapping<
     // const style = blocknoteDefaultPropsToReactPDFStyle(block.props);
     // console.log("NUMBERED LIST ITEM", block.props.textAlignment, style);
     return (
-      <ListItem listMarker={`${numberedListIndex}.`}>
+      <ListItem
+        listMarker={`${numberedListIndex}.`}
+        key={"numberedListItem" + block.id}
+      >
         <Text>{exporter.transformInlineContent(block.content)}</Text>
       </ListItem>
     );
@@ -53,18 +68,26 @@ export const pdfBlockMappingForDefaultSchema: BlockMapping<
         listMarker={
           block.props.checked ? CHECK_MARKER_CHECKED : CHECK_MARKER_UNCHECKED
         }
+        key={"checkListItem" + block.id}
       >
         <Text>{exporter.transformInlineContent(block.content)}</Text>
       </ListItem>
     );
   },
   heading: (block, exporter) => {
-    const fontSizeEM =
-      block.props.level === 1 ? 2 : block.props.level === 2 ? 1.5 : 1.17;
+    const levelFontSizeEM = {
+      1: 2,
+      2: 1.5,
+      3: 1.17,
+      4: 1,
+      5: 0.83,
+      6: 0.67,
+    }[block.props.level];
     return (
       <Text
+        key={"heading" + block.id}
         style={{
-          fontSize: fontSizeEM * FONT_SIZE * PIXELS_PER_POINT,
+          fontSize: levelFontSizeEM * FONT_SIZE * PIXELS_PER_POINT,
           fontWeight: 700,
         }}
       >
@@ -75,6 +98,7 @@ export const pdfBlockMappingForDefaultSchema: BlockMapping<
   quote: (block, exporter) => {
     return (
       <Text
+        key={"quote" + block.id}
         style={{
           borderLeft: "#7D797A",
           color: "#7D797A",
@@ -92,7 +116,7 @@ export const pdfBlockMappingForDefaultSchema: BlockMapping<
 
       return (
         <Text
-          key={`line_${index}`}
+          key={`line_${index}` + block.id}
           style={{
             marginLeft: indent * 9.5 * PIXELS_PER_POINT,
           }}
@@ -113,17 +137,18 @@ export const pdfBlockMappingForDefaultSchema: BlockMapping<
           fontSize: FONT_SIZE * PIXELS_PER_POINT,
           fontFamily: "GeistMono",
         }}
+        key={"codeBlock" + block.id}
       >
         {lines}
       </View>
     );
   },
   pageBreak: () => {
-    return <View break />;
+    return <View break key={"pageBreak"} />;
   },
   audio: (block, exporter) => {
     return (
-      <View wrap={false}>
+      <View wrap={false} key={"audio" + block.id}>
         {file(
           block.props,
           "Open audio file",
@@ -138,7 +163,7 @@ export const pdfBlockMappingForDefaultSchema: BlockMapping<
   },
   video: (block, exporter) => {
     return (
-      <View wrap={false}>
+      <View wrap={false} key={"video" + block.id}>
         {file(
           block.props,
           "Open video file",
@@ -153,7 +178,7 @@ export const pdfBlockMappingForDefaultSchema: BlockMapping<
   },
   file: (block, exporter) => {
     return (
-      <View wrap={false}>
+      <View wrap={false} key={"file" + block.id}>
         {file(
           block.props,
           "Open file",
@@ -168,7 +193,7 @@ export const pdfBlockMappingForDefaultSchema: BlockMapping<
   },
   image: async (block, t) => {
     return (
-      <View wrap={false}>
+      <View wrap={false} key={"image" + block.id}>
         <Image
           src={await t.resolveFile(block.props.url)}
           style={{
@@ -182,7 +207,9 @@ export const pdfBlockMappingForDefaultSchema: BlockMapping<
     );
   },
   table: (block, t) => {
-    return <Table data={block.content} transformer={t} />;
+    return (
+      <Table data={block.content} transformer={t} key={"table" + block.id} />
+    );
   },
 };
 
@@ -194,7 +221,7 @@ function file(
 ) {
   const PIXELS_PER_POINT = 0.75;
   return (
-    <Link src={props.url}>
+    <Link src={props.url} key={"file" + props.url}>
       <View
         style={{
           display: "flex",
@@ -218,6 +245,7 @@ function caption(
   }
   return (
     <Text
+      key={"caption" + props.caption}
       style={{
         width: props.previewWidth
           ? props.previewWidth * PIXELS_PER_POINT

package/src/pdf/defaultSchema/inlinecontent.tsx

@@ -12,7 +12,7 @@ export const pdfInlineContentMappingForDefaultSchema: InlineContentMapping<
 > = {
   link: (ic, exporter) => {
     return (
-      <Link href={ic.href}>
+      <Link href={ic.href} key={"link" + ic.href}>
         {ic.content.map((content) => exporter.transformStyledText(content))}
       </Link>
     );

package/src/pdf/pdfExporter.tsx

@@ -10,6 +10,7 @@ import {
   StyleSchema,
   StyledText,
 } from "@blocknote/core";
+import { Fragment } from "react";
 import {
   Document,
   Font,
@@ -117,7 +118,11 @@ export class PDFExporter<
   public transformStyledText(styledText: StyledText<S>) {
     const stylesArray = this.mapStyles(styledText.styles);
     const styles = Object.assign({}, ...stylesArray);
-    return <Text style={styles}>{styledText.text}</Text>;
+    return (
+      <Text style={styles} key={styledText.text}>
+        {styledText.text}
+      </Text>
+    );
   }
 
   /**
@@ -150,7 +155,7 @@ export class PDFExporter<
 
       const style = this.blocknoteDefaultPropsToReactPDFStyle(b.props as any);
       ret.push(
-        <>
+        <Fragment key={b.id}>
           <View
             style={{
               paddingVertical: 3 * PIXELS_PER_POINT,
@@ -166,11 +171,12 @@ export class PDFExporter<
                 marginLeft: FONT_SIZE * 1.5 * PIXELS_PER_POINT,
                 ...this.styles.blockChildren,
               }}
+              key={b.id + nestingLevel + "children"}
             >
               {children}
             </View>
           )}
-        </>,
+        </Fragment>,
       );
     }
 

package/src/pdf/util/listItem.tsx

@@ -19,6 +19,19 @@ const styles = StyleSheet.create({
 
 export const BULLET_MARKER = "\u2022";
 
+// https://fonts.google.com/icons?selected=Material+Symbols+Rounded:chevron_right:FILL@0;wght@700;GRAD@0;opsz@24&icon.query=chevron&icon.style=Rounded&icon.size=24&icon.color=%23e8eaed
+export const CHEVRON_MARKER = (
+  <Svg
+    style={{ marginTop: 2 }}
+    height="12"
+    viewBox="0 -960 960 960"
+    width="12"
+    fill="undefined"
+  >
+    <Path d="M472-480 332-620q-18-18-18-44t18-44q18-18 44-18t44 18l183 183q9 9 14 21t5 24q0 12-5 24t-14 21L420-252q-18 18-44 18t-44-18q-18-18-18-44t18-44l140-140Z" />
+  </Svg>
+);
+
 // https://fonts.google.com/icons?selected=Material+Symbols+Outlined:check_box_outline_blank:FILL@0;wght@400;GRAD@0;opsz@24&icon.size=24&icon.color=undefined
 export const CHECK_MARKER_UNCHECKED = (
   <Svg

package/types/src/pdf/util/listItem.d.ts

@@ -1,5 +1,6 @@
 import { Style } from "../types.js";
 export declare const BULLET_MARKER = "\u2022";
+export declare const CHEVRON_MARKER: import("react/jsx-runtime.js").JSX.Element;
 export declare const CHECK_MARKER_UNCHECKED: import("react/jsx-runtime.js").JSX.Element;
 export declare const CHECK_MARKER_CHECKED: import("react/jsx-runtime.js").JSX.Element;
 export declare const ListItem: ({ listMarker, children, style, }: {