@jackuait/blok 0.10.0-beta.6 → 0.10.0-beta.7

package/src/tools/table/table-core.ts

@@ -1,18 +1,17 @@
 import { twMerge } from '../../components/utils/tw';
 
 import { CELL_BLOCKS_ATTR } from './table-cell-blocks';
+import type { TableModel } from './table-model';
 import type { LegacyCellContent } from './types';
 
 export const ROW_ATTR = 'data-blok-table-row';
 export const CELL_ATTR = 'data-blok-table-cell';
+export const CELL_ROW_ATTR = 'data-blok-table-cell-row';
+export const CELL_COL_ATTR = 'data-blok-table-cell-col';
 
 export const BORDER_WIDTH = 1;
 const BORDER_STYLE = `${BORDER_WIDTH}px solid var(--blok-table-border)`;
 
-const ROW_CLASSES = [
-  'flex',
-];
-
 const CELL_CLASSES = [
   'py-1',
   'px-2',
@@ -39,6 +38,10 @@ interface TableGridOptions {
 /**
  * Manages the table grid DOM structure.
  * Creates, deletes, moves, and queries rows, columns, and cells.
+ *
+ * Uses native HTML `<table>` elements with `<colgroup>/<col>` for widths,
+ * `<tbody>/<tr>/<td>` for rows/cells. This enables native colspan/rowspan
+ * rendering and accessible table navigation.
  */
 export class TableGrid {
   private readOnly: boolean;
@@ -48,19 +51,36 @@ export class TableGrid {
   }
 
   /**
-   * Create a grid element with specified rows and columns
+   * Create a grid element with specified rows and columns.
+   * Returns an HTML <table> with <colgroup> for widths and <tbody> for rows.
    */
-  public createGrid(rows: number, cols: number, colWidths?: number[]): HTMLDivElement {
-    const table = document.createElement('div');
+  public createGrid(rows: number, cols: number, colWidths?: number[]): HTMLTableElement {
+    const table = document.createElement('table');
 
+    table.style.tableLayout = 'fixed';
+    table.style.width = '100%';
+    table.style.borderCollapse = 'separate';
+    table.style.borderSpacing = '0px';
     table.style.borderTop = BORDER_STYLE;
     table.style.borderLeft = BORDER_STYLE;
 
     const widths = colWidths ?? equalWidths(cols);
 
-    Array.from({ length: rows }).forEach(() => {
-      table.appendChild(this.createRow(cols, widths));
+    // <colgroup> holds column widths
+    const colgroup = document.createElement('colgroup');
+
+    widths.forEach(w => {
+      colgroup.appendChild(this.createCol(w));
+    });
+    table.appendChild(colgroup);
+
+    // <tbody> holds rows
+    const tbody = document.createElement('tbody');
+
+    Array.from({ length: rows }).forEach((_, rowIndex) => {
+      tbody.appendChild(this.createRow(cols, rowIndex));
     });
+    table.appendChild(tbody);
 
     return table;
   }
@@ -73,22 +93,80 @@ export class TableGrid {
     // Content is populated by TableCellBlocks.initializeCells()
   }
 
+  /**
+   * Create a grid from a TableModel, rendering colspan/rowspan for merged cells.
+   * Covered (spanned) cells are omitted from the DOM; the origin cell gets
+   * the appropriate colSpan/rowSpan attributes.
+   */
+  public createGridFromModel(model: TableModel): HTMLTableElement {
+    const table = document.createElement('table');
+
+    table.style.tableLayout = 'fixed';
+    table.style.width = '100%';
+    table.style.borderCollapse = 'separate';
+    table.style.borderSpacing = '0px';
+    table.style.borderTop = BORDER_STYLE;
+    table.style.borderLeft = BORDER_STYLE;
+
+    // <colgroup>
+    const colgroup = document.createElement('colgroup');
+    const widths = model.colWidths ?? equalWidths(model.cols);
+
+    widths.forEach(w => colgroup.appendChild(this.createCol(w)));
+    table.appendChild(colgroup);
+
+    // <tbody>
+    const tbody = document.createElement('tbody');
+
+    Array.from({ length: model.rows }).forEach((_, r) => {
+      const row = document.createElement('tr');
+
+      row.setAttribute(ROW_ATTR, '');
+
+      Array.from({ length: model.cols }).forEach((__, c) => {
+        if (model.isSpannedCell(r, c)) {
+          return;
+        }
+
+        const cell = this.createCell(r, c) as HTMLTableCellElement;
+        const span = model.getCellSpan(r, c);
+
+        if (span.colspan > 1) {
+          cell.colSpan = span.colspan;
+        }
+        if (span.rowspan > 1) {
+          cell.rowSpan = span.rowspan;
+        }
+
+        row.appendChild(cell);
+      });
+
+      tbody.appendChild(row);
+    });
+
+    table.appendChild(tbody);
+
+    return table;
+  }
+
   /**
    * Add a row. If index is provided, inserts before that row.
    * Otherwise appends at the end.
    */
   public addRow(table: HTMLElement, index?: number): HTMLElement {
     const cols = this.getColumnCount(table);
-    const rawWidths = this.getRawCellWidths(table);
-    const row = this.createRow(cols, rawWidths);
-    const rows = table.querySelectorAll(`[${ROW_ATTR}]`);
+    const row = this.createRow(cols);
+    const tbody = table.querySelector('tbody') ?? table;
+    const rows = tbody.querySelectorAll(`[${ROW_ATTR}]`);
 
     if (index !== undefined && index < rows.length) {
-      table.insertBefore(row, rows[index]);
+      tbody.insertBefore(row, rows[index]);
     } else {
-      table.appendChild(row);
+      tbody.appendChild(row);
     }
 
+    this.reindexCoordinates(table);
+
     return row;
   }
 
@@ -101,80 +179,67 @@ export class TableGrid {
     if (index < rows.length) {
       rows[index].remove();
     }
+
+    this.reindexCoordinates(table);
   }
 
   /**
    * Add a column. If index is provided, inserts before that column.
    * Otherwise appends at the end.
    *
-   * When colWidths (pixel widths) are provided, existing columns are set to
-   * those widths and the new column is added in px mode. This prevents
-   * existing columns from shrinking when the table is in percent mode.
+   * When colWidths (pixel widths) are provided, existing <col> elements are set to
+   * those widths and the new column is added in px mode.
    */
   public addColumn(table: HTMLElement, index?: number, colWidths?: number[], newColWidth?: number): boolean {
-    const rows = table.querySelectorAll(`[${ROW_ATTR}]`);
-    const oldColCount = this.getColumnCount(table);
+    const colgroup = table.querySelector('colgroup');
+    const cols = colgroup ? Array.from(colgroup.querySelectorAll('col')) : [];
+    const oldColCount = cols.length;
     const hasValidColWidths = colWidths !== undefined && colWidths.length === oldColCount;
     const usePx = hasValidColWidths || this.detectWidthUnit(table) === 'px';
 
-    if (hasValidColWidths) {
-      this.convertToPixelWidths(rows, colWidths);
+    if (hasValidColWidths && colgroup) {
+      this.applyWidthsToCols(colgroup, colWidths);
     }
 
     if (usePx) {
-      this.addColumnPx(rows, oldColCount, index, newColWidth);
-
-      return true;
+      this.addColumnPx(table, oldColCount, index, newColWidth);
+    } else {
+      this.addColumnPercent(table, oldColCount, index);
     }
 
-    this.addColumnPercent(rows, oldColCount, index);
+    this.reindexCoordinates(table);
 
     return true;
   }
 
   /**
-   * Convert all cells in each row to the given pixel widths
+   * Apply pixel widths to existing <col> elements
    */
-  private convertToPixelWidths(rows: NodeListOf<Element>, colWidths: number[]): void {
-    rows.forEach(row => {
-      const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
-
-      cells.forEach((node, i) => {
-        if (i < colWidths.length) {
-          const el = node as HTMLElement;
+  private applyWidthsToCols(colgroup: Element, colWidths: number[]): void {
+    const cols = Array.from(colgroup.querySelectorAll('col')) as HTMLElement[];
 
-          el.style.width = `${colWidths[i]}px`;
-        }
-      });
+    colWidths.forEach((w, i) => {
+      if (i < cols.length) {
+        cols[i].style.width = `${w}px`;
+      }
     });
   }
 
   /**
    * Add column in px mode: keep existing widths, add new column at given width or half the average
    */
-  private addColumnPx(rows: NodeListOf<Element>, oldColCount: number, index?: number, newColWidth?: number): void {
-    const computedWidth = newColWidth ?? this.computeHalfAvgPxWidth(rows, oldColCount);
-
-    rows.forEach(row => {
-      const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
-      const isAppend = index === undefined || index >= cells.length;
-      const cell = this.createCell(`${computedWidth}px`);
+  private addColumnPx(table: HTMLElement, oldColCount: number, index?: number, newColWidth?: number): void {
+    const computedWidth = newColWidth ?? this.computeHalfAvgWidth(table, oldColCount);
+    const widthStr = `${computedWidth}px`;
 
-      if (!isAppend) {
-        row.insertBefore(cell, cells[index]);
-
-        return;
-      }
-
-      row.appendChild(cell);
-    });
+    this.insertColumn(table, index, widthStr);
   }
 
-  private computeHalfAvgPxWidth(rows: NodeListOf<Element>, oldColCount: number): number {
-    const firstRow = rows[0];
-    const firstRowCells = firstRow?.querySelectorAll(`[${CELL_ATTR}]`);
-    const totalWidth = Array.from(firstRowCells ?? []).reduce(
-      (sum, node) => sum + (parseFloat((node as HTMLElement).style.width) || 0),
+  private computeHalfAvgWidth(table: HTMLElement, oldColCount: number): number {
+    const colgroup = table.querySelector('colgroup');
+    const cols = colgroup ? Array.from(colgroup.querySelectorAll('col')) : [];
+    const totalWidth = cols.reduce(
+      (sum, col) => sum + (parseFloat((col as HTMLElement).style.width) || 0),
       0
     );
 
@@ -186,33 +251,62 @@ export class TableGrid {
   /**
    * Add column in % mode: shrink existing columns slightly and add new column at half the average width
    */
-  private addColumnPercent(rows: NodeListOf<Element>, oldColCount: number, index?: number): void {
+  private addColumnPercent(table: HTMLElement, oldColCount: number, index?: number): void {
     const halfColFraction = 0.5 / oldColCount;
     const scaleFactor = 1 - halfColFraction;
 
-    rows.forEach(row => {
-      const existingCells = row.querySelectorAll(`[${CELL_ATTR}]`);
+    // Shrink existing <col> widths
+    const colgroup = table.querySelector('colgroup');
+    const existingCols = colgroup ? Array.from(colgroup.querySelectorAll('col')) : [];
 
-      existingCells.forEach(cell => {
-        const el = cell as HTMLElement;
-        const oldWidth = parseFloat(el.style.width) || (100 / oldColCount);
-        const newWidth = Math.round(oldWidth * scaleFactor * 100) / 100;
+    existingCols.forEach(col => {
+      const el = col as HTMLElement;
+      const oldWidth = parseFloat(el.style.width) || (100 / oldColCount);
+      const newWidth = Math.round(oldWidth * scaleFactor * 100) / 100;
 
-        el.style.width = `${newWidth}%`;
-      });
+      el.style.width = `${newWidth}%`;
+    });
+
+    const newColWidth = Math.round((100 / oldColCount / 2) * 100) / 100;
+
+    this.insertColumn(table, index, `${newColWidth}%`);
+  }
+
+  /**
+   * Insert a <col> and a <td> per row at the given index
+   */
+  private insertColumn(table: HTMLElement, index: number | undefined, widthStr: string): void {
+    // Insert <col>
+    const colgroup = table.querySelector('colgroup');
+
+    if (colgroup) {
+      const col = document.createElement('col');
+
+      col.style.width = widthStr;
+
+      const existingCols = colgroup.querySelectorAll('col');
+      const isAppend = index === undefined || index >= existingCols.length;
 
-      const newColWidth = Math.round((100 / oldColCount / 2) * 100) / 100;
+      if (!isAppend) {
+        colgroup.insertBefore(col, existingCols[index]);
+      } else {
+        colgroup.appendChild(col);
+      }
+    }
+
+    // Insert <td> in each row
+    const rows = table.querySelectorAll(`[${ROW_ATTR}]`);
+
+    rows.forEach(row => {
       const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
       const isAppend = index === undefined || index >= cells.length;
-      const cell = this.createCell(`${newColWidth}%`);
+      const cell = this.createCell();
 
       if (!isAppend) {
         row.insertBefore(cell, cells[index]);
-
-        return;
+      } else {
+        row.appendChild(cell);
       }
-
-      row.appendChild(cell);
     });
   }
 
@@ -220,6 +314,18 @@ export class TableGrid {
    * Delete a column at index
    */
   public deleteColumn(table: HTMLElement, index: number): void {
+    // Remove <col>
+    const colgroup = table.querySelector('colgroup');
+
+    if (colgroup) {
+      const cols = colgroup.querySelectorAll('col');
+
+      if (index < cols.length) {
+        cols[index].remove();
+      }
+    }
+
+    // Remove <td> per row
     const rows = table.querySelectorAll(`[${ROW_ATTR}]`);
 
     rows.forEach(row => {
@@ -231,6 +337,8 @@ export class TableGrid {
 
       cells[index].remove();
     });
+
+    this.reindexCoordinates(table);
   }
 
   /**
@@ -242,7 +350,8 @@ export class TableGrid {
       return;
     }
 
-    const rows = Array.from(table.querySelectorAll(`[${ROW_ATTR}]`));
+    const tbody = table.querySelector('tbody') ?? table;
+    const rows = Array.from(tbody.querySelectorAll(`[${ROW_ATTR}]`));
 
     if (fromIndex >= rows.length || toIndex >= rows.length) {
       return;
@@ -252,24 +361,29 @@ export class TableGrid {
 
     row.remove();
 
-    const updatedRows = Array.from(table.querySelectorAll(`[${ROW_ATTR}]`));
+    const updatedRows = Array.from(tbody.querySelectorAll(`[${ROW_ATTR}]`));
 
     if (toIndex >= updatedRows.length) {
-      table.appendChild(row);
+      tbody.appendChild(row);
     } else {
-      table.insertBefore(row, updatedRows[toIndex]);
+      tbody.insertBefore(row, updatedRows[toIndex]);
     }
+
+    this.reindexCoordinates(table);
   }
 
   /**
    * Move a column from one index to another.
-   * Reorders cells across all rows.
+   * Reorders <col> elements and cells across all rows.
    */
   public moveColumn(table: HTMLElement, fromIndex: number, toIndex: number): void {
     if (fromIndex === toIndex) {
       return;
     }
 
+    this.reorderColElement(table, fromIndex, toIndex);
+
+    // Move cells in each row
     const rows = table.querySelectorAll(`[${ROW_ATTR}]`);
 
     rows.forEach(row => {
@@ -291,6 +405,26 @@ export class TableGrid {
         row.insertBefore(cell, updatedCells[toIndex]);
       }
     });
+
+    this.reindexCoordinates(table);
+  }
+
+  /**
+   * Reindex coordinate attributes on all cells after structural changes.
+   * Sets data-blok-table-cell-row and data-blok-table-cell-col to match
+   * each cell's current physical position.
+   */
+  public reindexCoordinates(table: HTMLElement): void {
+    const rows = table.querySelectorAll(`[${ROW_ATTR}]`);
+
+    rows.forEach((row, r) => {
+      const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
+
+      cells.forEach((cell, c) => {
+        cell.setAttribute(CELL_ROW_ATTR, String(r));
+        cell.setAttribute(CELL_COL_ATTR, String(c));
+      });
+    });
   }
 
   /**
@@ -301,9 +435,16 @@ export class TableGrid {
   }
 
   /**
-   * Get number of columns (from first row)
+   * Get number of columns (from colgroup)
    */
   public getColumnCount(table: HTMLElement): number {
+    const colgroup = table.querySelector('colgroup');
+
+    if (colgroup) {
+      return colgroup.querySelectorAll('col').length;
+    }
+
+    // Fallback: count cells in first row
     const firstRow = table.querySelector(`[${ROW_ATTR}]`);
 
     if (!firstRow) {
@@ -314,9 +455,21 @@ export class TableGrid {
   }
 
   /**
-   * Get a specific cell element
+   * Get a specific cell element.
+   * Tries coordinate-based lookup first (works with merged cells),
+   * then falls back to index-based lookup for backwards compatibility.
    */
   public getCell(table: HTMLElement, row: number, col: number): HTMLElement | null {
+    // Try coordinate-based lookup first (works with merged cells)
+    const coordCell = table.querySelector<HTMLElement>(
+      `[${CELL_ROW_ATTR}="${row}"][${CELL_COL_ATTR}="${col}"]`
+    );
+
+    if (coordCell) {
+      return coordCell;
+    }
+
+    // Fallback to index-based lookup (for backwards compatibility)
     const rows = table.querySelectorAll(`[${ROW_ATTR}]`);
 
     if (row >= rows.length) {
@@ -333,20 +486,20 @@ export class TableGrid {
   }
 
   /**
-   * Read column widths from the DOM
+   * Read column widths from <col> elements
    */
   public getColWidths(table: HTMLElement): number[] {
-    const firstRow = table.querySelector(`[${ROW_ATTR}]`);
+    const colgroup = table.querySelector('colgroup');
 
-    if (!firstRow) {
+    if (!colgroup) {
       return [];
     }
 
-    const cells = firstRow.querySelectorAll(`[${CELL_ATTR}]`);
+    const cols = colgroup.querySelectorAll('col');
     const widths: number[] = [];
 
-    cells.forEach(cell => {
-      const w = parseFloat((cell as HTMLElement).style.width);
+    cols.forEach(col => {
+      const w = parseFloat((col as HTMLElement).style.width);
 
       widths.push(isNaN(w) ? 0 : w);
     });
@@ -355,77 +508,132 @@ export class TableGrid {
   }
 
   /**
-   * Detect whether cells use 'px' or '%' widths
+   * Get the <colgroup> element from the table
+   */
+  public getColgroup(table: HTMLElement): HTMLElement | null {
+    return table.querySelector('colgroup');
+  }
+
+  /**
+   * Apply widths to <col> elements
+   */
+  public applyColWidths(table: HTMLElement, widths: number[]): void {
+    const colgroup = table.querySelector('colgroup');
+
+    if (!colgroup) {
+      return;
+    }
+
+    const cols = Array.from(colgroup.querySelectorAll('col')) as HTMLElement[];
+
+    widths.forEach((w, i) => {
+      if (i < cols.length) {
+        cols[i].style.width = `${w}px`;
+      }
+    });
+  }
+
+  /**
+   * Reorder a <col> element within the <colgroup>
+   */
+  private reorderColElement(table: HTMLElement, fromIndex: number, toIndex: number): void {
+    const colgroup = table.querySelector('colgroup');
+
+    if (!colgroup) {
+      return;
+    }
+
+    const cols = Array.from(colgroup.querySelectorAll('col'));
+
+    if (fromIndex >= cols.length || toIndex >= cols.length) {
+      return;
+    }
+
+    const col = cols[fromIndex];
+
+    col.remove();
+
+    const updatedCols = Array.from(colgroup.querySelectorAll('col'));
+
+    if (toIndex >= updatedCols.length) {
+      colgroup.appendChild(col);
+    } else {
+      colgroup.insertBefore(col, updatedCols[toIndex]);
+    }
+  }
+
+  /**
+   * Detect whether columns use 'px' or '%' widths
    */
   private detectWidthUnit(table: HTMLElement): string {
-    const firstRow = table.querySelector(`[${ROW_ATTR}]`);
+    const colgroup = table.querySelector('colgroup');
 
-    if (!firstRow) {
+    if (!colgroup) {
       return '%';
     }
 
-    const firstCell: HTMLElement | null = firstRow.querySelector(`[${CELL_ATTR}]`);
+    const firstCol: HTMLElement | null = colgroup.querySelector('col');
 
-    if (!firstCell) {
+    if (!firstCol) {
       return '%';
     }
 
-    return firstCell.style.width.endsWith('px') ? 'px' : '%';
+    return firstCol.style.width.endsWith('px') ? 'px' : '%';
   }
 
   /**
-   * Read raw CSS width strings (e.g. "200px", "33.33%") from first row cells
+   * Create a <col> element with a width
    */
-  private getRawCellWidths(table: HTMLElement): string[] {
-    const firstRow = table.querySelector(`[${ROW_ATTR}]`);
-
-    if (!firstRow) {
-      return [];
-    }
+  private createCol(width: number | string): HTMLElement {
+    const col = document.createElement('col');
 
-    const cells = firstRow.querySelectorAll(`[${CELL_ATTR}]`);
+    col.style.width = typeof width === 'string' ? width : `${width}%`;
 
-    return Array.from(cells).map(cell => (cell as HTMLElement).style.width);
+    return col;
   }
 
   /**
-   * Create a single row with N cells
+   * Create a single <tr> row with N cells
    */
-  private createRow(cols: number, colWidths: (number | string)[]): HTMLElement {
-    const row = document.createElement('div');
+  private createRow(cols: number, rowIndex?: number): HTMLElement {
+    const row = document.createElement('tr');
 
-    row.className = twMerge(ROW_CLASSES);
     row.setAttribute(ROW_ATTR, '');
 
-    Array.from({ length: cols }).forEach((_, i) => {
-      row.appendChild(this.createCell(colWidths[i]));
+    Array.from({ length: cols }).forEach((_, colIndex) => {
+      row.appendChild(this.createCell(rowIndex, rowIndex !== undefined ? colIndex : undefined));
     });
 
     return row;
   }
 
   /**
-   * Create a single cell
+   * Create a single <td> cell.
+   * When rowIndex and colIndex are provided, sets coordinate data attributes.
    */
-  private createCell(width?: number | string): HTMLElement {
-    const cell = document.createElement('div');
+  private createCell(rowIndex?: number, colIndex?: number): HTMLElement {
+    const cell = document.createElement('td');
 
     cell.className = twMerge(CELL_CLASSES);
     cell.style.borderRight = BORDER_STYLE;
     cell.style.borderBottom = BORDER_STYLE;
-    cell.style.flexShrink = '0';
     cell.style.overflow = 'hidden';
     cell.style.overflowWrap = 'break-word';
-
-    if (width !== undefined) {
-      cell.style.width = typeof width === 'string' ? width : `${width}%`;
-    }
+    cell.style.height = '0';
 
     cell.setAttribute(CELL_ATTR, '');
 
+    if (rowIndex !== undefined && colIndex !== undefined) {
+      cell.setAttribute(CELL_ROW_ATTR, String(rowIndex));
+      cell.setAttribute(CELL_COL_ATTR, String(colIndex));
+    }
+
     const blocksContainer = document.createElement('div');
 
     blocksContainer.setAttribute(CELL_BLOCKS_ATTR, '');
+    blocksContainer.style.display = 'flex';
+    blocksContainer.style.flexDirection = 'column';
+    blocksContainer.style.minHeight = '100%';
     cell.appendChild(blocksContainer);
 
     return cell;