@jackuait/blok 0.6.0-beta.8 → 0.6.0

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

@@ -1,6 +1,7 @@
 import type { API } from '../../../types';
 
 import { CELL_ATTR, ROW_ATTR } from './table-core';
+import type { TableModel } from './table-model';
 import type { LegacyCellContent, CellContent } from './types';
 import { isCellWithBlocks } from './types';
 
@@ -35,7 +36,10 @@ interface TableCellBlocksOptions {
   api: API;
   gridElement: HTMLElement;
   tableBlockId: string;
+  model: TableModel;
   onNavigateToCell?: CellNavigationCallback;
+  /** When true, handleBlockMutation defers events instead of processing immediately. */
+  isStructuralOpActive?: () => boolean;
 }
 
 /**
@@ -46,6 +50,7 @@ export class TableCellBlocks {
   private api: API;
   private gridElement: HTMLElement;
   private tableBlockId: string;
+  private model: TableModel;
   private _activeCellWithBlocks: CellPosition | null = null;
   private onNavigateToCell?: CellNavigationCallback;
 
@@ -59,18 +64,35 @@ export class TableCellBlocks {
   private pendingCheckScheduled = false;
 
   /**
-   * Maps a flat-list block index to the cell it was in when block-removed fired.
-   * Used during replace operations: block-removed fires while the holder is still
-   * in the cell DOM, then block-added fires at the same index after the holder
-   * has been removed. This map lets the block-added handler find the correct cell.
+   * Maps a removed block's ID to the cell it was in and its flat-list index
+   * when block-removed fired.
+   *
+   * Used during replace operations: block-removed fires while the holder is
+   * still in the cell DOM, then block-added fires at the same index after the
+   * holder has been removed. This map lets the block-added handler find the
+   * correct cell.
+   *
+   * Keyed by block ID (not flat index) to prevent two classes of bugs:
+   * - Non-replace deletion + coincidental same-index insertion claiming the
+   *   wrong cell.
+   * - Cross-table interference when two TableCellBlocks instances both
+   *   subscribe to the global "block changed" event.
    */
-  private removedBlockCells = new Map<number, HTMLElement>();
+  private removedBlockCells = new Map<string, { cell: HTMLElement; index: number }>();
+
+  /** Callback to check if a structural operation is active on the parent Table. */
+  private isStructuralOpActive: () => boolean;
+
+  /** Events deferred during structural operations, replayed or discarded afterward. */
+  private deferredEvents: Array<unknown> = [];
 
   constructor(options: TableCellBlocksOptions) {
     this.api = options.api;
     this.gridElement = options.gridElement;
     this.tableBlockId = options.tableBlockId;
+    this.model = options.model;
     this.onNavigateToCell = options.onNavigateToCell;
+    this.isStructuralOpActive = options.isStructuralOpActive ?? (() => false);
 
     this.api.events.on('block changed', this.handleBlockMutation);
     this.gridElement.addEventListener('click', this.handleCellBlankSpaceClick);
@@ -260,19 +282,48 @@ export class TableCellBlocks {
           return;
         }
 
-        const mountedIds = isCellWithBlocks(cellContent)
-          ? this.mountBlocksInCell(container, cellContent.blocks)
+        const referencedBlockIds = isCellWithBlocks(cellContent) && cellContent.blocks.length > 0
+          ? [...cellContent.blocks]
+          : null;
+        const mountedIds = referencedBlockIds
+          ? this.mountBlocksInCell(container, referencedBlockIds)
           : [];
 
+        const cellColorProps: Pick<CellContent, 'color' | 'textColor'> = {};
+
+        if (isCellWithBlocks(cellContent)) {
+          if (cellContent.color !== undefined) {
+            cellColorProps.color = cellContent.color;
+          }
+          if (cellContent.textColor !== undefined) {
+            cellColorProps.textColor = cellContent.textColor;
+          }
+        }
+
         if (mountedIds.length > 0) {
-          normalizedRow.push({ blocks: mountedIds });
+          normalizedRow.push({ blocks: referencedBlockIds ?? mountedIds, ...cellColorProps });
         } else {
-          const text = typeof cellContent === 'string' ? cellContent : '';
-          const block = this.api.blocks.insert('paragraph', { text }, {}, this.api.blocks.getBlocksCount(), false);
-
-          container.appendChild(block.holder);
-          this.api.blocks.setBlockParent(block.id, this.tableBlockId);
-          normalizedRow.push({ blocks: [block.id] });
+          const text = typeof cellContent === 'string'
+            ? cellContent
+            : (cellContent.text ?? '');
+          const segments = text.split(/<br\s*\/?>/i).map(s => s.trim()).filter(Boolean);
+          const textsToInsert = segments.length > 0 ? segments : [text];
+          const ids: string[] = [];
+
+          for (const segmentText of textsToInsert) {
+            const block = this.api.blocks.insert('paragraph', { text: segmentText }, {}, this.api.blocks.getBlocksCount(), false);
+
+            container.appendChild(block.holder);
+            this.api.blocks.setBlockParent(block.id, this.tableBlockId);
+            ids.push(block.id);
+          }
+
+          normalizedRow.push({
+            blocks: referencedBlockIds === null
+              ? ids
+              : [...referencedBlockIds, ...ids],
+            ...cellColorProps,
+          });
         }
 
         this.stripPlaceholders(container);
@@ -347,6 +398,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);
@@ -408,6 +465,7 @@ export class TableCellBlocks {
 
     container.appendChild(block.holder);
     this.api.blocks.setBlockParent(block.id, this.tableBlockId);
+    this.syncBlockToModel(cell, block.id);
     this.stripPlaceholders(container);
   }
 
@@ -417,6 +475,12 @@ export class TableCellBlocks {
    * When a block is removed, ensure no cell is left empty.
    */
   private handleBlockMutation = (data: unknown): void => {
+    if (this.isStructuralOpActive()) {
+      this.deferredEvents.push(data);
+
+      return;
+    }
+
     if (!this.isBlockMutationEvent(data)) {
       return;
     }
@@ -424,22 +488,7 @@ export class TableCellBlocks {
     const { type, detail } = data.event;
 
     if (type === 'block-removed') {
-      // Record which cell the removed block was in (holder is still in cell DOM
-      // at this point during a replace operation). This lets the subsequent
-      // block-added handler find the correct cell even when no adjacent block
-      // remains in the cell.
-      this.recordRemovedBlockCell(detail);
-
-      // Schedule deferred empty-cell checks instead of running immediately.
-      // This avoids creating spurious paragraphs during BlockManager.replace(),
-      // where block-removed is immediately followed by block-added.
-      const cells = this.gridElement.querySelectorAll<HTMLElement>(`[${CELL_ATTR}]`);
-
-      cells.forEach(cell => {
-        this.cellsPendingCheck.add(cell);
-      });
-
-      this.schedulePendingCellCheck();
+      this.handleBlockRemoved(detail);
 
       return;
     }
@@ -448,6 +497,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) {
@@ -456,16 +512,20 @@ export class TableCellBlocks {
 
     // Check if a block was just removed at this index (replace operation).
     // Use the recorded cell so the replacement lands in the correct cell.
-    const removedCell = this.removedBlockCells.get(blockIndex);
-
-    this.removedBlockCells.delete(blockIndex);
+    // The map is keyed by the removed block's ID, so we iterate to find an
+    // entry whose stored index matches the newly added block's index.
+    const removedEntry = this.findRemovedEntryForIndex(blockIndex);
 
     // For replace operations, always move the block to the recorded cell.
     // blocksStore.insert() places the holder adjacent to the previous block
     // in the DOM, which may be inside a different cell.
-    if (removedCell) {
-      this.claimBlockForCell(removedCell, detail.target.id);
-      this.cellsPendingCheck.delete(removedCell);
+    // Guard: verify the new block actually belongs to this table by checking
+    // that an adjacent block is either the table block itself or a block
+    // mounted inside this table's grid.
+    if (removedEntry && this.isAdjacentToThisTable(blockIndex)) {
+      this.claimBlockForCell(removedEntry.cell, detail.target.id);
+      this.syncBlockToModel(removedEntry.cell, detail.target.id);
+      this.cellsPendingCheck.delete(removedEntry.cell);
 
       return;
     }
@@ -477,6 +537,50 @@ export class TableCellBlocks {
 
     if (existingContainer) {
       this.stripPlaceholders(existingContainer);
+    }
+
+    // Sync to model if holder landed in a cell but isn't tracked yet (e.g. toolbox conversion)
+    const untrackedCell = existingContainer && !this.model.findCellForBlock(detail.target.id)
+      ? existingContainer.closest<HTMLElement>(`[${CELL_ATTR}]`)
+      : null;
+
+    if (untrackedCell) {
+      this.syncBlockToModel(untrackedCell, detail.target.id);
+    }
+
+    if (existingContainer) {
+      return;
+    }
+
+    // Only claim blocks whose holder is inside this table's grid.
+    // 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;
     }
@@ -486,16 +590,79 @@ export class TableCellBlocks {
 
     if (cell) {
       this.claimBlockForCell(cell, detail.target.id);
+      this.syncBlockToModel(cell, detail.target.id);
       this.cellsPendingCheck.delete(cell);
     }
   };
 
+  /**
+   * Handle a block-removed event: update the model and schedule an empty-cell check.
+   */
+  private handleBlockRemoved(detail: { target: { id: string; holder: HTMLElement }; index?: number }): void {
+    this.recordRemovedBlockCell(detail);
+    const blockId = detail.target.id;
+    const cellPos = this.model.findCellForBlock(blockId);
+
+    if (!cellPos) {
+      this.schedulePendingCellCheck();
+
+      return;
+    }
+
+    this.model.removeBlockFromCell(cellPos.row, cellPos.col, blockId);
+    const affectedCell = this.getCell(cellPos.row, cellPos.col);
+
+    if (affectedCell) {
+      this.cellsPendingCheck.add(affectedCell);
+    }
+
+    this.schedulePendingCellCheck();
+  }
+
+  /**
+   * Find the DOM cell's row/col position and add the block to the model.
+   */
+  private syncBlockToModel(cell: HTMLElement, blockId: string): void {
+    const pos = this.getCellPosition(cell);
+
+    if (pos) {
+      this.model.addBlockToCell(pos.row, pos.col, blockId);
+    }
+  }
+
+  /**
+   * Get the row/col position of a cell element within the grid.
+   */
+  private getCellPosition(cell: HTMLElement): { row: number; col: number } | null {
+    const row = cell.closest<HTMLElement>(`[${ROW_ATTR}]`);
+
+    if (!row) {
+      return null;
+    }
+
+    const rows = Array.from(this.gridElement.querySelectorAll(`[${ROW_ATTR}]`));
+    const rowIndex = rows.indexOf(row);
+
+    if (rowIndex < 0) {
+      return null;
+    }
+
+    const cells = Array.from(row.querySelectorAll(`[${CELL_ATTR}]`));
+    const colIndex = cells.indexOf(cell);
+
+    if (colIndex < 0) {
+      return null;
+    }
+
+    return { row: rowIndex, col: colIndex };
+  }
+
   /**
    * If the removed block's holder is currently inside a cell of this table,
    * record the mapping so a subsequent block-added at the same index can
    * find the correct cell.
    */
-  private recordRemovedBlockCell(detail: { target: { holder: HTMLElement }; index?: number }): void {
+  private recordRemovedBlockCell(detail: { target: { id: string; holder: HTMLElement }; index?: number }): void {
     if (detail.index === undefined) {
       return;
     }
@@ -503,10 +670,118 @@ export class TableCellBlocks {
     const cell = detail.target.holder.closest<HTMLElement>(`[${CELL_ATTR}]`);
 
     if (cell && this.gridElement.contains(cell)) {
-      this.removedBlockCells.set(detail.index, cell);
+      this.removedBlockCells.set(detail.target.id, { cell, index: detail.index });
     }
   }
 
+  /**
+   * Find a removedBlockCells entry whose stored index matches the given block index.
+   * Removes and returns the first match, or null if none found.
+   */
+  private findRemovedEntryForIndex(blockIndex: number): { cell: HTMLElement; index: number } | null {
+    for (const [removedId, entry] of this.removedBlockCells) {
+      if (entry.index === blockIndex) {
+        this.removedBlockCells.delete(removedId);
+
+        return entry;
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Resolve a block id to a cell only when this table model explicitly tracks
+   * that block in one of this table's cells.
+   */
+  private getOwnedCellForBlock(blockId: string): HTMLElement | null {
+    const cellPos = this.model.findCellForBlock(blockId);
+
+    if (!cellPos) {
+      return null;
+    }
+
+    const cell = this.getCell(cellPos.row, cellPos.col);
+
+    return cell && this.gridElement.contains(cell) ? cell : null;
+  }
+
+  /**
+   * Check whether a block at the given flat-list index belongs to this table's
+   * block range. Used to prevent cross-table interference when two
+   * TableCellBlocks instances both subscribe to the global "block changed" event.
+   *
+   * Returns true if:
+   * - An adjacent block (index-1 or index+1) is mounted inside a cell of this
+   *   table's grid, OR
+   * - The table block is immediately before this index AND either the index
+   *   after is also within this table (block in a cell) or does not exist
+   *   (the new block is the last in the flat list).
+   *
+   * The table block alone being adjacent is NOT sufficient — a second table
+   * could immediately follow this one in the flat list, making the table
+   * block adjacent to BOTH tables' blocks.
+   */
+  private isAdjacentToThisTable(blockIndex: number): boolean {
+    const blocksCount = this.api.blocks.getBlocksCount();
+
+    // Check if any adjacent block is explicitly tracked by this table model.
+    for (const offset of [-1, 1]) {
+      const adjacentIndex = blockIndex + offset;
+
+      if (adjacentIndex < 0 || adjacentIndex >= blocksCount) {
+        continue;
+      }
+
+      const block = this.api.blocks.getBlockByIndex(adjacentIndex);
+
+      if (!block) {
+        continue;
+      }
+
+      if (this.getOwnedCellForBlock(block.id)) {
+        return true;
+      }
+    }
+
+    // For single-block-in-cell tables: the table block is at index-1 and
+    // either (a) no block follows at index+1, or (b) the block at index+1
+    // is inside this table's grid. This avoids matching blocks that belong
+    // to a different table immediately following this one.
+    if (!this.isTableBlockAtPrevIndex(blockIndex)) {
+      return false;
+    }
+
+    const nextIndex = blockIndex + 1;
+
+    if (nextIndex >= blocksCount) {
+      return true;
+    }
+
+    const nextBlock = this.api.blocks.getBlockByIndex(nextIndex);
+
+    if (!nextBlock) {
+      return true;
+    }
+
+    return this.getOwnedCellForBlock(nextBlock.id) !== null;
+  }
+
+  /**
+   * Check if this table's block is at the index immediately before the given index.
+   */
+  private isTableBlockAtPrevIndex(blockIndex: number): boolean {
+    const prevIndex = blockIndex - 1;
+
+    if (prevIndex < 0) {
+      return false;
+    }
+
+    const prevBlock = this.api.blocks.getBlockByIndex(prevIndex);
+
+    return prevBlock?.id === this.tableBlockId;
+  }
+
   /**
    * Schedule a microtask to run ensureCellHasBlock for all cells still pending.
    * If a block-added event removes a cell from the pending set before the microtask runs,
@@ -661,5 +936,28 @@ export class TableCellBlocks {
     this._activeCellWithBlocks = null;
     this.cellsPendingCheck.clear();
     this.removedBlockCells.clear();
+    this.deferredEvents.length = 0;
+  }
+
+  /**
+   * Replay all deferred events. Called after interactive structural ops
+   * (add/delete/move row/col) complete so block lifecycle events are processed.
+   */
+  public flushDeferredEvents(): void {
+    const events = [...this.deferredEvents];
+
+    this.deferredEvents.length = 0;
+
+    for (const data of events) {
+      this.handleBlockMutation(data);
+    }
+  }
+
+  /**
+   * Discard all deferred events. Called after full-rebuild ops (setData, onPaste)
+   * where the entire grid is replaced and old events are meaningless.
+   */
+  public discardDeferredEvents(): void {
+    this.deferredEvents.length = 0;
   }
 }