♻️(front) improve table pdf rendering

The previous way of rendering table was causing issues when tables
could not fit on one page. I then came accross this discussion
diegomura/react-pdf#2343. The author
created a lib to improve the rendering of table, it's better, but
still not perfect maybe.

Author: NathanVss

src/frontend/apps/impress/package.json

@@ -15,6 +15,7 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
+    "@ag-media/react-pdf-table": "2.0.1",
     "@blocknote/core": "0.23.2",
     "@blocknote/mantine": "0.23.2",
     "@blocknote/react": "0.23.2",

src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx

@@ -27,6 +27,8 @@ import { Doc } from '@/features/docs/doc-management';
 import { TemplatesOrdering, useTemplates } from '../api/useTemplates';
 import { downloadFile, exportResolveFileUrl } from '../utils';
 
+import { Table } from './blocks/Table';
+
 enum DocDownloadFormat {
   PDF = 'pdf',
   DOCX = 'docx',
@@ -151,6 +153,9 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
                 </Text>
               );
             },
+            table: (block, t) => {
+              return <Table data={block.content} transformer={t} />;
+            },
           },
         },
         {

src/frontend/apps/impress/src/features/docs/doc-header/components/blocks/Table.tsx

@@ -0,0 +1,60 @@
+import { TD, TH, TR, Table as TablePDF } from '@ag-media/react-pdf-table';
+import {
+  DefaultBlockSchema,
+  Exporter,
+  InlineContentSchema,
+  StyleSchema,
+  TableContent,
+} from '@blocknote/core';
+import { View } from '@react-pdf/renderer';
+import { ReactNode } from 'react';
+
+export const Table = (props: {
+  data: TableContent<InlineContentSchema>;
+  transformer: Exporter<
+    DefaultBlockSchema,
+    InlineContentSchema,
+    StyleSchema,
+    unknown,
+    unknown,
+    unknown,
+    unknown
+  >;
+}) => {
+  return (
+    <TablePDF>
+      {props.data.rows.map((row, index) => {
+        if (index === 0) {
+          return (
+            <TH key={index}>
+              {row.cells.map((cell, index) => {
+                return (
+                  <TD key={index}>
+                    {props.transformer.transformInlineContent(cell)}
+                  </TD>
+                );
+              })}
+            </TH>
+          );
+        }
+        return (
+          <TR key={index}>
+            {row.cells.map((cell, index) => {
+              return (
+                <TD key={index}>
+                  <View>
+                    {
+                      props.transformer.transformInlineContent(
+                        cell,
+                      ) as ReactNode
+                    }
+                  </View>
+                </TD>
+              );
+            })}
+          </TR>
+        );
+      })}
+    </TablePDF>
+  );
+};