@blocknote/xl-docx-exporter 0.33.0 → 0.35.0

package/src/docx/defaultSchema/blocks.ts

@@ -18,9 +18,12 @@ import {
   Paragraph,
   ParagraphChild,
   ShadingType,
+  TableCell,
+  TableRow,
   TextRun,
 } from "docx";
 import { Table } from "../util/Table.js";
+import { multiColumnSchema } from "@blocknote/xl-multi-column";
 
 function blockPropsToStyles(
   props: Partial<DefaultProps>,
@@ -58,7 +61,9 @@ function blockPropsToStyles(
   };
 }
 export const docxBlockMappingForDefaultSchema: BlockMapping<
-  DefaultBlockSchema & typeof pageBreakSchema.blockSchema,
+  DefaultBlockSchema &
+    typeof pageBreakSchema.blockSchema &
+    typeof multiColumnSchema.blockSchema,
   any,
   any,
   | Promise<Paragraph[] | Paragraph | DocxTable>
@@ -187,6 +192,55 @@ export const docxBlockMappingForDefaultSchema: BlockMapping<
       children: [new PageBreak()],
     });
   },
+  column: (block, _exporter, _nestingLevel, _numberedListIndex, children) => {
+    return new TableCell({
+      width: {
+        size: `${block.props.width * 100}%`,
+        type: "pct",
+      },
+      children: (children || []).flatMap((child) => {
+        if (Array.isArray(child)) {
+          return child;
+        }
+
+        return [child];
+      }),
+    }) as any;
+  },
+  columnList: (
+    _block,
+    _exporter,
+    _nestingLevel,
+    _numberedListIndex,
+    children,
+  ) => {
+    return new DocxTable({
+      layout: "autofit",
+      borders: {
+        bottom: { style: "nil" },
+        top: { style: "nil" },
+        left: { style: "nil" },
+        right: { style: "nil" },
+        insideHorizontal: { style: "nil" },
+        insideVertical: { style: "nil" },
+      },
+      rows: [
+        new TableRow({
+          children: (children as unknown as TableCell[]).map(
+            (cell, _index, children) => {
+              return new TableCell({
+                width: {
+                  size: `${(parseFloat(`${cell.options.width?.size || "100%"}`) / (children.length * 100)) * 100}%`,
+                  type: "pct",
+                },
+                children: cell.options.children,
+              });
+            },
+          ),
+        }),
+      ],
+    });
+  },
   image: async (block, exporter) => {
     const blob = await exporter.resolveFile(block.props.url);
     const { width, height } = await getImageDimensions(blob);

package/src/docx/docxExporter.test.ts

@@ -6,6 +6,8 @@ import { describe, expect, it } from "vitest";
 import xmlFormat from "xml-formatter";
 import { docxDefaultSchemaMappings } from "./defaultSchema/index.js";
 import { DOCXExporter } from "./docxExporter.js";
+import { ColumnBlock, ColumnListBlock } from "@blocknote/xl-multi-column";
+import { partialBlocksToBlocksForTesting } from "@shared/formatConversionTestUtil.js";
 
 const getZIPEntryContent = (entries: Entry[], fileName: string) => {
   const entry = entries.find((entry) => {
@@ -109,6 +111,90 @@ describe("exporter", () => {
       ).toMatchFileSnapshot("__snapshots__/withCustomOptions/core.xml");
     },
   );
+
+  it(
+    "should export a document with a multi-column block",
+    { timeout: 10000 },
+    async () => {
+      const schema = BlockNoteSchema.create({
+        blockSpecs: {
+          ...defaultBlockSpecs,
+          pageBreak: PageBreak,
+          column: ColumnBlock,
+          columnList: ColumnListBlock,
+        },
+      });
+      const exporter = new DOCXExporter(schema, docxDefaultSchemaMappings);
+      const doc = await exporter.toDocxJsDocument(
+        partialBlocksToBlocksForTesting(schema, [
+          {
+            type: "columnList",
+            children: [
+              {
+                type: "column",
+                props: {
+                  width: 0.8,
+                },
+                children: [
+                  {
+                    type: "paragraph",
+                    content: "This paragraph is in a column!",
+                  },
+                ],
+              },
+              {
+                type: "column",
+                props: {
+                  width: 1.4,
+                },
+                children: [
+                  {
+                    type: "heading",
+                    content: "So is this heading!",
+                  },
+                ],
+              },
+              {
+                type: "column",
+                props: {
+                  width: 0.8,
+                },
+                children: [
+                  {
+                    type: "paragraph",
+                    content: "You can have multiple blocks in a column too",
+                  },
+                  {
+                    type: "bulletListItem",
+                    content: "Block 1",
+                  },
+                  {
+                    type: "bulletListItem",
+                    content: "Block 2",
+                  },
+                  {
+                    type: "bulletListItem",
+                    content: "Block 3",
+                  },
+                ],
+              },
+            ],
+          },
+        ]),
+      );
+
+      const blob = await Packer.toBlob(doc);
+      const zip = new ZipReader(new BlobReader(blob));
+      const entries = await zip.getEntries();
+
+      await expect(
+        prettify(await getZIPEntryContent(entries, "word/document.xml")),
+      ).toMatchFileSnapshot("__snapshots__/withMultiColumn/document.xml");
+      await expect(
+        prettify(await getZIPEntryContent(entries, "word/styles.xml")),
+      ).toMatchFileSnapshot("__snapshots__/withMultiColumn/styles.xml");
+    },
+  );
 });
 
 function prettify(sourceXml: string) {

package/src/docx/docxExporter.ts

@@ -114,22 +114,33 @@ export class DOCXExporter<
 
     for (const b of blocks) {
       let children = await this.transformBlocks(b.children, nestingLevel + 1);
-      children = children.map((c, _i) => {
-        // NOTE: nested tables not supported (we can't insert the new Tab before a table)
-        if (
-          c instanceof Paragraph &&
-          !(c as any).properties.numberingReferences.length
-        ) {
-          c.addRunToFront(
-            new TextRun({
-              children: [new Tab()],
-            }),
-          );
-        }
-        return c;
-      });
-      const self = await this.mapBlock(b as any, nestingLevel, 0 /*unused*/); // TODO: any
-      if (Array.isArray(self)) {
+
+      if (!["columnList", "column"].includes(b.type)) {
+        children = children.map((c, _i) => {
+          // NOTE: nested tables not supported (we can't insert the new Tab before a table)
+          if (
+            c instanceof Paragraph &&
+            !(c as any).properties.numberingReferences.length
+          ) {
+            c.addRunToFront(
+              new TextRun({
+                children: [new Tab()],
+              }),
+            );
+          }
+          return c;
+        });
+      }
+
+      const self = await this.mapBlock(
+        b as any,
+        nestingLevel,
+        0 /*unused*/,
+        children,
+      ); // TODO: any
+      if (["columnList", "column"].includes(b.type)) {
+        ret.push(self as Table);
+      } else if (Array.isArray(self)) {
         ret.push(...self, ...children);
       } else {
         ret.push(self, ...children);
@@ -281,13 +292,6 @@ export class DOCXExporter<
       ],
     });
 
-    // fix https://github.com/dolanmiu/docx/pull/2800/files
-    doc.Document.Relationships.createRelationship(
-      doc.Document.Relationships.RelationshipCount + 1,
-      "http://schemas.openxmlformats.org/officeDocument/2006/relationships/fontTable",
-      "fontTable.xml",
-    );
-
     return doc;
   }
 }

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

@@ -1,3 +1,4 @@
 import { BlockMapping, DefaultBlockSchema, pageBreakSchema } from "@blocknote/core";
 import { Table as DocxTable, Paragraph, ParagraphChild } from "docx";
-export declare const docxBlockMappingForDefaultSchema: BlockMapping<DefaultBlockSchema & typeof pageBreakSchema.blockSchema, any, any, Promise<Paragraph[] | Paragraph | DocxTable> | Paragraph[] | Paragraph | DocxTable, ParagraphChild>;
+import { multiColumnSchema } from "@blocknote/xl-multi-column";
+export declare const docxBlockMappingForDefaultSchema: BlockMapping<DefaultBlockSchema & typeof pageBreakSchema.blockSchema & typeof multiColumnSchema.blockSchema, any, any, Promise<Paragraph[] | Paragraph | DocxTable> | Paragraph[] | Paragraph | DocxTable, ParagraphChild>;

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

@@ -539,6 +539,39 @@ export declare const docxDefaultSchemaMappings: {
                 isSelectable: false;
             }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
         };
+    }> & import("@blocknote/core").BlockSchemaFromSpecs<{
+        column: {
+            config: {
+                type: "column";
+                content: "none";
+                propSchema: {
+                    width: {
+                        default: number;
+                    };
+                };
+            };
+            implementation: import("@blocknote/core").TiptapBlockImplementation<{
+                type: "column";
+                content: "none";
+                propSchema: {
+                    width: {
+                        default: number;
+                    };
+                };
+            }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
+        };
+        columnList: {
+            config: {
+                type: "columnList";
+                content: "none";
+                propSchema: {};
+            };
+            implementation: import("@blocknote/core").TiptapBlockImplementation<{
+                type: "columnList";
+                content: "none";
+                propSchema: {};
+            }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
+        };
     }>, any, any, import("docx").Table | import("docx").Paragraph | import("docx").Paragraph[] | Promise<import("docx").Table | import("docx").Paragraph | import("docx").Paragraph[]>, import("docx").ParagraphChild>;
     inlineContentMapping: import("@blocknote/core").InlineContentMapping<import("@blocknote/core").InlineContentSchemaFromSpecs<{
         text: {