@jackuait/blok 0.10.2 → 0.10.4

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

@@ -118,6 +118,22 @@ export class Toolbar extends Module<ToolbarNodes> {
    */
   private settingsTogglerHandler: SettingsTogglerHandler;
 
+  /**
+   * The block that had focus immediately before the plus button opened the toolbox.
+   * Captured via the onFocusBlockCaptured callback in PlusButtonHandler.handleClick(),
+   * before any block manipulation occurs.
+   * Used to restore focus if the user dismisses the toolbox without selecting a tool.
+   * Cleared when a tool is selected (ToolboxEvent.BlockAdded) or when focus is restored.
+   */
+  private preToolboxBlock: Block | null = null;
+
+  /**
+   * A newly-inserted empty block created by the plus button click (not a reused block).
+   * If the user dismisses the toolbox without selecting a tool, this block is removed.
+   * Cleared when a tool is selected or when the block is removed on cancel.
+   */
+  private plusInsertedBlock: Block | null = null;
+
   /**
    * @class
    * @param moduleConfiguration - Module Configuration
@@ -143,6 +159,10 @@ export class Toolbar extends Module<ToolbarNodes> {
         openToolboxWithoutSlash: () => this.toolbox.openWithoutSlash(),
         closeToolbox: () => this.toolbox.close(),
         moveAndOpenToolbar: (block, target) => this.moveAndOpen(block, target),
+        onFocusBlockCaptured: (block, insertedBlock) => {
+          this.preToolboxBlock = block;
+          this.plusInsertedBlock = insertedBlock;
+        },
       }
     );
 
@@ -537,14 +557,22 @@ export class Toolbar extends Module<ToolbarNodes> {
      * Uses Math.max to guarantee the actions container (positioned via right:100%)
      * never extends beyond the left edge of the viewport, which would make the
      * drag handle unreachable by pointer events.
+     *
+     * For nested blocks (e.g. children inside a callout), the holder is already
+     * offset from the viewport left by the parent's indentation. In that case we
+     * only need to ensure the actions don't extend beyond the viewport left edge
+     * (holderLeft px are available to the left), so the minimum margin is
+     * max(0, actionsWidth - holderLeft) rather than a flat actionsWidth clamp.
      */
     if (blockContentElement && this.nodes.content) {
       const holderRect = this.nodes.wrapper?.getBoundingClientRect();
       const contentRect = blockContentElement.getBoundingClientRect();
       const visualOffset = holderRect ? Math.max(0, contentRect.left - holderRect.left) : 0;
       const actionsWidth = this.nodes.actions?.offsetWidth ?? 0;
+      const holderLeft = holderRect ? Math.max(0, holderRect.left) : 0;
+      const minMarginLeft = Math.max(0, actionsWidth - holderLeft);
 
-      this.nodes.content.style.marginLeft = `${Math.max(visualOffset, actionsWidth)}px`;
+      this.nodes.content.style.marginLeft = `${Math.max(visualOffset, minMarginLeft)}px`;
       this.nodes.content.style.maxWidth = `${contentRect.width}px`;
     }
   }
@@ -668,15 +696,19 @@ export class Toolbar extends Module<ToolbarNodes> {
     /**
      * Sync toolbar content wrapper's position and width with the block content element.
      * Uses getBoundingClientRect so wide-mode content (max-width: none) is handled correctly.
-     * Clamp to actionsWidth so actions never extend beyond the left viewport edge.
+     * Clamp to max(0, actionsWidth - holderLeft) so actions never extend beyond the left
+     * viewport edge. For nested blocks already offset from the left, a smaller clamp is
+     * used so buttons are not pushed into the text content.
      */
     if (blockContentElement && this.nodes.content) {
       const holderRect = this.nodes.wrapper?.getBoundingClientRect();
       const contentRect = blockContentElement.getBoundingClientRect();
       const visualOffset = holderRect ? Math.max(0, contentRect.left - holderRect.left) : 0;
       const actionsWidth = this.nodes.actions?.offsetWidth ?? 0;
+      const holderLeft = holderRect ? Math.max(0, holderRect.left) : 0;
+      const minMarginLeft = Math.max(0, actionsWidth - holderLeft);
 
-      this.nodes.content.style.marginLeft = `${Math.max(visualOffset, actionsWidth)}px`;
+      this.nodes.content.style.marginLeft = `${Math.max(visualOffset, minMarginLeft)}px`;
       this.nodes.content.style.maxWidth = `${contentRect.width}px`;
     }
   }
@@ -1089,9 +1121,63 @@ export class Toolbar extends Module<ToolbarNodes> {
       // eslint-disable-next-line @typescript-eslint/no-deprecated
       this.Blok.UI.nodes.wrapper.classList.remove(this.CSS.openedToolboxHolderModifier);
       this.Blok.UI.nodes.wrapper.removeAttribute(DATA_ATTR.toolboxOpened);
+
+      /**
+       * If the toolbox was opened via the plus button and the user dismissed
+       * it without selecting a tool (Escape / click outside), restore focus to
+       * the block that was focused BEFORE the plus button was clicked and
+       * remove the orphan empty block that was inserted.
+       *
+       * When a tool IS selected, ToolboxEvent.BlockAdded fires first and clears
+       * preToolboxBlock, so this branch is skipped for that case.
+       */
+      if (this.preToolboxBlock !== null) {
+        const blockToRestore = this.preToolboxBlock;
+
+        this.preToolboxBlock = null;
+
+        // Remove the orphan block that was inserted by the plus button click,
+        // then restore focus. removeBlock() is Promise-based but resolves
+        // synchronously; chaining ensures setToBlock runs after removal.
+        if (this.plusInsertedBlock !== null) {
+          const orphan = this.plusInsertedBlock;
+
+          this.plusInsertedBlock = null;
+          void this.Blok.BlockManager.removeBlock(orphan, false).then(() => {
+            if (blockToRestore.inputs.length > 0) {
+              this.Blok.Caret.setToBlock(blockToRestore, this.Blok.Caret.positions.END);
+            }
+          });
+        } else if (blockToRestore.inputs.length > 0) {
+          // Reused an existing block (emptyBlockToReuse path) — just restore focus
+          this.Blok.Caret.setToBlock(blockToRestore, this.Blok.Caret.positions.END);
+        }
+
+        return;
+      }
+
+      /**
+       * Restore focus to the current block when the toolbox closes via any
+       * non-plus-button path (e.g. slash-search dismissed via Escape).
+       * Without this, focus falls to document.body after non-keyboard close
+       * paths, causing subsequent keystrokes to be lost.
+       */
+      const currentBlock = this.Blok.BlockManager.currentBlock;
+
+      if (currentBlock && currentBlock.inputs.length > 0) {
+        this.Blok.Caret.setToBlock(currentBlock, this.Blok.Caret.positions.END);
+      }
     });
 
     this.toolboxInstance.on(ToolboxEvent.BlockAdded, ({ block }) => {
+      /**
+       * A tool was selected and a block was added — clear the cancel context so
+       * ToolboxEvent.Closed (which fires after this) does not try to undo the
+       * insertion and restore focus to the pre-plus block.
+       */
+      this.preToolboxBlock = null;
+      this.plusInsertedBlock = null;
+
       const { BlockManager, Caret } = this.Blok;
       const newBlock = BlockManager.getBlockById(block.id);
 
@@ -1142,6 +1228,12 @@ export class Toolbar extends Module<ToolbarNodes> {
 
     if (plusButton) {
       this.readOnlyMutableListeners.on(plusButton, 'mousedown', (e) => {
+        /**
+         * Prevent focus from moving away from the currently-active contenteditable block.
+         * Without this, clicking the plus button steals DOM focus, causing subsequent
+         * keystrokes to land in the wrong block (text-jumping bug).
+         */
+        (e as MouseEvent).preventDefault();
         hide();
 
         this.clickDragHandler.setup(

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

@@ -330,11 +330,8 @@ export class InlineToolbar extends Module<InlineToolbarNodes> {
     const popoverItems = await this.buildPopoverItems();
 
     // Create popover
-    const scopeElement = this.Blok.API?.methods?.ui?.nodes?.redactor ?? this.Blok.UI.nodes.redactor;
-
     this.popover = new PopoverInline({
       items: popoverItems,
-      scopeElement,
       messages: {
         nothingFound: this.Blok.I18n.t('popover.nothingFound'),
         search: this.Blok.I18n.t('popover.search'),

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

@@ -46,6 +46,13 @@ export class PlusButtonHandler {
    */
   private moveAndOpenToolbar: (block?: Block | null, target?: Element | null) => void;
 
+  /**
+   * Optional callback invoked at the very start of handleClick(), before any
+   * block manipulation, with the block that currently has focus.
+   * Used by Toolbar to capture the pre-toolbox block for focus restoration on cancel.
+   */
+  private onFocusBlockCaptured: ((block: Block | null, insertedBlock: Block | null) => void) | undefined;
+
   /**
    * @param getBlok - Function to get Blok modules reference
    * @param callbacks - Object containing callback functions
@@ -58,6 +65,7 @@ export class PlusButtonHandler {
       openToolboxWithoutSlash: () => void;
       closeToolbox: () => void;
       moveAndOpenToolbar: (block?: Block | null, target?: Element | null) => void;
+      onFocusBlockCaptured?: (block: Block | null, insertedBlock: Block | null) => void;
     }
   ) {
     this.getBlok = getBlok;
@@ -66,6 +74,7 @@ export class PlusButtonHandler {
     this.openToolboxWithoutSlash = callbacks.openToolboxWithoutSlash;
     this.closeToolbox = callbacks.closeToolbox;
     this.moveAndOpenToolbar = callbacks.moveAndOpenToolbar;
+    this.onFocusBlockCaptured = callbacks.onFocusBlockCaptured;
   }
 
   /**
@@ -175,6 +184,23 @@ export class PlusButtonHandler {
     // If hoveredBlock is not empty (e.g. a table), check if the focused block
     // is empty and nested inside it (e.g. an empty paragraph in a table cell).
     const currentBlock = BlockManager.currentBlock ?? null;
+
+    /**
+     * Capture the block that CURRENTLY HAS DOM FOCUS before any manipulation,
+     * so that focus can be restored to it if the user cancels (Escape) without
+     * selecting a tool.
+     *
+     * We cannot rely on BlockManager.currentBlock here: the mousedown event on
+     * the plus button (which lives inside the hovered block's DOM) triggers the
+     * redactorTouchHandler in capture phase, which calls setCurrentBlockByChildNode
+     * and overwrites currentBlock to the hovered block BEFORE our preventDefault
+     * or handleClick() runs.  Instead we look at the actual DOM-focused element
+     * and find which block owns it.
+     */
+    const activeEl = document.activeElement;
+    const focusedBlockBeforeOpen = activeEl !== null && activeEl !== document.body
+      ? (BlockManager.getBlockByChildNode(activeEl) ?? null)
+      : null;
     const hoveredIsEmpty = hoveredBlock !== null && hoveredBlock.isEmpty;
     const nestedCurrentBlockIsEmpty = !hoveredIsEmpty && currentBlock !== null
       && currentBlock !== hoveredBlock && currentBlock.isEmpty
@@ -215,6 +241,17 @@ export class PlusButtonHandler {
       hoveredBlock?.holder.after(targetBlock.holder);
     }
 
+    /**
+     * Notify Toolbar of the pre-open focus context.
+     * insertedBlock is non-null only when we created a brand-new empty block
+     * (not when we're reusing an existing empty block or operating in slash mode).
+     * On cancel (Escape), Toolbar will remove the inserted block and restore focus
+     * to focusedBlockBeforeOpen.
+     */
+    const insertedBlock = (!startsWithSlash && emptyBlockToReuse === null) ? targetBlock : null;
+
+    this.onFocusBlockCaptured?.(focusedBlockBeforeOpen, insertedBlock);
+
     // Position caret and open toolbox
     if (startsWithSlash) {
       // Block already has "/" - keep slash-search mode, position after the slash

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

@@ -179,6 +179,12 @@ export class SettingsTogglerHandler {
    */
   public createMousedownHandler(): (e: Event) => void {
     return (e: Event) => {
+      /**
+       * Prevent focus from moving away from the currently-active contenteditable block.
+       * Without this, clicking the settings toggler steals DOM focus, causing subsequent
+       * keystrokes to land in the wrong block (text-jumping bug).
+       */
+      (e as MouseEvent).preventDefault();
       hide();
 
       this.clickDragHandler.setup(

package/src/components/modules/tools.ts

@@ -1,6 +1,7 @@
 import type { SanitizerConfig, ToolConfig, ToolConstructable, ToolSettings } from '../../../types';
 import { Stub } from '../../tools/stub';
 import { Module } from '../__module';
+import { CopyLinkTune } from '../block-tunes/block-tune-copy-link';
 import { DeleteTune } from '../block-tunes/block-tune-delete';
 import { CriticalError } from '../errors/critical';
 import { ConvertInlineTool } from '../inline-tools/inline-tool-convert';
@@ -272,6 +273,10 @@ export class Tools extends Module {
         class: toToolConstructable(DeleteTune),
         isInternal: true,
       },
+      copyLink: {
+        class: toToolConstructable(CopyLinkTune),
+        isInternal: true,
+      },
       convertTo: {
         class: toToolConstructable(ConvertInlineTool),
         isInternal: true,

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

@@ -29,6 +29,48 @@ export class KeyboardController extends Controller {
    */
   private redactorElement: HTMLElement | null = null;
 
+  /**
+   * Stable handler references for deduplication via Listeners.findOne.
+   * Storing as class properties ensures the same function reference is passed
+   * to addEventListener on every enable() call, so the Listeners utility can
+   * detect and skip duplicate registrations (e.g. when toggleReadOnly calls
+   * enable() more than once via requestIdleCallback).
+   */
+  private readonly documentKeydownHandler = (event: Event): void => {
+    if (event instanceof KeyboardEvent) {
+      this.handleKeydown(event);
+    }
+  };
+
+  private readonly redactorBeforeinputHandler = (): void => {
+    this.Blok.YjsManager.markCaretBeforeChange();
+  };
+
+  private readonly redactorKeydownHandler = (event: Event): void => {
+    if (!(event instanceof KeyboardEvent)) {
+      return;
+    }
+
+    const target = event.target;
+
+    if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
+      return;
+    }
+
+    // Skip events from nested editors
+    if (target instanceof Element) {
+      const closestEditor = target.closest('[data-blok-testid="blok-editor"]');
+
+      if (closestEditor !== null && closestEditor !== this.Blok.UI.nodes.wrapper) {
+        return;
+      }
+    }
+
+    if (KEYS_REQUIRING_CARET_CAPTURE.has(event.key)) {
+      this.Blok.YjsManager.markCaretBeforeChange();
+    }
+  };
+
   constructor(options: {
     config: Controller['config'];
     eventsDispatcher: Controller['eventsDispatcher'];
@@ -54,34 +96,20 @@ export class KeyboardController extends Controller {
     }
 
     // Document-level keydown handler
-    this.readOnlyMutableListeners.on(document, 'keydown', (event: Event) => {
-      if (event instanceof KeyboardEvent) {
-        this.handleKeydown(event);
-      }
-    }, true);
+    this.readOnlyMutableListeners.on(document, 'keydown', this.documentKeydownHandler, true);
 
     /**
      * Capture caret position before any input changes the DOM.
      * This ensures undo/redo restores the caret to the correct position.
      */
-    this.readOnlyMutableListeners.on(this.redactorElement, 'beforeinput', () => {
-      this.Blok.YjsManager.markCaretBeforeChange();
-    }, true);
+    this.readOnlyMutableListeners.on(this.redactorElement, 'beforeinput', this.redactorBeforeinputHandler, true);
 
     /**
      * Capture caret position on keydown for keys that tools commonly intercept.
      * Uses capture phase to run before tool handlers.
      * markCaretBeforeChange() is idempotent - if beforeinput also fires, the second call is ignored.
      */
-    this.readOnlyMutableListeners.on(this.redactorElement, 'keydown', (event: Event) => {
-      if (!(event instanceof KeyboardEvent)) {
-        return;
-      }
-
-      if (KEYS_REQUIRING_CARET_CAPTURE.has(event.key)) {
-        this.Blok.YjsManager.markCaretBeforeChange();
-      }
-    }, true);
+    this.readOnlyMutableListeners.on(this.redactorElement, 'keydown', this.redactorKeydownHandler, true);
   }
 
   /**
@@ -89,6 +117,20 @@ export class KeyboardController extends Controller {
    * @param event - keyboard event
    */
   private handleKeydown(event: KeyboardEvent): void {
+    const target = event.target;
+
+    if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
+      return;
+    }
+
+    if (target instanceof Element) {
+      const closestEditor = target.closest('[data-blok-testid="blok-editor"]');
+
+      if (closestEditor !== null && closestEditor !== this.Blok.UI.nodes.wrapper) {
+        return;
+      }
+    }
+
     const key = event.key ?? '';
 
     switch (key) {
@@ -260,12 +302,18 @@ export class KeyboardController extends Controller {
 
     /**
      * Toolbox needs specific Escape handling for caret restoration,
-     * so check it before the registry
+     * so check it before the registry.
+     *
+     * stopPropagation() is required here: this handler runs in the capture phase
+     * on document, BEFORE the block-level keydown handler.  If we let the event
+     * continue bubbling after closing the toolbox, the block's keydown handler
+     * (navigationMode.handleEscape) will see `toolbox.opened === false` and
+     * incorrectly enable navigation mode, which calls `activeElement.blur()`
+     * and drops focus to body.
      */
     if (this.Blok.Toolbar.toolbox.opened) {
+      event.stopPropagation();
       this.Blok.Toolbar.toolbox.close();
-      this.Blok.BlockManager.currentBlock &&
-        this.Blok.Caret.setToBlock(this.Blok.BlockManager.currentBlock, this.Blok.Caret.positions.END);
 
       return;
     }
@@ -313,15 +361,30 @@ export class KeyboardController extends Controller {
 
     /**
      * If focus is inside editor content and no toolbars are open,
-     * enable navigation mode for keyboard-based block navigation
+     * enable navigation mode for keyboard-based block navigation.
+     *
+     * Skip navigation mode when a drag operation is in progress:
+     * the drag's own keydown handler (DragController.onKeyDown) must receive
+     * this Escape event to announce the cancellation and clean up drag state.
+     * Enabling navigation mode here would call blur() on the active element,
+     * then the block holder's bubbling keydown handler would see navigation
+     * mode enabled and call event.stopPropagation(), preventing DragController
+     * from ever receiving the event.
      */
     const target = event.target;
     const isTargetElement = target instanceof HTMLElement;
     const isInsideRedactor = this.redactorElement && isTargetElement && this.redactorElement.contains(target);
     const hasCurrentBlock = this.Blok.BlockManager.currentBlock !== undefined;
 
-    if (isInsideRedactor && hasCurrentBlock) {
+    if (isInsideRedactor && hasCurrentBlock && !this.Blok.DragManager.isDragging) {
       event.preventDefault();
+      /**
+       * Stop propagation so the block holder's bubble keydown handler (blockEvents.keydown)
+       * does not see this same Escape event. Without this, the block-level NavigationMode
+       * composer's handleKey() would receive the event AFTER navigation mode is enabled,
+       * see navigationModeEnabled=true + key='Escape', and immediately disable it.
+       */
+      event.stopPropagation();
       this.Blok.Toolbar.close();
       this.Blok.BlockSelection.enableNavigationMode();
 

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

@@ -167,10 +167,22 @@ export class SelectionController extends Controller {
    * @returns true if current block should be updated
    */
   private shouldUpdateCurrentBlock(): boolean {
+    const focusedElement = Selection.anchorElement;
+
+    if (!focusedElement || !this.wrapperElement) {
+      return false;
+    }
+
     /**
-     * Always update current block when focus moves to a different block.
-     * This handles Tab key navigation, programmatic focus, and accessibility tools.
+     * Skip updating current block when focus is inside a nested editor instance.
+     * The closest editor wrapper must match this instance's wrapper.
      */
+    const closestEditor = focusedElement.closest('[data-blok-testid="blok-editor"]');
+
+    if (closestEditor !== null && closestEditor !== this.wrapperElement) {
+      return false;
+    }
+
     return true;
   }
 }

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

@@ -193,6 +193,28 @@ export class DocumentStore {
     }, 'local');
   }
 
+  /**
+   * Update a block's edit metadata fields directly on the Y.Map.
+   * @param id - Block id
+   * @param lastEditedAt - Timestamp in milliseconds
+   * @param lastEditedBy - User display name, or null
+   */
+  public updateBlockMetadata(id: string, lastEditedAt: number, lastEditedBy: string | null): void {
+    const yblock = this.getBlockById(id);
+
+    if (yblock === undefined) {
+      return;
+    }
+
+    this.transact(() => {
+      yblock.set('lastEditedAt', lastEditedAt);
+
+      if (lastEditedBy !== null) {
+        yblock.set('lastEditedBy', lastEditedBy);
+      }
+    }, 'local');
+  }
+
   /**
    * Find block index by id.
    * @param id - Block id to find

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

@@ -164,6 +164,16 @@ export class YjsManager extends Module {
     this.documentStore.updateBlockTune(id, tuneName, tuneData);
   }
 
+  /**
+   * Update a block's edit metadata.
+   * @param id - Block id
+   * @param lastEditedAt - Timestamp in milliseconds
+   * @param lastEditedBy - User display name, or null
+   */
+  public updateBlockMetadata(id: string, lastEditedAt: number, lastEditedBy: string | null): void {
+    this.documentStore.updateBlockMetadata(id, lastEditedAt, lastEditedBy);
+  }
+
   /**
    * Get block Y.Map by id.
    * @param id - Block id

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

@@ -74,6 +74,14 @@ export class YBlockSerializer {
       yblock.set('contentIds', Y.Array.from(blockData.content));
     }
 
+    if (blockData.lastEditedAt !== undefined) {
+      yblock.set('lastEditedAt', blockData.lastEditedAt);
+    }
+
+    if (blockData.lastEditedBy !== undefined) {
+      yblock.set('lastEditedBy', blockData.lastEditedBy);
+    }
+
     return yblock;
   }
 
@@ -122,6 +130,18 @@ export class YBlockSerializer {
       block.content = contentIds.toArray();
     }
 
+    const lastEditedAt = yblock.get('lastEditedAt');
+
+    if (typeof lastEditedAt === 'number') {
+      block.lastEditedAt = lastEditedAt;
+    }
+
+    const lastEditedBy = yblock.get('lastEditedBy');
+
+    if (typeof lastEditedBy === 'string') {
+      block.lastEditedBy = lastEditedBy;
+    }
+
     return block;
   }
 

package/src/components/selection/cursor.ts

@@ -46,8 +46,18 @@ export class SelectionCursor {
     // Focus contenteditable elements explicitly after setting the selection range.
     // Placed after addRange() so the selection is preserved when focus transfers —
     // calling focus() before addRange() can reset the caret during arrow navigation.
-    if ($.isContentEditable(element) && document.activeElement !== element) {
-      element.focus();
+    //
+    // When `element` is a text node or a non-focusable inline element (e.g. <b>, <span>),
+    // `isContentEditable` will be false. In that case we walk up to the nearest
+    // contenteditable ancestor so that DOM focus is transferred there. Without this,
+    // focus stays on whatever had it before (e.g. the toolbox search input), causing
+    // subsequent keystrokes to land in the wrong place.
+    const focusTarget = $.isContentEditable(element)
+      ? element
+      : (element.parentElement?.closest('[contenteditable="true"]') as HTMLElement | null) ?? null;
+
+    if (focusTarget !== null && document.activeElement !== focusTarget) {
+      focusTarget.focus();
     }
 
     return range.getBoundingClientRect();

package/src/components/ui/toolbox.ts

@@ -341,13 +341,17 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
     this.popover?.show();
 
     /**
-     * When opening toolbox inside a table cell, position it at the caret
-     * instead of at the trigger element (which is outside the table).
+     * When opening toolbox inside a table cell or a nested block (toggle, callout),
+     * position it at the caret instead of at the trigger element (which is outside
+     * the nested container).
      * Must be called after show() so the popover is in the DOM.
      */
-    const triggerHidden = this.triggerElement?.getBoundingClientRect().height === 0;
+    const triggerRect = this.triggerElement?.getBoundingClientRect();
+    const triggerHidden = triggerRect?.height === 0;
+    const triggerOffScreen = triggerRect !== undefined && triggerRect.bottom < 0;
+    const isInsideNestedBlock = currentBlock !== undefined && currentBlock.parentId !== null;
 
-    if ((this.isInsideTableCell || triggerHidden) && this.popover instanceof PopoverDesktop) {
+    if ((this.isInsideTableCell || triggerHidden || triggerOffScreen || isInsideNestedBlock) && this.popover instanceof PopoverDesktop) {
       const caretRect = SelectionUtils.rect;
 
       this.popover.updatePosition(caretRect);
@@ -381,6 +385,18 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
 
     this.stopListeningToBlockInput();
     this.popover?.hide();
+
+    /**
+     * Only emit Closed event when the toolbox was actually open.
+     * This prevents spurious Closed events (and their side-effects such as
+     * caret restoration) when close() is called as routine cleanup (e.g.
+     * during cross-block selection, block deletion, or toolbar dismissal)
+     * even though the toolbox was never shown.
+     */
+    if (!this.opened) {
+      return;
+    }
+
     this.opened = false;
     this.emit(ToolboxEvent.Closed);
   }
@@ -411,7 +427,6 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
     const PopoverClass = isMobileScreen() ? PopoverMobile : PopoverDesktop;
 
     this.popover = new PopoverClass({
-      scopeElement: this.api.ui.nodes.redactor,
       trigger: this.triggerElement || this.nodes.toolbox,
       leftAlignElement: this.leftAlignElement,
       messages: {
@@ -447,6 +462,17 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
    * Handles popover close event
    */
   private onPopoverClose = (): void => {
+    /**
+     * Only handle the Closed event when the toolbox was actually open.
+     * The popover can fire Closed during routine cleanup (e.g. when Toolbar.close()
+     * is called unconditionally as part of CBS, block deletion, etc.), even though
+     * the toolbox was never shown. Emitting ToolboxEvent.Closed in those cases
+     * triggers side-effects (like caret restoration) that break cross-block selection.
+     */
+    if (!this.opened) {
+      return;
+    }
+
     if (this.isInsideTableCell) {
       this.toggleRestrictedToolsHidden(false);
       this.isInsideTableCell = false;

package/src/components/utils/id-generator.ts

@@ -20,6 +20,17 @@ export const generateBlockId = (): string => {
   return nanoid(idLen);
 };
 
+/**
+ * Nanoid-compatible block ID pattern: exactly 10 URL-safe characters (A-Z, a-z, 0-9, _, -)
+ */
+const BLOCK_ID_PATTERN = /^[A-Za-z0-9_-]{10}$/;
+
+/**
+ * Returns true if the given string is a valid block ID (nanoid format).
+ * @param id - string to check
+ */
+export const isValidBlockId = (id: string): boolean => BLOCK_ID_PATTERN.test(id);
+
 /**
  * Returns random generated identifier
  * @param prefix - identifier prefix