@jackuait/blok 0.6.0-beta.9 → 0.6.0

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

@@ -163,18 +163,19 @@ export const syncColWidthsAfterDeleteColumn = (colWidths: number[] | undefined,
 export const computeInsertColumnWidths = (
   gridEl: HTMLElement,
   index: number,
-  data: TableData,
+  colWidths: number[] | undefined,
+  initialColWidth: number | undefined,
   grid: TableGrid,
 ): number[] => {
-  const colWidths = data.colWidths ?? readPixelWidths(gridEl);
+  const widths = colWidths ?? readPixelWidths(gridEl);
 
-  const halfWidth = data.initialColWidth !== undefined
-    ? Math.round((data.initialColWidth / 2) * 100) / 100
-    : computeHalfAvgWidth(colWidths);
+  const halfWidth = initialColWidth !== undefined
+    ? Math.round((initialColWidth / 2) * 100) / 100
+    : computeHalfAvgWidth(widths);
 
-  grid.addColumn(gridEl, index, colWidths, halfWidth);
+  grid.addColumn(gridEl, index, widths, halfWidth);
 
-  const newWidths = [...colWidths];
+  const newWidths = [...widths];
 
   newWidths.splice(index, 0, halfWidth);
 
@@ -230,53 +231,6 @@ export const getBlockIdsInColumn = (element: HTMLElement | null, cellBlocks: Tab
   return cellBlocks?.getBlockIdsFromCells(cellsInColumn) ?? [];
 };
 
-// ─── Row/column deletion with block cleanup ─────────────────────────
-
-export const deleteRowWithBlockCleanup = (
-  gridEl: HTMLElement,
-  rowIndex: number,
-  grid: TableGrid,
-  cellBlocks: TableCellBlocks | null,
-): void => {
-  const rows = gridEl.querySelectorAll(`[${ROW_ATTR}]`);
-  const row = rows[rowIndex];
-
-  if (row && cellBlocks) {
-    const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
-
-    cellBlocks.deleteBlocks(cellBlocks.getBlockIdsFromCells(cells));
-  }
-
-  grid.deleteRow(gridEl, rowIndex);
-};
-
-export const deleteColumnWithBlockCleanup = (
-  gridEl: HTMLElement,
-  colIndex: number,
-  colWidths: number[] | undefined,
-  grid: TableGrid,
-  cellBlocks: TableCellBlocks | null,
-): number[] | undefined => {
-  if (cellBlocks) {
-    const rows = gridEl.querySelectorAll(`[${ROW_ATTR}]`);
-    const cellsInColumn: Element[] = [];
-
-    rows.forEach(row => {
-      const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
-
-      if (colIndex < cells.length) {
-        cellsInColumn.push(cells[colIndex]);
-      }
-    });
-
-    cellBlocks.deleteBlocks(cellBlocks.getBlockIdsFromCells(cellsInColumn));
-  }
-
-  grid.deleteColumn(gridEl, colIndex);
-
-  return syncColWidthsAfterDeleteColumn(colWidths, colIndex);
-};
-
 // ─── Populate new cells ─────────────────────────────────────────────
 
 export const populateNewCells = (gridEl: HTMLElement, cellBlocks: TableCellBlocks | null): void => {
@@ -293,6 +247,7 @@ export const mountCellBlocksReadOnly = (
   gridEl: HTMLElement,
   content: LegacyCellContent[][],
   api: API,
+  _tableBlockId: string,
 ): void => {
   const rowElements = gridEl.querySelectorAll(`[${ROW_ATTR}]`);
 
@@ -326,21 +281,18 @@ export const mountCellBlocksReadOnly = (
       }
 
       if (!isCellWithBlocks(cellContent)) {
-        // Handle legacy string content by creating a paragraph block
-        const legacyText = typeof cellContent === 'string' ? cellContent : '';
-        const insertedBlock = api.blocks.insert(
-          'paragraph',
-          { text: legacyText },
-          {},
-          undefined,
-          true
-        );
-
-        insertedBlock?.holder && container.appendChild(insertedBlock.holder);
+        // Read-only render path must not mutate block state.
+        // Render legacy content (plain string) in-place.
+        container.textContent = cellContent;
 
         return;
       }
 
+      // If this container previously rendered legacy text, clear it before mounting holders.
+      if (!hasExistingBlocks && (container.textContent ?? '').length > 0) {
+        container.textContent = '';
+      }
+
       for (const blockId of cellContent.blocks) {
         const index = api.blocks.getBlockIndex(blockId);
 
@@ -356,6 +308,15 @@ export const mountCellBlocksReadOnly = (
 
         container.appendChild(block.holder);
       }
+
+      // Strip placeholder attributes so paragraphs inside table cells
+      // don't show standalone-paragraph placeholders in readonly mode.
+      container.querySelectorAll<HTMLElement>('[data-blok-placeholder-active]').forEach(el => {
+        el.removeAttribute('data-blok-placeholder-active');
+      });
+      container.querySelectorAll<HTMLElement>('[data-placeholder]').forEach(el => {
+        el.removeAttribute('data-placeholder');
+      });
     });
   });
 };
@@ -414,7 +375,7 @@ export const setupKeyboardNavigation = (
   });
 };
 
-export const SCROLL_OVERFLOW_CLASSES = ['overflow-x-auto', 'pt-[9px]', 'pl-[9px]'];
+export const SCROLL_OVERFLOW_CLASSES = ['overflow-x-auto', 'overflow-y-hidden'];
 
 export const enableScrollOverflow = (element: HTMLDivElement | null): void => {
   element?.classList.add(...SCROLL_OVERFLOW_CLASSES);
@@ -422,13 +383,7 @@ export const enableScrollOverflow = (element: HTMLDivElement | null): void => {
 
 // ─── Heading styles ─────────────────────────────────────────────────
 
-export const updateHeadingStyles = (element: HTMLDivElement | null, withHeadings: boolean): void => {
-  if (!element) {
-    return;
-  }
-
-  const gridEl = element.firstElementChild as HTMLElement;
-
+export const updateHeadingStyles = (gridEl: HTMLElement | null, withHeadings: boolean): void => {
   if (!gridEl) {
     return;
   }
@@ -444,13 +399,39 @@ export const updateHeadingStyles = (element: HTMLDivElement | null, withHeadings
   }
 };
 
-export const updateHeadingColumnStyles = (element: HTMLDivElement | null, withHeadingColumn: boolean): void => {
-  if (!element) {
-    return;
-  }
+export const applyCellColors = (gridEl: HTMLElement, content: LegacyCellContent[][]): void => {
+  const rows = gridEl.querySelectorAll(`[${ROW_ATTR}]`);
 
-  const gridEl = element.firstElementChild as HTMLElement;
+  content.forEach((rowContent, r) => {
+    if (r >= rows.length) {
+      return;
+    }
+
+    const cells = rows[r].querySelectorAll(`[${CELL_ATTR}]`);
+
+    rowContent.forEach((cellContent, c) => {
+      if (c >= cells.length) {
+        return;
+      }
+
+      const el = cells[c] as HTMLElement;
+
+      if (isCellWithBlocks(cellContent) && cellContent.color) {
+        el.style.backgroundColor = cellContent.color;
+      } else {
+        el.style.backgroundColor = '';
+      }
+
+      if (isCellWithBlocks(cellContent) && cellContent.textColor) {
+        el.style.color = cellContent.textColor;
+      } else {
+        el.style.color = '';
+      }
+    });
+  });
+};
 
+export const updateHeadingColumnStyles = (gridEl: HTMLElement | null, withHeadingColumn: boolean): void => {
   if (!gridEl) {
     return;
   }

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

@@ -23,6 +23,7 @@ export class TableResize {
   private dragStartX = 0;
   private dragColIndex = -1;
   private startColWidth = 0;
+  private dragRowCells: HTMLElement[][] | null = null;
   private handles: HTMLElement[] = [];
   private needsInitialApply: boolean;
 
@@ -73,6 +74,7 @@ export class TableResize {
     this.gridEl.removeEventListener('pointerdown', this.boundPointerDown);
     document.removeEventListener('pointermove', this.boundPointerMove);
     document.removeEventListener('pointerup', this.boundPointerUp);
+    this.dragRowCells = null;
 
     this.handles.forEach(handle => handle.remove());
     this.handles = [];
@@ -168,6 +170,7 @@ export class TableResize {
     this.isDragging = true;
     this.dragStartX = e.clientX;
     this.startColWidth = this.colWidths[this.dragColIndex];
+    this.dragRowCells = this.resolveRowCells();
 
     this.onDragStart?.();
     this.gridEl.style.userSelect = 'none';
@@ -192,7 +195,7 @@ export class TableResize {
     const newWidth = Math.max(MIN_COL_WIDTH, rawWidth);
 
     this.colWidths[this.dragColIndex] = newWidth;
-    this.applyWidths();
+    this.applyWidths(this.dragRowCells ?? undefined);
     this.updateHandlePositions();
     this.onDrag?.();
   }
@@ -213,25 +216,26 @@ export class TableResize {
 
     document.removeEventListener('pointermove', this.boundPointerMove);
     document.removeEventListener('pointerup', this.boundPointerUp);
+    this.dragRowCells = null;
 
     this.onChange([...this.colWidths]);
   }
 
-  private applyWidths(): void {
-    const totalWidth = this.colWidths.reduce((sum, w) => sum + w, 0);
+  private resolveRowCells(): HTMLElement[][] {
+    const rows = this.gridEl.querySelectorAll<HTMLElement>(`[${ROW_ATTR}]`);
 
-    this.gridEl.style.width = `${totalWidth + BORDER_WIDTH}px`;
+    return Array.from(rows, row => Array.from(row.querySelectorAll<HTMLElement>(`[${CELL_ATTR}]`)));
+  }
 
-    const rows = this.gridEl.querySelectorAll(`[${ROW_ATTR}]`);
+  private applyWidths(rowCells: HTMLElement[][] = this.resolveRowCells()): void {
+    const totalWidth = this.colWidths.reduce((sum, w) => sum + w, 0);
 
-    rows.forEach(row => {
-      const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
+    this.gridEl.style.width = `${totalWidth + BORDER_WIDTH}px`;
 
-      cells.forEach((node, i) => {
+    rowCells.forEach(cells => {
+      cells.forEach((cellEl, i) => {
         if (i < this.colWidths.length) {
-          const cellEl = node as HTMLElement;
-
-          cellEl.style.width = `${this.colWidths[i]}px`;
+          cellEl.style.setProperty('width', `${this.colWidths[i]}px`);
         }
       });
     });

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

@@ -2,10 +2,75 @@ import type { API } from '../../../types';
 import type { Block } from '../../components/block';
 
 /**
- * List of block tools that are restricted from being inserted into table cells.
+ * Default block tools that are always 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'];
+const DEFAULT_RESTRICTED_TOOLS = ['header', 'table'];
+
+/**
+ * Additional restricted tools registered via table tool config.
+ * Users can extend the default list by setting `restrictedTools` in the table tool config.
+ */
+const additionalRestrictedTools = new Map<string, number>();
+
+/**
+ * Register additional tools as restricted in table cells.
+ * Called by the Table tool constructor when `restrictedTools` is set in the config.
+ *
+ * @param tools - Tool names to add to the restricted list
+ * @returns Cleanup function to unregister these tools when the owner is destroyed
+ */
+export const registerAdditionalRestrictedTools = (tools: string[]): (() => void) => {
+  const uniqueTools = [...new Set(tools)];
+
+  for (const tool of uniqueTools) {
+    const currentCount = additionalRestrictedTools.get(tool) ?? 0;
+
+    additionalRestrictedTools.set(tool, currentCount + 1);
+  }
+
+  const state = { cleanedUp: false };
+
+  return (): void => {
+    if (state.cleanedUp) {
+      return;
+    }
+
+    state.cleanedUp = true;
+
+    for (const tool of uniqueTools) {
+      const currentCount = additionalRestrictedTools.get(tool);
+
+      if (currentCount === undefined) {
+        continue;
+      }
+
+      if (currentCount <= 1) {
+        additionalRestrictedTools.delete(tool);
+      } else {
+        additionalRestrictedTools.set(tool, currentCount - 1);
+      }
+    }
+  };
+};
+
+/**
+ * Clear all additional restricted tools.
+ * Useful for cleanup when the editor is destroyed or in tests.
+ */
+export const clearAdditionalRestrictedTools = (): void => {
+  additionalRestrictedTools.clear();
+};
+
+/**
+ * Returns all restricted tool names (default + additional registered via config).
+ * Used by the toolbox to hide restricted tools when inside table cells.
+ *
+ * @returns Array of all restricted tool names
+ */
+export const getRestrictedTools = (): string[] => {
+  return [...DEFAULT_RESTRICTED_TOOLS, ...additionalRestrictedTools.keys()];
+};
 
 /**
  * Check if a block or element is inside a table cell.
@@ -26,12 +91,13 @@ export const isInsideTableCell = (block: Block | HTMLElement | null | undefined)
 
 /**
  * Check if a tool name is restricted inside table cells.
+ * Checks both the default restricted list and any additional tools registered via config.
  *
  * @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);
+  return DEFAULT_RESTRICTED_TOOLS.includes(toolName) || additionalRestrictedTools.has(toolName);
 };
 
 /**

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

@@ -3,24 +3,34 @@ import type { TableGrid } from './table-core';
 import {
   applyPixelWidths,
   computeInsertColumnWidths,
-  deleteColumnWithBlockCleanup,
-  deleteRowWithBlockCleanup,
   populateNewCells,
   redistributePercentWidths,
+  syncColWidthsAfterDeleteColumn,
   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 };
 
+/**
+ * Minimal metadata the action handler needs.
+ * Decoupled from TableData so callers can pass model-derived primitives.
+ */
+export interface ActionData {
+  colWidths?: number[];
+  withHeadings: boolean;
+  withHeadingColumn: boolean;
+  initialColWidth?: number;
+}
+
 interface ActionContext {
   grid: TableGrid;
-  data: TableData;
+  data: ActionData;
   cellBlocks: TableCellBlocks | null;
+  blocksToDelete?: string[];
 }
 
 interface ActionResult {
@@ -53,7 +63,7 @@ const handleInsertCol = (
   index: number,
   ctx: ActionContext,
 ): ActionResult => {
-  const colWidths = computeInsertColumnWidths(gridEl, index, ctx.data, ctx.grid);
+  const colWidths = computeInsertColumnWidths(gridEl, index, ctx.data.colWidths, ctx.data.initialColWidth, ctx.grid);
 
   populateNewCells(gridEl, ctx.cellBlocks);
 
@@ -105,7 +115,9 @@ const handleDeleteRow = (
   index: number,
   ctx: ActionContext,
 ): ActionResult => {
-  deleteRowWithBlockCleanup(gridEl, index, ctx.grid, ctx.cellBlocks);
+  ctx.cellBlocks?.deleteBlocks(ctx.blocksToDelete ?? []);
+  ctx.grid.deleteRow(gridEl, index);
+
   const newRowCount = ctx.grid.getRowCount(gridEl);
   const neighborRow = index < newRowCount ? index : index - 1;
 
@@ -123,7 +135,10 @@ const handleDeleteCol = (
   index: number,
   ctx: ActionContext,
 ): ActionResult => {
-  const colWidths = deleteColumnWithBlockCleanup(gridEl, index, ctx.data.colWidths, ctx.grid, ctx.cellBlocks);
+  ctx.cellBlocks?.deleteBlocks(ctx.blocksToDelete ?? []);
+  ctx.grid.deleteColumn(gridEl, index);
+
+  const colWidths = syncColWidthsAfterDeleteColumn(ctx.data.colWidths, index);
 
   if (colWidths) {
     applyPixelWidths(gridEl, colWidths);

package/src/tools/table/table-row-col-controls.ts

@@ -33,6 +33,8 @@ export type RowColAction =
 
 export interface TableRowColControlsOptions {
   grid: HTMLElement;
+  overlay?: HTMLElement;
+  scrollContainer?: HTMLElement;
   getColumnCount: () => number;
   getRowCount: () => number;
   isHeadingRow: () => boolean;
@@ -46,8 +48,8 @@ export interface TableRowColControlsOptions {
 
 const GRIP_CAPSULE_CLASSES = [
   'absolute',
-  'z-[3]',
-  'rounded',
+  'z-3',
+  'rounded-sm',
   'cursor-grab',
   'select-none',
   'transition-[opacity,background-color,width,height]',
@@ -83,6 +85,8 @@ const GRIP_ACTIVE_CLASSES = [
  */
 export class TableRowColControls {
   private grid: HTMLElement;
+  private overlay: HTMLElement | undefined;
+  private scrollContainer: HTMLElement | undefined;
   private getColumnCount: () => number;
   private getRowCount: () => number;
   private isHeadingRow: () => boolean;
@@ -108,9 +112,12 @@ export class TableRowColControls {
   private boundMouseOver: (e: MouseEvent) => void;
   private boundMouseLeave: (e: MouseEvent) => void;
   private boundPointerDown: (e: PointerEvent) => void;
+  private boundScrollHandler: (() => void) | null = null;
 
   constructor(options: TableRowColControlsOptions) {
     this.grid = options.grid;
+    this.overlay = options.overlay;
+    this.scrollContainer = options.scrollContainer;
     this.getColumnCount = options.getColumnCount;
     this.getRowCount = options.getRowCount;
     this.isHeadingRow = options.isHeadingRow;
@@ -141,11 +148,39 @@ export class TableRowColControls {
   }
 
   /**
-   * Recreate grips after structural changes (row/column add/delete/move)
+   * Recreate grips after structural changes (row/column add/delete/move).
+   * Preserves the active grip state when a popover is open so the grip
+   * remains visible after being recreated.
    */
   public refresh(): void {
+    const popoverGripInfo = this.popoverState.grip
+      ? this.detectGripType(this.popoverState.grip)
+      : null;
+
     this.destroyGrips();
     this.createGrips();
+
+    if (!popoverGripInfo) {
+      return;
+    }
+
+    const newGrip = popoverGripInfo.type === 'col'
+      ? this.colGrips[popoverGripInfo.index]
+      : this.rowGrips[popoverGripInfo.index];
+
+    if (!newGrip) {
+      return;
+    }
+
+    this.popoverState.grip = newGrip;
+    this.hideAllGripsExcept(newGrip);
+    this.applyActiveClasses(newGrip);
+
+    if (popoverGripInfo.type === 'col') {
+      newGrip.style.height = `${GRIP_HOVER_SIZE}px`;
+    } else {
+      newGrip.style.width = `${GRIP_HOVER_SIZE}px`;
+    }
   }
 
   /**
@@ -162,6 +197,7 @@ export class TableRowColControls {
     }
 
     this.unlockGrip();
+    this.clearHideTimeout();
     this.hideAllGripsExcept(grip);
     this.applyActiveClasses(grip);
 
@@ -173,18 +209,32 @@ export class TableRowColControls {
 
     this.lockedGrip = grip;
 
-    requestAnimationFrame(() => {
-      document.addEventListener('pointerdown', this.boundUnlockGrip);
-    });
+    document.addEventListener('pointerdown', this.boundUnlockGrip);
   }
 
-  private handleUnlockGrip(): void {
+  private handleUnlockGrip(e: PointerEvent): void {
     document.removeEventListener('pointerdown', this.boundUnlockGrip);
 
     if (this.lockedGrip) {
       this.applyIdleClasses(this.lockedGrip);
       this.lockedGrip = null;
     }
+
+    // Re-evaluate grip visibility: the preceding mouseover was blocked
+    // by isGripInteractionLocked(). Check if pointer is over a table cell.
+    const target = e.target instanceof HTMLElement ? e.target : null;
+    const cell = target?.closest<HTMLElement>(`[${CELL_ATTR}]`);
+
+    if (cell) {
+      const position = this.getCellPosition(cell);
+
+      if (position) {
+        this.clearHideTimeout();
+        this.showColGrip(position.col);
+        this.showRowGrip(position.row);
+        this.isInsideTable = true;
+      }
+    }
   }
 
   private unlockGrip(): void {
@@ -192,6 +242,37 @@ export class TableRowColControls {
     this.lockedGrip = null;
   }
 
+  /**
+   * Return the indices of the currently visible grips, or null if none are active.
+   */
+  public getVisibleGripIndices(): { col: number; row: number } | null {
+    if (this.activeColGripIndex < 0 && this.activeRowGripIndex < 0) {
+      return null;
+    }
+
+    return { col: this.activeColGripIndex, row: this.activeRowGripIndex };
+  }
+
+  /**
+   * Programmatically restore grip visibility (e.g. after a DOM rebuild during undo).
+   */
+  public restoreVisibleGrips(col: number, row: number): void {
+    // Set isInsideTable BEFORE showing grips so applyVisibleClasses()
+    // skips the CSS opacity transition (no flash).
+    this.isInsideTable = col >= 0 || row >= 0;
+
+    if (col >= 0) {
+      this.showColGrip(col);
+    }
+    if (row >= 0) {
+      this.showRowGrip(row);
+    }
+  }
+
+  public get isPopoverOpen(): boolean {
+    return this.popoverState.popover !== null;
+  }
+
   public destroy(): void {
     this.destroyPopover();
     this.unlockGrip();
@@ -205,28 +286,45 @@ export class TableRowColControls {
   private createGrips(): void {
     const colCount = this.getColumnCount();
     const rowCount = this.getRowCount();
+    const gripContainer = this.overlay ?? this.grid;
 
     Array.from({ length: colCount }).forEach((_, i) => {
       const grip = this.createGripElement('col', i);
 
       this.colGrips.push(grip);
-      this.grid.appendChild(grip);
+      gripContainer.appendChild(grip);
     });
 
     Array.from({ length: rowCount }).forEach((_, i) => {
       const grip = this.createGripElement('row', i);
 
       this.rowGrips.push(grip);
-      this.grid.appendChild(grip);
+      gripContainer.appendChild(grip);
     });
 
     this.positionGrips();
     this.observeRowHeights();
+    this.attachScrollListener();
+  }
+
+  private attachScrollListener(): void {
+    if (this.overlay && this.scrollContainer) {
+      this.boundScrollHandler = () => this.positionGrips();
+      this.scrollContainer.addEventListener('scroll', this.boundScrollHandler);
+    }
+  }
+
+  private detachScrollListener(): void {
+    if (this.boundScrollHandler && this.scrollContainer) {
+      this.scrollContainer.removeEventListener('scroll', this.boundScrollHandler);
+      this.boundScrollHandler = null;
+    }
   }
 
   private destroyGrips(): void {
     this.rowResizeObserver?.disconnect();
     this.rowResizeObserver = null;
+    this.detachScrollListener();
     this.colGrips.forEach(g => g.remove());
     this.rowGrips.forEach(g => g.remove());
     this.colGrips = [];
@@ -257,13 +355,20 @@ export class TableRowColControls {
 
     grip.addEventListener('pointerdown', this.boundPointerDown);
     grip.addEventListener('mouseenter', () => {
+      if (this.overlay) {
+        this.clearHideTimeout();
+      }
       if (!this.isGripInteractionLocked()) {
         expandGrip(grip, type);
       }
     });
     grip.addEventListener('mouseleave', () => {
-      if (!this.isGripInteractionLocked()) {
-        collapseGrip(grip, type, pillSize);
+      if (this.isGripInteractionLocked()) {
+        return;
+      }
+      collapseGrip(grip, type, pillSize);
+      if (this.overlay) {
+        this.scheduleHideAll();
       }
     });
 
@@ -283,6 +388,12 @@ export class TableRowColControls {
     }
 
     const edges = getCumulativeColEdges(this.grid);
+    const scrollLeft = this.overlay && this.scrollContainer
+      ? this.scrollContainer.scrollLeft
+      : 0;
+    const containerWidth = this.overlay && this.scrollContainer
+      ? this.scrollContainer.clientWidth
+      : Infinity;
 
     this.colGrips.forEach((grip, i) => {
       if (i + 1 >= edges.length) {
@@ -290,10 +401,16 @@ export class TableRowColControls {
       }
 
       const centerX = (edges[i] + edges[i + 1]) / 2;
+      const adjustedX = centerX - scrollLeft;
       const style = grip.style;
 
       style.top = `${-BORDER_WIDTH / 2}px`;
-      style.left = `${centerX}px`;
+      style.left = `${adjustedX}px`;
+
+      // Hide grips scrolled out of the visible area
+      if (this.overlay) {
+        style.visibility = (adjustedX < 0 || adjustedX > containerWidth) ? 'hidden' : '';
+      }
     });
 
     this.rowGrips.forEach((grip, i) => {