@jackuait/blok 0.9.0 → 0.10.0-beta.10

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

@@ -1,12 +1,14 @@
 import type { I18n } from '../../../types/api';
-import { IconCopy, IconCross, IconMarker } from '../../components/icons';
+import { IconCopy, IconCross, IconMarker, IconMergeCells, IconPlacement, IconSplitCell } from '../../components/icons';
 import { MODIFIER_KEY } from '../../components/constants';
 import { PopoverDesktop, PopoverItemType } from '../../components/utils/popover';
 import { twMerge } from '../../components/utils/tw';
 
-import { CELL_ATTR, ROW_ATTR } from './table-core';
+import { CELL_ATTR, CELL_COL_ATTR, CELL_ROW_ATTR, ROW_ATTR } from './table-core';
 import { createCellColorPicker } from './table-cell-color-picker';
 import type { CellColorMode } from './table-cell-color-picker';
+import { createCellPlacementPicker } from './table-cell-placement-picker';
+import type { CellPlacement } from './types';
 import { createGripDotsSvg } from './table-grip-visuals';
 
 import { PopoverEvent } from '@/types/utils/popover/popover-event';
@@ -72,8 +74,18 @@ interface CellSelectionOptions {
   onCut?: (cells: HTMLElement[], clipboardData: DataTransfer) => void;
   onCopyViaButton?: (cells: HTMLElement[]) => void;
   onColorChange?: (cells: HTMLElement[], color: string | null, mode: CellColorMode) => void;
+  onPlacementChange?: (cells: HTMLElement[], placement: CellPlacement) => void;
+  getCellPlacement?: (row: number, col: number) => CellPlacement | undefined;
   onPointerDragActiveChange?: (active: boolean) => void;
   isPopoverOpen?: () => boolean;
+  /** Called to check if the current selection range can be merged. */
+  canMergeCells?: (range: SelectionRange) => boolean;
+  /** Called when user requests to merge the selected cells. */
+  onMergeCells?: (range: SelectionRange) => void;
+  /** Called to check if the cell at (row, col) is a merge origin that can be split. */
+  isMergedCell?: (row: number, col: number) => boolean;
+  /** Called when user requests to split a merged cell. */
+  onSplitCell?: (row: number, col: number) => void;
   i18n: I18n;
 }
 
@@ -97,9 +109,15 @@ export class TableCellSelection {
   private onCut: ((cells: HTMLElement[], clipboardData: DataTransfer) => void) | undefined;
   private onCopyViaButton: ((cells: HTMLElement[]) => void) | undefined;
   private onColorChange: ((cells: HTMLElement[], color: string | null, mode: CellColorMode) => void) | undefined;
+  private onPlacementChange: ((cells: HTMLElement[], placement: CellPlacement) => void) | undefined;
+  private getCellPlacement: ((row: number, col: number) => CellPlacement | undefined) | undefined;
   private onSelectionRangeChange: ((range: SelectionRange) => void) | undefined;
   private onPointerDragActiveChange: ((active: boolean) => void) | undefined;
   private isPopoverOpen: (() => boolean) | undefined;
+  private canMergeCells: ((range: SelectionRange) => boolean) | undefined;
+  private onMergeCells: ((range: SelectionRange) => void) | undefined;
+  private isMergedCell: ((row: number, col: number) => boolean) | undefined;
+  private onSplitCell: ((row: number, col: number) => void) | undefined;
   private lastPaintedRange: SelectionRange | null = null;
 
   private boundPointerDown: (e: PointerEvent) => void;
@@ -121,9 +139,15 @@ export class TableCellSelection {
     this.onCut = options.onCut;
     this.onCopyViaButton = options.onCopyViaButton;
     this.onColorChange = options.onColorChange;
+    this.onPlacementChange = options.onPlacementChange;
+    this.getCellPlacement = options.getCellPlacement;
     this.onSelectionRangeChange = options.onSelectionRangeChange;
     this.onPointerDragActiveChange = options.onPointerDragActiveChange;
     this.isPopoverOpen = options.isPopoverOpen;
+    this.canMergeCells = options.canMergeCells;
+    this.onMergeCells = options.onMergeCells;
+    this.isMergedCell = options.isMergedCell;
+    this.onSplitCell = options.onSplitCell;
     this.i18n = options.i18n;
     this.grid.style.position = 'relative';
 
@@ -169,8 +193,7 @@ export class TableCellSelection {
    * Programmatically select an entire row.
    */
   public selectRow(rowIndex: number): void {
-    const rows = this.grid.querySelectorAll(`[${ROW_ATTR}]`);
-    const colCount = rows[0]?.querySelectorAll(`[${CELL_ATTR}]`).length ?? 0;
+    const colCount = this.getLogicalColumnCount();
 
     if (colCount === 0) {
       return;
@@ -544,9 +567,11 @@ export class TableCellSelection {
       cell.setAttribute(SELECTED_ATTR, '');
     });
 
-    // Calculate overlay position from bounding rects of corner cells
-    const firstCell = rows[minRow]?.querySelectorAll(`[${CELL_ATTR}]`)[minCol] as HTMLElement | undefined;
-    const lastCell = rows[maxRow]?.querySelectorAll(`[${CELL_ATTR}]`)[maxCol] as HTMLElement | undefined;
+    // Calculate overlay position from bounding rects of corner cells.
+    // Try coordinate-based lookup first (works with merged cells),
+    // then fall back to index-based lookup for backwards compatibility.
+    const firstCell = this.findCellByCoordOrIndex(rows, minRow, minCol);
+    const lastCell = this.findCellByCoordOrIndex(rows, maxRow, maxCol);
 
     if (!firstCell || !lastCell) {
       return;
@@ -614,8 +639,8 @@ export class TableCellSelection {
     }
 
     const rows = this.grid.querySelectorAll(`[${ROW_ATTR}]`);
-    const firstCell = rows[range.minRow]?.querySelectorAll(`[${CELL_ATTR}]`)[range.minCol] as HTMLElement | undefined;
-    const lastCell = rows[range.maxRow]?.querySelectorAll(`[${CELL_ATTR}]`)[range.maxCol] as HTMLElement | undefined;
+    const firstCell = this.findCellByCoordOrIndex(rows, range.minRow, range.minCol);
+    const lastCell = this.findCellByCoordOrIndex(rows, range.maxRow, range.maxCol);
 
     if (!firstCell || !lastCell) {
       return;
@@ -744,8 +769,76 @@ export class TableCellSelection {
       });
     }
 
+    const placementItems: PopoverItemParams[] = [];
+
+    if (this.onPlacementChange !== undefined) {
+      const currentPlacement: CellPlacement | undefined = this.lastPaintedRange && this.getCellPlacement
+        ? this.getCellPlacement(this.lastPaintedRange.minRow, this.lastPaintedRange.minCol)
+        : undefined;
+
+      const { element: pickerElement } = createCellPlacementPicker({
+        i18n: this.i18n,
+        currentPlacement,
+        onPlacementSelect: (placement: CellPlacement): void => {
+          this.onPlacementChange?.([...this.selectedCells], placement);
+        },
+      });
+
+      placementItems.push({
+        icon: IconPlacement,
+        title: this.i18n.t('tools.table.placement'),
+        name: 'cellPlacement',
+        children: {
+          items: [{
+            type: PopoverItemType.Html,
+            element: pickerElement,
+          }],
+          isFlippable: false,
+        },
+      });
+    }
+
+    const mergeItems: PopoverItemParams[] = [];
+
+    if (this.lastPaintedRange && this.onMergeCells) {
+      const range = this.lastPaintedRange;
+      const isMultiCell = range.minRow !== range.maxRow || range.minCol !== range.maxCol;
+      const canMerge = isMultiCell && this.canMergeCells?.(range);
+
+      if (canMerge) {
+        mergeItems.push({
+          icon: IconMergeCells,
+          title: this.i18n.t('tools.table.mergeCells'),
+          closeOnActivate: true,
+          onActivate: (): void => {
+            this.onMergeCells?.(range);
+            this.clearSelection();
+          },
+        });
+      }
+    }
+
+    if (this.lastPaintedRange && this.onSplitCell) {
+      const range = this.lastPaintedRange;
+      const isSingleCell = range.minRow === range.maxRow && range.minCol === range.maxCol;
+
+      if (isSingleCell && this.isMergedCell?.(range.minRow, range.minCol)) {
+        mergeItems.push({
+          icon: IconSplitCell,
+          title: this.i18n.t('tools.table.splitCell'),
+          closeOnActivate: true,
+          onActivate: (): void => {
+            this.onSplitCell?.(range.minRow, range.minCol);
+            this.clearSelection();
+          },
+        });
+      }
+    }
+
     const items: PopoverItemParams[] = [
       ...colorPickerItems,
+      ...placementItems,
+      ...mergeItems,
       {
         icon: IconCopy,
         title: this.i18n.t('tools.table.copySelection'),
@@ -868,7 +961,7 @@ export class TableCellSelection {
     const gridRect = this.grid.getBoundingClientRect();
     const rows = this.grid.querySelectorAll(`[${ROW_ATTR}]`);
     const rowCount = rows.length;
-    const colCount = rows[0]?.querySelectorAll(`[${CELL_ATTR}]`).length ?? 0;
+    const colCount = this.getLogicalColumnCount();
 
     if (rowCount === 0 || colCount === 0) {
       return;
@@ -892,15 +985,77 @@ export class TableCellSelection {
     minCol: number,
     maxCol: number,
   ): HTMLElement[] {
-    return Array.from(rows)
-      .slice(minRow, maxRow + 1)
-      .flatMap(row => {
-        const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
-
-        return Array.from(cells)
-          .slice(minCol, maxCol + 1)
-          .filter((cell): cell is HTMLElement => cell instanceof HTMLElement);
-      });
+    const hasCoordAttrs = this.grid.querySelector(`[${CELL_ROW_ATTR}]`) !== null;
+
+    if (!hasCoordAttrs) {
+      // Fallback: index-based lookup for grids without coordinate attributes
+      return Array.from(rows)
+        .slice(minRow, maxRow + 1)
+        .flatMap(row => {
+          const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
+
+          return Array.from(cells)
+            .slice(minCol, maxCol + 1)
+            .filter((cell): cell is HTMLElement => cell instanceof HTMLElement);
+        });
+    }
+
+    const allCells = this.grid.querySelectorAll<HTMLElement>(`[${CELL_ATTR}]`);
+
+    return Array.from(allCells).filter(cell => {
+      const rowAttr = cell.getAttribute(CELL_ROW_ATTR);
+      const colAttr = cell.getAttribute(CELL_COL_ATTR);
+
+      if (rowAttr === null || colAttr === null) {
+        return false;
+      }
+
+      const cellRow = Number(rowAttr);
+      const cellCol = Number(colAttr);
+      const td = cell as HTMLTableCellElement;
+      const cellMaxRow = cellRow + (td.rowSpan || 1) - 1;
+      const cellMaxCol = cellCol + (td.colSpan || 1) - 1;
+
+      // Include if the cell's area overlaps the selection range
+      return cellRow <= maxRow && cellMaxRow >= minRow
+        && cellCol <= maxCol && cellMaxCol >= minCol;
+    });
+  }
+
+  /**
+   * Find a cell by coordinate attributes first, falling back to index-based
+   * lookup when coordinate attributes are not present.
+   */
+  private findCellByCoordOrIndex(
+    rows: NodeListOf<Element>,
+    row: number,
+    col: number,
+  ): HTMLElement | undefined {
+    const coordCell = this.grid.querySelector<HTMLElement>(
+      `[${CELL_ROW_ATTR}="${row}"][${CELL_COL_ATTR}="${col}"]`
+    );
+
+    if (coordCell) {
+      return coordCell;
+    }
+
+    return rows[row]?.querySelectorAll(`[${CELL_ATTR}]`)[col] as HTMLElement | undefined;
+  }
+
+  /**
+   * Get the logical column count from the colgroup, falling back to the
+   * physical cell count in the first row when no colgroup exists.
+   */
+  private getLogicalColumnCount(): number {
+    const colgroupCount = this.grid.querySelector('colgroup')?.querySelectorAll('col').length;
+
+    if (colgroupCount !== undefined && colgroupCount > 0) {
+      return colgroupCount;
+    }
+
+    const firstRow = this.grid.querySelector(`[${ROW_ATTR}]`);
+
+    return firstRow?.querySelectorAll(`[${CELL_ATTR}]`).length ?? 0;
   }
 
   /**