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

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

@@ -1,6 +1,18 @@
-import type { CellContent, LegacyCellContent, TableData } from './types';
+import type { CellContent, CellPlacement, LegacyCellContent, TableData } from './types';
 import { isCellWithBlocks } from './types';
 
+export interface SelectionRect {
+  minRow: number;
+  maxRow: number;
+  minCol: number;
+  maxCol: number;
+}
+
+export interface MergeResult {
+  /** Block IDs that were moved from absorbed cells into the origin cell. */
+  blocksToRelocate: string[];
+}
+
 /**
  * Validate that a string is a safe CSS color value.
  *
@@ -120,6 +132,22 @@ export class TableModel {
             cell.textColor = c.textColor;
           }
 
+          if (c.placement !== undefined) {
+            cell.placement = c.placement;
+          }
+
+          if (c.colspan !== undefined && c.colspan > 1) {
+            cell.colspan = c.colspan;
+          }
+
+          if (c.rowspan !== undefined && c.rowspan > 1) {
+            cell.rowspan = c.rowspan;
+          }
+
+          if (c.mergedInto !== undefined) {
+            cell.mergedInto = [...c.mergedInto];
+          }
+
           return cell;
         })
       ),
@@ -269,6 +297,25 @@ export class TableModel {
     return this.contentGrid[row][col].textColor;
   }
 
+  setCellPlacement(row: number, col: number, placement: CellPlacement | undefined): void {
+    if (!this.isInBounds(row, col)) {
+      return;
+    }
+    if (placement === undefined) {
+      delete this.contentGrid[row][col].placement;
+    } else {
+      this.contentGrid[row][col].placement = placement;
+    }
+  }
+
+  getCellPlacement(row: number, col: number): CellPlacement | undefined {
+    if (!this.isInBounds(row, col)) {
+      return undefined;
+    }
+
+    return this.contentGrid[row][col].placement;
+  }
+
   // ─── Row operations ─────────────────────────────────────────────
 
   /**
@@ -283,6 +330,8 @@ export class TableModel {
     const newRow: CellContent[] = Array.from({ length: colCount }, () => ({ blocks: [] }));
 
     this.contentGrid.splice(clampedIndex, 0, newRow);
+    this.shiftMergedIntoRows(clampedIndex, 1);
+    this.expandSpansForInsertedRow(clampedIndex);
     this.rebuildBlockCellMap();
 
     return {
@@ -300,6 +349,8 @@ export class TableModel {
       return { type: 'delete-row', index, blocksToDelete: [] };
     }
 
+    this.contractSpansForDeletedRow(index);
+
     const blocksToDelete = this.collectBlocksInRow(index);
 
     this.contentGrid.splice(index, 1);
@@ -308,6 +359,7 @@ export class TableModel {
       this.blockCellMap.delete(id);
     }
 
+    this.shiftMergedIntoRows(index, -1);
     this.rebuildBlockCellMap();
 
     return { type: 'delete-row', index, blocksToDelete };
@@ -321,9 +373,14 @@ export class TableModel {
       return { type: 'move-row', index: from, toIndex: to };
     }
 
+    if (this.isRowInvolvedInMerge(from)) {
+      return { type: 'move-row', index: from, toIndex: to };
+    }
+
     const [moved] = this.contentGrid.splice(from, 1);
 
     this.contentGrid.splice(to, 0, moved);
+    this.rebuildMergedIntoRowCoordinates(from, to);
     this.rebuildBlockCellMap();
 
     return { type: 'move-row', index: from, toIndex: to };
@@ -356,6 +413,8 @@ export class TableModel {
       this.colWidthsValue.splice(clampedIndex, 0, insertWidth);
     }
 
+    this.shiftMergedIntoCols(clampedIndex, 1);
+    this.expandSpansForInsertedCol(clampedIndex);
     this.rebuildBlockCellMap();
 
     return {
@@ -373,6 +432,8 @@ export class TableModel {
       return { type: 'delete-column', index, blocksToDelete: [] };
     }
 
+    this.contractSpansForDeletedCol(index);
+
     const blocksToDelete = this.collectBlocksInColumn(index);
 
     for (const row of this.contentGrid) {
@@ -391,6 +452,7 @@ export class TableModel {
       this.colWidthsValue = undefined;
     }
 
+    this.shiftMergedIntoCols(index, -1);
     this.rebuildBlockCellMap();
 
     return { type: 'delete-column', index, blocksToDelete };
@@ -404,6 +466,10 @@ export class TableModel {
       return { type: 'move-column', index: from, toIndex: to };
     }
 
+    if (this.isColInvolvedInMerge(from)) {
+      return { type: 'move-column', index: from, toIndex: to };
+    }
+
     for (const row of this.contentGrid) {
       const [moved] = row.splice(from, 1);
 
@@ -416,6 +482,7 @@ export class TableModel {
       this.colWidthsValue.splice(to, 0, movedWidth);
     }
 
+    this.rebuildMergedIntoColCoordinates(from, to);
     this.rebuildBlockCellMap();
 
     return { type: 'move-column', index: from, toIndex: to };
@@ -438,6 +505,247 @@ export class TableModel {
     this.rebuildBlockCellMap();
   }
 
+  // ─── Merge / Split ──────────────────────────────────────────────
+
+  /**
+   * Check whether the given rectangle of cells can be merged.
+   * Returns true when the selection contains at least 2 grid positions,
+   * is fully in-bounds, and no existing merged cell partially overlaps
+   * the selection boundary.
+   */
+  canMergeCells(rect: SelectionRect): boolean {
+    const { minRow, maxRow, minCol, maxCol } = rect;
+
+    // Must span at least 2 cells
+    if (minRow === maxRow && minCol === maxCol) {
+      return false;
+    }
+
+    // Bounds check
+    if (minRow < 0 || maxRow >= this.rows || minCol < 0 || maxCol >= this.cols) {
+      return false;
+    }
+
+    // Check that no merged cell partially overlaps the selection boundary.
+    // A merged cell is allowed if it's fully inside the selection.
+    return this.contentGrid.slice(minRow, maxRow + 1).every((row, ri) => {
+      const r = minRow + ri;
+
+      return row.slice(minCol, maxCol + 1).every((cell, ci) => {
+        const c = minCol + ci;
+
+        // Check origin cells whose span extends beyond the selection
+        const colspan = cell.colspan ?? 1;
+        const rowspan = cell.rowspan ?? 1;
+
+        if (colspan > 1 || rowspan > 1) {
+          if (r + rowspan - 1 > maxRow || c + colspan - 1 > maxCol) {
+            return false;
+          }
+        }
+
+        // Check spanned cells whose origin is outside the selection
+        if (cell.mergedInto !== undefined) {
+          const [originRow, originCol] = cell.mergedInto;
+
+          if (originRow < minRow || originCol < minCol) {
+            return false;
+          }
+        }
+
+        return true;
+      });
+    });
+  }
+
+  /**
+   * Merge cells in the given rectangle. The top-left cell becomes the
+   * origin with colspan/rowspan set. All other cells in the rectangle
+   * become spanned (mergedInto pointing to origin, blocks emptied).
+   *
+   * Blocks from absorbed cells are concatenated into the origin cell
+   * in row-major order.
+   */
+  mergeCells(rect: SelectionRect): MergeResult {
+    const { minRow, maxRow, minCol, maxCol } = rect;
+    const result: MergeResult = { blocksToRelocate: [] };
+
+    if (!this.canMergeCells(rect)) {
+      return result;
+    }
+
+    const origin = this.contentGrid[minRow][minCol];
+
+    // First, if any cell in the selection is itself an origin of a merge,
+    // split it so we work with flat cells
+    this.contentGrid.slice(minRow, maxRow + 1).forEach((row, ri) => {
+      const r = minRow + ri;
+
+      row.slice(minCol, maxCol + 1).forEach((cell, ci) => {
+        const c = minCol + ci;
+
+        if (r === minRow && c === minCol) {
+          return;
+        }
+
+        if ((cell.colspan ?? 1) > 1 || (cell.rowspan ?? 1) > 1) {
+          this.splitCellInternal(r, c);
+        }
+      });
+    });
+
+    // Also split the origin if it was previously merged
+    if ((origin.colspan ?? 1) > 1 || (origin.rowspan ?? 1) > 1) {
+      this.splitCellInternal(minRow, minCol);
+    }
+
+    // Collect blocks from all cells in row-major order and move to origin
+    const collectedBlocks: string[] = [];
+
+    this.contentGrid.slice(minRow, maxRow + 1).forEach((_row, ri) => {
+      const r = minRow + ri;
+
+      this.contentGrid[r].slice(minCol, maxCol + 1).forEach((_cell, ci) => {
+        const c = minCol + ci;
+        const gridCell = this.contentGrid[r][c];
+
+        for (const blockId of gridCell.blocks) {
+          collectedBlocks.push(blockId);
+
+          if (r !== minRow || c !== minCol) {
+            result.blocksToRelocate.push(blockId);
+          }
+        }
+
+        // Clear non-origin cells
+        if (r !== minRow || c !== minCol) {
+          gridCell.blocks = [];
+          gridCell.mergedInto = [minRow, minCol];
+          delete gridCell.colspan;
+          delete gridCell.rowspan;
+        }
+      });
+    });
+
+    // Set origin cell
+    origin.blocks = collectedBlocks;
+    origin.colspan = maxCol - minCol + 1;
+    origin.rowspan = maxRow - minRow + 1;
+    delete origin.mergedInto;
+    // Reset placement to default (top-left) on merge
+    delete origin.placement;
+
+    // Normalize: remove colspan/rowspan if 1
+    if (origin.colspan === 1) {
+      delete origin.colspan;
+    }
+
+    if (origin.rowspan === 1) {
+      delete origin.rowspan;
+    }
+
+    this.rebuildBlockCellMap();
+
+    return result;
+  }
+
+  /**
+   * Split a merged cell at (row, col) back into individual cells.
+   * All content stays in the origin cell; freed cells become empty.
+   * No-op if the cell is not a merge origin.
+   */
+  splitCell(row: number, col: number): void {
+    if (!this.isInBounds(row, col)) {
+      return;
+    }
+
+    const cell = this.contentGrid[row][col];
+
+    if ((cell.colspan ?? 1) <= 1 && (cell.rowspan ?? 1) <= 1) {
+      return;
+    }
+
+    this.splitCellInternal(row, col);
+    this.rebuildBlockCellMap();
+  }
+
+  /**
+   * Returns true if the cell at (row, col) is the origin of a merge
+   * (has colspan > 1 or rowspan > 1).
+   */
+  isMergedCell(row: number, col: number): boolean {
+    if (!this.isInBounds(row, col)) {
+      return false;
+    }
+
+    const cell = this.contentGrid[row][col];
+
+    return (cell.colspan ?? 1) > 1 || (cell.rowspan ?? 1) > 1;
+  }
+
+  /**
+   * Returns true if the cell at (row, col) is covered by another cell's merge
+   * (has mergedInto set).
+   */
+  isSpannedCell(row: number, col: number): boolean {
+    if (!this.isInBounds(row, col)) {
+      return false;
+    }
+
+    return this.contentGrid[row][col].mergedInto !== undefined;
+  }
+
+  /**
+   * Get the colspan and rowspan of the cell at (row, col).
+   * Returns {colspan: 1, rowspan: 1} for regular/spanned cells.
+   */
+  getCellSpan(row: number, col: number): { colspan: number; rowspan: number } {
+    if (!this.isInBounds(row, col)) {
+      return { colspan: 1, rowspan: 1 };
+    }
+
+    const cell = this.contentGrid[row][col];
+
+    return {
+      colspan: cell.colspan ?? 1,
+      rowspan: cell.rowspan ?? 1,
+    };
+  }
+
+  /**
+   * Internal split that doesn't rebuild the block cell map.
+   * Used by mergeCells to flatten existing merges before re-merging.
+   */
+  private splitCellInternal(row: number, col: number): void {
+    const cell = this.contentGrid[row][col];
+    const colspan = cell.colspan ?? 1;
+    const rowspan = cell.rowspan ?? 1;
+
+    // Clear spanned cells
+    this.contentGrid.slice(row, Math.min(row + rowspan, this.rows)).forEach((_gridRow, ri) => {
+      const r = row + ri;
+
+      this.contentGrid[r].slice(col, Math.min(col + colspan, this.cols)).forEach((_spanned, ci) => {
+        const c = col + ci;
+
+        if (r === row && c === col) {
+          return;
+        }
+
+        const spanned = this.contentGrid[r][c];
+
+        delete spanned.mergedInto;
+        spanned.blocks = [];
+        delete spanned.placement;
+      });
+    });
+
+    // Reset origin
+    delete cell.colspan;
+    delete cell.rowspan;
+    delete cell.placement;
+  }
+
   // ─── Metadata setters ──────────────────────────────────────────
 
   setWithHeadings(value: boolean): void {
@@ -526,6 +834,90 @@ export class TableModel {
       });
     });
 
+    // Invariant 5: merge spans in bounds
+    this.contentGrid.forEach((row, r) => {
+      row.forEach((cell, c) => {
+        const colspan = cell.colspan ?? 1;
+        const rowspan = cell.rowspan ?? 1;
+
+        if (colspan > 1 || rowspan > 1) {
+          if (r + rowspan > this.contentGrid.length || c + colspan > (this.contentGrid[0]?.length ?? 0)) {
+            throw new Error(
+              `Invariant violation: origin [${r},${c}] span extends beyond grid bounds (colspan=${colspan}, rowspan=${rowspan}, rows=${this.contentGrid.length}, cols=${this.contentGrid[0]?.length ?? 0})`
+            );
+          }
+        }
+      });
+    });
+
+    // Invariant 6: mergedInto references are valid
+    this.contentGrid.forEach((row, r) => {
+      row.forEach((cell, c) => {
+        if (cell.mergedInto === undefined) {
+          return;
+        }
+
+        const [originRow, originCol] = cell.mergedInto;
+
+        // Must be in bounds
+        if (originRow < 0 || originRow >= this.contentGrid.length ||
+            originCol < 0 || originCol >= (this.contentGrid[0]?.length ?? 0)) {
+          throw new Error(
+            `Invariant violation: mergedInto at [${r},${c}] points to out-of-bounds [${originRow},${originCol}]`
+          );
+        }
+
+        // Must point to a merge origin
+        const origin = this.contentGrid[originRow][originCol];
+        const oColspan = origin.colspan ?? 1;
+        const oRowspan = origin.rowspan ?? 1;
+
+        if (oColspan <= 1 && oRowspan <= 1) {
+          throw new Error(
+            `Invariant violation: mergedInto at [${r},${c}] points to [${originRow},${originCol}] which is not a merge origin`
+          );
+        }
+
+        // Must be within the origin's span
+        if (r < originRow || r >= originRow + oRowspan ||
+            c < originCol || c >= originCol + oColspan) {
+          throw new Error(
+            `Invariant violation: mergedInto at [${r},${c}] is outside the span of origin [${originRow},${originCol}] (colspan=${oColspan}, rowspan=${oRowspan})`
+          );
+        }
+      });
+    });
+
+    // Invariant 7: every cell within an origin's span has mergedInto (except the origin itself)
+    this.contentGrid.forEach((row, r) => {
+      row.forEach((cell, c) => {
+        const colspan = cell.colspan ?? 1;
+        const rowspan = cell.rowspan ?? 1;
+
+        if (colspan <= 1 && rowspan <= 1) {
+          return;
+        }
+
+        this.contentGrid.slice(r, r + rowspan).forEach((spanRow, dri) => {
+          const dr = r + dri;
+
+          spanRow.slice(c, c + colspan).forEach((spanned, dci) => {
+            const dc = c + dci;
+
+            if (dr === r && dc === c) {
+              return;
+            }
+
+            if (!spanned?.mergedInto) {
+              throw new Error(
+                `Invariant violation: cell [${dr},${dc}] is within span of origin [${r},${c}] but has no mergedInto`
+              );
+            }
+          });
+        });
+      });
+    });
+
     // Check map doesn't have extra entries
     if (this.blockCellMap.size !== seenBlocks.size) {
       throw new Error(
@@ -534,6 +926,498 @@ export class TableModel {
     }
   }
 
+  // ─── Merge-aware structural helpers ─────────────────────────────
+
+  /**
+   * Shift mergedInto row coordinates for all cells where mergedInto[0] >= startRow.
+   * Called after inserting (delta=1) or deleting (delta=-1) a row.
+   */
+  private shiftMergedIntoRows(startRow: number, delta: number): void {
+    this.contentGrid.forEach((_row, r) => {
+      this.contentGrid[r].forEach((_cell, c) => {
+        const gridCell = this.contentGrid[r][c];
+
+        if (gridCell.mergedInto !== undefined && gridCell.mergedInto[0] >= startRow) {
+          gridCell.mergedInto = [gridCell.mergedInto[0] + delta, gridCell.mergedInto[1]];
+        }
+      });
+    });
+  }
+
+  /**
+   * Shift mergedInto col coordinates for all cells where mergedInto[1] >= startCol.
+   * Called after inserting (delta=1) or deleting (delta=-1) a column.
+   */
+  private shiftMergedIntoCols(startCol: number, delta: number): void {
+    this.contentGrid.forEach((_row, r) => {
+      this.contentGrid[r].forEach((_cell, c) => {
+        const gridCell = this.contentGrid[r][c];
+
+        if (gridCell.mergedInto !== undefined && gridCell.mergedInto[1] >= startCol) {
+          gridCell.mergedInto = [gridCell.mergedInto[0], gridCell.mergedInto[1] + delta];
+        }
+      });
+    });
+  }
+
+  /**
+   * After inserting a row at insertedRow, find origin cells above whose rowspan
+   * crosses the insertion point, increment their rowspan, and mark new cells as covered.
+   */
+  private expandSpansForInsertedRow(insertedRow: number): void {
+    this.contentGrid.forEach((_row, r) => {
+      this.contentGrid[r].forEach((_cell, c) => {
+        const gridCell = this.contentGrid[r][c];
+        const rowspan = gridCell.rowspan ?? 1;
+        const colspan = gridCell.colspan ?? 1;
+
+        if (rowspan <= 1 && colspan <= 1) {
+          return;
+        }
+
+        if (r >= insertedRow || r + rowspan <= insertedRow) {
+          return;
+        }
+
+        // Increment rowspan to absorb the new row
+        gridCell.rowspan = rowspan + 1;
+
+        // Mark the new row's cells within the colspan as covered
+        this.markInsertedRowCells(insertedRow, r, c, colspan);
+      });
+    });
+  }
+
+  private markInsertedRowCells(insertedRow: number, originRow: number, originCol: number, colspan: number): void {
+    this.contentGrid[insertedRow].slice(originCol, originCol + colspan).forEach((_newCell, ci) => {
+      const dc = originCol + ci;
+
+      if (dc === originCol && originRow === insertedRow) {
+        return;
+      }
+      const gridCell = this.contentGrid[insertedRow][dc];
+
+      gridCell.mergedInto = [originRow, originCol];
+      gridCell.blocks = [];
+    });
+  }
+
+  /**
+   * After inserting a column at insertedCol, find origin cells to the left whose colspan
+   * crosses the insertion point, increment their colspan, and mark new cells as covered.
+   */
+  private expandSpansForInsertedCol(insertedCol: number): void {
+    this.contentGrid.forEach((_row, r) => {
+      this.contentGrid[r].forEach((_cell, c) => {
+        const gridCell = this.contentGrid[r][c];
+        const rowspan = gridCell.rowspan ?? 1;
+        const colspan = gridCell.colspan ?? 1;
+
+        if (rowspan <= 1 && colspan <= 1) {
+          return;
+        }
+
+        if (c >= insertedCol || c + colspan <= insertedCol) {
+          return;
+        }
+
+        gridCell.colspan = colspan + 1;
+
+        // Mark the new column's cells within the rowspan as covered
+        this.markInsertedColCells(insertedCol, r, c, rowspan);
+      });
+    });
+  }
+
+  private markInsertedColCells(insertedCol: number, originRow: number, originCol: number, rowspan: number): void {
+    this.contentGrid.slice(originRow, originRow + rowspan).forEach((_gridRow, ri) => {
+      const dr = originRow + ri;
+
+      if (dr === originRow && insertedCol === originCol) {
+        return;
+      }
+      const gridCell = this.contentGrid[dr][insertedCol];
+
+      gridCell.mergedInto = [originRow, originCol];
+      gridCell.blocks = [];
+    });
+  }
+
+  /**
+   * Before deleting a row, handle merge origins and covered cells in that row.
+   * - If a cell is a merge origin with rowspan > 1: transfer to the row below.
+   * - If a cell has mergedInto pointing to a different row: decrement origin's rowspan.
+   */
+  private contractSpansForDeletedRow(rowIndex: number): void {
+    const row = this.contentGrid[rowIndex];
+
+    row.forEach((_cell, c) => {
+      const gridCell = this.contentGrid[rowIndex][c];
+
+      if ((gridCell.colspan ?? 1) > 1 || (gridCell.rowspan ?? 1) > 1) {
+        this.handleOriginInDeletedRow(rowIndex, c);
+      } else if (gridCell.mergedInto !== undefined) {
+        this.handleCoveredInDeletedRow(rowIndex, c);
+      }
+    });
+  }
+
+  private handleOriginInDeletedRow(rowIndex: number, c: number): void {
+    const cell = this.contentGrid[rowIndex][c];
+    const rowspan = cell.rowspan ?? 1;
+    const colspan = cell.colspan ?? 1;
+
+    if (rowspan <= 1) {
+      return;
+    }
+
+    const newRowspan = rowspan - 1;
+    const nextRow = rowIndex + 1;
+
+    if (nextRow < this.contentGrid.length) {
+      this.transferOriginToNextRow(rowIndex, c, nextRow, rowspan, colspan, newRowspan);
+    }
+
+    delete cell.colspan;
+    delete cell.rowspan;
+  }
+
+  private transferOriginToNextRow(
+    rowIndex: number, c: number, nextRow: number,
+    rowspan: number, colspan: number, newRowspan: number
+  ): void {
+    const cell = this.contentGrid[rowIndex][c];
+    const newOrigin = this.contentGrid[nextRow][c];
+
+    newOrigin.blocks = [...cell.blocks];
+    cell.blocks = [];
+
+    delete newOrigin.mergedInto;
+
+    if (newRowspan === 1 && colspan === 1) {
+      delete newOrigin.colspan;
+      delete newOrigin.rowspan;
+      this.clearMergedIntoRefs(nextRow, rowIndex + rowspan, c, c + colspan, rowIndex, c, nextRow, c, undefined);
+
+      return;
+    }
+
+    if (newRowspan > 1) {
+      newOrigin.rowspan = newRowspan;
+    } else {
+      delete newOrigin.rowspan;
+    }
+    if (colspan > 1) {
+      newOrigin.colspan = colspan;
+    } else {
+      delete newOrigin.colspan;
+    }
+    this.clearMergedIntoRefs(nextRow, rowIndex + rowspan, c, c + colspan, rowIndex, c, nextRow, c, [nextRow, c]);
+  }
+
+  private handleCoveredInDeletedRow(rowIndex: number, c: number): void {
+    const cell = this.contentGrid[rowIndex][c];
+    const [originRow, originCol] = cell.mergedInto as [number, number];
+
+    if (originRow === rowIndex) {
+      return;
+    }
+
+    const origin = this.contentGrid[originRow]?.[originCol];
+
+    if (!origin) {
+      return;
+    }
+
+    const oRowspan = origin.rowspan ?? 1;
+    const oColspan = origin.colspan ?? 1;
+    const newRowspan = oRowspan - 1;
+
+    if (newRowspan === 1 && oColspan === 1) {
+      delete origin.colspan;
+      delete origin.rowspan;
+
+      this.clearMergedIntoRefsForDissolve(originRow, originRow + oRowspan, originCol, originCol + oColspan, originRow, originCol, rowIndex);
+    } else {
+      if (newRowspan > 1) {
+        origin.rowspan = newRowspan;
+      } else {
+        delete origin.rowspan;
+      }
+    }
+  }
+
+  private clearMergedIntoRefs(
+    startRow: number, endRow: number, startCol: number, endCol: number,
+    oldOriginRow: number, oldOriginCol: number,
+    skipRow: number, skipCol: number,
+    newRef: [number, number] | undefined
+  ): void {
+    this.contentGrid.slice(startRow, endRow).forEach((_gridRow, ri) => {
+      const dr = startRow + ri;
+
+      this.contentGrid[dr].slice(startCol, endCol).forEach((_spanned, ci) => {
+        const dc = startCol + ci;
+
+        if (dr === skipRow && dc === skipCol) {
+          return;
+        }
+
+        const spanned = this.contentGrid[dr]?.[dc];
+
+        if (spanned?.mergedInto?.[0] === oldOriginRow && spanned?.mergedInto?.[1] === oldOriginCol) {
+          if (newRef === undefined) {
+            delete spanned.mergedInto;
+          } else {
+            spanned.mergedInto = newRef;
+          }
+        }
+      });
+    });
+  }
+
+  private clearMergedIntoRefsForDissolve(
+    startRow: number, endRow: number, startCol: number, endCol: number,
+    skipOriginRow: number, skipOriginCol: number, deletedRow: number
+  ): void {
+    this.contentGrid.slice(startRow, endRow).forEach((_gridRow, ri) => {
+      const dr = startRow + ri;
+
+      if (dr === deletedRow) {
+        return;
+      }
+
+      this.contentGrid[dr].slice(startCol, endCol).forEach((_spanned, ci) => {
+        const dc = startCol + ci;
+
+        if (dr === skipOriginRow && dc === skipOriginCol) {
+          return;
+        }
+
+        const spanned = this.contentGrid[dr]?.[dc];
+
+        if (spanned?.mergedInto) {
+          delete spanned.mergedInto;
+        }
+      });
+    });
+  }
+
+  /**
+   * Before deleting a column, handle merge origins and covered cells in that column.
+   * Symmetric to contractSpansForDeletedRow.
+   */
+  private contractSpansForDeletedCol(colIndex: number): void {
+    this.contentGrid.forEach((_row, r) => {
+      const gridCell = this.contentGrid[r][colIndex];
+
+      if ((gridCell.colspan ?? 1) > 1 || (gridCell.rowspan ?? 1) > 1) {
+        this.handleOriginInDeletedCol(colIndex, r);
+      } else if (gridCell.mergedInto !== undefined) {
+        this.handleCoveredInDeletedCol(colIndex, r);
+      }
+    });
+  }
+
+  private handleOriginInDeletedCol(colIndex: number, r: number): void {
+    const cell = this.contentGrid[r][colIndex];
+    const rowspan = cell.rowspan ?? 1;
+    const colspan = cell.colspan ?? 1;
+
+    if (colspan <= 1) {
+      return;
+    }
+
+    const newColspan = colspan - 1;
+    const nextCol = colIndex + 1;
+
+    if (nextCol < (this.contentGrid[r]?.length ?? 0)) {
+      this.transferOriginToNextCol(colIndex, r, nextCol, rowspan, colspan, newColspan);
+    }
+
+    delete cell.colspan;
+    delete cell.rowspan;
+  }
+
+  private transferOriginToNextCol(
+    colIndex: number, r: number, nextCol: number,
+    rowspan: number, colspan: number, newColspan: number
+  ): void {
+    const cell = this.contentGrid[r][colIndex];
+    const newOrigin = this.contentGrid[r][nextCol];
+
+    newOrigin.blocks = [...cell.blocks];
+    cell.blocks = [];
+    delete newOrigin.mergedInto;
+
+    if (newColspan === 1 && rowspan === 1) {
+      delete newOrigin.colspan;
+      delete newOrigin.rowspan;
+      this.clearMergedIntoRefs(r, r + rowspan, nextCol, colIndex + colspan, r, colIndex, r, nextCol, undefined);
+
+      return;
+    }
+
+    if (newColspan > 1) {
+      newOrigin.colspan = newColspan;
+    } else {
+      delete newOrigin.colspan;
+    }
+    if (rowspan > 1) {
+      newOrigin.rowspan = rowspan;
+    } else {
+      delete newOrigin.rowspan;
+    }
+    this.clearMergedIntoRefs(r, r + rowspan, nextCol, colIndex + colspan, r, colIndex, r, nextCol, [r, nextCol]);
+  }
+
+  private handleCoveredInDeletedCol(colIndex: number, r: number): void {
+    const cell = this.contentGrid[r][colIndex];
+    const [originRow, originCol] = cell.mergedInto as [number, number];
+
+    if (originCol === colIndex) {
+      return;
+    }
+
+    const origin = this.contentGrid[originRow]?.[originCol];
+
+    if (!origin) {
+      return;
+    }
+
+    const oColspan = origin.colspan ?? 1;
+    const oRowspan = origin.rowspan ?? 1;
+    const newColspan = oColspan - 1;
+
+    if (newColspan === 1 && oRowspan === 1) {
+      delete origin.colspan;
+      delete origin.rowspan;
+
+      this.clearMergedIntoRefsForDissolveCol(originRow, originRow + oRowspan, originCol, originCol + oColspan, originRow, originCol, colIndex);
+    } else {
+      if (newColspan > 1) {
+        origin.colspan = newColspan;
+      } else {
+        delete origin.colspan;
+      }
+    }
+  }
+
+  private clearMergedIntoRefsForDissolveCol(
+    startRow: number, endRow: number, startCol: number, endCol: number,
+    skipOriginRow: number, skipOriginCol: number, deletedCol: number
+  ): void {
+    this.contentGrid.slice(startRow, endRow).forEach((_gridRow, ri) => {
+      const dr = startRow + ri;
+
+      this.contentGrid[dr].slice(startCol, endCol).forEach((_spanned, ci) => {
+        const dc = startCol + ci;
+
+        if (dr === skipOriginRow && dc === skipOriginCol) {
+          return;
+        }
+
+        if (dc === deletedCol) {
+          return;
+        }
+
+        const spanned = this.contentGrid[dr]?.[dc];
+
+        if (spanned?.mergedInto) {
+          delete spanned.mergedInto;
+        }
+      });
+    });
+  }
+
+  /**
+   * Check if any cell in a row is involved in a merge that extends beyond the row.
+   */
+  private isRowInvolvedInMerge(rowIndex: number): boolean {
+    const row = this.contentGrid[rowIndex];
+
+    return row.some(cell => {
+      // Origin with rowspan > 1 means it extends to other rows
+      if ((cell.rowspan ?? 1) > 1) {
+        return true;
+      }
+
+      // Covered by a merge from a different row
+      return cell.mergedInto !== undefined && cell.mergedInto[0] !== rowIndex;
+    });
+  }
+
+  /**
+   * Check if any cell in a column is involved in a merge that extends beyond the column.
+   */
+  private isColInvolvedInMerge(colIndex: number): boolean {
+    return this.contentGrid.some(row => {
+      const cell = row[colIndex];
+
+      // Origin with colspan > 1 means it extends to other columns
+      if ((cell.colspan ?? 1) > 1) {
+        return true;
+      }
+
+      // Covered by a merge from a different column
+      return cell.mergedInto !== undefined && cell.mergedInto[1] !== colIndex;
+    });
+  }
+
+  /**
+   * After a row move (splice from, splice to), rebuild mergedInto row coordinates
+   * by computing the index remapping.
+   */
+  private rebuildMergedIntoRowCoordinates(from: number, to: number): void {
+    const rowCount = this.contentGrid.length;
+    const mapping = this.buildMoveMapping(rowCount, from, to);
+
+    this.contentGrid.forEach((_row, r) => {
+      this.contentGrid[r].forEach((_cell, c) => {
+        const gridCell = this.contentGrid[r][c];
+
+        if (gridCell.mergedInto !== undefined) {
+          const oldOriginRow = gridCell.mergedInto[0];
+
+          gridCell.mergedInto = [mapping[oldOriginRow], gridCell.mergedInto[1]];
+        }
+      });
+    });
+  }
+
+  /**
+   * After a column move (splice from, splice to), rebuild mergedInto col coordinates
+   * by computing the index remapping.
+   */
+  private rebuildMergedIntoColCoordinates(from: number, to: number): void {
+    const colCount = this.cols;
+    const mapping = this.buildMoveMapping(colCount, from, to);
+
+    this.contentGrid.forEach((_row, r) => {
+      this.contentGrid[r].forEach((_cell, c) => {
+        const gridCell = this.contentGrid[r][c];
+
+        if (gridCell.mergedInto !== undefined) {
+          const oldOriginCol = gridCell.mergedInto[1];
+
+          gridCell.mergedInto = [gridCell.mergedInto[0], mapping[oldOriginCol]];
+        }
+      });
+    });
+  }
+
+  private buildMoveMapping(count: number, from: number, to: number): number[] {
+    return Array.from({ length: count }, (_, oldIdx) => {
+      if (oldIdx === from) {
+        return to;
+      }
+
+      const afterRemove = oldIdx > from ? oldIdx - 1 : oldIdx;
+
+      return afterRemove >= to ? afterRemove + 1 : afterRemove;
+    });
+  }
+
   // ─── Private helpers ────────────────────────────────────────────
 
   /**
@@ -564,6 +1448,22 @@ export class TableModel {
         normalized.textColor = cell.textColor;
       }
 
+      if (cell.placement !== undefined) {
+        normalized.placement = cell.placement;
+      }
+
+      if (cell.colspan !== undefined && cell.colspan > 1) {
+        normalized.colspan = cell.colspan;
+      }
+
+      if (cell.rowspan !== undefined && cell.rowspan > 1) {
+        normalized.rowspan = cell.rowspan;
+      }
+
+      if (cell.mergedInto !== undefined) {
+        normalized.mergedInto = [...cell.mergedInto];
+      }
+
       return normalized;
     }