@blocknote/xl-docx-exporter 0.19.0

package/src/docx/__snapshots__/withCustomOptions/core.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<cp:coreProperties xmlns:cp="http://schemas.openxmlformats.org/package/2006/metadata/core-properties" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:dcterms="http://purl.org/dc/terms/" xmlns:dcmitype="http://purl.org/dc/dcmitype/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
+    <dc:creator>
+        John Doe
+    </dc:creator>
+    <cp:lastModifiedBy>
+        Un-named
+    </cp:lastModifiedBy>
+    <cp:revision>
+        1
+    </cp:revision>
+    <dcterms:created xsi:type="dcterms:W3CDTF">FAKE-DATE</dcterms:created>
+    <dcterms:modified xsi:type="dcterms:W3CDTF">FAKE-DATE</dcterms:modified>
+</cp:coreProperties>

package/src/docx/__snapshots__/withCustomOptions/document.xml.rels

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
+    <Relationship Id="FAKE-ID" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles" Target="styles.xml"/>
+    <Relationship Id="FAKE-ID" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/numbering" Target="numbering.xml"/>
+    <Relationship Id="FAKE-ID" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/footnotes" Target="footnotes.xml"/>
+    <Relationship Id="FAKE-ID" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/settings" Target="settings.xml"/>
+    <Relationship Id="FAKE-ID" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/comments" Target="comments.xml"/>
+    <Relationship Id="FAKE-ID" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/header" Target="header1.xml"/>
+    <Relationship Id="FAKE-ID" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/footer" Target="footer1.xml"/>
+    <Relationship Id="FAKE-ID" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/fontTable" Target="fontTable.xml"/>
+    <Relationship Id="FAKE-ID" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/hyperlink" Target="" TargetMode="External"/>
+    <Relationship Id="FAKE-ID" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/hyperlink" Target="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" TargetMode="External"/>
+    <Relationship Id="FAKE-ID" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/hyperlink" Target="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" TargetMode="External"/>
+    <Relationship Id="FAKE-ID" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/hyperlink" Target="" TargetMode="External"/>
+    <Relationship Id="FAKE-ID" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/hyperlink" Target="https://www.blocknotejs.org" TargetMode="External"/>
+    <Relationship Id="FAKE-ID" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/image" Target="media/e1037269513fbdc121e06bb1bc7cf37b9045c8fc.gif"/>
+</Relationships>

package/src/docx/__snapshots__/withCustomOptions/footer1.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<w:ftr xmlns:wpc="http://schemas.microsoft.com/office/word/2010/wordprocessingCanvas" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:m="http://schemas.openxmlformats.org/officeDocument/2006/math" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:wp14="http://schemas.microsoft.com/office/word/2010/wordprocessingDrawing" xmlns:wp="http://schemas.openxmlformats.org/drawingml/2006/wordprocessingDrawing" xmlns:w10="urn:schemas-microsoft-com:office:word" xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main" xmlns:w14="http://schemas.microsoft.com/office/word/2010/wordml" xmlns:w15="http://schemas.microsoft.com/office/word/2012/wordml" xmlns:wpg="http://schemas.microsoft.com/office/word/2010/wordprocessingGroup" xmlns:wpi="http://schemas.microsoft.com/office/word/2010/wordprocessingInk" xmlns:wne="http://schemas.microsoft.com/office/word/2006/wordml" xmlns:wps="http://schemas.microsoft.com/office/word/2010/wordprocessingShape">
+    <w:p>
+        <w:r>
+            <w:t xml:space="preserve">Footer</w:t>
+        </w:r>
+    </w:p>
+</w:ftr>

package/src/docx/__snapshots__/withCustomOptions/header1.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<w:hdr xmlns:wpc="http://schemas.microsoft.com/office/word/2010/wordprocessingCanvas" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:m="http://schemas.openxmlformats.org/officeDocument/2006/math" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:wp14="http://schemas.microsoft.com/office/word/2010/wordprocessingDrawing" xmlns:wp="http://schemas.openxmlformats.org/drawingml/2006/wordprocessingDrawing" xmlns:w10="urn:schemas-microsoft-com:office:word" xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main" xmlns:w14="http://schemas.microsoft.com/office/word/2010/wordml" xmlns:w15="http://schemas.microsoft.com/office/word/2012/wordml" xmlns:wpg="http://schemas.microsoft.com/office/word/2010/wordprocessingGroup" xmlns:wpi="http://schemas.microsoft.com/office/word/2010/wordprocessingInk" xmlns:wne="http://schemas.microsoft.com/office/word/2006/wordml" xmlns:wps="http://schemas.microsoft.com/office/word/2010/wordprocessingShape" xmlns:cx="http://schemas.microsoft.com/office/drawing/2014/chartex" xmlns:cx1="http://schemas.microsoft.com/office/drawing/2015/9/8/chartex" xmlns:cx2="http://schemas.microsoft.com/office/drawing/2015/10/21/chartex" xmlns:cx3="http://schemas.microsoft.com/office/drawing/2016/5/9/chartex" xmlns:cx4="http://schemas.microsoft.com/office/drawing/2016/5/10/chartex" xmlns:cx5="http://schemas.microsoft.com/office/drawing/2016/5/11/chartex" xmlns:cx6="http://schemas.microsoft.com/office/drawing/2016/5/12/chartex" xmlns:cx7="http://schemas.microsoft.com/office/drawing/2016/5/13/chartex" xmlns:cx8="http://schemas.microsoft.com/office/drawing/2016/5/14/chartex" xmlns:w16cid="http://schemas.microsoft.com/office/word/2016/wordml/cid" xmlns:w16se="http://schemas.microsoft.com/office/word/2015/wordml/symex">
+    <w:p>
+        <w:r>
+            <w:t xml:space="preserve">Header</w:t>
+        </w:r>
+    </w:p>
+</w:hdr>

package/src/docx/defaultSchema/blocks.ts

@@ -0,0 +1,222 @@
+import {
+  BlockMapping,
+  COLORS_DEFAULT,
+  DefaultBlockSchema,
+  DefaultProps,
+  UnreachableCaseError,
+} from "@blocknote/core";
+import {
+  CheckBox,
+  Table as DocxTable,
+  ExternalHyperlink,
+  IParagraphOptions,
+  ImageRun,
+  Paragraph,
+  ParagraphChild,
+  ShadingType,
+  TextRun,
+} from "docx";
+import { getImageDimensions } from "../imageUtil.js";
+import { Table } from "../util/Table.js";
+
+function blockPropsToStyles(
+  props: Partial<DefaultProps>,
+  colors: typeof COLORS_DEFAULT
+): IParagraphOptions {
+  return {
+    shading:
+      props.backgroundColor === "default" || !props.backgroundColor
+        ? undefined
+        : {
+            type: ShadingType.SOLID,
+            color:
+              colors[
+                props.backgroundColor as keyof typeof colors
+              ].background.slice(1),
+          },
+    run:
+      props.textColor === "default" || !props.textColor
+        ? undefined
+        : {
+            color: colors[props.textColor as keyof typeof colors].text.slice(1),
+          },
+    alignment:
+      !props.textAlignment || props.textAlignment === "left"
+        ? undefined
+        : props.textAlignment === "center"
+        ? "center"
+        : props.textAlignment === "right"
+        ? "right"
+        : props.textAlignment === "justify"
+        ? "distribute"
+        : (() => {
+            throw new UnreachableCaseError(props.textAlignment);
+          })(),
+  };
+}
+export const docxBlockMappingForDefaultSchema: BlockMapping<
+  DefaultBlockSchema,
+  any,
+  any,
+  | Promise<Paragraph[] | Paragraph | DocxTable>
+  | Paragraph[]
+  | Paragraph
+  | DocxTable,
+  ParagraphChild
+> = {
+  paragraph: (block, exporter) => {
+    return new Paragraph({
+      ...blockPropsToStyles(block.props, exporter.options.colors),
+      children: exporter.transformInlineContent(block.content),
+      style: "Normal",
+      run: {
+        font: "Inter",
+      },
+    });
+  },
+  numberedListItem: (block, exporter, nestingLevel) => {
+    return new Paragraph({
+      ...blockPropsToStyles(block.props, exporter.options.colors),
+      children: exporter.transformInlineContent(block.content),
+      numbering: {
+        reference: "blocknote-numbered-list",
+        level: nestingLevel,
+      },
+    });
+  },
+  bulletListItem: (block, exporter, nestingLevel) => {
+    return new Paragraph({
+      ...blockPropsToStyles(block.props, exporter.options.colors),
+      children: exporter.transformInlineContent(block.content),
+      numbering: {
+        reference: "blocknote-bullet-list",
+        level: nestingLevel,
+      },
+    });
+  },
+  checkListItem: (block, exporter) => {
+    return new Paragraph({
+      ...blockPropsToStyles(block.props, exporter.options.colors),
+      children: [
+        new CheckBox({ checked: block.props.checked }),
+        new TextRun({
+          children: [" "],
+        }),
+        ...exporter.transformInlineContent(block.content),
+      ],
+    });
+  },
+  heading: (block, exporter) => {
+    return new Paragraph({
+      ...blockPropsToStyles(block.props, exporter.options.colors),
+      children: exporter.transformInlineContent(block.content),
+      heading: `Heading${block.props.level}`,
+    });
+  },
+  audio: (block, exporter) => {
+    return [
+      file(block.props, "Open audio", exporter),
+      ...caption(block.props, exporter),
+    ];
+  },
+  video: (block, exporter) => {
+    return [
+      file(block.props, "Open video", exporter),
+      ...caption(block.props, exporter),
+    ];
+  },
+  file: (block, exporter) => {
+    return [
+      file(block.props, "Open file", exporter),
+      ...caption(block.props, exporter),
+    ];
+  },
+  // TODO
+  codeBlock: (block, exporter) => {
+    return new Paragraph({
+      // ...blockPropsToStyles(block.props, exporter.options.colors),
+      style: "Codeblock",
+      children: exporter.transformInlineContent(block.content),
+      // children: [
+      //   new TextRun({
+      //     text: block..type + " not implemented",
+      //   }),
+      // ],
+    });
+  },
+  image: async (block, exporter) => {
+    const blob = await exporter.resolveFile(block.props.url);
+    const { width, height } = await getImageDimensions(blob);
+
+    return [
+      new Paragraph({
+        ...blockPropsToStyles(block.props, exporter.options.colors),
+        children: [
+          new ImageRun({
+            data: await blob.arrayBuffer(),
+            // it would be nicer to set the actual data type here, but then we'd need to use a mime type / image type
+            // detector. atm passing gif does not seem to be causing issues as the "type" is mainly used by docxjs internally
+            // (i.e.: to make sure it's not svg)
+            type: "gif",
+            altText: block.props.caption
+              ? {
+                  description: block.props.caption,
+                  name: block.props.caption,
+                  title: block.props.caption,
+                }
+              : undefined,
+            transformation: {
+              width: block.props.previewWidth,
+              height: (block.props.previewWidth / width) * height,
+            },
+          }),
+        ],
+      }),
+      ...caption(block.props, exporter),
+    ];
+  },
+  table: (block, exporter) => {
+    return Table(block.content, exporter);
+  },
+};
+
+function file(
+  props: Partial<DefaultProps & { name: string; url: string }>,
+  defaultText: string,
+  exporter: any
+) {
+  return new Paragraph({
+    ...blockPropsToStyles(props, exporter.options.colors),
+    children: [
+      new ExternalHyperlink({
+        children: [
+          new TextRun({
+            text: props.name || defaultText,
+            style: "Hyperlink",
+          }),
+        ],
+        link: props.url!,
+      }),
+    ],
+  });
+}
+
+function caption(
+  props: Partial<DefaultProps & { caption: string }>,
+  exporter: any
+) {
+  if (!props.caption) {
+    return [];
+  }
+  return [
+    new Paragraph({
+      ...blockPropsToStyles(props, exporter.options.colors),
+      children: [
+        new TextRun({
+          text: props.caption,
+        }),
+      ],
+      style: "Caption",
+    }),
+  ];
+}

package/src/docx/defaultSchema/index.ts

@@ -0,0 +1,9 @@
+import { docxBlockMappingForDefaultSchema } from "./blocks.js";
+import { docxInlineContentMappingForDefaultSchema } from "./inlinecontent.js";
+import { docxStyleMappingForDefaultSchema } from "./styles.js";
+
+export const docxDefaultSchemaMappings = {
+  blockMapping: docxBlockMappingForDefaultSchema,
+  inlineContentMapping: docxInlineContentMappingForDefaultSchema,
+  styleMapping: docxStyleMappingForDefaultSchema,
+};

package/src/docx/defaultSchema/inlinecontent.ts

@@ -0,0 +1,29 @@
+import {
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+  InlineContentMapping,
+} from "@blocknote/core";
+import { ExternalHyperlink, ParagraphChild, TextRun } from "docx";
+import type { DOCXExporter } from "../docxExporter.js";
+
+export const docxInlineContentMappingForDefaultSchema: InlineContentMapping<
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+  ParagraphChild,
+  TextRun
+> = {
+  link: (ic, exporter) => {
+    return new ExternalHyperlink({
+      children: ic.content.map((content) => {
+        return (exporter as DOCXExporter<any, any, any>).transformStyledText(
+          content,
+          true
+        );
+      }),
+      link: ic.href,
+    });
+  },
+  text: (ic, t) => {
+    return t.transformStyledText(ic);
+  },
+};

package/src/docx/defaultSchema/styles.ts

@@ -0,0 +1,73 @@
+import { DefaultStyleSchema, StyleMapping } from "@blocknote/core";
+import { IRunPropertiesOptions } from "docx";
+
+export const docxStyleMappingForDefaultSchema: StyleMapping<
+  DefaultStyleSchema,
+  IRunPropertiesOptions
+> = {
+  bold: (val) => {
+    if (!val) {
+      return {};
+    }
+    return {
+      bold: val,
+    };
+  },
+  italic: (val) => {
+    if (!val) {
+      return {};
+    }
+    return {
+      italics: val,
+    };
+  },
+  underline: (val) => {
+    if (!val) {
+      return {};
+    }
+    return {
+      underline: {
+        type: "single",
+      },
+    };
+  },
+  strike: (val) => {
+    if (!val) {
+      return {};
+    }
+    return {
+      strike: val,
+    };
+  },
+  backgroundColor: (val, exporter) => {
+    if (!val) {
+      return {};
+    }
+    return {
+      shading: {
+        fill: exporter.options.colors[
+          val as keyof typeof exporter.options.colors
+        ].background.slice(1),
+      },
+    };
+  },
+  textColor: (val, exporter) => {
+    if (!val) {
+      return {};
+    }
+    return {
+      color:
+        exporter.options.colors[
+          val as keyof typeof exporter.options.colors
+        ].text.slice(1),
+    };
+  },
+  code: (val) => {
+    if (!val) {
+      return {};
+    }
+    return {
+      font: "Courier New",
+    };
+  },
+};

package/src/docx/docxExporter.test.ts

@@ -0,0 +1,118 @@
+import { BlockNoteSchema } from "@blocknote/core";
+import { testDocument } from "@shared/testDocument.js";
+import AdmZip from "adm-zip";
+import { Packer, Paragraph, TextRun } from "docx";
+import { describe, expect, it } from "vitest";
+import xmlFormat from "xml-formatter";
+import { docxDefaultSchemaMappings } from "./defaultSchema/index.js";
+import { DOCXExporter } from "./docxExporter.js";
+
+describe("exporter", () => {
+  it("should export a document", { timeout: 10000 }, async () => {
+    const exporter = new DOCXExporter(
+      BlockNoteSchema.create(),
+      docxDefaultSchemaMappings
+    );
+    const doc = await exporter.toDocxJsDocument(testDocument);
+
+    const buffer = await Packer.toBuffer(doc);
+    const zip = new AdmZip(buffer);
+
+    expect(
+      prettify(zip.getEntry("word/document.xml")!.getData().toString())
+    ).toMatchFileSnapshot("__snapshots__/basic/document.xml");
+    expect(
+      prettify(zip.getEntry("word/styles.xml")!.getData().toString())
+    ).toMatchFileSnapshot("__snapshots__/basic/styles.xml");
+
+    // fs.writeFileSync(__dirname + "/My Document.docx", buffer);
+  });
+
+  it(
+    "should export a document with custom document options",
+    { timeout: 10000 },
+    async () => {
+      const exporter = new DOCXExporter(
+        BlockNoteSchema.create(),
+        docxDefaultSchemaMappings
+      );
+
+      const doc = await exporter.toDocxJsDocument(testDocument, {
+        documentOptions: {
+          creator: "John Doe",
+        },
+        sectionOptions: {
+          headers: {
+            default: {
+              options: {
+                children: [
+                  new Paragraph({ children: [new TextRun("Header")] }),
+                ],
+              },
+            },
+          },
+          footers: {
+            default: {
+              options: {
+                children: [
+                  new Paragraph({ children: [new TextRun("Footer")] }),
+                ],
+              },
+            },
+          },
+        },
+      });
+
+      const buffer = await Packer.toBuffer(doc);
+
+      // fs.writeFileSync(__dirname + "/My Document.docx", buffer);
+
+      const zip = new AdmZip(buffer);
+
+      // files related to header / footer
+      expect(
+        prettify(
+          zip.getEntry("word/_rels/document.xml.rels")!.getData().toString()
+        )
+      ).toMatchFileSnapshot(
+        "__snapshots__/withCustomOptions/document.xml.rels"
+      );
+
+      expect(
+        prettify(zip.getEntry("word/header1.xml")!.getData().toString())
+      ).toMatchFileSnapshot("__snapshots__/withCustomOptions/header1.xml");
+
+      expect(
+        prettify(zip.getEntry("word/footer1.xml")!.getData().toString())
+      ).toMatchFileSnapshot("__snapshots__/withCustomOptions/footer1.xml");
+
+      // has author data
+      expect(
+        prettify(zip.getEntry("docProps/core.xml")!.getData().toString())
+      ).toMatchFileSnapshot("__snapshots__/withCustomOptions/core.xml");
+    }
+  );
+});
+
+function prettify(sourceXml: string) {
+  let ret = xmlFormat(sourceXml);
+
+  // replace random ids like r:id="rIdll8_ocxarmodcwrnsavfb"
+  ret = ret.replace(/r:id="[a-zA-Z0-9_-]*"/g, 'r:id="FAKE-ID"');
+
+  // replace random ids like Id="rIdll8_ocxarmodcwrnsavfb"
+  ret = ret.replace(/ Id="[a-zA-Z0-9_-]*"/g, ' Id="FAKE-ID"');
+
+  // replace created date <dcterms:created xsi:type="dcterms:W3CDTF">...</dcterms:created>
+  ret = ret.replace(
+    /<dcterms:created xsi:type="dcterms:W3CDTF">[^<]*<\/dcterms:created>/g,
+    '<dcterms:created xsi:type="dcterms:W3CDTF">FAKE-DATE</dcterms:created>'
+  );
+
+  // replace modified date <dcterms:modified xsi:type="dcterms:W3CDTF">...</dcterms:modified>
+  ret = ret.replace(
+    /<dcterms:modified xsi:type="dcterms:W3CDTF">[^<]*<\/dcterms:modified>/g,
+    '<dcterms:modified xsi:type="dcterms:W3CDTF">FAKE-DATE</dcterms:modified>'
+  );
+  return ret;
+}