@jackuait/blok 0.6.0-beta.4 → 0.6.0-beta.6

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

@@ -1,3 +1,4 @@
+import type { I18n } from '../../../types/api';
 import { IconCross } from '../../components/icons';
 import { PopoverDesktop } from '../../components/utils/popover';
 import { twMerge } from '../../components/utils/tw';
@@ -56,6 +57,7 @@ interface CellSelectionOptions {
   rectangleSelection?: { cancelActiveSelection: () => void };
   onSelectionActiveChange?: (hasSelection: boolean) => void;
   onClearContent?: (cells: HTMLElement[]) => void;
+  i18n: I18n;
 }
 
 export class TableCellSelection {
@@ -63,6 +65,7 @@ export class TableCellSelection {
   private rectangleSelection?: { cancelActiveSelection: () => void };
   private onSelectionActiveChange: ((hasSelection: boolean) => void) | undefined;
   private onClearContent: ((cells: HTMLElement[]) => void) | undefined;
+  private i18n: I18n;
   private anchorCell: CellCoord | null = null;
   private extentCell: CellCoord | null = null;
   private isSelecting = false;
@@ -77,12 +80,14 @@ export class TableCellSelection {
   private boundPointerUp: () => void;
   private boundClearSelection: (e: PointerEvent) => void;
   private boundCancelRectangle: (e: MouseEvent) => void;
+  private boundKeyDown: (e: KeyboardEvent) => void;
 
   constructor(options: CellSelectionOptions) {
     this.grid = options.grid;
     this.rectangleSelection = options.rectangleSelection;
     this.onSelectionActiveChange = options.onSelectionActiveChange;
     this.onClearContent = options.onClearContent;
+    this.i18n = options.i18n;
     this.grid.style.position = 'relative';
 
     this.boundPointerDown = this.handlePointerDown.bind(this);
@@ -90,8 +95,10 @@ export class TableCellSelection {
     this.boundPointerUp = this.handlePointerUp.bind(this);
     this.boundClearSelection = this.handleClearSelection.bind(this);
     this.boundCancelRectangle = this.handleCancelRectangle.bind(this);
+    this.boundKeyDown = this.handleKeyDown.bind(this);
 
     this.grid.addEventListener('pointerdown', this.boundPointerDown);
+    document.addEventListener('keydown', this.boundKeyDown);
   }
 
   public destroy(): void {
@@ -102,6 +109,7 @@ export class TableCellSelection {
     document.removeEventListener('pointerup', this.boundPointerUp);
     document.removeEventListener('pointerdown', this.boundClearSelection);
     document.removeEventListener('mousemove', this.boundCancelRectangle, true);
+    document.removeEventListener('keydown', this.boundKeyDown);
   }
 
   /**
@@ -276,6 +284,25 @@ export class TableCellSelection {
     this.clearSelection();
   }
 
+  private handleKeyDown(e: KeyboardEvent): void {
+    // Only trigger when selection is active
+    if (!this.hasSelection) {
+      return;
+    }
+
+    // Check for Delete or Backspace
+    if (e.key !== 'Delete' && e.key !== 'Backspace') {
+      return;
+    }
+
+    // Prevent default behavior
+    e.preventDefault();
+
+    // Clear content and dismiss selection
+    this.onClearContent?.([...this.selectedCells]);
+    this.clearSelection();
+  }
+
   private clearSelection(): void {
     const hadSelection = this.hasSelection;
 
@@ -348,26 +375,10 @@ export class TableCellSelection {
     const rows = this.grid.querySelectorAll(`[${ROW_ATTR}]`);
 
     // Mark selected cells
-    for (let r = minRow; r <= maxRow; r++) {
-      const row = rows[r];
-
-      if (!row) {
-        continue;
-      }
-
-      const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
-
-      for (let c = minCol; c <= maxCol; c++) {
-        const cell = cells[c] as HTMLElement | undefined;
-
-        if (!cell) {
-          continue;
-        }
-
-        cell.setAttribute(SELECTED_ATTR, '');
-        this.selectedCells.push(cell);
-      }
-    }
+    this.selectedCells = this.collectCellsInRange(rows, minRow, maxRow, minCol, maxCol);
+    this.selectedCells.forEach(cell => {
+      cell.setAttribute(SELECTED_ATTR, '');
+    });
 
     // Calculate overlay position from bounding rects of corner cells
     const firstCell = rows[minRow]?.querySelectorAll(`[${CELL_ATTR}]`)[minCol] as HTMLElement | undefined;
@@ -388,16 +399,14 @@ export class TableCellSelection {
     const borderTop = parseFloat(gridStyle.borderTopWidth) || 0;
     const borderLeft = parseFloat(gridStyle.borderLeftWidth) || 0;
 
-    let top = firstRect.top - gridRect.top - borderTop;
-    let left = firstRect.left - gridRect.left - borderLeft;
     const width = lastRect.right - firstRect.left + 1;
     const height = lastRect.bottom - firstRect.top + 1;
 
     // Extend overlay 1px outward to cover adjacent borders:
     // grid border-top/border-left at row 0/col 0, or the previous
     // row's border-bottom / previous column's border-right otherwise.
-    top -= 1;
-    left -= 1;
+    const top = firstRect.top - gridRect.top - borderTop - 1;
+    const left = firstRect.left - gridRect.left - borderLeft - 1;
 
     // Create overlay once, reuse on subsequent paints
     if (!this.overlay) {
@@ -476,7 +485,7 @@ export class TableCellSelection {
     const items: PopoverItemParams[] = [
       {
         icon: IconCross,
-        title: 'Clear',
+        title: this.i18n.t('tools.table.clearSelection'),
         closeOnActivate: true,
         onActivate: (): void => {
           this.onClearContent?.([...this.selectedCells]);
@@ -592,27 +601,8 @@ export class TableCellSelection {
       return;
     }
 
-    // Clamp row
-    let row: number;
-
-    if (e.clientY < gridRect.top) {
-      row = 0;
-    } else if (e.clientY > gridRect.bottom) {
-      row = rowCount - 1;
-    } else {
-      row = this.extentCell?.row ?? this.anchorCell.row;
-    }
-
-    // Clamp col
-    let col: number;
-
-    if (e.clientX < gridRect.left) {
-      col = 0;
-    } else if (e.clientX > gridRect.right) {
-      col = colCount - 1;
-    } else {
-      col = this.extentCell?.col ?? this.anchorCell.col;
-    }
+    const row = this.clampAxis(e.clientY, gridRect.top, gridRect.bottom, rowCount, this.extentCell?.row ?? this.anchorCell.row);
+    const col = this.clampAxis(e.clientX, gridRect.left, gridRect.right, colCount, this.extentCell?.col ?? this.anchorCell.col);
 
     const clamped = { row, col };
 
@@ -621,4 +611,38 @@ export class TableCellSelection {
       this.paintSelection();
     }
   }
+
+  private collectCellsInRange(
+    rows: NodeListOf<Element>,
+    minRow: number,
+    maxRow: number,
+    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);
+      });
+  }
+
+  /**
+   * Clamp a pointer coordinate to an axis range, returning the edge index
+   * when outside or the fallback when inside.
+   */
+  private clampAxis(pointer: number, min: number, max: number, count: number, fallback: number): number {
+    if (pointer < min) {
+      return 0;
+    }
+
+    if (pointer > max) {
+      return count - 1;
+    }
+
+    return fallback;
+  }
 }

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

@@ -20,6 +20,7 @@ const CELL_CLASSES = [
   'outline-none',
   'leading-normal',
   'text-sm',
+  'cursor-text',
 ];
 
 /**
@@ -131,7 +132,7 @@ export class TableGrid {
    * those widths and the new column is added in px mode. This prevents
    * existing columns from shrinking when the table is in percent mode.
    */
-  public addColumn(table: HTMLElement, index?: number, colWidths?: number[]): boolean {
+  public addColumn(table: HTMLElement, index?: number, colWidths?: number[], newColWidth?: number): boolean {
     const rows = table.querySelectorAll(`[${ROW_ATTR}]`);
     const oldColCount = this.getColumnCount(table);
     const hasValidColWidths = colWidths !== undefined && colWidths.length === oldColCount;
@@ -142,7 +143,7 @@ export class TableGrid {
     }
 
     if (usePx) {
-      this.addColumnPx(rows, oldColCount, index);
+      this.addColumnPx(rows, oldColCount, index, newColWidth);
 
       return true;
     }
@@ -170,24 +171,15 @@ export class TableGrid {
   }
 
   /**
-   * Add column in px mode: keep existing widths, add new column at half the average width
+   * Add column in px mode: keep existing widths, add new column at given width or half the average
    */
-  private addColumnPx(rows: NodeListOf<Element>, oldColCount: number, index?: number): void {
-    const firstRow = rows[0];
-    const firstRowCells = firstRow?.querySelectorAll(`[${CELL_ATTR}]`);
-    const totalWidth = Array.from(firstRowCells ?? []).reduce(
-      (sum, node) => sum + (parseFloat((node as HTMLElement).style.width) || 0),
-      0
-    );
-
-    const newColWidth = oldColCount > 0
-      ? Math.round((totalWidth / oldColCount / 2) * 100) / 100
-      : 0;
+  private addColumnPx(rows: NodeListOf<Element>, oldColCount: number, index?: number, newColWidth?: number): void {
+    const computedWidth = newColWidth ?? this.computeHalfAvgPxWidth(rows, oldColCount);
 
     rows.forEach(row => {
       const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
       const isAppend = index === undefined || index >= cells.length;
-      const cell = this.createCell(`${newColWidth}px`);
+      const cell = this.createCell(`${computedWidth}px`);
 
       if (!isAppend) {
         row.insertBefore(cell, cells[index]);
@@ -199,6 +191,19 @@ export class TableGrid {
     });
   }
 
+  private computeHalfAvgPxWidth(rows: NodeListOf<Element>, oldColCount: number): number {
+    const firstRow = rows[0];
+    const firstRowCells = firstRow?.querySelectorAll(`[${CELL_ATTR}]`);
+    const totalWidth = Array.from(firstRowCells ?? []).reduce(
+      (sum, node) => sum + (parseFloat((node as HTMLElement).style.width) || 0),
+      0
+    );
+
+    return oldColCount > 0
+      ? Math.round((totalWidth / oldColCount / 2) * 100) / 100
+      : 0;
+  }
+
   /**
    * Add column in % mode: shrink existing columns slightly and add new column at half the average width
    */

package/src/tools/table/table-grip-visuals.ts

@@ -57,9 +57,9 @@ export const createGripDotsSvg = (orientation: 'horizontal' | 'vertical'): SVGEl
  */
 export const expandGrip = (grip: HTMLElement, type: 'col' | 'row'): void => {
   if (type === 'col') {
-    grip.style.height = `${GRIP_HOVER_SIZE}px`;
+    Object.assign(grip.style, { height: `${GRIP_HOVER_SIZE}px` });
   } else {
-    grip.style.width = `${GRIP_HOVER_SIZE}px`;
+    Object.assign(grip.style, { width: `${GRIP_HOVER_SIZE}px` });
   }
 
   grip.classList.add('bg-gray-200');
@@ -79,9 +79,9 @@ export const expandGrip = (grip: HTMLElement, type: 'col' | 'row'): void => {
  */
 export const collapseGrip = (grip: HTMLElement, type: 'col' | 'row', pillSize: number): void => {
   if (type === 'col') {
-    grip.style.height = `${pillSize}px`;
+    Object.assign(grip.style, { height: `${pillSize}px` });
   } else {
-    grip.style.width = `${pillSize}px`;
+    Object.assign(grip.style, { width: `${pillSize}px` });
   }
 
   grip.classList.remove('bg-gray-200');

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

@@ -168,14 +168,15 @@ export const computeInsertColumnWidths = (
 ): number[] => {
   const colWidths = data.colWidths ?? readPixelWidths(gridEl);
 
-  grid.addColumn(gridEl, index, colWidths);
+  const halfWidth = data.initialColWidth !== undefined
+    ? Math.round((data.initialColWidth / 2) * 100) / 100
+    : computeHalfAvgWidth(colWidths);
+
+  grid.addColumn(gridEl, index, colWidths, halfWidth);
 
-  const halfAvgWidth = Math.round(
-    (colWidths.reduce((sum, w) => sum + w, 0) / colWidths.length / 2) * 100
-  ) / 100;
   const newWidths = [...colWidths];
 
-  newWidths.splice(index, 0, halfAvgWidth);
+  newWidths.splice(index, 0, halfWidth);
 
   return newWidths;
 };
@@ -185,6 +186,14 @@ export const computeHalfAvgWidth = (colWidths: number[]): number =>
     (colWidths.reduce((sum, w) => sum + w, 0) / colWidths.length / 2) * 100
   ) / 100;
 
+export const computeInitialColWidth = (colWidths: number[]): number => {
+  if (colWidths.length === 0) {
+    return 0;
+  }
+
+  return Math.round((colWidths.reduce((sum, w) => sum + w, 0) / colWidths.length) * 100) / 100;
+};
+
 // ─── Block IDs from cells ───────────────────────────────────────────
 
 export const getBlockIdsInRow = (element: HTMLElement | null, cellBlocks: TableCellBlocks | null, rowIndex: number): string[] => {
@@ -309,15 +318,15 @@ export const mountCellBlocksReadOnly = (
         return;
       }
 
-      if (!isCellWithBlocks(cellContent)) {
-        // Handle legacy string content by creating a paragraph block
-        // Check if container already has blocks to ensure idempotency
-        const existingBlocks = container.querySelectorAll('[data-blok-id]');
+      // Skip legacy cells that already have blocks (idempotency guard)
+      const hasExistingBlocks = container.querySelectorAll('[data-blok-id]').length > 0;
 
-        if (existingBlocks.length > 0) {
-          return;
-        }
+      if (!isCellWithBlocks(cellContent) && hasExistingBlocks) {
+        return;
+      }
 
+      if (!isCellWithBlocks(cellContent)) {
+        // Handle legacy string content by creating a paragraph block
         const legacyText = typeof cellContent === 'string' ? cellContent : '';
         const insertedBlock = api.blocks.insert(
           'paragraph',
@@ -379,6 +388,7 @@ export const normalizeTableData = (
     stretched: tableData.stretched ?? config.stretched ?? false,
     content: tableData.content ?? [],
     colWidths: validWidths,
+    initialColWidth: tableData.initialColWidth,
   };
 };
 

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

@@ -0,0 +1,64 @@
+import type { API } from '../../../types';
+import type { Block } from '../../components/block';
+
+/**
+ * List of block tools that are restricted from being inserted into table cells.
+ * These tools create semantic or structural issues when nested in table cells.
+ */
+export const RESTRICTED_TOOLS = ['header', 'table'];
+
+/**
+ * Check if a block or element is inside a table cell.
+ * Uses the data-blok-table-cell-blocks attribute to detect cell containers.
+ *
+ * @param block - Block instance or HTMLElement to check
+ * @returns true if inside a table cell, false otherwise
+ */
+export const isInsideTableCell = (block: Block | HTMLElement | null | undefined): boolean => {
+  if (!block) {
+    return false;
+  }
+
+  const element = block instanceof HTMLElement ? block : block.holder;
+
+  return element.closest('[data-blok-table-cell-blocks]') !== null;
+};
+
+/**
+ * Check if a tool name is restricted inside table cells.
+ *
+ * @param toolName - Name of the block tool to check
+ * @returns true if the tool is restricted in table cells, false otherwise
+ */
+export const isRestrictedInTableCell = (toolName: string): boolean => {
+  return RESTRICTED_TOOLS.includes(toolName);
+};
+
+/**
+ * Convert a restricted block to a paragraph block, preserving text content.
+ * Replaces the original block in place.
+ *
+ * @param block - The block to convert
+ * @param api - Blok API instance
+ * @returns The newly created paragraph block
+ * @throws Error if block index cannot be found
+ */
+export const convertToParagraph = (block: Block, api: API): Block => {
+  const text = block.holder.textContent || '';
+  const blockIndex = api.blocks.getBlockIndex(block.id);
+
+  if (blockIndex === undefined) {
+    throw new Error('Block index not found');
+  }
+
+  // Replace with paragraph, preserving text
+  return api.blocks.insert(
+    'paragraph',
+    { text },
+    {},
+    blockIndex,
+    false, // don't focus
+    true,  // replace existing
+    block.id
+  ) as unknown as Block;
+};

package/src/tools/table/table-row-col-action-handler.ts

@@ -0,0 +1,190 @@
+import type { TableCellBlocks } from './table-cell-blocks';
+import type { TableGrid } from './table-core';
+import {
+  applyPixelWidths,
+  computeInsertColumnWidths,
+  deleteColumnWithBlockCleanup,
+  deleteRowWithBlockCleanup,
+  populateNewCells,
+  redistributePercentWidths,
+  syncColWidthsAfterMove,
+} from './table-operations';
+import type { RowColAction } from './table-row-col-controls';
+import type { TableData } from './types';
+
+/**
+ * Describes which row or column to highlight after an action completes.
+ */
+export type PendingHighlight = { type: 'row' | 'col'; index: number };
+
+interface ActionContext {
+  grid: TableGrid;
+  data: TableData;
+  cellBlocks: TableCellBlocks | null;
+}
+
+interface ActionResult {
+  pendingHighlight: PendingHighlight | null;
+  moveSelection: { type: 'row' | 'col'; index: number } | null;
+  colWidths: number[] | undefined;
+  withHeadings: boolean;
+  withHeadingColumn: boolean;
+}
+
+const handleInsertRow = (
+  gridEl: HTMLElement,
+  index: number,
+  ctx: ActionContext,
+): ActionResult => {
+  ctx.grid.addRow(gridEl, index);
+  populateNewCells(gridEl, ctx.cellBlocks);
+
+  return {
+    pendingHighlight: { type: 'row', index },
+    moveSelection: null,
+    colWidths: ctx.data.colWidths,
+    withHeadings: ctx.data.withHeadings,
+    withHeadingColumn: ctx.data.withHeadingColumn,
+  };
+};
+
+const handleInsertCol = (
+  gridEl: HTMLElement,
+  index: number,
+  ctx: ActionContext,
+): ActionResult => {
+  const colWidths = computeInsertColumnWidths(gridEl, index, ctx.data, ctx.grid);
+
+  populateNewCells(gridEl, ctx.cellBlocks);
+
+  return {
+    pendingHighlight: { type: 'col', index },
+    moveSelection: null,
+    colWidths,
+    withHeadings: ctx.data.withHeadings,
+    withHeadingColumn: ctx.data.withHeadingColumn,
+  };
+};
+
+const handleMoveRow = (
+  gridEl: HTMLElement,
+  fromIndex: number,
+  toIndex: number,
+  ctx: ActionContext,
+): ActionResult => {
+  ctx.grid.moveRow(gridEl, fromIndex, toIndex);
+
+  return {
+    pendingHighlight: null,
+    moveSelection: { type: 'row', index: toIndex },
+    colWidths: ctx.data.colWidths,
+    withHeadings: ctx.data.withHeadings,
+    withHeadingColumn: ctx.data.withHeadingColumn,
+  };
+};
+
+const handleMoveCol = (
+  gridEl: HTMLElement,
+  fromIndex: number,
+  toIndex: number,
+  ctx: ActionContext,
+): ActionResult => {
+  ctx.grid.moveColumn(gridEl, fromIndex, toIndex);
+
+  return {
+    pendingHighlight: null,
+    moveSelection: { type: 'col', index: toIndex },
+    colWidths: syncColWidthsAfterMove(ctx.data.colWidths, fromIndex, toIndex),
+    withHeadings: ctx.data.withHeadings,
+    withHeadingColumn: ctx.data.withHeadingColumn,
+  };
+};
+
+const handleDeleteRow = (
+  gridEl: HTMLElement,
+  index: number,
+  ctx: ActionContext,
+): ActionResult => {
+  deleteRowWithBlockCleanup(gridEl, index, ctx.grid, ctx.cellBlocks);
+  const newRowCount = ctx.grid.getRowCount(gridEl);
+  const neighborRow = index < newRowCount ? index : index - 1;
+
+  return {
+    pendingHighlight: { type: 'row', index: neighborRow },
+    moveSelection: null,
+    colWidths: ctx.data.colWidths,
+    withHeadings: ctx.data.withHeadings,
+    withHeadingColumn: ctx.data.withHeadingColumn,
+  };
+};
+
+const handleDeleteCol = (
+  gridEl: HTMLElement,
+  index: number,
+  ctx: ActionContext,
+): ActionResult => {
+  const colWidths = deleteColumnWithBlockCleanup(gridEl, index, ctx.data.colWidths, ctx.grid, ctx.cellBlocks);
+
+  if (colWidths) {
+    applyPixelWidths(gridEl, colWidths);
+  } else {
+    redistributePercentWidths(gridEl);
+  }
+
+  const newColCount = ctx.grid.getColumnCount(gridEl);
+  const neighborCol = index < newColCount ? index : index - 1;
+
+  return {
+    pendingHighlight: { type: 'col', index: neighborCol },
+    moveSelection: null,
+    colWidths,
+    withHeadings: ctx.data.withHeadings,
+    withHeadingColumn: ctx.data.withHeadingColumn,
+  };
+};
+
+/**
+ * Execute a row/column action on the table grid.
+ * Returns the updated colWidths, withHeadings, withHeadingColumn values
+ * along with pendingHighlight and moveSelection for the caller to apply.
+ */
+export const executeRowColAction = (
+  gridEl: HTMLElement,
+  action: RowColAction,
+  ctx: ActionContext,
+): ActionResult => {
+  switch (action.type) {
+    case 'insert-row-above':
+      return handleInsertRow(gridEl, action.index, ctx);
+    case 'insert-row-below':
+      return handleInsertRow(gridEl, action.index + 1, ctx);
+    case 'insert-col-left':
+      return handleInsertCol(gridEl, action.index, ctx);
+    case 'insert-col-right':
+      return handleInsertCol(gridEl, action.index + 1, ctx);
+    case 'move-row':
+      return handleMoveRow(gridEl, action.fromIndex, action.toIndex, ctx);
+    case 'move-col':
+      return handleMoveCol(gridEl, action.fromIndex, action.toIndex, ctx);
+    case 'delete-row':
+      return handleDeleteRow(gridEl, action.index, ctx);
+    case 'delete-col':
+      return handleDeleteCol(gridEl, action.index, ctx);
+    case 'toggle-heading':
+      return {
+        pendingHighlight: { type: 'row', index: 0 },
+        moveSelection: null,
+        colWidths: ctx.data.colWidths,
+        withHeadings: !ctx.data.withHeadings,
+        withHeadingColumn: ctx.data.withHeadingColumn,
+      };
+    case 'toggle-heading-column':
+      return {
+        pendingHighlight: { type: 'col', index: 0 },
+        moveSelection: null,
+        colWidths: ctx.data.colWidths,
+        withHeadings: ctx.data.withHeadings,
+        withHeadingColumn: !ctx.data.withHeadingColumn,
+      };
+  }
+};