@jackuait/blok 0.6.0-beta.9 → 0.7.0-beta.1

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

@@ -222,11 +222,23 @@ export class Toolbar extends Module<ToolbarNodes> {
 
         /**
          * Set current block to cover the case when the Toolbar showed near hovered Block but caret is set to another Block.
-         * Skip this when the hovered block was resolved from a table cell, so the toolbox
-         * can detect the original cell block and hide restricted tools (e.g., table, header).
+         * Skip this when:
+         * - the hovered block was resolved from a table cell
+         * - the current block's holder is nested inside a table cell container
+         *   (e.g. "/" was typed in a cell while the toolbar was already open from hover,
+         *   so hoveredBlockIsFromTableCell may be stale/false from the hover resolution)
+         *
+         * In both cases, overriding currentBlock with the resolved table block
+         * would lose the cell-paragraph context the toolbox needs to hide restricted tools.
          */
         if (this.hoveredBlock && !this.hoveredBlockIsFromTableCell) {
-          this.Blok.BlockManager.currentBlock = this.hoveredBlock;
+          const currentBlock = this.Blok.BlockManager.currentBlock;
+          const isCurrentBlockInsideTableCell = currentBlock !== undefined
+            && currentBlock.holder.closest('[data-blok-table-cell-blocks]') !== null;
+
+          if (!isCurrentBlockInsideTableCell) {
+            this.Blok.BlockManager.currentBlock = this.hoveredBlock;
+          }
         }
 
         this.toolboxInstance.open();
@@ -336,11 +348,30 @@ 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 hover originated from inside a table cell.
+     *
+     * Two scenarios:
+     * 1. Called with an explicit `target` (via BlockHovered): blockHover.ts resolves
+     *    cell paragraphs up to the TABLE block before emitting the event, so
+     *    `unresolvedBlock` is always the TABLE block — its holder is at the top level.
+     *    Use the raw `target` element to detect if the pointer is inside a cell.
+     * 2. Called without args (from activateToolbox / slash menu): `unresolvedBlock`
+     *    falls back to `BlockManager.currentBlock`, which IS the cell-paragraph.
+     *    Check the block's holder directly.
+     *
+     * When this flag is true, the toolbox.open() getter preserves the cell-paragraph
+     * as currentBlock so that restricted tools (table, header) can be hidden.
+     *
+     * NOTE: This flag is NOT used for plus button / settings toggler visibility.
+     * Those are handled separately by the focusin listener (tableCellFocusHandler)
+     * which detects when the user actually clicks/focuses inside a cell.
      */
-    this.hoveredBlockIsFromTableCell = unresolvedBlock.holder.closest('[data-blok-table-cell-blocks]') !== null;
+    const targetIsInsideCell = target instanceof Element
+      && target.closest('[data-blok-table-cell-blocks]') !== null;
+    const blockIsInsideCell =
+      unresolvedBlock.holder.closest('[data-blok-table-cell-blocks]') !== null;
+
+    this.hoveredBlockIsFromTableCell = targetIsInsideCell || blockIsInsideCell;
 
     const targetBlock = this.resolveTableCellBlock(unresolvedBlock);
 
@@ -362,11 +393,17 @@ export class Toolbar extends Module<ToolbarNodes> {
     }
 
     /**
-     * Suppress toolbar buttons when the block is inside a table cell.
+     * Suppress toolbar buttons when the focused element is inside a table cell.
      * The toolbar still positions itself for toolbox/slash-search purposes,
-     * but plus button and settings toggler remain hidden.
+     * but plus button and settings toggler remain hidden while a cell has focus.
+     *
+     * Note: we check focus (activeElement) not hover. On hover alone, the plus
+     * button should remain visible so the user can click it to add blocks
+     * below the table. Only when the user actually clicks/focuses inside a cell
+     * should the buttons be suppressed.
      */
-    const displayValue = this.hoveredBlockIsFromTableCell ? 'none' : '';
+    const focusIsInsideCell = this.isFocusInsideTableCell();
+    const displayValue = focusIsInsideCell ? 'none' : '';
 
     plusButton.style.display = displayValue;
 
@@ -588,6 +625,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.
@@ -596,6 +643,48 @@ export class Toolbar extends Module<ToolbarNodes> {
     this.explicitlyClosed = false;
   }
 
+  /**
+   * Checks whether the currently focused element (document.activeElement) is
+   * inside a table cell container.
+   *
+   * Used to decide whether the plus button and settings toggler should be hidden.
+   * Focus-based check distinguishes click (buttons hidden) from hover (buttons visible).
+   */
+  private isFocusInsideTableCell(): boolean {
+    const active = document.activeElement;
+
+    if (!active) {
+      return false;
+    }
+
+    return active.closest('[data-blok-table-cell-blocks]') !== null;
+  }
+
+  /**
+   * Updates toolbar button visibility based on whether a table cell has focus.
+   * Hides plus button and settings toggler when focus is inside a cell;
+   * restores them when focus moves to a regular block.
+   *
+   * Called from the focusin listener so button state is updated immediately
+   * on click, without waiting for the next hover/moveAndOpen cycle.
+   */
+  private updateToolbarButtonsForTableCellFocus(): void {
+    const { plusButton, settingsToggler } = this.nodes;
+
+    if (!plusButton) {
+      return;
+    }
+
+    const focusIsInsideCell = this.isFocusInsideTableCell();
+    const displayValue = focusIsInsideCell ? 'none' : '';
+
+    plusButton.style.display = displayValue;
+
+    if (settingsToggler) {
+      settingsToggler.style.display = displayValue;
+    }
+  }
+
   /**
    * If the block is inside a table cell, resolve to the parent table block.
    * This ensures the toolbar shows for the table when clicking/focusing inside cells.
@@ -680,12 +769,12 @@ export class Toolbar extends Module<ToolbarNodes> {
       // eslint-disable-next-line @typescript-eslint/no-deprecated -- CSS getter now returns Tailwind classes
       this.CSS.actions,
       // Narrow mode positioning on non-mobile screens
-      'not-mobile:group-data-[blok-narrow=true]:right-[calc(-1*theme(spacing.narrow-mode-right-padding)-5px)]',
+      'not-mobile:group-data-[blok-narrow=true]:right-[calc(-1*(var(--spacing-narrow-mode-right-padding))-5px)]',
       // RTL narrow mode: use left positioning instead
-      'not-mobile:group-data-[blok-narrow=true]:group-data-[blok-rtl=true]:right-auto',
-      'not-mobile:group-data-[blok-narrow=true]:group-data-[blok-rtl=true]:left-[calc(-1*theme(spacing.narrow-mode-right-padding)-5px)]',
+      'not-mobile:group-data-[blok-rtl=true]:group-data-[blok-narrow=true]:right-auto',
+      'not-mobile:group-data-[blok-rtl=true]:group-data-[blok-narrow=true]:left-[calc(-1*(var(--spacing-narrow-mode-right-padding))-5px)]',
       // RTL narrow mode additional left offset
-      'not-mobile:group-data-[blok-narrow=true]:group-data-[blok-rtl=true]:left-[-5px]',
+      'not-mobile:group-data-[blok-rtl=true]:group-data-[blok-narrow=true]:left-[-5px]',
     ]);
 
     this.nodes.content = content;
@@ -845,6 +934,18 @@ export class Toolbar extends Module<ToolbarNodes> {
       this.readOnlyMutableListeners.on(settingsToggler, 'mousedown', this.settingsTogglerHandler.createMousedownHandler(), true);
     }
 
+    /**
+     * Listen for focus changes inside the editor.
+     * When the user clicks/tabs into a table cell, hide the plus button and
+     * settings toggler. When focus moves to a regular block, restore them.
+     *
+     * This runs on every focusin event (not throttled) to ensure buttons
+     * update immediately on click — no 300ms delay.
+     */
+    this.readOnlyMutableListeners.on(this.Blok.UI.nodes.wrapper, 'focusin', () => {
+      this.updateToolbarButtonsForTableCellFocus();
+    });
+
     /**
      * Subscribe to the 'block-hovered' event if current view is not mobile
      * @see https://github.com/codex-team/editor.js/issues/1972
@@ -876,11 +977,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;
         }
 
         /**

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

@@ -188,7 +188,7 @@ export class InlineToolbar extends Module<InlineToolbarNodes> {
     await this.openingPromise;
     this.openingPromise = null;
 
-    this.Blok.Toolbar.close();
+    this.Blok.Toolbar.hideBlockActions();
   }
 
   /**
@@ -266,10 +266,10 @@ export class InlineToolbar extends Module<InlineToolbarNodes> {
    */
   private make(): void {
     this.nodes.wrapper = $.make('div', twMerge(
-      'absolute top-0 left-0 z-[3] opacity-100 visible',
-      'transition-opacity duration-[250ms] ease-out',
+      'absolute top-0 left-0 z-3 opacity-100 visible',
+      'transition-opacity duration-250 ease-out',
       'will-change-[opacity,left,top]',
-      '[&_[hidden]]:!hidden'
+      '**:[[hidden]]:hidden!'
     ));
     this.nodes.wrapper.setAttribute(DATA_ATTR.interface, INLINE_TOOLBAR_INTERFACE_VALUE);
     this.nodes.wrapper.setAttribute('data-blok-testid', 'inline-toolbar');

package/src/components/modules/toolbar/plus-button.ts

@@ -99,14 +99,14 @@ export class PlusButtonHandler {
         // Keep hover background when toolbox is open
         'group-data-[blok-toolbox-opened=true]:bg-bg-light',
         // Mobile styles (static positioning with overlay-pane appearance)
-        'mobile:bg-white mobile:border mobile:border-[#e8e8eb] mobile:shadow-overlay-pane mobile:rounded-[6px] mobile:z-[2]',
+        'mobile:bg-white mobile:border mobile:border-[#e8e8eb] mobile:shadow-overlay-pane mobile:rounded-[6px] mobile:z-2',
         'mobile:w-toolbox-btn-mobile mobile:h-toolbox-btn-mobile',
         // RTL styles
-        'group-data-[blok-rtl=true]:right-[calc(-1*theme(width.toolbox-btn))] group-data-[blok-rtl=true]:left-auto',
+        'group-data-[blok-rtl=true]:right-[calc(-1*(var(--spacing-toolbox-btn)))] group-data-[blok-rtl=true]:left-auto',
         // Narrow mode (not-mobile)
         'not-mobile:group-data-[blok-narrow=true]:left-[5px]',
         // Narrow mode RTL (not-mobile)
-        'not-mobile:group-data-[blok-narrow=true]:group-data-[blok-rtl=true]:left-0 not-mobile:group-data-[blok-narrow=true]:group-data-[blok-rtl=true]:right-[5px]'
+        'not-mobile:group-data-[blok-rtl=true]:group-data-[blok-narrow=true]:left-0 not-mobile:group-data-[blok-rtl=true]:group-data-[blok-narrow=true]:right-[5px]'
       ),
     ], {
       innerHTML: IconPlus,

package/src/components/modules/toolbar/settings-toggler.ts

@@ -121,12 +121,12 @@ export class SettingsTogglerHandler {
         // Hover (can-hover)
         'can-hover:hover:bg-bg-light can-hover:hover:cursor-grab',
         // When toolbox is opened, use pointer cursor on hover
-        'group-data-[blok-toolbox-opened=true]:can-hover:hover:cursor-pointer',
+        'can-hover:hover:group-data-[blok-toolbox-opened=true]:cursor-pointer',
         // When block settings is opened, show hover background and pointer cursor
         'group-data-[blok-block-settings-opened=true]:bg-bg-light',
-        'group-data-[blok-block-settings-opened=true]:can-hover:hover:cursor-pointer',
+        'can-hover:hover:group-data-[blok-block-settings-opened=true]:cursor-pointer',
         // Mobile styles (static positioning with overlay-pane appearance)
-        'mobile:bg-white mobile:border mobile:border-[#e8e8eb] mobile:shadow-overlay-pane mobile:rounded-[6px] mobile:z-[2]',
+        'mobile:bg-white mobile:border mobile:border-[#e8e8eb] mobile:shadow-overlay-pane mobile:rounded-[6px] mobile:z-2',
         'mobile:w-toolbox-btn-mobile mobile:h-toolbox-btn-mobile'
       ),
       'group-data-[blok-dragging=true]:cursor-grabbing',

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

@@ -24,7 +24,7 @@ export const getToolbarStyles = (): { [name: string]: string } => {
       // Mobile styles
       'mobile:right-auto',
       // RTL styles
-      'group-data-[blok-rtl=true]:right-auto group-data-[blok-rtl=true]:left-[calc(-1*theme(width.toolbox-btn))]',
+      'group-data-[blok-rtl=true]:right-auto group-data-[blok-rtl=true]:left-[calc(-1*(var(--spacing-toolbox-btn)))]',
       'mobile:group-data-[blok-rtl=true]:ml-0 mobile:group-data-[blok-rtl=true]:mr-auto mobile:group-data-[blok-rtl=true]:pr-0 mobile:group-data-[blok-rtl=true]:pl-[10px]'
     ),
     actionsOpened: 'opacity-100',
@@ -40,14 +40,14 @@ export const getToolbarStyles = (): { [name: string]: string } => {
       // Keep hover background when toolbox is opened
       'group-data-[blok-toolbox-opened=true]:bg-bg-light',
       // Mobile styles (static positioning with overlay-pane appearance)
-      'mobile:bg-white mobile:border mobile:border-[#e8e8eb] mobile:shadow-overlay-pane mobile:rounded-[6px] mobile:z-[2]',
+      'mobile:bg-white mobile:border mobile:border-[#e8e8eb] mobile:shadow-overlay-pane mobile:rounded-[6px] mobile:z-2',
       'mobile:w-toolbox-btn-mobile mobile:h-toolbox-btn-mobile',
       // RTL styles
-      'group-data-[blok-rtl=true]:right-[calc(-1*theme(width.toolbox-btn))] group-data-[blok-rtl=true]:left-auto',
+      'group-data-[blok-rtl=true]:right-[calc(-1*(var(--spacing-toolbox-btn)))] group-data-[blok-rtl=true]:left-auto',
       // Narrow mode (not-mobile)
       'not-mobile:group-data-[blok-narrow=true]:left-[5px]',
       // Narrow mode RTL (not-mobile)
-      'not-mobile:group-data-[blok-narrow=true]:group-data-[blok-rtl=true]:left-0 not-mobile:group-data-[blok-narrow=true]:group-data-[blok-rtl=true]:right-[5px]'
+      'not-mobile:group-data-[blok-rtl=true]:group-data-[blok-narrow=true]:left-0 not-mobile:group-data-[blok-rtl=true]:group-data-[blok-narrow=true]:right-[5px]'
     ),
     plusButtonShortcutKey: 'text-white',
     /**
@@ -64,12 +64,12 @@ export const getToolbarStyles = (): { [name: string]: string } => {
       // Hover (can-hover)
       'can-hover:hover:bg-bg-light can-hover:hover:cursor-grab',
       // When toolbox is opened, use pointer cursor on hover
-      'group-data-[blok-toolbox-opened=true]:can-hover:hover:cursor-pointer',
+      'can-hover:hover:group-data-[blok-toolbox-opened=true]:cursor-pointer',
       // When block settings is opened, show hover background and pointer cursor
       'group-data-[blok-block-settings-opened=true]:bg-bg-light',
-      'group-data-[blok-block-settings-opened=true]:can-hover:hover:cursor-pointer',
+      'can-hover:hover:group-data-[blok-block-settings-opened=true]:cursor-pointer',
       // Mobile styles (static positioning with overlay-pane appearance)
-      'mobile:bg-white mobile:border mobile:border-[#e8e8eb] mobile:shadow-overlay-pane mobile:rounded-[6px] mobile:z-[2]',
+      'mobile:bg-white mobile:border mobile:border-[#e8e8eb] mobile:shadow-overlay-pane mobile:rounded-[6px] mobile:z-2',
       'mobile:w-toolbox-btn-mobile mobile:h-toolbox-btn-mobile',
       // Not-mobile styles
       'not-mobile:w-6'

package/src/components/modules/ui.ts

@@ -414,15 +414,15 @@ export class UI extends Module<UINodes> {
       'group',
       'relative',
       'box-border',
-      'z-[1]',
-      '[&[data-blok-dragging=true]]:cursor-grabbing',
+      'z-1',
+      'data-[blok-dragging=true]:cursor-grabbing',
       // SVG defaults
       '[&_svg]:max-h-full',
       '[&_path]:stroke-current',
       // Native selection color
       '[&_::selection]:bg-selection-inline',
       // Hide placeholder when toolbox is opened
-      '[&[data-blok-toolbox-opened=true]_[contentEditable=true][data-blok-placeholder]:focus]:before:!opacity-0',
+      '[&[data-blok-toolbox-opened=true]_[contentEditable=true][data-blok-placeholder]:focus]:before:opacity-0!',
       ...(this.isRtl ? [ '[direction:rtl]' ] : []),
     ]);
     this.nodes.wrapper.setAttribute(DATA_ATTR.interface, BLOK_INTERFACE_VALUE);
@@ -433,10 +433,10 @@ export class UI extends Module<UINodes> {
     }
     this.nodes.redactor = $.make('div', [
       // Narrow mode: add right margin on non-mobile screens
-      'not-mobile:group-data-[blok-narrow=true]:mr-[theme(spacing.narrow-mode-right-padding)]',
+      'not-mobile:group-data-[blok-narrow=true]:mr-(--spacing-narrow-mode-right-padding)',
       // RTL narrow mode: add left margin instead
-      'not-mobile:group-data-[blok-narrow=true]:group-data-[blok-rtl=true]:ml-[theme(spacing.narrow-mode-right-padding)]',
-      'not-mobile:group-data-[blok-narrow=true]:group-data-[blok-rtl=true]:mr-0',
+      'not-mobile:group-data-[blok-rtl=true]:group-data-[blok-narrow=true]:ml-(--spacing-narrow-mode-right-padding)',
+      'not-mobile:group-data-[blok-rtl=true]:group-data-[blok-narrow=true]:mr-0',
       // Firefox empty contenteditable fix
       '[&_[contenteditable]:empty]:after:content-["\\feff_"]',
     ]);

package/src/components/modules/uiControllers/controllers/blockHover.ts

@@ -157,13 +157,27 @@ export class BlockHoverController extends Controller {
       return null;
     }
 
-    const result = blocks.reduce<{ block: Block; distance: number }>((nearest, block) => {
+    /**
+     * Filter out blocks whose holders are inside a table cell container.
+     * Cell blocks should not participate in nearest-block detection —
+     * the parent table block should be found instead.
+     * This matches the direct-hit path which also resolves cell blocks to their parent table block.
+     */
+    const topLevelBlocks = blocks.filter(block =>
+      block.holder.closest('[data-blok-table-cell-blocks]') === null
+    );
+
+    if (topLevelBlocks.length === 0) {
+      return null;
+    }
+
+    const result = topLevelBlocks.reduce<{ block: Block; distance: number }>((nearest, block) => {
       const rect = block.holder.getBoundingClientRect();
       const centerY = (rect.top + rect.bottom) / 2;
       const distance = Math.abs(clientY - centerY);
 
       return distance < nearest.distance ? { block, distance } : nearest;
-    }, { block: blocks[0], distance: Infinity });
+    }, { block: topLevelBlocks[0], distance: Infinity });
 
     return result.block;
   }

package/src/components/modules/uiControllers/handlers/touch.ts

@@ -35,15 +35,34 @@ export const createRedactorTouchHandler = (
     /**
      * Select clicked Block as Current
      */
-    try {
-      deps.Blok.BlockManager.setCurrentBlockByChildNode(clickedNode);
-    } catch (_e) {
-      /**
-       * If clicked outside first-level Blocks and it is not RectSelection, set Caret to the last empty Block
-       */
-      if (!deps.Blok.RectangleSelection.isRectActivated()) {
-        deps.Blok.Caret.setToTheLastBlock();
-      }
+    const block = deps.Blok.BlockManager.setCurrentBlockByChildNode(clickedNode);
+
+    /**
+     * If clicked outside first-level Blocks and it is not RectSelection, set Caret to the last empty Block
+     */
+    if (!block && !deps.Blok.RectangleSelection.isRectActivated()) {
+      deps.Blok.Caret.setToTheLastBlock();
+    }
+
+    /**
+     * If the click landed below the last block's content area (in the holder padding zone),
+     * create/focus a new paragraph instead of keeping the block selected.
+     */
+    const isBelowLastBlock = block !== undefined
+      && block === deps.Blok.BlockManager.lastBlock
+      && isClickBelowLastBlockContent(block.holder, event);
+
+    if (isBelowLastBlock && !deps.Blok.ReadOnly.isEnabled) {
+      deps.Blok.Caret.setToTheLastBlock();
+      deps.Blok.Toolbar.moveAndOpen(deps.Blok.BlockManager.lastBlock);
+
+      return;
+    }
+
+    if (isBelowLastBlock) {
+      deps.Blok.Caret.setToTheLastBlock();
+
+      return;
     }
 
     /**
@@ -51,7 +70,19 @@ export const createRedactorTouchHandler = (
      * (used for showing Block Settings toggler after opening and closing Inline Toolbar)
      */
     if (!deps.Blok.ReadOnly.isEnabled && !deps.Blok.Toolbar.contains(initialTarget)) {
-      deps.Blok.Toolbar.moveAndOpen(undefined, clickedNode);
+      /**
+       * When the clicked node is inside a table cell, resolve to the parent table block
+       * so moveAndOpen receives the table block (not undefined / the inner cell paragraph).
+       * Without this, moveAndOpen falls back to currentBlock (the cell paragraph), detects
+       * it's inside a table cell, and hides the plus button and settings toggler.
+       */
+      const tableCellContainer = clickedNode.closest?.('[data-blok-table-cell-blocks]');
+      const tableBlockWrapper = tableCellContainer?.closest('[data-blok-testid="block-wrapper"]');
+      const resolvedBlock = tableBlockWrapper
+        ? deps.Blok.BlockManager.getBlockByChildNode(tableBlockWrapper)
+        : undefined;
+
+      deps.Blok.Toolbar.moveAndOpen(resolvedBlock, clickedNode);
     }
   };
 }
@@ -93,3 +124,45 @@ export const getClickedNode = (
 
   return initialTarget;
 }
+
+/**
+ * Extracts the clientY coordinate from a mouse or touch event
+ *
+ * @param event - The event to extract clientY from
+ * @returns The clientY value, or null if not available
+ */
+const getClientY = (event: Event): number | null => {
+  if (event instanceof MouseEvent) {
+    return event.clientY;
+  }
+
+  if (event instanceof TouchEvent && event.touches.length > 0) {
+    return event.touches[0].clientY;
+  }
+
+  return null;
+}
+
+/**
+ * Checks whether a click event landed below a block's content area.
+ * Used to detect clicks in the holder padding zone below the last block.
+ *
+ * @param blockHolder - The block's holder element
+ * @param event - The mouse or touch event
+ * @returns True if the click was below the block content's bottom edge
+ */
+const isClickBelowLastBlockContent = (
+  blockHolder: HTMLElement,
+  event: Event
+): boolean => {
+  const clientY = getClientY(event);
+
+  if (clientY === null) {
+    return false;
+  }
+
+  const contentEl = blockHolder.querySelector('[data-blok-element-content]');
+  const contentRect = contentEl?.getBoundingClientRect();
+
+  return contentRect !== undefined && clientY > contentRect.bottom;
+};

package/src/components/modules/yjs/block-observer.ts

@@ -169,9 +169,15 @@ export class BlockObserver {
       this.emitChange({ type: 'move', blockId, origin });
     }
 
-    // Emit pure adds
-    for (const blockId of pureAdds) {
-      this.emitChange({ type: 'add', blockId, origin });
+    // Emit pure adds — batch when there are multiple so that parent and
+    // child blocks can be registered in BlockManager before any lifecycle
+    // hooks (like Table.rendered → initializeCells) fire.
+    if (pureAdds.length === 1) {
+      this.emitChange({ type: 'add', blockId: pureAdds[0], origin });
+    }
+
+    if (pureAdds.length > 1) {
+      this.emitChange({ type: 'batch-add', blockIds: pureAdds, origin });
     }
 
     // Emit pure removes

package/src/components/modules/yjs/document-store.ts

@@ -2,6 +2,7 @@ import * as Y from 'yjs';
 
 import type { YBlockSerializer, YjsOutputBlockData } from './serializer';
 import type { TransactionOrigin } from './types';
+import { equals } from '../../utils/object';
 
 // Re-export YjsOutputBlockData as DocumentStoreBlockData for consistency
 type DocumentStoreBlockData = YjsOutputBlockData;
@@ -67,7 +68,7 @@ export class DocumentStore {
     const yblock = this.serializer.outputDataToYBlock(blockData);
 
     this.transact(() => {
-      const insertIndex = index ?? this.yblocks.length;
+      const insertIndex = Math.max(0, Math.min(index ?? this.yblocks.length, this.yblocks.length));
       this.yblocks.insert(insertIndex, [yblock]);
     }, 'local');
 
@@ -121,10 +122,11 @@ export class DocumentStore {
 
       this.yblocks.delete(fromIndex, 1);
 
-      // toIndex is the final position. Since we just deleted from fromIndex,
-      // the array is now shorter. The insertion index equals toIndex because
-      // Y.Array.insert(n, [item]) places item at index n, shifting others right.
-      this.yblocks.insert(toIndex, [this.serializer.outputDataToYBlock(blockData)]);
+      // Clamp toIndex to valid range after deletion shortened the array.
+      // An out-of-bounds toIndex means the caller had stale state — clamp
+      // to array bounds rather than letting Yjs throw "Length exceeded!".
+      const clampedToIndex = Math.max(0, Math.min(toIndex, this.yblocks.length));
+      this.yblocks.insert(clampedToIndex, [this.serializer.outputDataToYBlock(blockData)]);
     }, transactionOrigin);
   }
 
@@ -161,8 +163,9 @@ export class DocumentStore {
 
     // Skip if value hasn't changed - this prevents creating unnecessary undo entries
     // when block data is synced after mutations that don't actually change data
-    // (e.g., marker updates in list items during undo/redo)
-    if (currentValue === value) {
+    // (e.g., marker updates in list items during undo/redo, or table content
+    // arrays that are reference-different but structurally identical)
+    if (equals(currentValue, value)) {
       return;
     }
 

package/src/components/modules/yjs/types.ts

@@ -1,11 +1,13 @@
 /**
- * Event emitted when blocks change
+ * Event emitted when blocks change.
+ *
+ * Most events carry a single `blockId`. The `batch-add` type carries
+ * multiple IDs so that parent and child blocks can be created together
+ * before any lifecycle hooks fire.
  */
-export interface BlockChangeEvent {
-  type: 'add' | 'remove' | 'update' | 'move';
-  blockId: string;
-  origin: TransactionOrigin;
-}
+export type BlockChangeEvent =
+  | { type: 'add' | 'remove' | 'update' | 'move'; blockId: string; origin: TransactionOrigin }
+  | { type: 'batch-add'; blockIds: string[]; origin: TransactionOrigin };
 
 /**
  * Transaction origin types.