@beyondwork/docx-react-component 1.0.2 → 1.0.4

package/src/ui-tailwind/editor-surface/tw-table-node-view.tsx

@@ -2,17 +2,36 @@
  * ProseMirror NodeView implementations for table nodes.
  *
  * These NodeViews render table structure as proper HTML tables with
- * colspan/rowspan support for merged cells (from gridSpan/verticalMerge attrs).
- *
- * Usage with EditorView:
- *   new EditorView(mount, {
- *     nodeViews: tableNodeViews,
- *     ...
- *   })
+ * colspan/rowspan support for merged cells. Horizontal merges come
+ * directly from `colspan`/`gridSpan`. Vertical merges can be rendered
+ * from either explicit `rowspan` attrs or OOXML `verticalMerge`
+ * chains when upstream projection has not yet materialized row spans.
  */
 
 import type { Node as PMNode } from "prosemirror-model";
 
+const TABLE_LAYOUT_SYNC_EVENT = "pm-table-layout-sync";
+
+interface TableCellLayout {
+  cellIndex: number;
+  colSpan: number;
+  hidden: boolean;
+  rowSpan: number;
+}
+
+interface OpenVerticalMerge {
+  col: number;
+  colSpan: number;
+  continuedThisRow: boolean;
+  layout: TableCellLayout;
+}
+
+interface OpenExplicitRowSpan {
+  col: number;
+  colSpan: number;
+  remainingRows: number;
+}
+
 function resolveRenderedColspan(node: PMNode): number {
   const colspan = node.attrs.colspan as number | undefined;
   if (typeof colspan === "number" && colspan > 1) {
@@ -27,6 +46,166 @@ function resolveRenderedColspan(node: PMNode): number {
   return 1;
 }
 
+function resolveRenderedRowspan(node: PMNode): number {
+  const rowspan = node.attrs.rowspan as number | undefined;
+  return typeof rowspan === "number" && rowspan > 1 ? rowspan : 1;
+}
+
+function readVerticalMerge(node: PMNode): "restart" | "continue" | null {
+  const value = node.attrs.verticalMerge;
+  return value === "restart" || value === "continue" ? value : null;
+}
+
+function isColumnCoveredBySpan(spans: readonly OpenExplicitRowSpan[], column: number): boolean {
+  return spans.some(
+    (span) => column >= span.col && column < span.col + span.colSpan,
+  );
+}
+
+function findVerticalMergeOwner(
+  openVerticalMerges: readonly OpenVerticalMerge[],
+  column: number,
+  colSpan: number,
+): OpenVerticalMerge | null {
+  const matchingByWidth = openVerticalMerges.find(
+    (merge) => merge.col >= column && merge.colSpan === colSpan,
+  );
+  if (matchingByWidth) {
+    return matchingByWidth;
+  }
+
+  return openVerticalMerges.find((merge) => merge.col >= column) ?? null;
+}
+
+function computeTableLayout(tableNode: PMNode): TableCellLayout[][] {
+  const rowLayouts: TableCellLayout[][] = [];
+  const openVerticalMerges: OpenVerticalMerge[] = [];
+  const openExplicitRowSpans: OpenExplicitRowSpan[] = [];
+
+  for (let rowIndex = 0; rowIndex < tableNode.childCount; rowIndex += 1) {
+    for (const merge of openVerticalMerges) {
+      merge.continuedThisRow = false;
+    }
+
+    const rowNode = tableNode.child(rowIndex);
+    const layoutRow: TableCellLayout[] = [];
+    let column = 0;
+
+    for (let cellIndex = 0; cellIndex < rowNode.childCount; cellIndex += 1) {
+      const cellNode = rowNode.child(cellIndex);
+      const colSpan = resolveRenderedColspan(cellNode);
+      const explicitRowSpan = resolveRenderedRowspan(cellNode);
+      const verticalMerge = readVerticalMerge(cellNode);
+
+      if (verticalMerge === "continue") {
+        const owner = findVerticalMergeOwner(openVerticalMerges, column, colSpan);
+        if (owner) {
+          owner.layout.rowSpan += 1;
+          owner.continuedThisRow = true;
+          layoutRow.push({
+            cellIndex,
+            colSpan,
+            hidden: true,
+            rowSpan: 1,
+          });
+          column = owner.col + owner.colSpan;
+          continue;
+        }
+      }
+
+      while (isColumnCoveredBySpan(openExplicitRowSpans, column)) {
+        column += 1;
+      }
+
+      const layout: TableCellLayout = {
+        cellIndex,
+        colSpan,
+        hidden: false,
+        rowSpan: explicitRowSpan,
+      };
+      layoutRow.push(layout);
+
+      if (verticalMerge === "restart") {
+        openVerticalMerges.push({
+          col: column,
+          colSpan,
+          continuedThisRow: true,
+          layout,
+        });
+      }
+
+      if (explicitRowSpan > 1) {
+        openExplicitRowSpans.push({
+          col: column,
+          colSpan,
+          remainingRows: explicitRowSpan - 1,
+        });
+      }
+
+      column += colSpan;
+    }
+
+    for (let index = openVerticalMerges.length - 1; index >= 0; index -= 1) {
+      if (!openVerticalMerges[index]?.continuedThisRow) {
+        openVerticalMerges.splice(index, 1);
+      }
+    }
+
+    for (let index = openExplicitRowSpans.length - 1; index >= 0; index -= 1) {
+      const span = openExplicitRowSpans[index];
+      if (!span) {
+        continue;
+      }
+      span.remainingRows -= 1;
+      if (span.remainingRows <= 0) {
+        openExplicitRowSpans.splice(index, 1);
+      }
+    }
+
+    rowLayouts.push(layoutRow);
+  }
+
+  return rowLayouts;
+}
+
+function syncRenderedTableLayout(tableBody: HTMLTableSectionElement, tableNode: PMNode): void {
+  const rowLayouts = computeTableLayout(tableNode);
+  const rowElements = Array.from(tableBody.rows);
+
+  for (let rowIndex = 0; rowIndex < rowLayouts.length; rowIndex += 1) {
+    const rowLayout = rowLayouts[rowIndex];
+    const rowElement = rowElements[rowIndex];
+    if (!rowLayout || !rowElement) {
+      continue;
+    }
+
+    const cellElements = Array.from(rowElement.cells);
+    for (const cellLayout of rowLayout) {
+      const element = cellElements[cellLayout.cellIndex];
+      if (!element) {
+        continue;
+      }
+
+      element.colSpan = cellLayout.colSpan > 1 ? cellLayout.colSpan : 1;
+      element.rowSpan = cellLayout.hidden ? 1 : cellLayout.rowSpan > 1 ? cellLayout.rowSpan : 1;
+      element.style.display = cellLayout.hidden ? "none" : "";
+
+      if (cellLayout.hidden) {
+        element.setAttribute("aria-hidden", "true");
+        element.setAttribute("data-vertical-merge-hidden", "true");
+      } else {
+        element.removeAttribute("aria-hidden");
+        element.removeAttribute("data-vertical-merge-hidden");
+      }
+    }
+  }
+}
+
+function requestTableLayoutSync(start: HTMLElement): void {
+  const table = start.closest("[data-pm-table-root='true']");
+  table?.dispatchEvent(new Event(TABLE_LAYOUT_SYNC_EVENT));
+}
+
 /**
  * NodeView for the table node.
  * Renders as <table><tbody>...</tbody></table>.
@@ -34,17 +213,57 @@ function resolveRenderedColspan(node: PMNode): number {
  */
 export class TableNodeView {
   dom: HTMLElement;
-  contentDOM: HTMLElement;
+  contentDOM: HTMLTableSectionElement;
+  private node: PMNode;
+  private syncQueued = false;
+  private readonly onSyncRequest: EventListener;
+
+  constructor(node: PMNode) {
+    this.node = node;
 
-  constructor(_node: PMNode) {
     const table = document.createElement("table");
     table.className = "border-collapse w-full my-2 text-sm";
+    table.setAttribute("data-pm-table-root", "true");
 
     const tbody = document.createElement("tbody");
     table.appendChild(tbody);
 
     this.dom = table;
     this.contentDOM = tbody;
+    this.onSyncRequest = () => {
+      this.scheduleLayoutSync();
+    };
+    this.dom.addEventListener(TABLE_LAYOUT_SYNC_EVENT, this.onSyncRequest);
+    this.scheduleLayoutSync();
+  }
+
+  update(node: PMNode): boolean {
+    if (node.type !== this.node.type) {
+      return false;
+    }
+
+    this.node = node;
+    this.scheduleLayoutSync();
+    return true;
+  }
+
+  destroy(): void {
+    this.dom.removeEventListener(TABLE_LAYOUT_SYNC_EVENT, this.onSyncRequest);
+  }
+
+  ignoreMutation(record: MutationRecord): boolean {
+    return record.type === "attributes" && record.target === this.dom;
+  }
+
+  private scheduleLayoutSync(): void {
+    if (this.syncQueued) {
+      return;
+    }
+    this.syncQueued = true;
+    queueMicrotask(() => {
+      this.syncQueued = false;
+      syncRenderedTableLayout(this.contentDOM, this.node);
+    });
   }
 }
 
@@ -66,8 +285,8 @@ export class TableRowNodeView {
 /**
  * NodeView for table_cell and table_header_cell nodes.
  *
- * Applies colspan/rowspan from node attrs (mapped from gridSpan/verticalMerge
- * in the OOXML model). Distinguishes header cells by tableRole spec attribute.
+ * Applies colspan immediately and defers final rowspan/vertical-merge
+ * layout to the owning table node view.
  */
 export class TableCellNodeView {
   dom: HTMLElement;
@@ -82,9 +301,13 @@ export class TableCellNodeView {
       : "border border-primary/20 p-2 align-top";
 
     const colspan = resolveRenderedColspan(node);
-    const rowspan = node.attrs.rowspan as number;
-    if (colspan > 1) (cell as HTMLTableCellElement).colSpan = colspan;
-    if (rowspan > 1) (cell as HTMLTableCellElement).rowSpan = rowspan;
+    const rowspan = resolveRenderedRowspan(node);
+    if (colspan > 1) {
+      (cell as HTMLTableCellElement).colSpan = colspan;
+    }
+    if (rowspan > 1) {
+      (cell as HTMLTableCellElement).rowSpan = rowspan;
+    }
 
     this.dom = cell;
     this.contentDOM = cell;
@@ -97,15 +320,25 @@ export class TableCellNodeView {
   update(node: PMNode): boolean {
     const isHeader = (node.type.spec as { tableRole?: string }).tableRole === "header_cell";
     const expectedTag = isHeader ? "TH" : "TD";
-    if (this.dom.tagName !== expectedTag) return false;
+    if (this.dom.tagName !== expectedTag) {
+      return false;
+    }
 
     const colspan = resolveRenderedColspan(node);
-    const rowspan = node.attrs.rowspan as number;
+    const rowspan = resolveRenderedRowspan(node);
     const cell = this.dom as HTMLTableCellElement;
     cell.colSpan = colspan > 1 ? colspan : 1;
     cell.rowSpan = rowspan > 1 ? rowspan : 1;
+    cell.style.display = "";
+    cell.removeAttribute("aria-hidden");
+    cell.removeAttribute("data-vertical-merge-hidden");
+    requestTableLayoutSync(this.dom);
     return true;
   }
+
+  ignoreMutation(record: MutationRecord): boolean {
+    return record.type === "attributes" && record.target === this.dom;
+  }
 }
 
 /**

package/src/ui-tailwind/theme/editor-theme.css

@@ -6,7 +6,7 @@
  * individual variables in your own stylesheet for custom themes.
  *
  * Usage:
- *   @import "@docx-react-component/ui-tailwind/theme/editor-theme.css";
+ *   @import "@beyondwork/docx-react-component/ui-tailwind/theme/editor-theme.css";
  *
  * Custom theme:
  *   .my-brand { --color-accent: #8b5cf6; }