@jackuait/blok 0.6.0-beta.13 → 0.6.0-beta.14

package/src/tools/table/index.ts

@@ -47,6 +47,7 @@ import type { PendingHighlight } from './table-row-col-action-handler';
 import { TableRowColControls } from './table-row-col-controls';
 import type { RowColAction } from './table-row-col-controls';
 import { registerAdditionalRestrictedTools } from './table-restrictions';
+import { TableScrollHaze } from './table-scroll-haze';
 import type { ClipboardBlockData, LegacyCellContent, TableCellsClipboard, TableData, TableConfig } from './types';
 
 const DEFAULT_ROWS = 3;
@@ -59,6 +60,12 @@ const WRAPPER_CLASSES = [
 
 const WRAPPER_EDIT_CLASSES = [
   'relative',
+  'after:content-[""]',
+  'after:absolute',
+  'after:-bottom-10',
+  'after:left-0',
+  'after:right-0',
+  'after:h-10',
 ];
 
 /**
@@ -77,7 +84,11 @@ export class Table implements BlockTool {
   private rowColControls: TableRowColControls | null = null;
   private cellBlocks: TableCellBlocks | null = null;
   private cellSelection: TableCellSelection | null = null;
+  private scrollHaze: TableScrollHaze | null = null;
   private element: HTMLDivElement | null = null;
+  private gridElement: HTMLElement | null = null;
+  private scrollContainer: HTMLDivElement | null = null;
+  private gripOverlay: HTMLDivElement | null = null;
   private blockId: string | undefined;
   private pendingHighlight: PendingHighlight | null = null;
   private isNewTable = false;
@@ -145,16 +156,19 @@ export class Table implements BlockTool {
    * Execute a structural operation within a Yjs transaction.
    * Combines the structural op lock (event deferral) with Yjs undo grouping.
    * Used for interactive operations that should be a single undo entry.
+   *
+   * @param fn - The structural operation to execute
+   * @param discard - If true, discard deferred events (forwarded to runStructuralOp)
    */
-  private runTransactedStructuralOp<T>(fn: () => T): T {
+  private runTransactedStructuralOp<T>(fn: () => T, discard = false): T {
     if (!this.api.blocks.transact) {
-      return this.runStructuralOp(fn);
+      return this.runStructuralOp(fn, discard);
     }
 
     const ref = { current: undefined as T | undefined };
 
     this.api.blocks.transact(() => {
-      ref.current = this.runStructuralOp(fn);
+      ref.current = this.runStructuralOp(fn, discard);
     });
 
     return ref.current as T;
@@ -174,6 +188,8 @@ export class Table implements BlockTool {
     this.rowColControls = null;
     this.cellSelection?.destroy();
     this.cellSelection = null;
+    this.scrollHaze?.destroy();
+    this.scrollHaze = null;
   }
 
   /**
@@ -187,6 +203,7 @@ export class Table implements BlockTool {
     this.initRowColControls(gridEl);
     this.initCellSelection(gridEl);
     this.initGridPasteListener(gridEl);
+    this.initScrollHaze();
   }
 
   public static get toolbox(): ToolboxConfig {
@@ -224,10 +241,35 @@ export class Table implements BlockTool {
     };
   }
 
+  /**
+   * Ensure a scroll container exists between the wrapper and the grid.
+   * Creates one on demand (e.g. when the first resize converts percent → pixel mode).
+   */
+  private ensureScrollContainer(): HTMLDivElement {
+    if (this.scrollContainer) {
+      return this.scrollContainer;
+    }
+
+    const sc = document.createElement('div');
+
+    sc.setAttribute('data-blok-table-scroll', '');
+
+    const grid = this.gridElement;
+
+    if (grid && this.element) {
+      this.element.insertBefore(sc, grid);
+      sc.appendChild(grid);
+    }
+
+    this.scrollContainer = sc;
+
+    return sc;
+  }
+
   public render(): HTMLDivElement {
     const wrapper = document.createElement('div');
 
-    wrapper.className = twMerge(WRAPPER_CLASSES, !this.readOnly && WRAPPER_EDIT_CLASSES, this.model.colWidths && SCROLL_OVERFLOW_CLASSES);
+    wrapper.className = twMerge(WRAPPER_CLASSES, !this.readOnly && WRAPPER_EDIT_CLASSES);
     wrapper.setAttribute(DATA_ATTR.tool, 'table');
 
     if (this.readOnly) {
@@ -249,15 +291,45 @@ export class Table implements BlockTool {
       applyPixelWidths(gridEl, this.model.colWidths);
     }
 
-    wrapper.appendChild(gridEl);
+    this.gridElement = gridEl;
+
+    if (this.model.colWidths || !this.readOnly) {
+      const sc = document.createElement('div');
+
+      sc.setAttribute('data-blok-table-scroll', '');
+
+      const overflowClasses = this.model.colWidths ? SCROLL_OVERFLOW_CLASSES : [];
+
+      sc.classList.add(...overflowClasses);
+
+      sc.appendChild(gridEl);
+      wrapper.appendChild(sc);
+      this.scrollContainer = sc;
+    } else {
+      wrapper.appendChild(gridEl);
+      this.scrollContainer = null;
+    }
+
+    if (!this.readOnly) {
+      const overlay = document.createElement('div');
+
+      overlay.setAttribute('data-blok-table-grip-overlay', '');
+      overlay.style.position = 'absolute';
+      overlay.style.inset = '0';
+      overlay.style.pointerEvents = 'none';
+      overlay.style.zIndex = '3';
+      wrapper.appendChild(overlay);
+      this.gripOverlay = overlay;
+    }
+
     this.element = wrapper;
 
     if (this.model.withHeadings) {
-      updateHeadingStyles(this.element, this.model.withHeadings);
+      updateHeadingStyles(this.gridElement, this.model.withHeadings);
     }
 
     if (this.model.withHeadingColumn) {
-      updateHeadingColumnStyles(this.element, this.model.withHeadingColumn);
+      updateHeadingColumnStyles(this.gridElement, this.model.withHeadingColumn);
     }
 
     if (!this.readOnly) {
@@ -273,7 +345,7 @@ export class Table implements BlockTool {
       return;
     }
 
-    const gridEl = this.element.firstElementChild as HTMLElement;
+    const gridEl = this.gridElement;
 
     if (!gridEl) {
       return;
@@ -286,11 +358,12 @@ export class Table implements BlockTool {
     if (this.readOnly) {
       mountCellBlocksReadOnly(gridEl, content, this.api, this.blockId ?? '');
       this.initReadOnlyCellSelection(gridEl);
+      this.initScrollHaze();
 
       return;
     }
 
-    this.runStructuralOp(() => {
+    this.runTransactedStructuralOp(() => {
       const initializedContent = this.cellBlocks?.initializeCells(content) ?? content;
 
       // When a new table is created with empty content, the DOM grid already has
@@ -390,7 +463,7 @@ export class Table implements BlockTool {
 
     oldElement.parentNode.replaceChild(newElement, oldElement);
 
-    const gridEl = this.element?.firstElementChild as HTMLElement | undefined;
+    const gridEl = this.gridElement;
 
     if (this.readOnly || !gridEl) {
       return;
@@ -412,10 +485,29 @@ export class Table implements BlockTool {
         return;
       }
 
-      this.model.replaceAll({
-        ...this.model.snapshot(),
-        content: setDataContent,
-      });
+      // When undoing reverts content to empty, the grid has default dimensions
+      // but initializeCells([]) mounted zero blocks. Pre-populate the model
+      // with empty cell entries so populateNewCells can place blocks correctly.
+      if (this.api.blocks.isSyncingFromYjs && setDataContent.length === 0 && gridEl) {
+        const emptyGridContent = Array.from(gridEl.querySelectorAll(`[${ROW_ATTR}]`), (row) => {
+          const cellCount = row.querySelectorAll(`[${CELL_ATTR}]`).length;
+
+          return Array.from({ length: cellCount }, () => ({ blocks: [] as string[] }));
+        });
+
+        this.model.replaceAll({
+          ...this.model.snapshot(),
+          content: emptyGridContent,
+        });
+
+        populateNewCells(gridEl, this.cellBlocks);
+      } else {
+        this.model.replaceAll({
+          ...this.model.snapshot(),
+          content: setDataContent,
+        });
+      }
+
       this.initialContent = null;
     }, true);
 
@@ -469,7 +561,7 @@ export class Table implements BlockTool {
 
     oldElement.parentNode.replaceChild(newElement, oldElement);
 
-    const gridEl = this.element?.firstElementChild as HTMLElement | undefined;
+    const gridEl = this.gridElement;
 
     if (!this.readOnly && gridEl) {
       this.runStructuralOp(() => {
@@ -501,11 +593,13 @@ export class Table implements BlockTool {
     this.teardownSubsystems();
     this.cellBlocks?.destroy();
     this.cellBlocks = null;
+    this.gridElement = null;
+    this.scrollContainer = null;
     this.element = null;
   }
 
   public deleteRowWithCleanup(rowIndex: number): void {
-    const gridEl = this.element?.firstElementChild as HTMLElement | undefined;
+    const gridEl = this.gridElement;
 
     if (!gridEl) {
       return;
@@ -520,7 +614,7 @@ export class Table implements BlockTool {
   }
 
   public deleteColumnWithCleanup(colIndex: number): void {
-    const gridEl = this.element?.firstElementChild as HTMLElement | undefined;
+    const gridEl = this.gridElement;
 
     if (!gridEl) {
       return;
@@ -570,8 +664,8 @@ export class Table implements BlockTool {
           this.grid.addRow(gridEl);
           this.model.addRow();
           populateNewCells(gridEl, this.cellBlocks);
-          updateHeadingStyles(this.element, this.model.withHeadings);
-          updateHeadingColumnStyles(this.element, this.model.withHeadingColumn);
+          updateHeadingStyles(this.gridElement, this.model.withHeadings);
+          updateHeadingColumnStyles(this.gridElement, this.model.withHeadingColumn);
           this.initResize(gridEl);
           this.addControls?.syncRowButtonWidth();
           this.rowColControls?.refresh();
@@ -588,10 +682,14 @@ export class Table implements BlockTool {
           this.model.addColumn(undefined, halfWidth);
           this.model.setColWidths([...colWidths, halfWidth]);
           populateNewCells(gridEl, this.cellBlocks);
-          updateHeadingColumnStyles(this.element, this.model.withHeadingColumn);
+          updateHeadingColumnStyles(this.gridElement, this.model.withHeadingColumn);
           this.initResize(gridEl);
           this.addControls?.syncRowButtonWidth();
           this.rowColControls?.refresh();
+
+          if (this.scrollContainer) {
+            this.scrollContainer.scrollLeft = this.scrollContainer.scrollWidth;
+          }
         });
       },
       onDragStart: () => {
@@ -606,8 +704,8 @@ export class Table implements BlockTool {
           this.grid.addRow(gridEl);
           this.model.addRow();
           populateNewCells(gridEl, this.cellBlocks);
-          updateHeadingStyles(this.element, this.model.withHeadings);
-          updateHeadingColumnStyles(this.element, this.model.withHeadingColumn);
+          updateHeadingStyles(this.gridElement, this.model.withHeadings);
+          updateHeadingColumnStyles(this.gridElement, this.model.withHeadingColumn);
         });
       },
       onDragRemoveRow: () => {
@@ -636,13 +734,13 @@ export class Table implements BlockTool {
           this.model.setColWidths(newWidths);
           applyPixelWidths(gridEl, newWidths);
           populateNewCells(gridEl, this.cellBlocks);
-          updateHeadingColumnStyles(this.element, this.model.withHeadingColumn);
+          updateHeadingColumnStyles(this.gridElement, this.model.withHeadingColumn);
           this.initResize(gridEl);
 
           dragState.addedCols++;
 
-          if (this.element) {
-            this.element.scrollLeft = this.element.scrollWidth;
+          if (this.scrollContainer) {
+            this.scrollContainer.scrollLeft = this.scrollContainer.scrollWidth;
           }
         });
       },
@@ -677,8 +775,8 @@ export class Table implements BlockTool {
         this.addControls?.syncRowButtonWidth();
         this.rowColControls?.refresh();
 
-        if (this.element) {
-          this.element.scrollLeft = dragState.addedCols > 0 ? this.element.scrollWidth : 0;
+        if (this.scrollContainer) {
+          this.scrollContainer.scrollLeft = dragState.addedCols > 0 ? this.scrollContainer.scrollWidth : 0;
         }
 
         dragState.addedCols = 0;
@@ -695,6 +793,8 @@ export class Table implements BlockTool {
 
     this.rowColControls = new TableRowColControls({
       grid: gridEl,
+      overlay: this.gripOverlay ?? undefined,
+      scrollContainer: this.scrollContainer ?? undefined,
       getColumnCount: () => this.grid.getColumnCount(gridEl),
       getRowCount: () => this.grid.getRowCount(gridEl),
       isHeadingRow: () => this.model.withHeadings,
@@ -748,7 +848,7 @@ export class Table implements BlockTool {
     const generationAtStart = this.setDataGeneration;
 
     this.runTransactedStructuralOp(() => {
-      if (generationAtStart !== this.setDataGeneration || this.element?.firstElementChild !== gridEl) {
+      if (generationAtStart !== this.setDataGeneration || this.gridElement !== gridEl) {
         return;
       }
 
@@ -779,7 +879,7 @@ export class Table implements BlockTool {
         },
       );
 
-      if (generationAtStart !== this.setDataGeneration || this.element?.firstElementChild !== gridEl) {
+      if (generationAtStart !== this.setDataGeneration || this.gridElement !== gridEl) {
         return;
       }
 
@@ -788,8 +888,8 @@ export class Table implements BlockTool {
       this.model.setWithHeadingColumn(result.withHeadingColumn);
       this.pendingHighlight = result.pendingHighlight;
 
-      updateHeadingStyles(this.element, this.model.withHeadings);
-      updateHeadingColumnStyles(this.element, this.model.withHeadingColumn);
+      updateHeadingStyles(this.gridElement, this.model.withHeadings);
+      updateHeadingColumnStyles(this.gridElement, this.model.withHeadingColumn);
       this.initResize(gridEl);
       this.addControls?.syncRowButtonWidth();
       this.rowColControls?.refresh();
@@ -851,7 +951,7 @@ export class Table implements BlockTool {
     const widths = this.model.colWidths ?? readPixelWidths(gridEl);
 
     if (!isPercentMode) {
-      enableScrollOverflow(this.element);
+      enableScrollOverflow(this.ensureScrollContainer());
     }
 
     this.resize = new TableResize(
@@ -859,14 +959,17 @@ export class Table implements BlockTool {
       widths,
       (newWidths: number[]) => {
         this.model.setColWidths(newWidths);
-        enableScrollOverflow(this.element);
+        enableScrollOverflow(this.ensureScrollContainer());
         this.rowColControls?.positionGrips();
+        this.addControls?.syncRowButtonWidth();
+        this.scrollHaze?.update();
       },
       () => {
         this.rowColControls?.hideAllGrips();
       },
       () => {
         this.addControls?.syncRowButtonWidth();
+        this.scrollHaze?.update();
       },
       isPercentMode,
     );
@@ -895,10 +998,32 @@ export class Table implements BlockTool {
     clipboardData.setData('text/plain', buildClipboardPlainText(payload));
   }
 
+  private handleCellCopyViaButton(cells: HTMLElement[]): void {
+    const entries = this.collectCellBlockData(cells);
+
+    if (entries.length === 0) {
+      return;
+    }
+
+    const payload = serializeCellsToClipboard(entries);
+    const html = buildClipboardHtml(payload);
+    const plainText = buildClipboardPlainText(payload);
+
+    const htmlBlob = new Blob([html], { type: 'text/html' });
+    const textBlob = new Blob([plainText], { type: 'text/plain' });
+
+    void navigator.clipboard.write([
+      new ClipboardItem({
+        'text/html': htmlBlob,
+        'text/plain': textBlob,
+      }),
+    ]);
+  }
+
   private collectCellBlockData(
     cells: HTMLElement[],
   ): Array<{ row: number; col: number; blocks: ClipboardBlockData[] }> {
-    const gridEl = this.element?.firstElementChild;
+    const gridEl = this.gridElement;
 
     if (!gridEl) {
       return [];
@@ -976,6 +1101,7 @@ export class Table implements BlockTool {
       grid: gridEl,
       rectangleSelection, // Pass reference
       i18n: this.api.i18n,
+      isPopoverOpen: () => this.rowColControls?.isPopoverOpen ?? false,
       onSelectionActiveChange: (hasSelection) => {
         if (this.resize) {
           this.resize.enabled = !hasSelection;
@@ -999,6 +1125,9 @@ export class Table implements BlockTool {
       onCut: (cells, clipboardData) => {
         this.handleCellCopy(cells, clipboardData);
       },
+      onCopyViaButton: (cells) => {
+        this.handleCellCopyViaButton(cells);
+      },
     });
   }
 
@@ -1014,9 +1143,23 @@ export class Table implements BlockTool {
       onCopy: (cells, clipboardData) => {
         this.handleCellCopy(cells, clipboardData);
       },
+      onCopyViaButton: (cells) => {
+        this.handleCellCopyViaButton(cells);
+      },
     });
   }
 
+  private initScrollHaze(): void {
+    this.scrollHaze?.destroy();
+
+    if (!this.element || !this.scrollContainer) {
+      return;
+    }
+
+    this.scrollHaze = new TableScrollHaze();
+    this.scrollHaze.init(this.element, this.scrollContainer);
+  }
+
   private initGridPasteListener(gridEl: HTMLElement): void {
     gridEl.addEventListener('paste', (e: ClipboardEvent) => {
       this.handleGridPaste(e, gridEl);
@@ -1150,8 +1293,8 @@ export class Table implements BlockTool {
       this.grid.addRow(gridEl);
       this.model.addRow();
       populateNewCells(gridEl, this.cellBlocks);
-      updateHeadingStyles(this.element, this.model.withHeadings);
-      updateHeadingColumnStyles(this.element, this.model.withHeadingColumn);
+      updateHeadingStyles(this.gridElement, this.model.withHeadings);
+      updateHeadingColumnStyles(this.gridElement, this.model.withHeadingColumn);
     });
 
     // Auto-expand columns
@@ -1165,7 +1308,7 @@ export class Table implements BlockTool {
       this.model.addColumn(undefined, halfWidth);
       this.model.setColWidths([...colWidths, halfWidth]);
       populateNewCells(gridEl, this.cellBlocks);
-      updateHeadingColumnStyles(this.element, this.model.withHeadingColumn);
+      updateHeadingColumnStyles(this.gridElement, this.model.withHeadingColumn);
     });
   }
 

package/src/tools/table/table-add-controls.ts

@@ -121,7 +121,7 @@ export class TableAddControls {
     this.addColBtn = this.createAddColumnButton();
 
     this.wrapper.appendChild(this.addRowBtn);
-    this.grid.appendChild(this.addColBtn);
+    this.wrapper.appendChild(this.addColBtn);
     this.syncRowButtonWidth();
 
     this.wrapper.addEventListener('mousemove', this.boundMouseMove);
@@ -133,17 +133,51 @@ export class TableAddControls {
   }
 
   /**
-   * Match the add-row button width to the grid's explicit width.
-   * When the grid has a pixel width (from colWidths), the button must use
-   * the same value so it scrolls with the table instead of staying at 100%
-   * of the wrapper's visible area.
+   * Match the add-row button width and horizontal position to the grid.
+   *
+   * Pixel mode (colWidths set): clamp to the scroll container's visible
+   * width so the button never overflows the table boundary.
+   *
+   * Percent mode (no colWidths): clear `width` and use `left`/`right`
+   * constraints so the browser auto-sizes the button to the wrapper's
+   * content area, avoiding the wrapper's right padding.
    */
   public syncRowButtonWidth(): void {
     const gridWidth = this.grid.style.width;
 
-    this.addRowBtn.style.width = gridWidth && gridWidth.endsWith('px')
-      ? gridWidth
-      : '100%';
+    if (gridWidth && gridWidth.endsWith('px')) {
+      const numericWidth = parseFloat(gridWidth);
+      const scrollContainer = this.grid.parentElement;
+      const isInsideScrollContainer = scrollContainer !== null && scrollContainer !== this.wrapper;
+
+      /**
+       * When a scroll container exists and the grid overflows it,
+       * clamp to the visible width so the button stays within bounds.
+       * Guard clientWidth > 0 for pre-layout / jsdom environments.
+       */
+      const visibleWidth = isInsideScrollContainer && scrollContainer.clientWidth > 0
+        ? Math.min(numericWidth, scrollContainer.clientWidth)
+        : numericWidth;
+
+      this.addRowBtn.style.width = `${visibleWidth}px`;
+      this.addRowBtn.style.right = '';
+      this.addRowBtn.style.left = '0px';
+      this.addRowBtn.style.transform = '';
+
+      this.addColBtn.style.left = `${visibleWidth}px`;
+      this.addColBtn.style.right = '';
+    } else {
+      this.addRowBtn.style.width = '';
+      this.addRowBtn.style.left = '0px';
+      this.addRowBtn.style.transform = '';
+
+      const paddingRight = parseFloat(getComputedStyle(this.wrapper).paddingRight) || 0;
+
+      this.addRowBtn.style.right = `${paddingRight}px`;
+
+      this.addColBtn.style.left = '';
+      this.addColBtn.style.right = '-16px';
+    }
   }
 
   /**
@@ -338,8 +372,14 @@ export class TableAddControls {
 
   private handleMouseMove(e: MouseEvent): void {
     const gridRect = this.grid.getBoundingClientRect();
+    const scrollContainer = this.grid.parentElement;
+    const isInsideScrollContainer = scrollContainer !== null && scrollContainer !== this.wrapper;
+    const visibleRight = isInsideScrollContainer
+      ? Math.min(gridRect.right, scrollContainer.getBoundingClientRect().right)
+      : gridRect.right;
+
     const distFromBottom = Math.abs(e.clientY - gridRect.bottom);
-    const distFromRight = Math.abs(e.clientX - gridRect.right);
+    const distFromRight = Math.abs(e.clientX - visibleRight);
 
     if (distFromBottom <= PROXIMITY_PX) {
       this.showRow();
@@ -430,11 +470,8 @@ export class TableAddControls {
     btn.style.position = 'absolute';
     btn.style.left = '0';
     btn.style.bottom = '-36px';
-    btn.style.boxSizing = 'content-box';
-    btn.style.width = '100%';
+    btn.style.zIndex = '1';
     btn.style.height = '32px';
-    btn.style.padding = '4px 8px 0';
-    btn.style.marginLeft = '-8px';
 
     const visual = document.createElement('div');
 
@@ -462,7 +499,7 @@ export class TableAddControls {
     btn.style.opacity = '0';
     btn.style.pointerEvents = 'none';
     btn.style.position = 'absolute';
-    btn.style.right = '-36px';
+    btn.style.right = '-16px';
     btn.style.top = '0px';
     btn.style.bottom = '0px';
     btn.style.width = '32px';

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

@@ -384,6 +384,12 @@ export class TableCellBlocks {
       return;
     }
 
+    // Guard against circular DOM: never append the table block's own holder
+    // into one of its descendant cell containers.
+    if (block.holder.contains(container)) {
+      return;
+    }
+
     container.appendChild(block.holder);
     this.api.blocks.setBlockParent(blockId, this.tableBlockId);
     this.stripPlaceholders(container);
@@ -477,6 +483,13 @@ export class TableCellBlocks {
       return;
     }
 
+    // Never claim the table block itself as a cell content block.
+    // This can happen when rendered() creates cell blocks synchronously,
+    // polluting currentBlockIndex before the table's own block-added fires.
+    if (detail.target.id === this.tableBlockId) {
+      return;
+    }
+
     const blockIndex = detail.index;
 
     if (blockIndex === undefined) {
@@ -526,9 +539,35 @@ export class TableCellBlocks {
     }
 
     // Only claim blocks whose holder is inside this table's grid.
-    // Blocks placed outside the grid (e.g., via replaceWith during toolbox
-    // insertion) should not be pulled into a cell by adjacency.
+    // Blocks placed outside the grid (e.g., via undo/restore or API inserts)
+    // should not be pulled into a cell by adjacency alone.
+    //
+    // However, blocks created while the editor's focus is inside this table
+    // (e.g., via Enter key or paste in a cell) land outside the grid because
+    // insertToDOM walks up from cell blocks to the table holder level.
+    // For those, check that the current block at the time of insertion belongs
+    // to this table — indicating the user was editing inside a cell.
     if (!this.gridElement.contains(holder)) {
+      const currentIndex = this.api.blocks.getCurrentBlockIndex();
+      const currentBlock = currentIndex >= 0
+        ? this.api.blocks.getBlockByIndex(currentIndex)
+        : null;
+      const currentBlockInOurTable = currentBlock !== null
+        && currentBlock !== undefined
+        && this.getOwnedCellForBlock(currentBlock.id) !== null;
+
+      if (!currentBlockInOurTable) {
+        return;
+      }
+
+      const cell = this.findCellForNewBlock(blockIndex);
+
+      if (cell) {
+        this.claimBlockForCell(cell, detail.target.id);
+        this.syncBlockToModel(cell, detail.target.id);
+        this.cellsPendingCheck.delete(cell);
+      }
+
       return;
     }