render-docx.ts

import {
  AlignmentType,
  BorderStyle,
  convertMillimetersToTwip,
  Document,
  HeadingLevel,
  LevelFormat,
  LineRuleType,
  PageBreak,
  Packer,
  Paragraph,
  Table,
  TableCell,
  TableLayoutType,
  TableRow,
  TextRun,
  VerticalAlign,
  WidthType,
} from "docx";
import type { Block, ResolvedDocument, TextStyle } from "./model.js";

const pointToHalfPoint = (point: number) => Math.round(point * 2);
const pointToTwip = (point: number) => Math.round(point * 20);
const wordFont = (family: string) => ({ ascii: family, hAnsi: family, eastAsia: family, cs: family });
const runStyle = (style: TextStyle) => ({
  font: wordFont(style.fontFamily),
  size: pointToHalfPoint(style.fontSize.value),
  color: style.color,
  bold: style.bold,
});
const paragraphSpacing = (style: TextStyle) => ({
  before: pointToTwip(style.spacingBefore.value),
  after: pointToTwip(style.spacingAfter.value),
  line: pointToTwip(style.lineHeight.value),
  lineRule: LineRuleType.EXACT,
});

function renderTable(block: Extract<Block, { type: "table" }>, document: ResolvedDocument) {
  const page = document.page;
  const usableMm = page.width.value - page.margins.left.value - page.margins.right.value;
  const tableWidth = convertMillimetersToTwip(usableMm);
  const widths = block.columnFractions.map((fraction) => Math.round(tableWidth * fraction));
  widths[widths.length - 1] += tableWidth - widths.reduce((sum, width) => sum + width, 0);
  const border = { style: BorderStyle.SINGLE, size: 4, color: "B8C2CC" };
  const cell = (text: string, width: number, header: boolean) => new TableCell({
    width: { size: width, type: WidthType.DXA },
    verticalAlign: VerticalAlign.CENTER,
    shading: header ? { fill: document.styles.tableHeaderFill } : undefined,
    margins: { top: 62, bottom: 62, left: 119, right: 119 },
    children: [new Paragraph({
      spacing: { after: 0, line: pointToTwip(document.styles.body.lineHeight.value), lineRule: LineRuleType.EXACT },
      children: [new TextRun({ text, ...runStyle(document.styles.body), bold: header })],
    })],
  });
  return new Table({
    width: { size: tableWidth, type: WidthType.DXA },
    columnWidths: widths,
    layout: TableLayoutType.FIXED,
    borders: { top: border, bottom: border, left: border, right: border, insideHorizontal: border, insideVertical: border },
    rows: [
      new TableRow({ tableHeader: true, children: block.columns.map((text, index) => cell(text, widths[index], true)) }),
      ...block.rows.map((row) => new TableRow({ cantSplit: true, children: row.map((text, index) => cell(text, widths[index], false)) })),
    ],
  });
}

function renderBlock(block: Block, document: ResolvedDocument) {
  const body = document.styles.body;
  switch (block.type) {
    case "heading": {
      const headingStyle = block.level === 1 ? document.styles.heading1 : document.styles.heading2;
      return [new Paragraph({
        heading: block.level === 1 ? HeadingLevel.HEADING_1 : HeadingLevel.HEADING_2,
        spacing: paragraphSpacing(headingStyle),
        keepNext: true,
        children: [new TextRun({ text: block.text, ...runStyle(headingStyle) })],
      })];
    }
    case "paragraph":
      return [new Paragraph({ spacing: paragraphSpacing(body), children: [new TextRun({ text: block.text, ...runStyle(body) })] })];
    case "bulletList":
      return block.items.map((text) => new Paragraph({
        numbering: { reference: "reference-bullets", level: 0 },
        spacing: paragraphSpacing(body),
        children: [new TextRun({ text, ...runStyle(body) })],
      }));
    case "table":
      return [renderTable(block, document)];
    case "pageBreak":
      return [new Paragraph({ children: [new PageBreak()] })];
  }
}

export async function renderDocx(document: ResolvedDocument): Promise<Buffer> {
  const { body, heading1, heading2 } = document.styles;
  const output = new Document({
    creator: "web-docx-layout",
    title: document.title,
    description: "Web and DOCX generated from one resolved physical layout",
    styles: { default: {
      document: { run: runStyle(body), paragraph: { spacing: paragraphSpacing(body) } },
      heading1: { run: runStyle(heading1), paragraph: { spacing: paragraphSpacing(heading1), keepNext: true } },
      heading2: { run: runStyle(heading2), paragraph: { spacing: paragraphSpacing(heading2), keepNext: true } },
    } },
    numbering: { config: [{
      reference: "reference-bullets",
      levels: [{
        level: 0,
        format: LevelFormat.BULLET,
        text: "•",
        alignment: AlignmentType.LEFT,
        style: { paragraph: { indent: { left: 720, hanging: 360 }, spacing: paragraphSpacing(body) }, run: runStyle(body) },
      }],
    }] },
    sections: [{
      properties: { page: {
        size: { width: convertMillimetersToTwip(document.page.width.value), height: convertMillimetersToTwip(document.page.height.value) },
        margin: {
          top: convertMillimetersToTwip(document.page.margins.top.value),
          right: convertMillimetersToTwip(document.page.margins.right.value),
          bottom: convertMillimetersToTwip(document.page.margins.bottom.value),
          left: convertMillimetersToTwip(document.page.margins.left.value),
        },
      } },
      children: document.blocks.flatMap((block) => renderBlock(block, document)),
    }],
  });
  return Packer.toBuffer(output);
}