Fix DOCX table header bold and add proportional column widths (#24)

Author: arthurkowalsky

RELEASES.md

@@ -5,6 +5,9 @@
 ### New features
 - **Document sharing** — Share documents via encrypted URL links. Content is compressed (pako deflate) and encrypted (AES-256-GCM) client-side, then embedded in the URL fragment which never leaves the browser. Two modes: link-only (encryption key in URL) and password-protected (PBKDF2 key derivation). Configurable link expiry (1h to 30 days). Import shared documents with Replace All or Merge options. Optional URL shortening via is.gd.
 
+### Fixes
+- **DOCX table formatting** — Header row is now properly bold in exported DOCX. Table spans full document width with column widths proportional to content length.
+
 ### Changed
 - **Honest title page preview** — Live preview now shows title page only from explicit YAML frontmatter instead of auto-generating phantom titles and dates from H1 headings and `new Date()`. When no frontmatter is present, a clickable placeholder guides users to add metadata. DOCX/PDF/HTML export retains auto-fallback behavior for professional output.
 - **Document Options** — "Export Options" renamed to "Document Options". Toggles (Title Page, ToC, Header, Footer) now affect both live preview and export, making the editor truly WYSIWYG.

src/docx-renderer.js

@@ -6,6 +6,7 @@ import { loadLogoPng } from "./logo.js";
 import { parseInlineSegments } from "./inline-formatting.js";
 
 const getDocx = () => window.docx;
+const A4_WIDTH_TWIPS = 11906;
 
 function dataUrlToBase64(dataUrl) {
   return dataUrl ? dataUrl.split(",")[1] : null;
@@ -51,7 +52,7 @@ function themeAdapter(theme) {
   };
 }
 
-export function parseInlineFormatting(text, t) {
+export function parseInlineFormatting(text, t, overrides = {}) {
   const { TextRun, ShadingType } = getDocx();
   const boldColor = t.colorBold || COLORS.boldFallback;
   const segments = parseInlineSegments(text);
@@ -76,6 +77,7 @@ export function parseInlineFormatting(text, t) {
         font: t.fontBody,
         size: t.sizeBody,
         ...styleMap[seg.type],
+        ...overrides,
       })
   );
 }
@@ -525,28 +527,45 @@ async function elementToDocx(element, theme, t) {
       const border = { style: BorderStyle.SINGLE, size: 1, color: t.colorTableBorder };
       const borders = { top: border, bottom: border, left: border, right: border };
       const colCount = element.rows[0]?.length || 1;
-      const colWidth = Math.floor(9360 / colCount);
+      const tableWidth = A4_WIDTH_TWIPS - 2 * t.marginPage;
+
+      const charWidth = t.sizeTable * 5;
+      const cellPadding = 240;
+      const minColWidth = 3 * charWidth + cellPadding;
+
+      const maxLengths = Array(colCount).fill(0);
+      for (const row of element.rows) {
+        for (let c = 0; c < colCount; c++) {
+          if (row[c]) maxLengths[c] = Math.max(maxLengths[c], row[c].length);
+        }
+      }
+
+      const sqrtLengths = maxLengths.map((len) => Math.sqrt(Math.max(len, 1)));
+      const totalSqrt = sqrtLengths.reduce((sum, l) => sum + l, 0);
+      const rawWidths = sqrtLengths.map((l) =>
+        Math.max(Math.floor((l / totalSqrt) * tableWidth), minColWidth)
+      );
+      const rawTotal = rawWidths.reduce((sum, w) => sum + w, 0);
+      const colWidths = rawWidths.map((w) => Math.floor((w / rawTotal) * tableWidth));
+
+      const cellTheme = { ...t, sizeBody: t.sizeTable, sizeMono: t.sizeTable - 2 };
+
       return new Table({
-        width: { size: 100, type: WidthType.PERCENTAGE },
-        columnWidths: Array(colCount).fill(colWidth),
+        width: { size: tableWidth, type: WidthType.DXA },
+        columnWidths: colWidths,
         rows: element.rows.map(
           (row, rowIdx) =>
             new TableRow({
               children: row.map((cell, colIdx) => {
                 const isHeader = rowIdx === 0;
-                const isFirstCol = colIdx === 0;
-                const cellRuns = parseInlineFormatting(cell, {
-                  ...t,
-                  sizeBody: t.sizeTable,
-                  sizeMono: t.sizeTable - 2,
-                });
-                if (isHeader || isFirstCol)
-                  cellRuns.forEach((run) => {
-                    if (run.properties) run.properties.bold = true;
-                  });
+                const cellRuns = parseInlineFormatting(
+                  cell,
+                  cellTheme,
+                  isHeader ? { bold: true } : undefined
+                );
                 return new TableCell({
                   borders,
-                  width: { size: colWidth, type: WidthType.DXA },
+                  width: { size: colWidths[colIdx], type: WidthType.DXA },
                   shading: isHeader
                     ? { fill: t.colorTableHeader, type: ShadingType.CLEAR }
                     : undefined,
@@ -631,7 +650,7 @@ export async function createDocument(metadata, elements, themeId = "kyotu", opti
     sections.push({
       properties: {
         page: {
-          size: { width: 11906, height: 16838 },
+          size: { width: A4_WIDTH_TWIPS, height: 16838 },
           margin: { top: 1440, right: 1440, bottom: 1440, left: 1440 },
         },
       },
@@ -643,7 +662,7 @@ export async function createDocument(metadata, elements, themeId = "kyotu", opti
     sections.push({
       properties: {
         page: {
-          size: { width: 11906, height: 16838 },
+          size: { width: A4_WIDTH_TWIPS, height: 16838 },
           margin: {
             top: t.marginPageTop,
             right: t.marginPage,
@@ -662,7 +681,7 @@ export async function createDocument(metadata, elements, themeId = "kyotu", opti
   sections.push({
     properties: {
       page: {
-        size: { width: 11906, height: 16838 },
+        size: { width: A4_WIDTH_TWIPS, height: 16838 },
         margin: {
           top: t.marginPageTop,
           right: t.marginPage,

tests/features/export/docx-quality.feature

@@ -61,6 +61,22 @@ Feature: DOCX export quality
     Then the DOCX text content should contain "Item1"
     And the DOCX text content should contain "Item2"
 
+  Scenario: DOCX table header row is bold and columns are proportional
+    Given the editor contains:
+      """
+      ---
+      title: "Table Formatting"
+      ---
+
+      | ID | Full Description of the Feature | Status |
+      | -- | ------------------------------- | ------ |
+      | 1  | Implement user authentication   | Done   |
+      | 2  | Add dashboard analytics view    | WIP    |
+      """
+    When I export as "docx"
+    Then the DOCX table header row should be bold
+    And the DOCX table columns should have proportional widths
+
   Scenario: DOCX HTML conversion preserves semantic structure
     Given the editor contains the file "full-document.md"
     When I export as "docx"

tests/helpers/docx-validator.js

@@ -132,6 +132,44 @@ export class DocxValidator {
     return this.getParagraphs(doc).filter((p) => this.getParagraphStyle(p) === styleName);
   }
 
+  getTables(doc) {
+    const body = doc["w:document"]?.["w:body"];
+    if (!body) return [];
+    return body["w:tbl"] || [];
+  }
+
+  getTableCellText(cell) {
+    return (cell["w:p"] || []).map((p) => this.getParagraphText(p)).join("");
+  }
+
+  isRunBold(run) {
+    const rPr = run["w:rPr"];
+    if (!rPr) return false;
+    const bold = rPr["w:b"];
+    if (bold === undefined || bold === null) return false;
+    if (typeof bold === "string") return bold !== "false";
+    if (typeof bold === "object" && bold["@_w:val"] === "false") return false;
+    return true;
+  }
+
+  isCellBold(cell) {
+    const runs = (cell["w:p"] || []).flatMap((p) => p["w:r"] || []);
+    if (runs.length === 0) return false;
+    return runs.every((r) => this.isRunBold(r));
+  }
+
+  getTableColumnWidths(table) {
+    const rows = table["w:tr"] || [];
+    if (rows.length === 0) return [];
+    const firstRow = rows[0];
+    const cells = firstRow["w:tc"] || [];
+    return cells.map((cell) => {
+      const tcPr = cell["w:tcPr"];
+      const tcW = tcPr?.["w:tcW"];
+      return tcW ? parseInt(tcW["@_w:w"], 10) : 0;
+    });
+  }
+
   getImageExtents(doc) {
     const paragraphs = this.getParagraphs(doc);
     const extents = [];

tests/steps/export.steps.js

@@ -174,6 +174,28 @@ Then("the HTML should contain {int} {string} elements", async ({}, count, select
   expect($(selector).length).toBe(count);
 });
 
+Then("the DOCX table header row should be bold", async ({}) => {
+  const { doc } = await docxValidator.parse(lastDownloadBuffer);
+  const tables = docxValidator.getTables(doc);
+  expect(tables.length).toBeGreaterThan(0);
+  const rows = tables[0]["w:tr"] || [];
+  expect(rows.length).toBeGreaterThan(0);
+  const headerCells = rows[0]["w:tc"] || [];
+  for (const cell of headerCells) {
+    expect(docxValidator.isCellBold(cell)).toBe(true);
+  }
+});
+
+Then("the DOCX table columns should have proportional widths", async ({}) => {
+  const { doc } = await docxValidator.parse(lastDownloadBuffer);
+  const tables = docxValidator.getTables(doc);
+  expect(tables.length).toBeGreaterThan(0);
+  const widths = docxValidator.getTableColumnWidths(tables[0]);
+  expect(widths.length).toBeGreaterThan(1);
+  const allEqual = widths.every((w) => w === widths[0]);
+  expect(allEqual).toBe(false);
+});
+
 Then("the DOCX should contain an image with correct aspect ratio", async ({}) => {
   const { doc, zip } = await docxValidator.parse(lastDownloadBuffer);
   const extents = docxValidator.getImageExtents(doc);