@jackuait/blok 0.6.0-beta.9 → 0.6.0

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

@@ -1,9 +1,12 @@
 import type { I18n } from '../../../types/api';
-import { IconCross } from '../../components/icons';
-import { PopoverDesktop } from '../../components/utils/popover';
+import { IconCopy, IconCross, IconMarker } 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 { createCellColorPicker } from './table-cell-color-picker';
+import type { CellColorMode } from './table-cell-color-picker';
 import { createGripDotsSvg } from './table-grip-visuals';
 
 import { PopoverEvent } from '@/types/utils/popover/popover-event';
@@ -20,8 +23,8 @@ const PILL_IDLE_SIZE = 4;
 
 const PILL_CLASSES = [
   'absolute',
-  'z-[3]',
-  'rounded',
+  'z-3',
+  'rounded-sm',
   'select-none',
   'transition-[opacity,background-color,width]',
   'duration-150',
@@ -33,6 +36,13 @@ const PILL_CLASSES = [
   'bg-blue-500',
 ];
 
+export interface SelectionRange {
+  minRow: number;
+  maxRow: number;
+  minCol: number;
+  maxCol: number;
+}
+
 interface CellCoord {
   row: number;
   col: number;
@@ -56,7 +66,13 @@ interface CellSelectionOptions {
   grid: HTMLElement;
   rectangleSelection?: { cancelActiveSelection: () => void };
   onSelectionActiveChange?: (hasSelection: boolean) => void;
+  onSelectionRangeChange?: (range: SelectionRange) => void;
   onClearContent?: (cells: HTMLElement[]) => void;
+  onCopy?: (cells: HTMLElement[], clipboardData: DataTransfer) => void;
+  onCut?: (cells: HTMLElement[], clipboardData: DataTransfer) => void;
+  onCopyViaButton?: (cells: HTMLElement[]) => void;
+  onColorChange?: (cells: HTMLElement[], color: string | null, mode: CellColorMode) => void;
+  isPopoverOpen?: () => boolean;
   i18n: I18n;
 }
 
@@ -74,6 +90,15 @@ export class TableCellSelection {
   private overlay: HTMLElement | null = null;
   private pill: HTMLElement | null = null;
   private pillPopover: PopoverDesktop | null = null;
+  private resizeObserver: ResizeObserver | null = null;
+
+  private onCopy: ((cells: HTMLElement[], clipboardData: DataTransfer) => void) | undefined;
+  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 onSelectionRangeChange: ((range: SelectionRange) => void) | undefined;
+  private isPopoverOpen: (() => boolean) | undefined;
+  private lastPaintedRange: SelectionRange | null = null;
 
   private boundPointerDown: (e: PointerEvent) => void;
   private boundPointerMove: (e: PointerEvent) => void;
@@ -81,12 +106,21 @@ export class TableCellSelection {
   private boundClearSelection: (e: PointerEvent) => void;
   private boundCancelRectangle: (e: MouseEvent) => void;
   private boundKeyDown: (e: KeyboardEvent) => void;
+  private boundCopyHandler: (e: ClipboardEvent) => void;
+  private boundCutHandler: (e: ClipboardEvent) => void;
+  private boundPreventDragStart: (e: Event) => void;
 
   constructor(options: CellSelectionOptions) {
     this.grid = options.grid;
     this.rectangleSelection = options.rectangleSelection;
     this.onSelectionActiveChange = options.onSelectionActiveChange;
     this.onClearContent = options.onClearContent;
+    this.onCopy = options.onCopy;
+    this.onCut = options.onCut;
+    this.onCopyViaButton = options.onCopyViaButton;
+    this.onColorChange = options.onColorChange;
+    this.onSelectionRangeChange = options.onSelectionRangeChange;
+    this.isPopoverOpen = options.isPopoverOpen;
     this.i18n = options.i18n;
     this.grid.style.position = 'relative';
 
@@ -96,20 +130,30 @@ export class TableCellSelection {
     this.boundClearSelection = this.handleClearSelection.bind(this);
     this.boundCancelRectangle = this.handleCancelRectangle.bind(this);
     this.boundKeyDown = this.handleKeyDown.bind(this);
+    this.boundCopyHandler = this.handleCopy.bind(this);
+    this.boundCutHandler = this.handleCut.bind(this);
+    this.boundPreventDragStart = this.handleDragStart.bind(this);
 
     this.grid.addEventListener('pointerdown', this.boundPointerDown);
+    this.grid.addEventListener('dragstart', this.boundPreventDragStart);
     document.addEventListener('keydown', this.boundKeyDown);
+    document.addEventListener('copy', this.boundCopyHandler);
+    document.addEventListener('cut', this.boundCutHandler);
   }
 
   public destroy(): void {
     this.destroyPillPopover();
+    this.disconnectResizeObserver();
     this.clearSelection();
     this.grid.removeEventListener('pointerdown', this.boundPointerDown);
+    this.grid.removeEventListener('dragstart', this.boundPreventDragStart);
     document.removeEventListener('pointermove', this.boundPointerMove);
     document.removeEventListener('pointerup', this.boundPointerUp);
     document.removeEventListener('pointerdown', this.boundClearSelection);
     document.removeEventListener('mousemove', this.boundCancelRectangle, true);
     document.removeEventListener('keydown', this.boundKeyDown);
+    document.removeEventListener('copy', this.boundCopyHandler);
+    document.removeEventListener('cut', this.boundCutHandler);
   }
 
   /**
@@ -147,6 +191,32 @@ export class TableCellSelection {
     this.clearSelection();
   }
 
+  /**
+   * Return the currently painted selection range, or null if nothing is selected.
+   */
+  public getSelectedRange(): SelectionRange | null {
+    return this.hasSelection ? this.lastPaintedRange : null;
+  }
+
+  /**
+   * Programmatically restore a selection range (e.g. after a DOM rebuild).
+   */
+  public selectRange(range: SelectionRange): void {
+    this.showProgrammaticSelection(range.minRow, range.minCol, range.maxRow, range.maxCol);
+  }
+
+  /**
+   * Prevent native drag-and-drop while a cell selection drag is in progress.
+   * Without this, the browser can fire dragstart on contenteditable cells
+   * during a pointer drag, which suppresses pointermove events and breaks
+   * the cell selection.
+   */
+  private handleDragStart(e: Event): void {
+    if (this.anchorCell) {
+      e.preventDefault();
+    }
+  }
+
   private handlePointerDown(e: PointerEvent): void {
     // Don't interfere with grip drags, resize, or add-button drags
     if (isOtherInteractionActive(this.grid)) {
@@ -171,8 +241,19 @@ export class TableCellSelection {
       return;
     }
 
-    // If there's an existing selection, clear it first
-    if (this.hasSelection) {
+    // If clicking the same single-cell that's already selected, keep the
+    // selection instead of clearing and re-creating it (avoids border flash).
+    const clickedSameCell = this.hasSelection
+      && this.lastPaintedRange !== null
+      && this.lastPaintedRange.minRow === cell.row
+      && this.lastPaintedRange.maxRow === cell.row
+      && this.lastPaintedRange.minCol === cell.col
+      && this.lastPaintedRange.maxCol === cell.col;
+
+    if (clickedSameCell) {
+      // Remove the document clear handler so it doesn't fire for this click
+      document.removeEventListener('pointerdown', this.boundClearSelection);
+    } else if (this.hasSelection) {
       this.clearSelection();
     }
 
@@ -256,10 +337,28 @@ export class TableCellSelection {
       this.grid.style.userSelect = '';
       this.hasSelection = true;
 
-      // Listen for next pointerdown anywhere to clear selection
-      requestAnimationFrame(() => {
+      if (this.lastPaintedRange) {
+        this.onSelectionRangeChange?.(this.lastPaintedRange);
+      }
+
+      // Listen for next pointerdown anywhere to clear selection.
+      // Register synchronously — pointerdown for the drag already fired
+      // before this pointerup, so there is no risk of the current
+      // interaction's pointerdown triggering the clear handler.
+      document.addEventListener('pointerdown', this.boundClearSelection);
+    } else if (this.anchorCell) {
+      if (this.hasSelection) {
+        // Already selected (same single cell) — just re-register clear handler
         document.addEventListener('pointerdown', this.boundClearSelection);
-      });
+      } else {
+        // Single click without drag — select the clicked cell
+        this.showProgrammaticSelection(
+          this.anchorCell.row,
+          this.anchorCell.col,
+          this.anchorCell.row,
+          this.anchorCell.col,
+        );
+      }
     }
 
     this.isSelecting = false;
@@ -274,12 +373,17 @@ export class TableCellSelection {
       return;
     }
 
-    // Don't clear while the pill popover is open — the user may be
+    // Don't clear when clicking inside an open popover — the user may be
     // clicking a popover item whose pointerdown bubbles to the document.
-    if (this.pillPopover !== null) {
+    // Popovers render on document.body and carry `data-blok-popover-opened`.
+    if (target instanceof HTMLElement && target.closest('[data-blok-popover-opened]') !== null) {
       return;
     }
 
+    if (this.pillPopover !== null) {
+      this.destroyPillPopover();
+    }
+
     document.removeEventListener('pointerdown', this.boundClearSelection);
     this.clearSelection();
   }
@@ -295,6 +399,12 @@ export class TableCellSelection {
       return;
     }
 
+    // For single-cell selections, let the browser handle Delete/Backspace
+    // as normal character-level editing in the contenteditable cell.
+    if (this.selectedCells.length <= 1) {
+      return;
+    }
+
     // Prevent default behavior
     e.preventDefault();
 
@@ -303,11 +413,32 @@ export class TableCellSelection {
     this.clearSelection();
   }
 
+  private handleCopy(e: ClipboardEvent): void {
+    if (!this.hasSelection || !e.clipboardData) {
+      return;
+    }
+
+    e.preventDefault();
+    this.onCopy?.([...this.selectedCells], e.clipboardData);
+  }
+
+  private handleCut(e: ClipboardEvent): void {
+    if (!this.hasSelection || !e.clipboardData) {
+      return;
+    }
+
+    e.preventDefault();
+    this.onCut?.([...this.selectedCells], e.clipboardData);
+    this.onClearContent?.([...this.selectedCells]);
+    this.clearSelection();
+  }
+
   private clearSelection(): void {
     const hadSelection = this.hasSelection;
 
     this.restoreModifiedCells();
     this.hasSelection = false;
+    this.lastPaintedRange = null;
 
     if (hadSelection) {
       this.onSelectionActiveChange?.(false);
@@ -316,6 +447,7 @@ export class TableCellSelection {
 
   private restoreModifiedCells(): void {
     this.destroyPillPopover();
+    this.disconnectResizeObserver();
 
     this.selectedCells.forEach(cell => {
       cell.removeAttribute(SELECTED_ATTR);
@@ -346,13 +478,18 @@ export class TableCellSelection {
     this.paintSelection();
     this.hasSelection = true;
     this.onSelectionActiveChange?.(true);
+
+    if (this.lastPaintedRange) {
+      this.onSelectionRangeChange?.(this.lastPaintedRange);
+    }
+
     this.anchorCell = null;
     this.extentCell = null;
 
-    // Listen for next pointerdown anywhere to clear the programmatic selection
-    requestAnimationFrame(() => {
-      document.addEventListener('pointerdown', this.boundClearSelection);
-    });
+    // Listen for next pointerdown anywhere to clear the programmatic selection.
+    // Register synchronously to avoid race conditions where a fast
+    // pointerdown arrives before the next animation frame.
+    document.addEventListener('pointerdown', this.boundClearSelection);
   }
 
   private paintSelection(): void {
@@ -372,6 +509,8 @@ export class TableCellSelection {
     const minCol = Math.min(this.anchorCell.col, this.extentCell.col);
     const maxCol = Math.max(this.anchorCell.col, this.extentCell.col);
 
+    this.lastPaintedRange = { minRow, maxRow, minCol, maxCol };
+
     const rows = this.grid.querySelectorAll(`[${ROW_ATTR}]`);
 
     // Mark selected cells
@@ -434,6 +573,78 @@ export class TableCellSelection {
     // Position at center of the 2px right border; translate(-50%,-50%) handles centering
     this.pill.style.left = `${left + width - 1}px`;
     this.pill.style.top = `${top + height / 2}px`;
+
+    this.observeCellResizes();
+  }
+
+  /**
+   * Recalculate overlay and pill positions from the last painted range.
+   * Called by the ResizeObserver when selected cells change size.
+   */
+  private repositionOverlay(): void {
+    const range = this.lastPaintedRange;
+
+    if (!range || !this.overlay) {
+      return;
+    }
+
+    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;
+
+    if (!firstCell || !lastCell) {
+      return;
+    }
+
+    const gridRect = this.grid.getBoundingClientRect();
+    const firstRect = firstCell.getBoundingClientRect();
+    const lastRect = lastCell.getBoundingClientRect();
+
+    const gridStyle = getComputedStyle(this.grid);
+    const borderTop = parseFloat(gridStyle.borderTopWidth) || 0;
+    const borderLeft = parseFloat(gridStyle.borderLeftWidth) || 0;
+
+    const width = lastRect.right - firstRect.left + 1;
+    const height = lastRect.bottom - firstRect.top + 1;
+    const top = firstRect.top - gridRect.top - borderTop - 1;
+    const left = firstRect.left - gridRect.left - borderLeft - 1;
+
+    this.overlay.style.top = `${top}px`;
+    this.overlay.style.left = `${left}px`;
+    this.overlay.style.width = `${width}px`;
+    this.overlay.style.height = `${height}px`;
+
+    if (this.pill) {
+      this.pill.style.left = `${left + width - 1}px`;
+      this.pill.style.top = `${top + height / 2}px`;
+    }
+  }
+
+  /**
+   * Start observing selected cells for size changes so the overlay
+   * stays in sync when cell content grows or shrinks.
+   */
+  private observeCellResizes(): void {
+    this.disconnectResizeObserver();
+
+    if (this.selectedCells.length === 0) {
+      return;
+    }
+
+    this.resizeObserver = new ResizeObserver(() => {
+      this.repositionOverlay();
+    });
+
+    for (const cell of this.selectedCells) {
+      this.resizeObserver.observe(cell);
+    }
+  }
+
+  private disconnectResizeObserver(): void {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
   }
 
   private createPill(): HTMLElement {
@@ -482,10 +693,48 @@ export class TableCellSelection {
 
     this.expandPill();
 
+    const copyShortcut = MODIFIER_KEY === 'Meta' ? '⌘C' : 'Ctrl+C';
+
+    const colorPickerItems: PopoverItemParams[] = [];
+
+    if (this.onColorChange !== undefined) {
+      const { element: pickerElement } = createCellColorPicker({
+        i18n: this.i18n,
+        onColorSelect: (color: string | null, mode: CellColorMode): void => {
+          this.onColorChange?.([...this.selectedCells], color, mode);
+        },
+      });
+
+      colorPickerItems.push({
+        icon: IconMarker,
+        title: this.i18n.t('tools.table.cellColor'),
+        name: 'cellColor',
+        children: {
+          items: [{
+            type: PopoverItemType.Html,
+            element: pickerElement,
+          }],
+          isFlippable: false,
+          width: '12.5rem',
+        },
+      });
+    }
+
     const items: PopoverItemParams[] = [
+      ...colorPickerItems,
+      {
+        icon: IconCopy,
+        title: this.i18n.t('tools.table.copySelection'),
+        secondaryLabel: copyShortcut,
+        closeOnActivate: true,
+        onActivate: (): void => {
+          this.onCopyViaButton?.([...this.selectedCells]);
+        },
+      },
       {
         icon: IconCross,
         title: this.i18n.t('tools.table.clearSelection'),
+        secondaryLabel: 'Del',
         closeOnActivate: true,
         onActivate: (): void => {
           this.onClearContent?.([...this.selectedCells]);

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

@@ -1,7 +1,7 @@
 import { twMerge } from '../../components/utils/tw';
 
 import { CELL_BLOCKS_ATTR } from './table-cell-blocks';
-import type { CellContent, LegacyCellContent } from './types';
+import type { LegacyCellContent } from './types';
 
 export const ROW_ATTR = 'data-blok-table-row';
 export const CELL_ATTR = 'data-blok-table-cell';
@@ -17,7 +17,7 @@ const CELL_CLASSES = [
   'py-1',
   'px-2',
   'min-h-[2em]',
-  'outline-none',
+  'outline-hidden',
   'leading-normal',
   'text-sm',
   'cursor-text',
@@ -38,7 +38,7 @@ interface TableGridOptions {
 
 /**
  * Manages the table grid DOM structure.
- * Creates rows, columns, cells and extracts data from the grid.
+ * Creates, deletes, moves, and queries rows, columns, and cells.
  */
 export class TableGrid {
   private readOnly: boolean;
@@ -73,27 +73,6 @@ export class TableGrid {
     // Content is populated by TableCellBlocks.initializeCells()
   }
 
-  /**
-   * Extract 2D array from grid DOM
-   */
-  public getData(table: HTMLElement): CellContent[][] {
-    const rows = table.querySelectorAll(`[${ROW_ATTR}]`);
-    const result: CellContent[][] = [];
-
-    rows.forEach(row => {
-      const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
-      const rowData: CellContent[] = [];
-
-      cells.forEach(cell => {
-        rowData.push(this.getCellContent(cell as HTMLElement));
-      });
-
-      result.push(rowData);
-    });
-
-    return result;
-  }
-
   /**
    * Add a row. If index is provided, inserts before that row.
    * Otherwise appends at the end.
@@ -375,24 +354,6 @@ export class TableGrid {
     return widths;
   }
 
-  /**
-   * Get cell content as block references
-   */
-  private getCellContent(cell: HTMLElement): CellContent {
-    const blocksContainer = cell.querySelector(`[${CELL_BLOCKS_ATTR}]`);
-
-    if (!blocksContainer) {
-      return { blocks: [] };
-    }
-
-    const blockElements = blocksContainer.querySelectorAll('[data-blok-id]');
-    const blockIds = Array.from(blockElements)
-      .map(el => el.getAttribute('data-blok-id') ?? '')
-      .filter(id => id !== '');
-
-    return { blocks: blockIds };
-  }
-
   /**
    * Detect whether cells use 'px' or '%' widths
    */

package/src/tools/table/table-heading-toggle.ts

@@ -10,7 +10,7 @@ const TOGGLE_ROW_CLASSES = [
   'border-none',
   'bg-transparent',
   'rounded-md',
-  'p-[var(--item-padding)]',
+  'p-(--item-padding)',
   'text-text-primary',
   'mb-px',
   'cursor-pointer',
@@ -59,7 +59,7 @@ const THUMB_CLASSES = [
   'h-4',
   'rounded-full',
   'bg-white',
-  'shadow-sm',
+  'shadow-xs',
   'transition-[left]',
   'duration-200',
 ];