@beyondwork/docx-react-component 1.0.2 → 1.0.4

package/src/io/ooxml/parse-tables.ts

@@ -59,12 +59,23 @@ export interface ParsedCellMargins {
   right?: number;
 }
 
+export interface ParsedTableLook {
+  val?: string;
+  firstRow?: boolean;
+  lastRow?: boolean;
+  firstColumn?: boolean;
+  lastColumn?: boolean;
+  noHBand?: boolean;
+  noVBand?: boolean;
+}
+
 export interface ParsedTableDocument {
   tables: ParsedTable[];
 }
 
 export interface ParsedTable {
   type: "table";
+  styleId?: string;
   propertiesXml?: string;
   gridColumns: number[];
   rows: ParsedTableRow[];
@@ -73,6 +84,7 @@ export interface ParsedTable {
   alignment?: "left" | "center" | "right";
   borders?: ParsedTableBorders;
   cellMargins?: ParsedCellMargins;
+  tblLook?: ParsedTableLook;
 }
 
 export interface ParsedTableRow {
@@ -115,13 +127,16 @@ function parseTable(node: XmlElementNode, sourceXml: string): ParsedTable {
     .filter((child): child is XmlElementNode => child.type === "element" && localName(child.name) === "tr")
     .map((rowNode) => parseRow(rowNode, sourceXml));
 
+  const styleId = propertiesNode ? readTableStyleId(propertiesNode) : undefined;
   const width = propertiesNode ? readTableWidth(propertiesNode) : undefined;
   const alignment = propertiesNode ? readTableAlignment(propertiesNode) : undefined;
   const borders = propertiesNode ? readTableBorders(propertiesNode) : undefined;
   const cellMargins = propertiesNode ? readTableCellMargins(propertiesNode) : undefined;
+  const tblLook = propertiesNode ? readTableLook(propertiesNode) : undefined;
 
   return {
     type: "table",
+    ...(styleId ? { styleId } : {}),
     ...(propertiesNode ? { propertiesXml: sourceXml.slice(propertiesNode.start, propertiesNode.end) } : {}),
     gridColumns: gridNode ? readGridColumns(gridNode) : [],
     rows,
@@ -130,6 +145,7 @@ function parseTable(node: XmlElementNode, sourceXml: string): ParsedTable {
     ...(alignment ? { alignment } : {}),
     ...(borders ? { borders } : {}),
     ...(cellMargins ? { cellMargins } : {}),
+    ...(tblLook ? { tblLook } : {}),
   };
 }
 
@@ -493,6 +509,40 @@ function readTableAlignment(propertiesNode: XmlElementNode): "left" | "center" |
   return undefined;
 }
 
+function readTableStyleId(propertiesNode: XmlElementNode): string | undefined {
+  const styleNode = findFirstChild(propertiesNode, "tblStyle");
+  if (!styleNode) return undefined;
+  return styleNode.attributes["w:val"] ?? styleNode.attributes.val;
+}
+
+function readTableLook(propertiesNode: XmlElementNode): ParsedTableLook | undefined {
+  const tblLookNode = findFirstChild(propertiesNode, "tblLook");
+  if (!tblLookNode) return undefined;
+
+  const tableLook: ParsedTableLook = {};
+  const val = tblLookNode.attributes["w:val"] ?? tblLookNode.attributes.val;
+  if (val) {
+    tableLook.val = val;
+  }
+
+  for (const [attribute, key] of [
+    ["w:firstRow", "firstRow"],
+    ["w:lastRow", "lastRow"],
+    ["w:firstColumn", "firstColumn"],
+    ["w:lastColumn", "lastColumn"],
+    ["w:noHBand", "noHBand"],
+    ["w:noVBand", "noVBand"],
+  ] as const) {
+    const fallback = attribute.replace("w:", "");
+    const raw = tblLookNode.attributes[attribute] ?? tblLookNode.attributes[fallback];
+    if (raw !== undefined) {
+      tableLook[key] = raw !== "0" && raw !== "false" && raw !== "off";
+    }
+  }
+
+  return Object.keys(tableLook).length > 0 ? tableLook : undefined;
+}
+
 function readTableBorders(propertiesNode: XmlElementNode): ParsedTableBorders | undefined {
   const bordersNode = findFirstChild(propertiesNode, "tblBorders");
   if (!bordersNode) return undefined;

package/src/io/opc/package-reader.ts

@@ -1,4 +1,4 @@
-import { inflateRawSync } from "node:zlib";
+import { inflateSync } from "fflate";
 
 import {
   CONTENT_TYPES_PATH,
@@ -35,8 +35,7 @@ const LOCAL_FILE_HEADER_SIGNATURE = 0x04034b50;
 
 export function readOpcPackage(source: Uint8Array | ArrayBuffer): OpcPackage {
   const bytes = source instanceof Uint8Array ? source : new Uint8Array(source);
-  const archive = Buffer.from(bytes.buffer, bytes.byteOffset, bytes.byteLength);
-  const centralDirectory = readCentralDirectory(archive);
+  const centralDirectory = readCentralDirectory(bytes);
   const parts = new Map<string, OpcPackagePart>();
 
   for (const entry of centralDirectory) {
@@ -44,7 +43,7 @@ export function readOpcPackage(source: Uint8Array | ArrayBuffer): OpcPackage {
       continue;
     }
 
-    const storedBytes = readZipEntry(archive, entry);
+    const storedBytes = readZipEntry(bytes, entry);
     const normalizedPath = normalizePartPath(entry.path);
     const surfaceKind = getSurfaceKind(normalizedPath);
 
@@ -112,30 +111,31 @@ export function readOpcPackage(source: Uint8Array | ArrayBuffer): OpcPackage {
   };
 }
 
-function readCentralDirectory(archive: Buffer): ZipCentralDirectoryEntry[] {
-  const eocdOffset = findEndOfCentralDirectory(archive);
-  const entryCount = archive.readUInt16LE(eocdOffset + 10);
-  const centralDirectoryOffset = archive.readUInt32LE(eocdOffset + 16);
+function readCentralDirectory(archive: Uint8Array): ZipCentralDirectoryEntry[] {
+  const view = new DataView(archive.buffer, archive.byteOffset, archive.byteLength);
+  const eocdOffset = findEndOfCentralDirectory(archive, view);
+  const entryCount = view.getUint16(eocdOffset + 10, true);
+  const centralDirectoryOffset = view.getUint32(eocdOffset + 16, true);
   const entries: ZipCentralDirectoryEntry[] = [];
   let offset = centralDirectoryOffset;
 
   for (let index = 0; index < entryCount; index += 1) {
-    const signature = archive.readUInt32LE(offset);
+    const signature = view.getUint32(offset, true);
     if (signature !== CENTRAL_DIRECTORY_SIGNATURE) {
       throw new Error(`Invalid ZIP central directory signature at offset ${offset}.`);
     }
 
-    const generalPurposeBitFlag = archive.readUInt16LE(offset + 8);
-    const compressionMethod = archive.readUInt16LE(offset + 10);
-    const crc32 = archive.readUInt32LE(offset + 16);
-    const compressedSize = archive.readUInt32LE(offset + 20);
-    const uncompressedSize = archive.readUInt32LE(offset + 24);
-    const fileNameLength = archive.readUInt16LE(offset + 28);
-    const extraFieldLength = archive.readUInt16LE(offset + 30);
-    const fileCommentLength = archive.readUInt16LE(offset + 32);
-    const localHeaderOffset = archive.readUInt32LE(offset + 42);
+    const generalPurposeBitFlag = view.getUint16(offset + 8, true);
+    const compressionMethod = view.getUint16(offset + 10, true);
+    const crc32 = view.getUint32(offset + 16, true);
+    const compressedSize = view.getUint32(offset + 20, true);
+    const uncompressedSize = view.getUint32(offset + 24, true);
+    const fileNameLength = view.getUint16(offset + 28, true);
+    const extraFieldLength = view.getUint16(offset + 30, true);
+    const fileCommentLength = view.getUint16(offset + 32, true);
+    const localHeaderOffset = view.getUint32(offset + 42, true);
     const fileNameOffset = offset + 46;
-    const fileName = archive.subarray(fileNameOffset, fileNameOffset + fileNameLength).toString("utf8");
+    const fileName = decodeUtf8(archive.subarray(fileNameOffset, fileNameOffset + fileNameLength));
 
     entries.push({
       path: fileName,
@@ -153,13 +153,13 @@ function readCentralDirectory(archive: Buffer): ZipCentralDirectoryEntry[] {
   return entries;
 }
 
-function findEndOfCentralDirectory(archive: Buffer): number {
+function findEndOfCentralDirectory(archive: Uint8Array, view: DataView): number {
   const minimumEocdSize = 22;
   const maximumCommentSize = 0xffff;
   const searchStart = Math.max(0, archive.length - minimumEocdSize - maximumCommentSize);
 
   for (let offset = archive.length - minimumEocdSize; offset >= searchStart; offset -= 1) {
-    if (archive.readUInt32LE(offset) === EOCD_SIGNATURE) {
+    if (view.getUint32(offset, true) === EOCD_SIGNATURE) {
       return offset;
     }
   }
@@ -167,15 +167,16 @@ function findEndOfCentralDirectory(archive: Buffer): number {
   throw new Error("Invalid ZIP archive: end of central directory not found.");
 }
 
-function readZipEntry(archive: Buffer, entry: ZipCentralDirectoryEntry): Uint8Array {
+function readZipEntry(archive: Uint8Array, entry: ZipCentralDirectoryEntry): Uint8Array {
+  const view = new DataView(archive.buffer, archive.byteOffset, archive.byteLength);
   const headerOffset = entry.localHeaderOffset;
-  const signature = archive.readUInt32LE(headerOffset);
+  const signature = view.getUint32(headerOffset, true);
   if (signature !== LOCAL_FILE_HEADER_SIGNATURE) {
     throw new Error(`Invalid ZIP local file header signature at offset ${headerOffset}.`);
   }
 
-  const fileNameLength = archive.readUInt16LE(headerOffset + 26);
-  const extraFieldLength = archive.readUInt16LE(headerOffset + 28);
+  const fileNameLength = view.getUint16(headerOffset + 26, true);
+  const extraFieldLength = view.getUint16(headerOffset + 28, true);
   const dataOffset = headerOffset + 30 + fileNameLength + extraFieldLength;
   const compressed = archive.subarray(dataOffset, dataOffset + entry.compressedSize);
 
@@ -183,7 +184,7 @@ function readZipEntry(archive: Buffer, entry: ZipCentralDirectoryEntry): Uint8Ar
     case "store":
       return new Uint8Array(compressed);
     case "deflate":
-      return new Uint8Array(inflateRawSync(compressed));
+      return inflateSync(compressed);
     default:
       throw new Error(`Unsupported ZIP compression for ${entry.path}.`);
   }
@@ -213,7 +214,11 @@ function getSurfaceKind(path: string): OpcPartManifestEntry["surfaceKind"] {
 }
 
 function decodeXml(bytes: Uint8Array): string {
-  return Buffer.from(bytes.buffer, bytes.byteOffset, bytes.byteLength).toString("utf8");
+  return new TextDecoder("utf-8").decode(bytes);
+}
+
+function decodeUtf8(bytes: Uint8Array): string {
+  return new TextDecoder("utf-8").decode(bytes);
 }
 
 function parseContentTypesXml(xml: string): OpcPackageManifest["contentTypes"] {

package/src/runtime/table-commands.ts

@@ -11,6 +11,7 @@
 
 import type { Command as PMCommand, EditorState } from "prosemirror-state";
 import {
+  TableMap,
   addColumnAfter as pmAddColumnAfter,
   addColumnBefore as pmAddColumnBefore,
   addRowAfter as pmAddRowAfter,
@@ -48,8 +49,14 @@ function withTableGuard(
   command: PMCommand,
 ): PMCommand {
   return (state, dispatch, view) => {
-    if (!canRun(state)) return false;
-    return command(state, dispatch, view);
+    try {
+      if (!canRun(state)) {
+        return false;
+      }
+      return command(state, dispatch, view);
+    } catch {
+      return false;
+    }
   };
 }
 
@@ -72,7 +79,7 @@ export const addColumnAfter: PMCommand = (state, dispatch, view) =>
 
 export const deleteColumn: PMCommand = withTableGuard((state) => {
   const table = tableAtSelection(state);
-  return table !== null && table.childCount > 0 && table.firstChild !== null && table.firstChild.childCount > 1;
+  return table !== null && TableMap.get(table).width > 1;
 }, pmDeleteColumn);
 
 export {

package/src/runtime/table-schema.ts

@@ -11,6 +11,14 @@
 
 import type { NodeSpec } from "prosemirror-model";
 
+type TableCellAttrs = {
+  colspan?: number | null;
+  rowspan?: number | null;
+  colwidth?: number[] | null;
+  gridSpan?: number | null;
+  verticalMerge?: "restart" | "continue" | null;
+};
+
 function resolveRenderedColspan(attrs: {
   colspan?: number | null;
   gridSpan?: number | null;
@@ -24,6 +32,93 @@ function resolveRenderedColspan(attrs: {
   return 1;
 }
 
+function resolveRenderedRowspan(attrs: { rowspan?: number | null }): number {
+  return typeof attrs.rowspan === "number" && attrs.rowspan > 1 ? attrs.rowspan : 1;
+}
+
+function parseColwidthAttr(dom: HTMLElement, colspan: number): number[] | null {
+  const widthAttr = dom.getAttribute("data-colwidth");
+  if (!widthAttr || !/^\d+(,\d+)*$/.test(widthAttr)) {
+    return null;
+  }
+
+  const widths = widthAttr.split(",").map((value) => Number.parseInt(value, 10));
+  return widths.length === colspan ? widths : null;
+}
+
+function getCellAttrs(dom: HTMLElement): TableCellAttrs {
+  const colspan = Number(dom.getAttribute("colspan") || 1);
+  const rowspan = Number(dom.getAttribute("rowspan") || 1);
+  const gridSpanAttr = dom.getAttribute("data-grid-span");
+  const verticalMergeAttr = dom.getAttribute("data-vertical-merge");
+  const gridSpan = gridSpanAttr ? Number.parseInt(gridSpanAttr, 10) : colspan;
+
+  return {
+    colspan,
+    rowspan,
+    colwidth: parseColwidthAttr(dom, colspan),
+    gridSpan: Number.isFinite(gridSpan) && gridSpan > 0 ? gridSpan : colspan,
+    verticalMerge:
+      verticalMergeAttr === "restart" || verticalMergeAttr === "continue"
+        ? verticalMergeAttr
+        : null,
+  };
+}
+
+function setCellDomAttrs(nodeAttrs: TableCellAttrs, className: string): Record<string, string> {
+  const attrs: Record<string, string> = { class: className };
+  const colspan = resolveRenderedColspan(nodeAttrs);
+  const rowspan = resolveRenderedRowspan(nodeAttrs);
+
+  if (colspan > 1) {
+    attrs.colspan = String(colspan);
+  }
+  if (rowspan > 1) {
+    attrs.rowspan = String(rowspan);
+  }
+  if (nodeAttrs.colwidth && nodeAttrs.colwidth.length > 0) {
+    attrs["data-colwidth"] = nodeAttrs.colwidth.join(",");
+  }
+  if (typeof nodeAttrs.gridSpan === "number" && nodeAttrs.gridSpan > 1) {
+    attrs["data-grid-span"] = String(nodeAttrs.gridSpan);
+  }
+  if (nodeAttrs.verticalMerge) {
+    attrs["data-vertical-merge"] = nodeAttrs.verticalMerge;
+  }
+
+  return attrs;
+}
+
+function validateColwidth(value: unknown): void {
+  if (value === null) {
+    return;
+  }
+  if (!Array.isArray(value)) {
+    throw new TypeError("colwidth must be null or an array");
+  }
+  for (const item of value) {
+    if (typeof item !== "number") {
+      throw new TypeError("colwidth must be null or an array of numbers");
+    }
+  }
+}
+
+function validateVerticalMerge(value: unknown): void {
+  if (value === null || value === "restart" || value === "continue") {
+    return;
+  }
+  throw new TypeError("verticalMerge must be null, 'restart', or 'continue'");
+}
+
+const tableCellSpecAttrs = {
+  propertiesXml: { default: null },
+  gridSpan: { default: 1, validate: "number" },
+  verticalMerge: { default: null, validate: validateVerticalMerge },
+  colspan: { default: 1, validate: "number" },
+  rowspan: { default: 1, validate: "number" },
+  colwidth: { default: null, validate: validateColwidth },
+} as const;
+
 export const tableNodeSpec: NodeSpec = {
   content: "table_row+",
   tableRole: "table",
@@ -56,35 +151,24 @@ export const tableCellNodeSpec: NodeSpec = {
   content: "paragraph+",
   tableRole: "cell",
   isolating: true,
-  attrs: {
-    propertiesXml: { default: null },
-    gridSpan: { default: 1 },
-    verticalMerge: { default: null },
-    colspan: { default: 1 },
-    rowspan: { default: 1 },
-    colwidth: { default: null },
-  },
+  attrs: tableCellSpecAttrs,
   parseDOM: [
     {
       tag: "td",
-      getAttrs(dom: HTMLElement) {
-        const colspan = dom.getAttribute("colspan");
-        const rowspan = dom.getAttribute("rowspan");
-        return {
-          colspan: colspan ? Number.parseInt(colspan, 10) : 1,
-          rowspan: rowspan ? Number.parseInt(rowspan, 10) : 1,
-        };
+      getAttrs(dom) {
+        if (!(dom instanceof HTMLElement)) {
+          return false;
+        }
+        return getCellAttrs(dom);
       },
     },
   ],
   toDOM(node) {
-    const attrs: Record<string, string> = {
-      class: "border border-primary/20 p-2 align-top",
-    };
-    const colspan = resolveRenderedColspan(node.attrs as { colspan?: number; gridSpan?: number });
-    if (colspan > 1) attrs.colspan = String(colspan);
-    if (node.attrs.rowspan > 1) attrs.rowspan = String(node.attrs.rowspan);
-    return ["td", attrs, 0];
+    return [
+      "td",
+      setCellDomAttrs(node.attrs as TableCellAttrs, "border border-primary/20 p-2 align-top"),
+      0,
+    ];
   },
 };
 
@@ -92,35 +176,27 @@ export const tableHeaderCellNodeSpec: NodeSpec = {
   content: "paragraph+",
   tableRole: "header_cell",
   isolating: true,
-  attrs: {
-    propertiesXml: { default: null },
-    gridSpan: { default: 1 },
-    verticalMerge: { default: null },
-    colspan: { default: 1 },
-    rowspan: { default: 1 },
-    colwidth: { default: null },
-  },
+  attrs: tableCellSpecAttrs,
   parseDOM: [
     {
       tag: "th",
-      getAttrs(dom: HTMLElement) {
-        const colspan = dom.getAttribute("colspan");
-        const rowspan = dom.getAttribute("rowspan");
-        return {
-          colspan: colspan ? Number.parseInt(colspan, 10) : 1,
-          rowspan: rowspan ? Number.parseInt(rowspan, 10) : 1,
-        };
+      getAttrs(dom) {
+        if (!(dom instanceof HTMLElement)) {
+          return false;
+        }
+        return getCellAttrs(dom);
       },
     },
   ],
   toDOM(node) {
-    const attrs: Record<string, string> = {
-      class: "border border-primary/20 p-2 align-top font-semibold bg-surface-raised",
-    };
-    const colspan = resolveRenderedColspan(node.attrs as { colspan?: number; gridSpan?: number });
-    if (colspan > 1) attrs.colspan = String(colspan);
-    if (node.attrs.rowspan > 1) attrs.rowspan = String(node.attrs.rowspan);
-    return ["th", attrs, 0];
+    return [
+      "th",
+      setCellDomAttrs(
+        node.attrs as TableCellAttrs,
+        "border border-primary/20 p-2 align-top font-semibold bg-surface-raised",
+      ),
+      0,
+    ];
   },
 };
 

package/src/ui/WordReviewEditor.tsx

@@ -880,6 +880,8 @@ function findRegionFocusTarget(
   if (regionId === "document" || regionId === "toolbar" || regionId === "review-rail" || regionId === "status") {
     return region;
   }
+
+  return null;
 }
 
 function isAccessibleRegionId(value: string | undefined): value is AccessibleRegionId {