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

package/src/components/modules/blockManager/yjs-sync.ts

@@ -112,21 +112,43 @@ export class BlockYjsSync {
    * @param fn - Function to execute
    * @param options - Options for controlling the atomic operation behavior
    */
-  public withAtomicOperation<T>(fn: () => T, options?: { extendThroughRAF?: boolean }): T {
+  /**
+   * Begin an atomic operation by incrementing sync count and suppressing stop capturing.
+   *
+   * @returns cleanup function to call when operation completes
+   */
+  private beginAtomicOperation(): () => void {
     this.yjsSyncCount++;
     const operations = this.dependencies.operations;
-    const shouldExtend = options?.extendThroughRAF === true;
 
     if (operations) {
       operations.suppressStopCapturing = true;
     }
 
-    const decrementSyncCount = (): void => {
+    return (): void => {
       this.yjsSyncCount--;
       if (operations && this.yjsSyncCount === 0) {
         operations.suppressStopCapturing = false;
       }
     };
+  }
+
+  /**
+   * End an atomic operation, optionally deferring cleanup through RAF.
+   *
+   * @param cleanup - function to call to decrement sync count
+   * @param extendThroughRAF - if true, defer cleanup until after next animation frame
+   */
+  private endAtomicOperation(cleanup: () => void, extendThroughRAF: boolean): void {
+    if (extendThroughRAF) {
+      requestAnimationFrame(cleanup);
+    } else {
+      cleanup();
+    }
+  }
+
+  public withAtomicOperation<T>(fn: () => T, options?: { extendThroughRAF?: boolean }): T {
+    const cleanup = this.beginAtomicOperation();
 
     try {
       const result = fn();
@@ -134,16 +156,34 @@ export class BlockYjsSync {
       // If extendThroughRAF is true, delay decrementing yjsSyncCount until after requestAnimationFrame callbacks
       // This ensures that DOM updates scheduled by rendered() hooks don't trigger
       // block data sync to Yjs, which would create new undo entries and clear the redo stack
-      if (shouldExtend) {
-        requestAnimationFrame(decrementSyncCount);
-      } else {
-        decrementSyncCount();
-      }
+      this.endAtomicOperation(cleanup, options?.extendThroughRAF === true);
 
       return result;
     } catch (error) {
-      // If an error occurs, decrement immediately
-      decrementSyncCount();
+      cleanup();
+      throw error;
+    }
+  }
+
+  /**
+   * Async version of withAtomicOperation for operations that return promises.
+   * Keeps yjsSyncCount elevated until the async work completes, then optionally
+   * extends through RAF to cover deferred DOM callbacks.
+   *
+   * @param fn - Async function to execute
+   * @param options - Options for controlling the atomic operation behavior
+   */
+  public async withAtomicOperationAsync(
+    fn: () => Promise<void>,
+    options?: { extendThroughRAF?: boolean }
+  ): Promise<void> {
+    const cleanup = this.beginAtomicOperation();
+
+    try {
+      await fn();
+      this.endAtomicOperation(cleanup, options?.extendThroughRAF === true);
+    } catch (error) {
+      cleanup();
       throw error;
     }
   }
@@ -165,25 +205,28 @@ export class BlockYjsSync {
    * @param event - the block change event from YjsManager
    */
   private syncBlockFromYjs(event: BlockChangeEvent): void {
-    const { blockId, type: changeType } = event;
-
-    if (changeType === 'update') {
-      this.handleYjsUpdate(blockId);
+    if (event.type === 'update') {
+      this.handleYjsUpdate(event.blockId);
       return;
     }
 
-    if (changeType === 'move') {
+    if (event.type === 'move') {
       this.handleYjsMove();
       return;
     }
 
-    if (changeType === 'add') {
-      this.handleYjsAdd(blockId);
+    if (event.type === 'add') {
+      this.handleYjsAdd(event.blockId);
       return;
     }
 
-    if (changeType === 'remove') {
-      this.handleYjsRemove(blockId);
+    if (event.type === 'batch-add') {
+      this.handleYjsBatchAdd(event.blockIds);
+      return;
+    }
+
+    if (event.type === 'remove') {
+      this.handleYjsRemove(event.blockId);
     }
   }
 
@@ -221,17 +264,19 @@ export class BlockYjsSync {
         bindEventsImmediately: true,
       });
 
-      // Increment counter to prevent syncing back to Yjs during undo/redo
-      this.yjsSyncCount++;
-      try {
+      // Use atomic operation with RAF extension to prevent DOM mutation observers
+      // from syncing back to Yjs after block replacement
+      this.withAtomicOperation(() => {
         this.handlers.replaceBlock(blockIndex, newBlock);
-      } finally {
-        this.yjsSyncCount--;
-      }
+      }, { extendThroughRAF: true });
     } else {
-      // Update data in-place; if tool can't handle it, recreate the block
-      this.yjsSyncCount++;
-      void block.setData(data).then(success => {
+      // Update data in-place; if tool can't handle it, recreate the block.
+      // Use async atomic operation with RAF extension to keep isSyncingFromYjs
+      // true through the entire setData lifecycle + one RAF frame, preventing
+      // DOM mutation observers from writing back to Yjs and clearing the redo stack.
+      void this.withAtomicOperationAsync(async () => {
+        const success = await block.setData(data);
+
         if (!success) {
           const blockIndex = this.handlers.getBlockIndex(block);
           const newBlock = this.factory.composeBlock({
@@ -244,9 +289,7 @@ export class BlockYjsSync {
 
           this.handlers.replaceBlock(blockIndex, newBlock);
         }
-      }).finally(() => {
-        this.yjsSyncCount--;
-      });
+      }, { extendThroughRAF: true });
     }
   }
 
@@ -303,6 +346,80 @@ export class BlockYjsSync {
     }, { extendThroughRAF: true });
   }
 
+  /**
+   * Handle batch block add from Yjs (undo/redo).
+   *
+   * When multiple blocks are restored at once (e.g. a table + its cell
+   * paragraphs), we use a two-pass approach:
+   *   1. Create ALL blocks and insert them into the blocks array (no DOM).
+   *   2. Activate each block (DOM insert + RENDERED lifecycle hook).
+   *
+   * This ensures that when a parent tool's `rendered()` hook fires (pass 2),
+   * child blocks already exist in BlockManager, so helpers like
+   * `mountBlocksInCell()` can find them by ID.
+   */
+  private handleYjsBatchAdd(blockIds: string[]): void {
+    const yjsBlocks = this.dependencies.YjsManager.toJSON();
+
+    // Collect blocks to create — skip any that already exist
+    const toCreate: Array<{ blockId: string; toolName: string; data: Record<string, unknown>; parentId: string | undefined; targetIndex: number }> = [];
+
+    for (const blockId of blockIds) {
+      if (this.repository.getBlockById(blockId) !== undefined) {
+        continue;
+      }
+
+      const yblock = this.dependencies.YjsManager.getBlockById(blockId);
+
+      if (yblock === undefined) {
+        continue;
+      }
+
+      const toolName = yblock.get('type') as string;
+      const data = this.dependencies.YjsManager.yMapToObject(yblock.get('data') as YMap<unknown>);
+      const parentId = yblock.get('parentId') as string | undefined;
+      const targetIndex = yjsBlocks.findIndex((b) => b.id === blockId);
+
+      if (targetIndex === -1) {
+        continue;
+      }
+
+      toCreate.push({ blockId, toolName, data, parentId: parentId ?? undefined, targetIndex });
+    }
+
+    if (toCreate.length === 0) {
+      return;
+    }
+
+    this.withAtomicOperation(() => {
+      // Pass 1 — create blocks and add to array (no DOM, no RENDERED)
+      const created: Array<{ block: Block; targetIndex: number; parentId: string | undefined }> = [];
+
+      for (const entry of toCreate) {
+        const block = this.factory.composeBlock({
+          id: entry.blockId,
+          tool: entry.toolName,
+          data: entry.data,
+          parentId: entry.parentId,
+          bindEventsImmediately: true,
+        });
+
+        this.blocksStore.addToArray(entry.targetIndex, block);
+        created.push({ block, targetIndex: entry.targetIndex, parentId: entry.parentId });
+      }
+
+      // Pass 2 — activate blocks (DOM insert + RENDERED), then emit events
+      for (const { block, targetIndex, parentId } of created) {
+        this.blocksStore.activateBlock(block);
+        this.handlers.onBlockAdded(block, targetIndex);
+
+        if (parentId !== undefined) {
+          this.handlers.updateIndentation(block);
+        }
+      }
+    }, { extendThroughRAF: true });
+  }
+
   /**
    * Handle block remove from Yjs (undo/redo - removing a previously added block)
    */

package/src/components/modules/crossBlockSelection.ts

@@ -269,13 +269,21 @@ export class CrossBlockSelection extends Module {
       return;
     }
 
-    const relatedBlock = BlockManager.getBlockByChildNode(mouseEvent.relatedTarget as Node) || this.lastSelectedBlock;
-    const targetBlock = BlockManager.getBlockByChildNode(mouseEvent.target as Node);
+    const rawRelatedBlock = BlockManager.getBlockByChildNode(mouseEvent.relatedTarget as Node) || this.lastSelectedBlock;
+    const rawTargetBlock = BlockManager.getBlockByChildNode(mouseEvent.target as Node);
 
-    if (!relatedBlock || !targetBlock) {
+    if (!rawRelatedBlock || !rawTargetBlock) {
       return;
     }
 
+    /**
+     * Resolve child blocks (e.g. paragraphs inside table cells) to their root parent.
+     * Without this, dragging across a table would select individual cell blocks
+     * from the flat blocks array instead of treating the table as a single unit.
+     */
+    const relatedBlock = BlockManager.resolveToRootBlock(rawRelatedBlock);
+    const targetBlock = BlockManager.resolveToRootBlock(rawTargetBlock);
+
     if (targetBlock === relatedBlock) {
       return;
     }

package/src/components/modules/drag/preview/DragPreview.ts

@@ -23,6 +23,14 @@ export class DragPreview {
     // Reset styles on clone
     clone.className = twMerge(PREVIEW_STYLES.content, isStretched ? 'max-w-none' : '');
 
+    // Set explicit width on clone so percentage-based children (e.g. table cells)
+    // have a sizing reference inside the position:fixed preview container
+    const computedWidth = contentElement.getBoundingClientRect().width;
+
+    if (computedWidth > 0) {
+      clone.style.width = `${computedWidth}px`;
+    }
+
     // Reset margin on the tool's rendered element (first child) to prevent offset
     const toolElement = clone.firstElementChild as HTMLElement | null;
 

package/src/components/modules/drag/target/DropTargetDetector.ts

@@ -138,6 +138,20 @@ export class DropTargetDetector {
       return null;
     }
 
+    /**
+     * If the target block is inside a table cell and the source block is NOT
+     * in the same cell, redirect the drop target to the table block itself.
+     * This prevents blocks from being dropped into table cells via drag & drop.
+     */
+    const targetCellContainer = targetBlock.holder.closest('[data-blok-table-cell-blocks]');
+    const sourceCellContainer = sourceBlock.holder.closest('[data-blok-table-cell-blocks]');
+    const isTargetInCell = targetCellContainer !== null;
+    const isCrossCellDrop = sourceCellContainer !== targetCellContainer;
+
+    if (isTargetInCell && isCrossCellDrop) {
+      return this.redirectToTableBlock(targetCellContainer, clientY);
+    }
+
     // Determine edge (top or bottom half of block)
     const rect = blockHolder.getBoundingClientRect();
     const isTopHalf = clientY < rect.top + rect.height / 2;
@@ -151,24 +165,29 @@ export class DropTargetDetector {
     const canUsePreviousBlock = previousBlock && !this.sourceBlocks.includes(previousBlock);
 
     if (isTopHalf && targetIndex > 0 && canUsePreviousBlock) {
-      const targetDepth = this.calculateTargetDepth(previousBlock, 'bottom');
+      const targetDepth = this.calculateTargetDepth(previousBlock, 'bottom', sourceBlock);
       return { block: previousBlock, edge: 'bottom', depth: targetDepth };
     }
 
     // First block top half, or any block bottom half
     const edge: 'top' | 'bottom' = isTopHalf ? 'top' : 'bottom';
-    const targetDepth = this.calculateTargetDepth(targetBlock, edge);
+    const targetDepth = this.calculateTargetDepth(targetBlock, edge, sourceBlock);
 
     return { block: targetBlock, edge, depth: targetDepth };
   }
 
   /**
-   * Calculates the target depth for list item nesting
+   * Calculates the target depth for list item nesting.
+   * When a sourceBlock is provided and is a list item, the depth is calculated
+   * to match what ListDepthValidator.getTargetDepthForMove will produce post-drop,
+   * ensuring the visual indicator accurately predicts the final depth.
+   *
    * @param targetBlock - Block being dropped onto
    * @param targetEdge - Edge of target ('top' or 'bottom')
+   * @param sourceBlock - Optional block being dragged (for accurate list item depth prediction)
    * @returns The target depth (0 for root level, 1+ for nested)
    */
-  calculateTargetDepth(targetBlock: Block, targetEdge: 'top' | 'bottom'): number {
+  calculateTargetDepth(targetBlock: Block, targetEdge: 'top' | 'bottom', sourceBlock?: Block): number {
     const targetIndex = this.blockManager.getBlockIndex(targetBlock);
     const dropIndex = targetEdge === 'top' ? targetIndex : targetIndex + 1;
 
@@ -184,23 +203,93 @@ export class DropTargetDetector {
       return 0;
     }
 
-    const previousDepth = this.listItemDepth.getDepth(previousBlock) ?? 0;
+    const previousDepth = this.listItemDepth.getDepth(previousBlock);
+    const previousIsListItem = previousDepth !== null;
+    const prevDepthValue = previousDepth ?? 0;
 
     // Get the block that will be immediately after the drop position
     const nextBlock = this.blockManager.getBlockByIndex(dropIndex);
-    const nextDepth = nextBlock ? (this.listItemDepth.getDepth(nextBlock) ?? 0) : 0;
+    const nextDepth = nextBlock ? this.listItemDepth.getDepth(nextBlock) : null;
+    const nextIsListItem = nextDepth !== null;
+    const nextDepthValue = nextDepth ?? 0;
+
+    // When dragging a list item, predict the exact depth ListDepthValidator will
+    // compute post-drop — so the visual indicator matches the actual result.
+    const sourceDepth = sourceBlock ? this.listItemDepth.getDepth(sourceBlock) : null;
+
+    if (sourceDepth !== null) {
+      return this.predictListItemDepth(
+        sourceDepth, prevDepthValue, previousIsListItem, nextDepthValue, nextIsListItem
+      );
+    }
+
+    // For non-list blocks (or when sourceBlock not provided), use neighbor-based
+    // depth for cosmetic indicator positioning only.
+    if (nextDepthValue > 0 && nextDepthValue <= prevDepthValue + 1) {
+      return nextDepthValue;
+    }
+
+    if (prevDepthValue > 0) {
+      return prevDepthValue;
+    }
+
+    return 0;
+  }
+
+  /**
+   * Mirrors ListDepthValidator.getTargetDepthForMove to predict the exact
+   * post-drop depth for a list item. This ensures the visual indicator
+   * shows the same depth the item will actually have after being dropped.
+   */
+  private predictListItemDepth(
+    currentDepth: number,
+    previousDepth: number,
+    previousIsListItem: boolean,
+    nextDepth: number,
+    nextIsListItem: boolean
+  ): number {
+    const maxAllowedDepth = previousIsListItem ? previousDepth + 1 : 0;
+
+    // Cap current depth at max allowed
+    if (currentDepth > maxAllowedDepth) {
+      return maxAllowedDepth;
+    }
 
-    // If next item is nested, match its depth (become sibling)
-    if (nextDepth > 0 && nextDepth <= previousDepth + 1) {
+    // Match next depth if it's deeper than current and within bounds
+    if (nextIsListItem && nextDepth > currentDepth && nextDepth <= maxAllowedDepth) {
       return nextDepth;
     }
 
-    // If previous item is nested, match its depth
-    if (previousDepth > 0) {
+    // Match previous depth if deeper than current and no next list item
+    if (previousIsListItem && !nextIsListItem && previousDepth > currentDepth && previousDepth <= maxAllowedDepth) {
       return previousDepth;
     }
 
-    return 0;
+    return currentDepth;
+  }
+
+  /**
+   * Redirect a drop target to the table block that contains the given cell container.
+   * Finds the outermost [data-blok-element] ancestor and returns it as the target.
+   *
+   * @param cellContainer - The [data-blok-table-cell-blocks] element containing the target
+   * @param clientY - Cursor Y position for edge calculation
+   * @returns Drop target pointing to the table block, or null if table block not found
+   */
+  private redirectToTableBlock(cellContainer: Element, clientY: number): DropTarget | null {
+    const tableHolder = cellContainer.closest(createSelector(DATA_ATTR.element));
+    const tableBlock = tableHolder
+      ? this.blockManager.blocks.find(b => b.holder === tableHolder)
+      : undefined;
+
+    if (!tableBlock) {
+      return null;
+    }
+
+    const tableRect = tableBlock.holder.getBoundingClientRect();
+    const isTopHalf = clientY < tableRect.top + tableRect.height / 2;
+
+    return { block: tableBlock, edge: isTopHalf ? 'top' : 'bottom', depth: 0 };
   }
 
 }

package/src/components/modules/paste/handlers/base.ts

@@ -1,5 +1,6 @@
 import type { PasteEvent, PasteEventDetail } from '../../../../../types';
 import type { BlokModules } from '../../../../types-internal/blok-modules';
+import { getRestrictedTools } from '../../../../tools/table/table-restrictions';
 import type { SanitizerConfigBuilder } from '../sanitizer-config';
 import type { ToolRegistry } from '../tool-registry';
 import type { HandlerContext, PasteData } from '../types';
@@ -65,9 +66,6 @@ export abstract class BasePasteHandler implements PasteHandler {
     return isCurrentBlockDefault && currentBlock.isEmpty;
   }
 
-  /** Tools that cannot be nested inside table cells */
-  private static readonly TOOLS_RESTRICTED_IN_TABLE_CELLS = new Set(['table', 'header']);
-
   /**
    * If we're inside a table cell and any pasted item uses a tool that can't
    * be nested in table cells (e.g. table, header), redirect the insertion
@@ -78,7 +76,8 @@ export abstract class BasePasteHandler implements PasteHandler {
   private redirectToTableParentIfNeeded(data: PasteData[], BlockManager: BlokModules['BlockManager']): void {
     const currentBlock = BlockManager.currentBlock;
     const isInsideTableCell = currentBlock?.holder?.closest('[data-blok-table-cell-blocks]');
-    const hasRestrictedTools = data.some(item => BasePasteHandler.TOOLS_RESTRICTED_IN_TABLE_CELLS.has(item.tool));
+    const restricted = new Set(getRestrictedTools());
+    const hasRestrictedTools = data.some(item => restricted.has(item.tool));
 
     if (!isInsideTableCell || !hasRestrictedTools || currentBlock === undefined) {
       return;

package/src/components/modules/paste/index.ts

@@ -305,6 +305,6 @@ export class Paste extends Module {
       await this.processDataTransfer(event.clipboardData);
     }
 
-    Toolbar.close();
+    Toolbar.moveAndOpen();
   };
 }

package/src/components/modules/rectangleSelection.ts

@@ -611,9 +611,12 @@ export class RectangleSelection extends Module {
       };
     }
     const blockInCurrentPos = this.Blok.BlockManager.getBlockByChildNode(elementUnderMouse);
+    const rootBlock = blockInCurrentPos !== undefined
+      ? this.Blok.BlockManager.resolveToRootBlock(blockInCurrentPos)
+      : undefined;
 
-    const index = blockInCurrentPos !== undefined
-      ? this.Blok.BlockManager.blocks.findIndex((block) => block.holder === blockInCurrentPos.holder)
+    const index = rootBlock !== undefined
+      ? this.Blok.BlockManager.blocks.findIndex((block) => block.holder === rootBlock.holder)
       : undefined;
 
     return {

package/src/components/modules/toolbar/blockSettings.ts

@@ -160,61 +160,69 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
      * Set isOpening flag BEFORE async operations to prevent toolbar from moving
      * while menu items are being created. This fixes a bug where hovering over a different
      * block during async getTunesItems() causes the toolbar to reposition incorrectly.
+     *
+     * Wrapped in try/catch to guarantee isOpening is always reset — if any step
+     * (getTunes, getTunesItems, PopoverClass constructor) throws, without cleanup
+     * the flag stays true and the toolbar permanently stops appearing on hover.
      */
     this.isOpening = true;
 
-    /**
-     * If block settings contains any inputs, focus will be set there,
-     * so we need to save current selection to restore it after block settings is closed
-     */
-    this.selection.save();
+    try {
+      /**
+       * If block settings contains any inputs, focus will be set there,
+       * so we need to save current selection to restore it after block settings is closed
+       */
+      this.selection.save();
 
-    /**
-     * Highlight content of a Block we are working with
-     * For multiple blocks, they should already be selected
-     */
-    if (!hasMultipleBlocksSelected) {
-      this.Blok.BlockSelection.selectBlock(block);
-      this.Blok.BlockSelection.clearCache();
-    }
+      /**
+       * Highlight content of a Block we are working with
+       * For multiple blocks, they should already be selected
+       */
+      if (!hasMultipleBlocksSelected) {
+        this.Blok.BlockSelection.selectBlock(block);
+        this.Blok.BlockSelection.clearCache();
+      }
 
-    /** Get tool's settings data - only relevant for single block selection */
-    const { toolTunes, commonTunes } = block.getTunes();
-
-    const PopoverClass = isMobileScreen() ? PopoverMobile : PopoverDesktop;
-    const popoverParams: PopoverParams & { flipper?: Flipper } = {
-      searchable: false,
-      trigger: trigger || this.nodes.wrapper,
-      items: await this.getTunesItems(block, commonTunes, toolTunes),
-      scopeElement: this.Blok.API.methods.ui.nodes.redactor,
-      messages: {
-        nothingFound: this.Blok.I18n.t('popover.nothingFound'),
-        search: this.Blok.I18n.t('popover.search'),
-      },
-    };
+      /** Get tool's settings data - only relevant for single block selection */
+      const { toolTunes, commonTunes } = block.getTunes();
+
+      const PopoverClass = isMobileScreen() ? PopoverMobile : PopoverDesktop;
+      const popoverParams: PopoverParams & { flipper?: Flipper } = {
+        searchable: false,
+        trigger: trigger || this.nodes.wrapper,
+        items: await this.getTunesItems(block, commonTunes, toolTunes),
+        scopeElement: this.Blok.API.methods.ui.nodes.redactor,
+        messages: {
+          nothingFound: this.Blok.I18n.t('popover.nothingFound'),
+          search: this.Blok.I18n.t('popover.search'),
+        },
+      };
 
-    if (PopoverClass === PopoverDesktop) {
-      popoverParams.flipper = this.flipperInstance;
-    }
+      if (PopoverClass === PopoverDesktop) {
+        popoverParams.flipper = this.flipperInstance;
+      }
 
-    this.popover = new PopoverClass(popoverParams);
-    this.popover.getElement().setAttribute('data-blok-testid', 'block-tunes-popover');
+      this.popover = new PopoverClass(popoverParams);
+      this.popover.getElement().setAttribute('data-blok-testid', 'block-tunes-popover');
 
-    this.popover.on(PopoverEvent.Closed, this.onPopoverClose);
+      this.popover.on(PopoverEvent.Closed, this.onPopoverClose);
 
-    /**
-     * Set opened flag AFTER popover is created to prevent race conditions
-     * where close() is called during the async getTunesItems() call
-     * when opened=true but popover is still null
-     */
-    this.opened = true;
-    this.isOpening = false; // Clear isOpening flag after popover is created
+      /**
+       * Set opened flag AFTER popover is created to prevent race conditions
+       * where close() is called during the async getTunesItems() call
+       * when opened=true but popover is still null
+       */
+      this.opened = true;
+      this.isOpening = false;
 
-    /** Tell to subscribers that block settings is opened */
-    this.eventsDispatcher.emit(this.events.opened);
+      /** Tell to subscribers that block settings is opened */
+      this.eventsDispatcher.emit(this.events.opened);
 
-    this.popover.show();
-    this.attachFlipperKeydownListener(block);
+      this.popover.show();
+      this.attachFlipperKeydownListener(block);
+    } catch {
+      this.isOpening = false;
+    }
   }
 
   /**

package/src/components/modules/toolbar/index.ts

@@ -336,11 +336,15 @@ export class Toolbar extends Module<ToolbarNodes> {
     }
 
     /**
-     * Track whether the original block is inside a table cell.
-     * Check the DOM directly rather than relying on resolution success,
-     * so that the flag is correct even when resolution falls back to the original block.
+     * Track whether the block itself lives inside a table cell.
+     * The blockHover controller already resolves cell paragraphs to the parent
+     * table block, so when hovering a table, `unresolvedBlock` IS the table
+     * block (whose holder is NOT inside a cell). We only check the block's
+     * holder — not the raw mouse target — to avoid hiding the plus button
+     * for the table block itself.
      */
-    this.hoveredBlockIsFromTableCell = unresolvedBlock.holder.closest('[data-blok-table-cell-blocks]') !== null;
+    this.hoveredBlockIsFromTableCell =
+      unresolvedBlock.holder.closest('[data-blok-table-cell-blocks]') !== null;
 
     const targetBlock = this.resolveTableCellBlock(unresolvedBlock);
 
@@ -588,6 +592,16 @@ export class Toolbar extends Module<ToolbarNodes> {
     this.settingsTogglerHandler.skipNextToggle();
   }
 
+  /**
+   * Hides the block actions (plus button and settings toggler) without
+   * closing the entire toolbar or setting explicitlyClosed.
+   * Used when the toolbar should remain positioned but its action buttons
+   * should temporarily step aside (e.g., during typing or inline toolbar use).
+   */
+  public hideBlockActions(): void {
+    this.blockActions.hide();
+  }
+
   /**
    * Resets the explicitlyClosed flag to allow the toolbar to reopen on hover.
    * Called when drag is cancelled to re-enable hover-based toolbar opening.
@@ -876,11 +890,17 @@ export class Toolbar extends Module<ToolbarNodes> {
         }
 
         /**
-         * Do not move toolbar if it was explicitly closed (e.g., after block deletion).
-         * This prevents the toolbar from reopening on subsequent block-hovered events.
+         * Do not move toolbar if it was explicitly closed and the user is still
+         * hovering the same block. When the user hovers a DIFFERENT block
+         * (or hoveredBlock is null after close()), reset the flag and allow
+         * the toolbar to reopen — this is an intentional user action.
          */
         if (this.explicitlyClosed) {
-          return;
+          if (this.hoveredBlock !== null && this.hoveredBlock === hoveredBlock) {
+            return;
+          }
+
+          this.explicitlyClosed = false;
         }
 
         /**