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

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 };
+};

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;
   }
 
   /**