Skip to content

feat: support new table properties in PDF export #1475

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Mar 4, 2025
Merged

feat: support new table properties in PDF export #1475

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5c86602
feat: support new table properties in PDF export
nperez0111 Mar 3, 2025
1e58ca2
chore: map color properly
nperez0111 Mar 3, 2025
70934f9
feat(tables): docx export for tables
nperez0111 Mar 3, 2025
9d00396
Merge branch 'main' into pdf-table
nperez0111 Mar 4, 2025
f6fd67b
chore: update snaps and comment
nperez0111 Mar 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions examples/05-interoperability/05-converting-blocks-to-pdf/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,12 @@ export default function App() {
// Creates a new editor instance with some initial content.
const editor = useCreateBlockNote({
schema: withPageBreak(BlockNoteSchema.create()),
tables: {
splitCells: true,
cellBackgroundColor: true,
cellTextColor: true,
headers: true,
},
initialContent: [
{
type: "paragraph",
Expand Down
6 changes: 6 additions & 0 deletions examples/05-interoperability/06-converting-blocks-to-docx/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,12 @@ export default function App() {
// Creates a new editor instance with some initial content.
const editor = useCreateBlockNote({
schema: withPageBreak(BlockNoteSchema.create()),
tables: {
splitCells: true,
cellBackgroundColor: true,
cellTextColor: true,
headers: true,
},
initialContent: [
{
type: "paragraph",
Expand Down
48 changes: 48 additions & 0 deletions packages/xl-docx-exporter/src/docx/__snapshots__/basic/document.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,6 +292,7 @@
<w:tc>
<w:tcPr>
<w:tcW w:type="dxa" w:w="150pt"/>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
Expand All @@ -300,13 +301,19 @@
</w:p>
</w:tc>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell</w:t>
</w:r>
</w:p>
</w:tc>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell</w:t>
Expand All @@ -318,6 +325,7 @@
<w:tc>
<w:tcPr>
<w:tcW w:type="dxa" w:w="150pt"/>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
Expand All @@ -326,13 +334,19 @@
</w:p>
</w:tc>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell</w:t>
</w:r>
</w:p>
</w:tc>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell</w:t>
Expand All @@ -344,6 +358,7 @@
<w:tc>
<w:tcPr>
<w:tcW w:type="dxa" w:w="150pt"/>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
Expand All @@ -352,13 +367,19 @@
</w:p>
</w:tc>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell</w:t>
</w:r>
</w:p>
</w:tc>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell</w:t>
Expand Down Expand Up @@ -599,20 +620,29 @@
</w:tblGrid>
<w:tr>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell 1</w:t>
</w:r>
</w:p>
</w:tc>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell 2</w:t>
</w:r>
</w:p>
</w:tc>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell 3</w:t>
Expand All @@ -622,13 +652,19 @@
</w:tr>
<w:tr>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell 4</w:t>
</w:r>
</w:p>
</w:tc>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:rPr>
Expand All @@ -640,6 +676,9 @@
</w:p>
</w:tc>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell 6</w:t>
Expand All @@ -649,20 +688,29 @@
</w:tr>
<w:tr>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell 7</w:t>
</w:r>
</w:p>
</w:tc>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell 8</w:t>
</w:r>
</w:p>
</w:tc>
<w:tc>
<w:tcPr>
<w:gridSpan w:val="1"/>
</w:tcPr>
<w:p>
<w:r>
<w:t xml:space="preserve">Table Cell 9</w:t>
Expand Down
104 changes: 81 additions & 23 deletions packages/xl-docx-exporter/src/docx/util/Table.tsx
View file
Open in desktop
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

table headers are not supported atm because they require modifying the run of the paragraph to make the cell's content bold.

Table paragraph color seems to not be working at the moment either, maybe to do with the inheritance of paragraph within a paragraph's color?

Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
import { Exporter, InlineContentSchema, TableContent } from "@blocknote/core";
import {
Exporter,
InlineContentSchema,
mapTableCell,
TableContent,
UnreachableCaseError,
} from "@blocknote/core";
import {
Table as DocxTable,
Paragraph,
ParagraphChild,
ShadingType,
TableCell,
TableRow,
} from "docx";
Expand All @@ -12,33 +19,84 @@ export const Table = (
t: Exporter<any, any, any, any, ParagraphChild, any, any>
) => {
const DEFAULT_COLUMN_WIDTH = 120;

// If headerRows is 1, then the first row is a header row
const headerRows = new Array(data.headerRows ?? 0).fill(true);
// If headerCols is 1, then the first column is a header column
const headerCols = new Array(data.headerCols ?? 0).fill(true);

return new DocxTable({
layout: "autofit",
columnWidths: data.columnWidths.map(
(w) =>
(w ?? DEFAULT_COLUMN_WIDTH) * /* to points */ 0.75 * /* to twips */ 20
),
rows: data.rows.map(
(row) =>
new TableRow({
children: row.cells.map((cell, i) => {
const width = data.columnWidths?.[i];
return new TableCell({
width: width
? {
size: `${width * 0.75}pt`,
type: "dxa",
}
: undefined,
children: [
new Paragraph({
// TODO: fix this
children: t.transformInlineContent(cell as any),
}),
],
});
}),
})
),
rows: data.rows.map((row, rowIndex) => {
const isHeaderRow = headerRows[rowIndex];
return new TableRow({
tableHeader: isHeaderRow,
children: row.cells.map((c, colIndex) => {
const width = data.columnWidths?.[colIndex];
const cell = mapTableCell(c);
const isHeaderColumn = headerCols[colIndex];

return new TableCell({
width: width
? {
size: `${width * 0.75}pt`,
type: "dxa",
}
: undefined,
columnSpan: cell.props.colspan,
rowSpan: cell.props.rowspan,
shading:
cell.props.backgroundColor === "default" ||
!cell.props.backgroundColor
? undefined
: {
type: ShadingType.SOLID,
color:
t.options.colors[
cell.props
.backgroundColor as keyof typeof t.options.colors
].background.slice(1),
},
children: [
new Paragraph({
children: t.transformInlineContent(cell.content),

alignment:
!cell.props.textAlignment ||
cell.props.textAlignment === "left"
? undefined
: cell.props.textAlignment === "center"
? "center"
: cell.props.textAlignment === "right"
? "right"
: cell.props.textAlignment === "justify"
? "distribute"
: (() => {
throw new UnreachableCaseError(
cell.props.textAlignment
);
})(),
run: {
// TODO add support for table headers exporting, bolding seems to not be working at the moment
bold: isHeaderRow || isHeaderColumn,
// TODO table paragraph color seems to not be working at the moment
// Probably because the runs are setting their own color
color:
cell.props.textColor === "default" || !cell.props.textColor
? undefined
: t.options.colors[
cell.props.textColor as keyof typeof t.options.colors
].text.slice(1),
},
}),
],
});
}),
});
}),
});
};
Loading
Loading