fix: add keys to pdf exporter (#1739)

Author: nperez0111

packages/xl-pdf-exporter/src/pdf/defaultSchema/blocks.tsx

@@ -27,7 +27,11 @@ 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 (
@@ -39,7 +43,7 @@ export const pdfBlockMappingForDefaultSchema: BlockMapping<
   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>
     );
@@ -48,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>
     );
@@ -61,6 +68,7 @@ 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>
@@ -77,6 +85,7 @@ export const pdfBlockMappingForDefaultSchema: BlockMapping<
     }[block.props.level];
     return (
       <Text
+        key={"heading" + block.id}
         style={{
           fontSize: levelFontSizeEM * FONT_SIZE * PIXELS_PER_POINT,
           fontWeight: 700,
@@ -89,6 +98,7 @@ export const pdfBlockMappingForDefaultSchema: BlockMapping<
   quote: (block, exporter) => {
     return (
       <Text
+        key={"quote" + block.id}
         style={{
           borderLeft: "#7D797A",
           color: "#7D797A",
@@ -106,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,
           }}
@@ -127,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",
@@ -152,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",
@@ -167,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",
@@ -182,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={{
@@ -196,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} />
+    );
   },
 };
 
@@ -208,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",
@@ -232,6 +245,7 @@ function caption(
   }
   return (
     <Text
+      key={"caption" + props.caption}
       style={{
         width: props.previewWidth
           ? props.previewWidth * PIXELS_PER_POINT

packages/xl-pdf-exporter/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>
     );

packages/xl-pdf-exporter/src/pdf/pdfExporter.tsx

@@ -117,7 +117,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 +154,7 @@ export class PDFExporter<
 
       const style = this.blocknoteDefaultPropsToReactPDFStyle(b.props as any);
       ret.push(
-        <>
+        <View key={b.id}>
           <View
             style={{
               paddingVertical: 3 * PIXELS_PER_POINT,
@@ -166,11 +170,12 @@ export class PDFExporter<
                 marginLeft: FONT_SIZE * 1.5 * PIXELS_PER_POINT,
                 ...this.styles.blockChildren,
               }}
+              key={b.id + nestingLevel + "children"}
             >
               {children}
             </View>
           )}
-        </>,
+        </View>,
       );
     }