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

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

@@ -83,6 +83,12 @@ export class TableController {
       case 'set-col-widths':
         return this.handleSetColWidths(command.widths ? [...command.widths] : undefined);
 
+      case 'merge-cells':
+        return this.handleMergeCells(command.minRow, command.maxRow, command.minCol, command.maxCol);
+
+      case 'split-cell':
+        return this.handleSplitCell(command.row, command.col);
+
       case 'replace-all':
         return this.handleReplaceAll(command.data);
     }
@@ -223,6 +229,29 @@ export class TableController {
     };
   }
 
+  private handleMergeCells(minRow: number, maxRow: number, minCol: number, maxCol: number): TableDomainEvent {
+    const result = this.model.mergeCells({ minRow, maxRow, minCol, maxCol });
+
+    return {
+      type: 'cells-merged',
+      minRow,
+      maxRow,
+      minCol,
+      maxCol,
+      blocksToRelocate: result.blocksToRelocate,
+    };
+  }
+
+  private handleSplitCell(row: number, col: number): TableDomainEvent {
+    this.model.splitCell(row, col);
+
+    return {
+      type: 'cell-split',
+      row,
+      col,
+    };
+  }
+
   private handleReplaceAll(data: TableData): TableDomainEvent {
     this.model.replaceAll(data);
 

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

@@ -81,6 +81,21 @@ export interface ColWidthsChangedEvent {
   readonly widths: readonly number[] | undefined;
 }
 
+export interface CellsMergedEvent {
+  readonly type: 'cells-merged';
+  readonly minRow: number;
+  readonly maxRow: number;
+  readonly minCol: number;
+  readonly maxCol: number;
+  readonly blocksToRelocate: readonly string[];
+}
+
+export interface CellSplitEvent {
+  readonly type: 'cell-split';
+  readonly row: number;
+  readonly col: number;
+}
+
 export interface ModelReplacedEvent {
   readonly type: 'model-replaced';
 }
@@ -99,4 +114,6 @@ export type TableDomainEvent =
   | BlockRemovedFromCellEvent
   | CellBlocksSetEvent
   | ColWidthsChangedEvent
+  | CellsMergedEvent
+  | CellSplitEvent
   | ModelReplacedEvent;

package/src/tools/table/index.ts

@@ -25,9 +25,10 @@ import {
 } from './table-cell-clipboard';
 import type { CellColorMode } from './table-cell-color-picker';
 import { TableCellSelection } from './table-cell-selection';
-import { TableGrid, ROW_ATTR, CELL_ATTR } from './table-core';
+import { TableGrid, ROW_ATTR, CELL_ATTR, CELL_ROW_ATTR, CELL_COL_ATTR } from './table-core';
 import {
   applyCellColors,
+  applyCellPlacements,
   applyPixelWidths,
   computeHalfAvgWidth,
   computeInitialColWidth,
@@ -54,7 +55,7 @@ import { TableRowColControls } from './table-row-col-controls';
 import type { RowColAction } from './table-row-col-controls';
 import { registerAdditionalRestrictedTools } from './table-restrictions';
 import { TableScrollHaze } from './table-scroll-haze';
-import type { ClipboardBlockData, LegacyCellContent, TableCellsClipboard, TableData, TableConfig } from './types';
+import type { CellPlacement, ClipboardBlockData, LegacyCellContent, TableCellsClipboard, TableData, TableConfig } from './types';
 
 const DEFAULT_ROWS = 3;
 const DEFAULT_COLS = 3;
@@ -200,6 +201,120 @@ export class Table implements BlockTool {
     this.scrollHaze = null;
   }
 
+  /**
+   * Rebuild the <tbody> from the current model state.
+   * Generates a new table via createGridFromModel (with correct colspan/rowspan),
+   * transplants existing block holders into the new cells, and swaps the tbody.
+   */
+  private rebuildTableBody(): void {
+    const gridEl = this.gridElement;
+
+    if (!gridEl) {
+      return;
+    }
+
+    const oldTbody = gridEl.querySelector('tbody');
+
+    if (!oldTbody) {
+      return;
+    }
+
+    // Collect all existing block holders by ID before replacing tbody
+    const blockHolders = new Map<string, HTMLElement>();
+
+    oldTbody.querySelectorAll('[data-blok-id]').forEach(el => {
+      const id = el.getAttribute('data-blok-id');
+
+      if (id) {
+        blockHolders.set(id, el as HTMLElement);
+      }
+    });
+
+    // Build new table from model (has correct colspan/rowspan structure)
+    const newTable = this.grid.createGridFromModel(this.model);
+    const newTbody = newTable.querySelector('tbody');
+
+    if (!newTbody) {
+      return;
+    }
+
+    // Move block holders from old cells to new cells
+    const content = this.model.snapshot().content;
+
+    this.mountBlockHoldersInNewTbody(content, newTbody, blockHolders);
+
+    // Replace old tbody with new
+    oldTbody.replaceWith(newTbody);
+  }
+
+  /**
+   * Mount block holders into the new tbody cells based on model content.
+   * Extracted to keep rebuildTableBody under nesting depth limit.
+   */
+  private mountBlockHoldersInNewTbody(
+    content: TableData['content'],
+    newTbody: Element,
+    blockHolders: Map<string, HTMLElement>
+  ): void {
+    content.forEach((rowData, r) => {
+      rowData.forEach((cellContent, c) => {
+        if (typeof cellContent === 'string') {
+          return;
+        }
+
+        if (cellContent.mergedInto) {
+          return;
+        }
+
+        const newCell = newTbody.querySelector(
+          `[${CELL_ROW_ATTR}="${r}"][${CELL_COL_ATTR}="${c}"]`
+        );
+
+        if (!newCell) {
+          return;
+        }
+
+        const container = newCell.querySelector(`[${CELL_BLOCKS_ATTR}]`);
+
+        if (!container) {
+          return;
+        }
+
+        cellContent.blocks.forEach(blockId => {
+          const holder = blockHolders.get(blockId);
+
+          if (holder) {
+            container.appendChild(holder);
+          }
+        });
+      });
+    });
+  }
+
+  /**
+   * Check if the model's content contains any merged cells.
+   */
+  private modelHasMerges(): boolean {
+    const snapshot = this.model.snapshot();
+
+    return snapshot.content.some(row =>
+      row.some(cell =>
+        typeof cell !== 'string' && ((cell.colspan ?? 1) > 1 || (cell.rowspan ?? 1) > 1)
+      )
+    );
+  }
+
+  /**
+   * Create a flat grid (no merge handling) using createGrid.
+   * Extracted from render() to keep it readable.
+   */
+  private createFlatGrid(): HTMLTableElement {
+    const rows = this.initialContent?.length || this.config.rows || DEFAULT_ROWS;
+    const cols = this.initialContent?.reduce((max, row) => Math.max(max, row?.length ?? 0), 0) || this.config.cols || DEFAULT_COLS;
+
+    return this.grid.createGrid(rows, cols, this.model.colWidths);
+  }
+
   /**
    * Initialize all visual subsystems on a grid element.
    * Shared by rendered(), setData(), and onPaste() to ensure consistent
@@ -309,12 +424,14 @@ export class Table implements BlockTool {
 
     this.isNewTable = (this.initialContent?.length ?? 0) === 0;
 
-    const rows = this.initialContent?.length || this.config.rows || DEFAULT_ROWS;
-    const cols = this.initialContent?.reduce((max, row) => Math.max(max, row?.length ?? 0), 0) || this.config.cols || DEFAULT_COLS;
+    const hasContent = (this.initialContent?.length ?? 0) > 0;
+    const hasMerges = hasContent && this.modelHasMerges();
 
-    const gridEl = this.grid.createGrid(rows, cols, this.model.colWidths);
+    const gridEl = hasMerges
+      ? this.grid.createGridFromModel(this.model)
+      : this.createFlatGrid();
 
-    if ((this.initialContent?.length ?? 0) > 0) {
+    if (hasContent && !hasMerges) {
       this.grid.fillGrid(gridEl, this.initialContent ?? []);
     }
 
@@ -388,7 +505,9 @@ export class Table implements BlockTool {
 
     if (this.readOnly) {
       mountCellBlocksReadOnly(gridEl, content, this.api, this.blockId ?? '');
-      applyCellColors(gridEl, this.model.snapshot().content);
+      const snap = this.model.snapshot();
+      applyCellColors(gridEl, snap.content);
+      applyCellPlacements(gridEl, snap.content);
       this.initScrollHaze();
 
       return;
@@ -430,7 +549,9 @@ export class Table implements BlockTool {
     }
 
     this.initSubsystems(gridEl);
-    applyCellColors(gridEl, this.model.snapshot().content);
+    const snapInit = this.model.snapshot();
+    applyCellColors(gridEl, snapInit.content);
+    applyCellPlacements(gridEl, snapInit.content);
 
     if (this.isNewTable) {
       this.cellSelection?.selectRange({ minRow: 0, maxRow: 0, minCol: 0, maxCol: 0 });
@@ -541,7 +662,9 @@ export class Table implements BlockTool {
     }
 
     if (this.readOnly) {
-      applyCellColors(gridEl, this.model.snapshot().content);
+      const snapRO = this.model.snapshot();
+      applyCellColors(gridEl, snapRO.content);
+      applyCellPlacements(gridEl, snapRO.content);
 
       return;
     }
@@ -602,7 +725,9 @@ export class Table implements BlockTool {
       this.rowColControls.restoreVisibleGrips(savedGripIndices.col, savedGripIndices.row);
     }
 
-    applyCellColors(gridEl, this.model.snapshot().content);
+    const snapSet = this.model.snapshot();
+    applyCellColors(gridEl, snapSet.content);
+    applyCellPlacements(gridEl, snapSet.content);
   }
 
   public onPaste(event: HTMLPasteEvent): void {
@@ -695,7 +820,9 @@ export class Table implements BlockTool {
       }, true);
 
       this.initSubsystems(gridEl);
-      applyCellColors(gridEl, this.model.snapshot().content);
+      const snapPaste = this.model.snapshot();
+      applyCellColors(gridEl, snapPaste.content);
+      applyCellPlacements(gridEl, snapPaste.content);
     }
   }
 
@@ -1183,6 +1310,38 @@ export class Table implements BlockTool {
     });
   }
 
+  private handleCellPlacementChange(cells: HTMLElement[], placement: CellPlacement): void {
+    const gridEl = this.gridElement;
+
+    if (!gridEl) {
+      return;
+    }
+
+    this.runTransactedStructuralOp(() => {
+      for (const cell of cells) {
+        const coord = getCellPosition(gridEl, cell);
+
+        if (!coord) {
+          continue;
+        }
+
+        this.model.setCellPlacement(coord.row, coord.col, placement === 'top-left' ? undefined : placement);
+
+        const blocksContainer = cell.querySelector<HTMLElement>(`[${CELL_BLOCKS_ATTR}]`);
+
+        if (!blocksContainer) {
+          continue;
+        }
+
+        if (placement === 'top-left') {
+          blocksContainer.removeAttribute('data-blok-cell-placement');
+        } else {
+          blocksContainer.setAttribute('data-blok-cell-placement', placement);
+        }
+      }
+    });
+  }
+
   private collectCellBlockData(
     cells: HTMLElement[],
   ): Array<{ row: number; col: number; blocks: ClipboardBlockData[]; color?: string; textColor?: string }> {
@@ -1333,6 +1492,30 @@ export class Table implements BlockTool {
       onColorChange: (cells, color, mode) => {
         this.handleCellColorChange(cells, color, mode);
       },
+      onPlacementChange: (cells, placement) => {
+        this.handleCellPlacementChange(cells, placement);
+      },
+      getCellPlacement: (row, col) => {
+        return this.model.getCellPlacement(row, col);
+      },
+      canMergeCells: (range) => {
+        return this.model.canMergeCells(range);
+      },
+      onMergeCells: (range) => {
+        this.runTransactedStructuralOp(() => {
+          this.model.mergeCells(range);
+          this.rebuildTableBody();
+        });
+      },
+      isMergedCell: (row, col) => {
+        return this.model.isMergedCell(row, col);
+      },
+      onSplitCell: (row, col) => {
+        this.runTransactedStructuralOp(() => {
+          this.model.splitCell(row, col);
+          this.rebuildTableBody();
+        });
+      },
     });
   }
 

package/src/tools/table/table-cell-blocks.ts

@@ -1,6 +1,6 @@
 import type { API } from '../../../types';
 
-import { CELL_ATTR, ROW_ATTR } from './table-core';
+import { CELL_ATTR, ROW_ATTR, CELL_COL_ATTR } from './table-core';
 import type { TableModel } from './table-model';
 import type { LegacyCellContent, CellContent } from './types';
 import { isCellWithBlocks } from './types';
@@ -330,6 +330,12 @@ export class TableCellBlocks {
    * Get the number of columns in the table (based on first row)
    */
   private getColumnCount(): number {
+    const colgroup = this.gridElement.querySelector('colgroup');
+
+    if (colgroup) {
+      return colgroup.querySelectorAll('col').length;
+    }
+
     const firstRow = this.gridElement.querySelector('[data-blok-table-row]');
 
     return firstRow?.querySelectorAll('[data-blok-table-cell]').length ?? 0;
@@ -346,9 +352,7 @@ export class TableCellBlocks {
       return null;
     }
 
-    const cells = rowEl.querySelectorAll('[data-blok-table-cell]');
-
-    return (cells[col] as HTMLElement | undefined) ?? null;
+    return rowEl.querySelector<HTMLElement>(`[${CELL_COL_ATTR}="${col}"]`) ?? null;
   }
 
   /**
@@ -368,11 +372,10 @@ export class TableCellBlocks {
         return;
       }
 
-      const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
       const normalizedRow: CellContent[] = [];
 
       rowData.forEach((cellContent, colIndex) => {
-        const cell = cells[colIndex] as HTMLElement | undefined;
+        const cell = row.querySelector<HTMLElement>(`[${CELL_COL_ATTR}="${colIndex}"]`);
 
         if (!cell) {
           return;

package/src/tools/table/table-cell-clipboard.ts

@@ -1,5 +1,5 @@
 import type { SanitizerConfig } from '../../../types/configs/sanitizer-config';
-import type { ClipboardBlockData, TableCellsClipboard } from './types';
+import type { CellPlacement, ClipboardBlockData, TableCellsClipboard } from './types';
 import { mapToNearestPresetColor } from '../../components/utils/color-mapping';
 import { clean } from '../../components/utils/sanitizer';
 
@@ -33,6 +33,7 @@ interface CellEntry {
   blocks: ClipboardBlockData[];
   color?: string;
   textColor?: string;
+  placement?: CellPlacement;
 }
 
 /**
@@ -73,6 +74,10 @@ export function serializeCellsToClipboard(entries: CellEntry[]): TableCellsClipb
     if (entry.textColor !== undefined) {
       cells[r][c].textColor = entry.textColor;
     }
+
+    if (entry.placement !== undefined) {
+      cells[r][c].placement = entry.placement;
+    }
   }
 
   return { rows, cols, cells };

package/src/tools/table/table-cell-placement-picker.ts

@@ -0,0 +1,133 @@
+import type { I18n } from '../../../types/api';
+import type { CellPlacement } from './types';
+
+interface PlacementPickerOptions {
+  i18n: I18n;
+  currentPlacement: CellPlacement | undefined;
+  onPlacementSelect: (placement: CellPlacement) => void;
+}
+
+interface PlacementPickerResult {
+  element: HTMLDivElement;
+}
+
+const PLACEMENTS: CellPlacement[] = [
+  'top-left', 'top-center', 'top-right',
+  'middle-left', 'middle-center', 'middle-right',
+  'bottom-left', 'bottom-center', 'bottom-right',
+];
+
+const I18N_KEYS: Record<CellPlacement, string> = {
+  'top-left': 'tools.table.placementTopLeft',
+  'top-center': 'tools.table.placementTopCenter',
+  'top-right': 'tools.table.placementTopRight',
+  'middle-left': 'tools.table.placementMiddleLeft',
+  'middle-center': 'tools.table.placementMiddleCenter',
+  'middle-right': 'tools.table.placementMiddleRight',
+  'bottom-left': 'tools.table.placementBottomLeft',
+  'bottom-center': 'tools.table.placementBottomCenter',
+  'bottom-right': 'tools.table.placementBottomRight',
+};
+
+const V_ALIGN: Record<string, string> = {
+  top: 'flex-start',
+  middle: 'center',
+  bottom: 'flex-end',
+};
+
+const H_ALIGN: Record<string, string> = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end',
+};
+
+export const createCellPlacementPicker = (options: PlacementPickerOptions): PlacementPickerResult => {
+  const current = options.currentPlacement ?? 'top-left';
+  const wrapper = document.createElement('div');
+
+  wrapper.style.padding = '8px';
+
+  const grid = document.createElement('div');
+
+  grid.style.display = 'grid';
+  grid.style.gridTemplateColumns = 'repeat(3, 1fr)';
+  grid.style.gap = '3px';
+
+  const label = document.createElement('div');
+
+  label.style.textAlign = 'center';
+  label.style.fontSize = '11px';
+  label.style.marginTop = '6px';
+  label.style.color = 'var(--blok-text-secondary, #707684)';
+  label.textContent = options.i18n.t(I18N_KEYS[current]);
+
+  for (const placement of PLACEMENTS) {
+    const [vKey, hKey] = placement.split('-');
+    const cell = document.createElement('div');
+
+    cell.setAttribute('data-placement', placement);
+    cell.style.width = '32px';
+    cell.style.height = '26px';
+    cell.style.borderRadius = '3px';
+    cell.style.display = 'flex';
+    cell.style.flexDirection = 'column';
+    cell.style.alignItems = H_ALIGN[hKey];
+    cell.style.justifyContent = V_ALIGN[vKey];
+    cell.style.padding = '3px';
+    cell.style.cursor = 'pointer';
+    cell.style.gap = '1px';
+
+    if (placement === current) {
+      cell.setAttribute('data-active', 'true');
+      cell.style.outline = '2px solid var(--blok-color-primary, #388AE5)';
+      cell.style.outlineOffset = '-2px';
+      cell.style.backgroundColor = 'var(--blok-item-focus-bg, rgba(35, 131, 226, 0.14))';
+    } else {
+      cell.style.backgroundColor = 'var(--blok-bg-light, #eff2f5)';
+    }
+
+    const line1 = document.createElement('div');
+
+    line1.style.width = '14px';
+    line1.style.height = '2px';
+    line1.style.borderRadius = '1px';
+    line1.style.backgroundColor = 'currentColor';
+    line1.style.opacity = '0.6';
+
+    const line2 = document.createElement('div');
+
+    line2.style.width = '9px';
+    line2.style.height = '2px';
+    line2.style.borderRadius = '1px';
+    line2.style.backgroundColor = 'currentColor';
+    line2.style.opacity = '0.3';
+
+    cell.appendChild(line1);
+    cell.appendChild(line2);
+
+    cell.addEventListener('click', () => {
+      grid.querySelectorAll('[data-placement]').forEach(el => {
+        const element = el as HTMLElement;
+        element.removeAttribute('data-active');
+        element.style.outline = '';
+        element.style.outlineOffset = '';
+        element.style.backgroundColor = 'var(--blok-bg-tertiary, #f0f0f0)';
+      });
+
+      cell.setAttribute('data-active', 'true');
+      cell.style.outline = '2px solid var(--blok-color-primary, #388AE5)';
+      cell.style.outlineOffset = '-2px';
+      cell.style.backgroundColor = 'var(--blok-item-focus-bg, rgba(35, 131, 226, 0.14))';
+      label.textContent = options.i18n.t(I18N_KEYS[placement]);
+
+      options.onPlacementSelect(placement);
+    });
+
+    grid.appendChild(cell);
+  }
+
+  wrapper.appendChild(grid);
+  wrapper.appendChild(label);
+
+  return { element: wrapper };
+};