@jackuait/blok 0.6.0-beta.0 → 0.6.0-beta.10

package/src/tools/table/index.ts

@@ -7,15 +7,37 @@ import type {
   ToolboxConfig,
 } from '../../../types';
 import type { ToolSanitizerConfig } from '../../../types/configs/sanitizer-config';
-import type { MenuConfig } from '../../../types/tools/menu-config';
 import { DATA_ATTR } from '../../components/constants';
 import { IconTable } from '../../components/icons';
 import { twMerge } from '../../components/utils/tw';
 
 import { TableAddControls } from './table-add-controls';
 import { TableCellBlocks } from './table-cell-blocks';
-import { BORDER_WIDTH, ROW_ATTR, CELL_ATTR, TableGrid } from './table-core';
+import { TableCellSelection } from './table-cell-selection';
+import { TableGrid } from './table-core';
+import {
+  applyPixelWidths,
+  computeHalfAvgWidth,
+  computeInitialColWidth,
+  deleteColumnWithBlockCleanup,
+  deleteRowWithBlockCleanup,
+  enableScrollOverflow,
+  getBlockIdsInColumn,
+  getBlockIdsInRow,
+  isColumnEmpty,
+  isRowEmpty,
+  mountCellBlocksReadOnly,
+  normalizeTableData,
+  populateNewCells,
+  readPixelWidths,
+  SCROLL_OVERFLOW_CLASSES,
+  setupKeyboardNavigation,
+  updateHeadingColumnStyles,
+  updateHeadingStyles,
+} from './table-operations';
 import { TableResize } from './table-resize';
+import { executeRowColAction } from './table-row-col-action-handler';
+import type { PendingHighlight } from './table-row-col-action-handler';
 import { TableRowColControls } from './table-row-col-controls';
 import type { RowColAction } from './table-row-col-controls';
 import type { TableData, TableConfig } from './types';
@@ -24,14 +46,12 @@ const DEFAULT_ROWS = 3;
 const DEFAULT_COLS = 3;
 
 const WRAPPER_CLASSES = [
-  'overflow-x-auto',
   'my-2',
+  'pr-5',
 ];
 
 const WRAPPER_EDIT_CLASSES = [
   'relative',
-  'pr-9',
-  'pb-9',
 ];
 
 /**
@@ -48,21 +68,21 @@ export class Table implements BlockTool {
   private addControls: TableAddControls | null = null;
   private rowColControls: TableRowColControls | null = null;
   private cellBlocks: TableCellBlocks | null = null;
+  private cellSelection: TableCellSelection | null = null;
   private element: HTMLDivElement | null = null;
   private blockId: string | undefined;
+  private pendingHighlight: PendingHighlight | null = null;
+  private isNewTable = false;
 
   constructor({ data, config, api, readOnly, block }: BlockToolConstructorOptions<TableData, TableConfig>) {
     this.api = api;
     this.readOnly = readOnly;
     this.config = config ?? {};
-    this.data = this.normalizeData(data);
+    this.data = normalizeTableData(data, config ?? {});
     this.grid = new TableGrid({ readOnly });
     this.blockId = block?.id;
   }
 
-  /**
-   * Toolbox configuration
-   */
   public static get toolbox(): ToolboxConfig {
     return {
       icon: IconTable,
@@ -98,19 +118,18 @@ export class Table implements BlockTool {
     };
   }
 
-  /**
-   * Render the table
-   */
   public render(): HTMLDivElement {
     const wrapper = document.createElement('div');
 
-    wrapper.className = twMerge(WRAPPER_CLASSES, !this.readOnly && WRAPPER_EDIT_CLASSES);
+    wrapper.className = twMerge(WRAPPER_CLASSES, !this.readOnly && WRAPPER_EDIT_CLASSES, this.data.colWidths && SCROLL_OVERFLOW_CLASSES);
     wrapper.setAttribute(DATA_ATTR.tool, 'table');
 
     if (this.readOnly) {
       wrapper.setAttribute('data-blok-table-readonly', '');
     }
 
+    this.isNewTable = this.data.content.length === 0;
+
     const rows = this.data.content.length || this.config.rows || DEFAULT_ROWS;
     const cols = this.data.content[0]?.length || this.config.cols || DEFAULT_COLS;
 
@@ -121,30 +140,30 @@ export class Table implements BlockTool {
     }
 
     if (this.data.colWidths) {
-      this.applyPixelWidths(gridEl, this.data.colWidths);
+      applyPixelWidths(gridEl, this.data.colWidths);
     }
 
     wrapper.appendChild(gridEl);
     this.element = wrapper;
 
     if (this.data.withHeadings) {
-      this.updateHeadingStyles();
+      updateHeadingStyles(this.element, this.data.withHeadings);
+    }
+
+    if (this.data.withHeadingColumn) {
+      updateHeadingColumnStyles(this.element, this.data.withHeadingColumn);
     }
 
     if (!this.readOnly) {
-      this.setupKeyboardNavigation(gridEl);
       this.initCellBlocks(gridEl);
+      setupKeyboardNavigation(gridEl, this.cellBlocks);
     }
 
     return wrapper;
   }
 
-  /**
-   * Called after block element is added to the DOM.
-   * Initializes resize handles now that pixel widths can be measured.
-   */
   public rendered(): void {
-    if (this.readOnly || !this.element) {
+    if (!this.element) {
       return;
     }
 
@@ -154,62 +173,59 @@ export class Table implements BlockTool {
       return;
     }
 
-    // Initialize cell blocks here (after Yjs fromJSON has run) so that
-    // cell paragraph blocks are synced to both BlocksStore and Yjs.
-    // Creating them during render() would cause a desync: fromJSON wipes
-    // the Yjs array after render() but before rendered().
+    if (this.readOnly) {
+      mountCellBlocksReadOnly(gridEl, this.data.content, this.api);
+
+      return;
+    }
+
     this.data.content = this.cellBlocks?.initializeCells(this.data.content) ?? this.data.content;
 
+    if (this.isNewTable) {
+      populateNewCells(gridEl, this.cellBlocks);
+    }
+
+    if (this.data.initialColWidth === undefined) {
+      const widths = this.data.colWidths ?? readPixelWidths(gridEl);
+
+      this.data.initialColWidth = widths.length > 0
+        ? computeInitialColWidth(widths)
+        : undefined;
+    }
+
     this.initResize(gridEl);
     this.initAddControls(gridEl);
     this.initRowColControls(gridEl);
+    this.initCellSelection(gridEl);
+
+    if (this.isNewTable) {
+      const firstEditable = gridEl.querySelector<HTMLElement>('[contenteditable="true"]');
+
+      firstEditable?.focus();
+    }
   }
 
-  /**
-   * Extract data from the rendered table
-   */
   public save(blockContent: HTMLElement): TableData {
     const gridEl = blockContent.firstElementChild as HTMLElement;
     const colWidths = this.data.colWidths;
+    const content = this.readOnly
+      ? this.data.content
+      : this.grid.getData(gridEl);
 
     return {
       withHeadings: this.data.withHeadings,
+      withHeadingColumn: this.data.withHeadingColumn,
       stretched: this.data.stretched,
-      content: this.grid.getData(gridEl),
+      content,
       ...(colWidths ? { colWidths } : {}),
+      ...(this.data.initialColWidth !== undefined ? { initialColWidth: this.data.initialColWidth } : {}),
     };
   }
 
-  /**
-   * Validate saved data
-   */
   public validate(savedData: TableData): boolean {
     return savedData.content.length > 0;
   }
 
-  /**
-   * Render block settings
-   */
-  public renderSettings(): MenuConfig {
-    return [
-      {
-        icon: IconTable,
-        title: this.api.i18n.t(this.data.withHeadings
-          ? 'tools.table.withoutHeadings'
-          : 'tools.table.withHeadings'),
-        onActivate: (): void => {
-          this.data.withHeadings = !this.data.withHeadings;
-          this.updateHeadingStyles();
-        },
-        closeOnActivate: true,
-        isActive: this.data.withHeadings,
-      },
-    ];
-  }
-
-  /**
-   * Handle paste of HTML table
-   */
   public onPaste(event: HTMLPasteEvent): void {
     const content = event.detail.data;
     const rows = content.querySelectorAll('tr');
@@ -228,18 +244,17 @@ export class Table implements BlockTool {
       }
     });
 
-    // Detect headings from thead or th elements in first row
     const hasTheadHeadings = content.querySelector('thead') !== null;
     const hasThHeadings = rows[0]?.querySelector('th') !== null;
     const withHeadings = hasTheadHeadings || hasThHeadings;
 
     this.data = {
       withHeadings,
+      withHeadingColumn: this.data.withHeadingColumn,
       stretched: this.data.stretched,
       content: tableContent,
     };
 
-    // Re-render with new data
     if (!this.element?.parentNode) {
       return;
     }
@@ -258,10 +273,9 @@ export class Table implements BlockTool {
     }
   }
 
-  /**
-   * Clean up
-   */
   public destroy(): void {
+    this.cellBlocks?.deleteAllBlocks();
+
     this.resize?.destroy();
     this.resize = null;
     this.addControls?.destroy();
@@ -270,55 +284,33 @@ export class Table implements BlockTool {
     this.rowColControls = null;
     this.cellBlocks?.destroy();
     this.cellBlocks = null;
+    this.cellSelection?.destroy();
+    this.cellSelection = null;
     this.element = null;
   }
 
-  private normalizeData(data: TableData | Record<string, never>): TableData {
-    const isTableData = typeof data === 'object' && data !== null && 'content' in data;
+  public deleteRowWithCleanup(rowIndex: number): void {
+    const gridEl = this.element?.firstElementChild as HTMLElement | undefined;
 
-    if (!isTableData) {
-      return {
-        withHeadings: this.config.withHeadings ?? false,
-        stretched: this.config.stretched ?? false,
-        content: [],
-      };
+    if (gridEl) {
+      deleteRowWithBlockCleanup(gridEl, rowIndex, this.grid, this.cellBlocks);
     }
-
-    const tableData = data as TableData;
-    const cols = tableData.content?.[0]?.length;
-    const colWidths = tableData.colWidths;
-    const validWidths = colWidths && cols && colWidths.length === cols ? colWidths : undefined;
-
-    return {
-      withHeadings: tableData.withHeadings ?? this.config.withHeadings ?? false,
-      stretched: tableData.stretched ?? this.config.stretched ?? false,
-      content: tableData.content ?? [],
-      colWidths: validWidths,
-    };
   }
 
-  private updateHeadingStyles(): void {
-    if (!this.element) {
-      return;
-    }
-
-    const gridEl = this.element.firstElementChild as HTMLElement;
+  public deleteColumnWithCleanup(colIndex: number): void {
+    const gridEl = this.element?.firstElementChild as HTMLElement | undefined;
 
-    if (!gridEl) {
-      return;
+    if (gridEl) {
+      this.data.colWidths = deleteColumnWithBlockCleanup(gridEl, colIndex, this.data.colWidths, this.grid, this.cellBlocks);
     }
+  }
 
-    const firstRow = gridEl.querySelector('[data-blok-table-row]');
-
-    if (!firstRow) {
-      return;
-    }
+  public getBlockIdsInRow(rowIndex: number): string[] {
+    return getBlockIdsInRow(this.element, this.cellBlocks, rowIndex);
+  }
 
-    if (this.data.withHeadings) {
-      firstRow.setAttribute('data-blok-table-heading', '');
-    } else {
-      firstRow.removeAttribute('data-blok-table-heading');
-    }
+  public getBlockIdsInColumn(colIndex: number): string[] {
+    return getBlockIdsInColumn(this.element, this.cellBlocks, colIndex);
   }
 
   private initAddControls(gridEl: HTMLElement): void {
@@ -328,24 +320,108 @@ export class Table implements BlockTool {
       return;
     }
 
+    const dragState = { addedCols: 0 };
+
     this.addControls = new TableAddControls({
       wrapper: this.element,
       grid: gridEl,
+      i18n: this.api.i18n,
+      getNewColumnWidth: () => {
+        const colWidths = this.data.colWidths ?? readPixelWidths(gridEl);
+
+        return this.data.initialColWidth !== undefined
+          ? Math.round((this.data.initialColWidth / 2) * 100) / 100
+          : computeHalfAvgWidth(colWidths);
+      },
       onAddRow: () => {
         this.grid.addRow(gridEl);
-        this.populateNewCells(gridEl);
+        populateNewCells(gridEl, this.cellBlocks);
+        updateHeadingStyles(this.element, this.data.withHeadings);
+        updateHeadingColumnStyles(this.element, this.data.withHeadingColumn);
+        this.initResize(gridEl);
+        this.addControls?.syncRowButtonWidth();
+        this.rowColControls?.refresh();
       },
       onAddColumn: () => {
-        const colWidths = this.data.colWidths ?? this.readPixelWidths(gridEl);
-        const halfAvgWidth = Math.round(
-          (colWidths.reduce((sum, w) => sum + w, 0) / colWidths.length / 2) * 100
-        ) / 100;
-
-        this.grid.addColumn(gridEl, undefined, colWidths);
-        this.data.colWidths = [...colWidths, halfAvgWidth];
-        this.populateNewCells(gridEl);
+        const colWidths = this.data.colWidths ?? readPixelWidths(gridEl);
+        const halfWidth = this.data.initialColWidth !== undefined
+          ? Math.round((this.data.initialColWidth / 2) * 100) / 100
+          : computeHalfAvgWidth(colWidths);
+
+        this.grid.addColumn(gridEl, undefined, colWidths, halfWidth);
+        this.data.colWidths = [...colWidths, halfWidth];
+        populateNewCells(gridEl, this.cellBlocks);
+        updateHeadingColumnStyles(this.element, this.data.withHeadingColumn);
         this.initResize(gridEl);
         this.addControls?.syncRowButtonWidth();
+        this.rowColControls?.refresh();
+      },
+      onDragStart: () => {
+        if (this.resize) {
+          this.resize.enabled = false;
+        }
+        this.rowColControls?.hideAllGrips();
+        this.rowColControls?.setGripsDisplay(false);
+      },
+      onDragAddRow: () => {
+        this.grid.addRow(gridEl);
+        populateNewCells(gridEl, this.cellBlocks);
+        updateHeadingStyles(this.element, this.data.withHeadings);
+        updateHeadingColumnStyles(this.element, this.data.withHeadingColumn);
+      },
+      onDragRemoveRow: () => {
+        const rowCount = this.grid.getRowCount(gridEl);
+
+        if (rowCount > 1 && isRowEmpty(gridEl, rowCount - 1)) {
+          deleteRowWithBlockCleanup(gridEl, rowCount - 1, this.grid, this.cellBlocks);
+        }
+      },
+      onDragAddCol: () => {
+        const colWidths = this.data.colWidths ?? readPixelWidths(gridEl);
+        const halfWidth = this.data.initialColWidth !== undefined
+          ? Math.round((this.data.initialColWidth / 2) * 100) / 100
+          : computeHalfAvgWidth(colWidths);
+
+        this.grid.addColumn(gridEl, undefined, colWidths, halfWidth);
+        this.data.colWidths = [...colWidths, halfWidth];
+        applyPixelWidths(gridEl, this.data.colWidths);
+        populateNewCells(gridEl, this.cellBlocks);
+        updateHeadingColumnStyles(this.element, this.data.withHeadingColumn);
+        this.initResize(gridEl);
+
+        dragState.addedCols++;
+
+        if (this.element) {
+          this.element.scrollLeft = this.element.scrollWidth;
+        }
+      },
+      onDragRemoveCol: () => {
+        const colCount = this.grid.getColumnCount(gridEl);
+
+        if (colCount <= 1 || !isColumnEmpty(gridEl, colCount - 1)) {
+          return;
+        }
+
+        this.data.colWidths = deleteColumnWithBlockCleanup(gridEl, colCount - 1, this.data.colWidths, this.grid, this.cellBlocks);
+
+        if (this.data.colWidths) {
+          applyPixelWidths(gridEl, this.data.colWidths);
+        }
+
+        this.initResize(gridEl);
+
+        dragState.addedCols--;
+      },
+      onDragEnd: () => {
+        this.initResize(gridEl);
+        this.addControls?.syncRowButtonWidth();
+        this.rowColControls?.refresh();
+
+        if (this.element) {
+          this.element.scrollLeft = dragState.addedCols > 0 ? this.element.scrollWidth : 0;
+        }
+
+        dragState.addedCols = 0;
       },
     });
   }
@@ -362,171 +438,114 @@ export class Table implements BlockTool {
       getColumnCount: () => this.grid.getColumnCount(gridEl),
       getRowCount: () => this.grid.getRowCount(gridEl),
       isHeadingRow: () => this.data.withHeadings,
+      isHeadingColumn: () => this.data.withHeadingColumn,
+      i18n: this.api.i18n,
       onAction: (action: RowColAction) => this.handleRowColAction(gridEl, action),
       onDragStateChange: (isDragging: boolean) => {
-        if (!this.resize) {
-          return;
+        if (this.resize) {
+          this.resize.enabled = !isDragging;
         }
 
-        this.resize.enabled = !isDragging;
+        this.addControls?.setDisplay(!isDragging);
+
+        if (isDragging) {
+          this.api.toolbar.close({ setExplicitlyClosed: false });
+        }
+      },
+      onGripClick: (type, index) => {
+        if (type === 'row') {
+          this.cellSelection?.selectRow(index);
+        } else {
+          this.cellSelection?.selectColumn(index);
+        }
+      },
+      onGripPopoverClose: () => {
+        if (this.pendingHighlight) {
+          const { type, index } = this.pendingHighlight;
+
+          this.pendingHighlight = null;
+
+          // Lock the grip synchronously so the unlock listener is registered
+          // before any external click can race with a deferred RAF
+          this.rowColControls?.setActiveGrip(type, index);
+
+          // Wait for layout so newly inserted cells have dimensions
+          requestAnimationFrame(() => {
+            if (type === 'row') {
+              this.cellSelection?.selectRow(index);
+            } else {
+              this.cellSelection?.selectColumn(index);
+            }
+          });
+        } else {
+          this.cellSelection?.clearActiveSelection();
+        }
       },
     });
   }
 
   private handleRowColAction(gridEl: HTMLElement, action: RowColAction): void {
-    switch (action.type) {
-      case 'insert-row-above':
-        this.grid.addRow(gridEl, action.index);
-        this.populateNewCells(gridEl);
-        break;
-      case 'insert-row-below':
-        this.grid.addRow(gridEl, action.index + 1);
-        this.populateNewCells(gridEl);
-        break;
-      case 'insert-col-left':
-        this.handleInsertColumn(gridEl, action.index);
-        this.populateNewCells(gridEl);
-        break;
-      case 'insert-col-right':
-        this.handleInsertColumn(gridEl, action.index + 1);
-        this.populateNewCells(gridEl);
-        break;
-      case 'move-row':
-        this.grid.moveRow(gridEl, action.fromIndex, action.toIndex);
-        break;
-      case 'move-col':
-        this.grid.moveColumn(gridEl, action.fromIndex, action.toIndex);
-        this.syncColWidthsAfterMove(action.fromIndex, action.toIndex);
-        break;
-      case 'delete-row':
-        this.deleteRowWithBlockCleanup(gridEl, action.index);
-        break;
-      case 'delete-col':
-        this.deleteColumnWithBlockCleanup(gridEl, action.index);
-        break;
-      case 'toggle-heading':
-        this.data.withHeadings = !this.data.withHeadings;
-        this.updateHeadingStyles();
-        break;
-    }
+    const result = executeRowColAction(
+      gridEl,
+      action,
+      { grid: this.grid, data: this.data, cellBlocks: this.cellBlocks },
+    );
 
+    this.data.colWidths = result.colWidths;
+    this.data.withHeadings = result.withHeadings;
+    this.data.withHeadingColumn = result.withHeadingColumn;
+    this.pendingHighlight = result.pendingHighlight;
+
+    updateHeadingStyles(this.element, this.data.withHeadings);
+    updateHeadingColumnStyles(this.element, this.data.withHeadingColumn);
     this.initResize(gridEl);
     this.addControls?.syncRowButtonWidth();
     this.rowColControls?.refresh();
-  }
-
-  private handleInsertColumn(gridEl: HTMLElement, index: number): void {
-    const colWidths = this.data.colWidths ?? this.readPixelWidths(gridEl);
-
-    this.grid.addColumn(gridEl, index, colWidths);
-
-    const halfAvgWidth = Math.round(
-      (colWidths.reduce((sum, w) => sum + w, 0) / colWidths.length / 2) * 100
-    ) / 100;
-    const newWidths = [...colWidths];
 
-    newWidths.splice(index, 0, halfAvgWidth);
-    this.data.colWidths = newWidths;
-  }
-
-  private syncColWidthsAfterMove(fromIndex: number, toIndex: number): void {
-    if (!this.data.colWidths) {
+    if (!result.moveSelection) {
       return;
     }
 
-    const widths = [...this.data.colWidths];
-    const [moved] = widths.splice(fromIndex, 1);
-
-    widths.splice(toIndex, 0, moved);
-    this.data.colWidths = widths;
-  }
+    // After move operations, select the moved row/column to show where it landed
+    const { type: moveType, index: moveIndex } = result.moveSelection;
 
-  private syncColWidthsAfterDeleteColumn(index: number): void {
-    if (!this.data.colWidths) {
-      return;
+    if (moveType === 'row') {
+      this.cellSelection?.selectRow(moveIndex);
+    } else {
+      this.cellSelection?.selectColumn(moveIndex);
     }
 
-    const widths = [...this.data.colWidths];
-
-    widths.splice(index, 1);
-    this.data.colWidths = widths.length > 0 ? widths : undefined;
+    this.rowColControls?.setActiveGrip(moveType, moveIndex);
   }
 
   private initResize(gridEl: HTMLElement): void {
     this.resize?.destroy();
 
-    const widths = this.data.colWidths ?? this.readPixelWidths(gridEl);
-
-    this.resize = new TableResize(gridEl, widths, (newWidths: number[]) => {
-      this.data.colWidths = newWidths;
-    });
-  }
-
-  private readPixelWidths(gridEl: HTMLElement): number[] {
-    const firstRow = gridEl.querySelector('[data-blok-table-row]');
+    const isPercentMode = this.data.colWidths === undefined;
+    const widths = this.data.colWidths ?? readPixelWidths(gridEl);
 
-    if (!firstRow) {
-      return [];
+    if (!isPercentMode) {
+      enableScrollOverflow(this.element);
     }
 
-    const cells = firstRow.querySelectorAll('[data-blok-table-cell]');
-
-    return Array.from(cells).map(cell =>
-      (cell as HTMLElement).getBoundingClientRect().width
+    this.resize = new TableResize(
+      gridEl,
+      widths,
+      (newWidths: number[]) => {
+        this.data.colWidths = newWidths;
+        enableScrollOverflow(this.element);
+        this.rowColControls?.positionGrips();
+      },
+      () => {
+        this.rowColControls?.hideAllGrips();
+      },
+      () => {
+        this.addControls?.syncRowButtonWidth();
+      },
+      isPercentMode,
     );
   }
 
-  private applyPixelWidths(grid: HTMLElement, widths: number[]): void {
-    const totalWidth = widths.reduce((sum, w) => sum + w, 0);
-    const gridStyle: HTMLElement = grid;
-
-    gridStyle.style.width = `${totalWidth + BORDER_WIDTH}px`;
-
-    const rowEls = grid.querySelectorAll('[data-blok-table-row]');
-
-    rowEls.forEach(row => {
-      const cells = row.querySelectorAll('[data-blok-table-cell]');
-
-      cells.forEach((node, i) => {
-        if (i < widths.length) {
-          const cellEl = node as HTMLElement;
-
-          cellEl.style.width = `${widths[i]}px`;
-        }
-      });
-    });
-  }
-
-  private setupKeyboardNavigation(gridEl: HTMLElement): void {
-    gridEl.addEventListener('keydown', (event: KeyboardEvent) => {
-      const target = event.target as HTMLElement;
-      const cell = target.closest<HTMLElement>('[data-blok-table-cell]');
-
-      if (!cell) {
-        return;
-      }
-
-      const position = this.getCellPosition(gridEl, cell);
-
-      if (position) {
-        this.cellBlocks?.handleKeyDown(event, position);
-      }
-    });
-  }
-
-  /**
-   * Ensure every cell in the grid has at least one block.
-   * Called after addRow / addColumn so new empty cells get an initial paragraph.
-   * Cells that already contain blocks are left untouched.
-   */
-  private populateNewCells(gridEl: HTMLElement): void {
-    const cells = gridEl.querySelectorAll(`[${CELL_ATTR}]`);
-
-    cells.forEach(cell => {
-      this.cellBlocks?.ensureCellHasBlock(cell as HTMLElement);
-    });
-  }
-
   private initCellBlocks(gridEl: HTMLElement): void {
     this.cellBlocks = new TableCellBlocks({
       api: this.api,
@@ -535,117 +554,35 @@ export class Table implements BlockTool {
     });
   }
 
-  private getCellPosition(gridEl: HTMLElement, cell: HTMLElement): { row: number; col: number } | null {
-    const rows = Array.from(gridEl.querySelectorAll('[data-blok-table-row]'));
-
-    const rowIndex = rows.findIndex(row => {
-      const cells = Array.from(row.querySelectorAll('[data-blok-table-cell]'));
-
-      return cells.includes(cell);
-    });
-
-    if (rowIndex === -1) {
-      return null;
-    }
-
-    const cells = Array.from(rows[rowIndex].querySelectorAll('[data-blok-table-cell]'));
-    const colIndex = cells.indexOf(cell);
-
-    return { row: rowIndex, col: colIndex };
-  }
-
-  /**
-   * Delete a row and clean up any nested blocks within its cells
-   */
-  public deleteRowWithCleanup(rowIndex: number): void {
-    const gridEl = this.element?.firstElementChild as HTMLElement | undefined;
-
-    if (gridEl) {
-      this.deleteRowWithBlockCleanup(gridEl, rowIndex);
-    }
-  }
-
-  /**
-   * Delete a column and clean up any nested blocks within its cells
-   */
-  public deleteColumnWithCleanup(colIndex: number): void {
-    const gridEl = this.element?.firstElementChild as HTMLElement | undefined;
-
-    if (gridEl) {
-      this.deleteColumnWithBlockCleanup(gridEl, colIndex);
-    }
-  }
-
-  private deleteRowWithBlockCleanup(gridEl: HTMLElement, rowIndex: number): void {
-    const rows = gridEl.querySelectorAll(`[${ROW_ATTR}]`);
-    const row = rows[rowIndex];
-
-    if (row && this.cellBlocks) {
-      const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
-
-      this.cellBlocks.deleteBlocks(this.cellBlocks.getBlockIdsFromCells(cells));
-    }
-
-    this.grid.deleteRow(gridEl, rowIndex);
-  }
-
-  private deleteColumnWithBlockCleanup(gridEl: HTMLElement, colIndex: number): void {
-    if (this.cellBlocks) {
-      const rows = gridEl.querySelectorAll(`[${ROW_ATTR}]`);
-      const cellsInColumn: Element[] = [];
+  private initCellSelection(gridEl: HTMLElement): void {
+    this.cellSelection?.destroy();
 
-      rows.forEach(row => {
-        const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
+    // Get RectangleSelection from API
+    const rectangleSelection = this.api.rectangleSelection;
 
-        if (colIndex < cells.length) {
-          cellsInColumn.push(cells[colIndex]);
+    this.cellSelection = new TableCellSelection({
+      grid: gridEl,
+      rectangleSelection, // Pass reference
+      i18n: this.api.i18n,
+      onSelectionActiveChange: (hasSelection) => {
+        if (this.resize) {
+          this.resize.enabled = !hasSelection;
         }
-      });
-
-      this.cellBlocks.deleteBlocks(this.cellBlocks.getBlockIdsFromCells(cellsInColumn));
-    }
 
-    this.grid.deleteColumn(gridEl, colIndex);
-    this.syncColWidthsAfterDeleteColumn(colIndex);
-  }
-
-  /**
-   * Get all block IDs from cells in a specific row
-   */
-  public getBlockIdsInRow(rowIndex: number): string[] {
-    if (!this.element) {
-      return [];
-    }
-
-    const rows = this.element.querySelectorAll(`[${ROW_ATTR}]`);
-    const row = rows[rowIndex];
-
-    if (!row) {
-      return [];
-    }
-
-    return this.cellBlocks?.getBlockIdsFromCells(row.querySelectorAll(`[${CELL_ATTR}]`)) ?? [];
-  }
-
-  /**
-   * Get all block IDs from cells in a specific column
-   */
-  public getBlockIdsInColumn(colIndex: number): string[] {
-    if (!this.element) {
-      return [];
-    }
+        this.addControls?.setInteractive(!hasSelection);
+        this.rowColControls?.setGripsDisplay(!hasSelection);
+      },
+      onClearContent: (cells) => {
+        if (!this.cellBlocks) {
+          return;
+        }
 
-    const rows = this.element.querySelectorAll(`[${ROW_ATTR}]`);
-    const cellsInColumn: Element[] = [];
+        const blockIds = this.cellBlocks.getBlockIdsFromCells(cells);
 
-    rows.forEach(row => {
-      const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
-
-      if (colIndex < cells.length) {
-        cellsInColumn.push(cells[colIndex]);
-      }
+        this.cellBlocks.deleteBlocks(blockIds);
+      },
     });
-
-    return this.cellBlocks?.getBlockIdsFromCells(cellsInColumn) ?? [];
   }
 }
+
+export { isInsideTableCell, isRestrictedInTableCell, convertToParagraph } from './table-restrictions';