@jackuait/blok 0.11.1 → 0.12.1

package/src/components/modules/blockManager/operations.ts

@@ -822,8 +822,21 @@ export class BlockOperations {
        * container `contentIds` arrays. Idempotent when the parent already
        * matches, so DragController's existing post-move setBlockParent call
        * remains a safe no-op.
+       *
+       * Skip inside a Yjs move group (drag path): DragController.handleDropImpl
+       * calls the undo-aware `BlockManager.setBlockParent` after `move()` and
+       * relies on reading the pre-move `parentId` to record the correct
+       * `fromParentId` on the in-flight move entry. Mutating `parentId` here
+       * via `hierarchy.setBlockParent` (which bypasses the undo bookkeeping)
+       * would clobber that baseline and leave undo unable to restore the
+       * original parent. The non-drag callers (keyboard moveUp/Down, public
+       * api) still get the auto-heal — `isInMoveGroup` is only true while
+       * DragController's `transactMoves` wrapper is open.
        */
-      if (movedBlock.parentId !== destinationParentId) {
+      if (
+        movedBlock.parentId !== destinationParentId
+        && !this.dependencies.YjsManager.isInMoveGroup
+      ) {
         this.hierarchy.setBlockParent(movedBlock, destinationParentId);
       }
 

package/src/components/modules/drag/DragController.ts

@@ -486,6 +486,15 @@ export class DragController extends Module {
     if (!this.operations) {
       return;
     }
+
+    // Snapshot pre-move parentIds before moveBlocks mutates them. resolveParentForDrop
+    // must read source parents as they existed at drag start, not after reparenting.
+    const preMoveParentIds = new Map<string, string | null>();
+
+    for (const block of sourceBlocks) {
+      preMoveParentIds.set(block.id, block.parentId);
+    }
+
     const result = this.operations.moveBlocks(sourceBlocks, targetBlock, edge);
 
     // Layer 13: stale-drop abort guard.
@@ -505,7 +514,7 @@ export class DragController extends Module {
     }
 
     // Update parent-child relationships after move
-    const newParentId = this.resolveParentForDrop(targetBlock, edge, sourceBlocks);
+    const newParentId = this.resolveParentForDrop(targetBlock, edge, sourceBlocks, preMoveParentIds);
     const movedBlockIds = new Set(result.movedBlocks.map(b => b.id));
     const reparentedBlocks: Block[] = [];
     const affectedParentIds = new Set<string>();
@@ -572,14 +581,26 @@ export class DragController extends Module {
    * @param sourceBlocks - The blocks being dragged
    * @returns The parentId for the dropped blocks, or null for root level
    */
-  private resolveParentForDrop(targetBlock: Block, edge: 'top' | 'bottom', sourceBlocks: Block[]): string | null {
+  private resolveParentForDrop(
+    targetBlock: Block,
+    edge: 'top' | 'bottom',
+    sourceBlocks: Block[],
+    preMoveParentIds?: Map<string, string | null>
+  ): string | null {
     // If dropping below a toggleable block, the block becomes a child of the toggle.
     // Detect via DOM attribute (covers both toggle list blocks AND toggle headings).
     if (edge === 'bottom' && this.isToggleableBlock(targetBlock) && this.isOpenToggle(targetBlock)) {
       // Don't re-enter the toggle if all source blocks are already its children.
       // This allows a child to escape its own toggle parent by dragging to the bottom edge.
+      // Use pre-move snapshot when available; moveBlocks may have already rewritten parentId.
       const allSourcesAreChildren = sourceBlocks.length > 0 &&
-        sourceBlocks.every(b => b.parentId === targetBlock.id);
+        sourceBlocks.every((b) => {
+          const parentId = preMoveParentIds?.has(b.id) === true
+            ? preMoveParentIds.get(b.id)
+            : b.parentId;
+
+          return parentId === targetBlock.id;
+        });
 
       if (!allSourcesAreChildren) {
         return targetBlock.id;

package/src/components/modules/paste/handlers/files-handler.ts

@@ -49,9 +49,9 @@ export class FilesHandler extends BasePasteHandler implements PasteHandler {
       return false;
     }
 
-    const files = data.files;
+    const files = this.extractFiles(data);
 
-    if (!files || files.length === 0) {
+    if (files.length === 0) {
       return false;
     }
 
@@ -60,6 +60,30 @@ export class FilesHandler extends BasePasteHandler implements PasteHandler {
     return true;
   }
 
+  /**
+   * Extract File objects from DataTransfer. Some platforms leave
+   * `dataTransfer.files` empty but expose files through `dataTransfer.items`
+   * where each entry has kind === 'file'. Fall back to items when needed.
+   */
+  private extractFiles(dataTransfer: DataTransfer): File[] {
+    if (dataTransfer.files && dataTransfer.files.length > 0) {
+      return Array.from(dataTransfer.files);
+    }
+
+    return this.extractFilesFromItems(dataTransfer.items);
+  }
+
+  private extractFilesFromItems(items: DataTransferItemList | null | undefined): File[] {
+    if (!items) {
+      return [];
+    }
+
+    return Array.from(items)
+      .filter((item) => item.kind === 'file')
+      .map((item) => item.getAsFile())
+      .filter((file): file is File => file !== null);
+  }
+
   /**
    * Check if DataTransfer contains file-like entries.
    */
@@ -74,6 +98,10 @@ export class FilesHandler extends BasePasteHandler implements PasteHandler {
       return true;
     }
 
+    if (this.itemsContainFile(dataTransfer.items)) {
+      return true;
+    }
+
     try {
       const legacyList = dataTransfer.types as unknown as DOMStringList;
 
@@ -87,10 +115,18 @@ export class FilesHandler extends BasePasteHandler implements PasteHandler {
     return false;
   }
 
+  private itemsContainFile(items: DataTransferItemList | null | undefined): boolean {
+    if (!items) {
+      return false;
+    }
+
+    return Array.from(items).some((item) => item.kind === 'file');
+  }
+
   /**
    * Get files from data transfer object and insert related Tools.
    */
-  private async processFiles(items: FileList): Promise<void> {
+  private async processFiles(items: FileList | File[]): Promise<void> {
     const { BlockManager } = this.Blok;
 
     const fileProcessingResults = await Promise.all(
@@ -113,7 +149,8 @@ export class FilesHandler extends BasePasteHandler implements PasteHandler {
    * Get information about file and find Tool to handle it.
    */
   private async processFile(file: File): Promise<ProcessedFile | undefined> {
-    const toolName = this.toolRegistry.findToolForFile(file);
+    const preferredToolName = this.Blok.BlockManager.currentBlock?.name;
+    const toolName = this.toolRegistry.findToolForFile(file, preferredToolName);
 
     if (!toolName) {
       return;

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

@@ -261,14 +261,24 @@ export class Paste extends Module {
    * Set onPaste callback handler.
    */
   private setCallback(): void {
-    this.listeners.on(this.Blok.UI.nodes.holder, 'paste', this.handlePasteEventWrapper);
+    const holder = this.Blok.UI.nodes.holder;
+
+    this.listeners.on(holder, 'paste', this.handlePasteEventWrapper);
+    this.listeners.on(holder, 'drop', this.handleDropEventWrapper);
+    this.listeners.on(holder, 'dragover', this.handleDragOverEventWrapper);
+    this.listeners.on(holder, 'dragleave', this.handleDragLeaveEventWrapper);
   }
 
   /**
    * Unset onPaste callback handler.
    */
   private unsetCallback(): void {
-    this.listeners.off(this.Blok.UI.nodes.holder, 'paste', this.handlePasteEventWrapper);
+    const holder = this.Blok.UI.nodes.holder;
+
+    this.listeners.off(holder, 'paste', this.handlePasteEventWrapper);
+    this.listeners.off(holder, 'drop', this.handleDropEventWrapper);
+    this.listeners.off(holder, 'dragover', this.handleDragOverEventWrapper);
+    this.listeners.off(holder, 'dragleave', this.handleDragLeaveEventWrapper);
   }
 
   /**
@@ -278,11 +288,157 @@ export class Paste extends Module {
     void this.handlePasteEvent(event as ClipboardEvent);
   };
 
+  private handleDropEventWrapper = (event: Event): void => {
+    void this.handleDropEvent(event as DragEvent);
+  };
+
+  private handleDragOverEventWrapper = (event: Event): void => {
+    this.handleDragOverEvent(event as DragEvent);
+  };
+
+  private handleDragLeaveEventWrapper = (event: Event): void => {
+    this.handleDragLeaveEvent(event as DragEvent);
+  };
+
+  private dataTransferHasFiles(dataTransfer: DataTransfer | null | undefined): boolean {
+    if (!dataTransfer) {
+      return false;
+    }
+
+    const types = Array.from(dataTransfer.types ?? []);
+
+    if (types.includes('Files')) {
+      return true;
+    }
+
+    return Boolean(dataTransfer.files?.length);
+  }
+
+  private dropIndicatorHolder: HTMLElement | null = null;
+
+  private handleDragOverEvent = (event: DragEvent): void => {
+    const { dataTransfer } = event;
+
+    if (!this.dataTransferHasFiles(dataTransfer)) {
+      return;
+    }
+
+    event.preventDefault();
+
+    if (dataTransfer) {
+      dataTransfer.dropEffect = 'copy';
+    }
+
+    this.updateDropIndicator(event);
+  };
+
+  private updateDropIndicator(event: DragEvent): void {
+    const target = event.target instanceof Element ? event.target : null;
+    const blockHolder = target?.closest('[data-blok-element]');
+
+    if (!(blockHolder instanceof HTMLElement)) {
+      this.clearDropIndicator();
+
+      return;
+    }
+
+    const rect = blockHolder.getBoundingClientRect();
+    const edge = event.clientY < rect.top + rect.height / 2 ? 'top' : 'bottom';
+
+    if (this.dropIndicatorHolder && this.dropIndicatorHolder !== blockHolder) {
+      this.dropIndicatorHolder.removeAttribute('data-drop-indicator');
+      this.dropIndicatorHolder.style.removeProperty('--drop-indicator-depth');
+    }
+
+    blockHolder.setAttribute('data-drop-indicator', edge);
+    blockHolder.style.setProperty('--drop-indicator-depth', String(this.computeDropDepth(blockHolder)));
+    this.dropIndicatorHolder = blockHolder;
+  }
+
+  private computeDropDepth(blockHolder: HTMLElement): number {
+    const ancestorBlocks = blockHolder.parentElement?.closest('[data-blok-element]')
+      ? this.countAncestorBlocks(blockHolder)
+      : 0;
+
+    const listWrapper = blockHolder.querySelector('[data-list-depth]');
+    const listDepthRaw = listWrapper?.getAttribute('data-list-depth') ?? '0';
+    const listDepth = Number.parseInt(listDepthRaw, 10);
+    const listContribution = Number.isNaN(listDepth) ? 0 : listDepth;
+
+    return ancestorBlocks + listContribution;
+  }
+
+  private countAncestorBlocks(blockHolder: HTMLElement): number {
+    const parent = blockHolder.parentElement?.closest('[data-blok-element]') as HTMLElement | null;
+
+    if (!parent) {
+      return 0;
+    }
+
+    return 1 + this.countAncestorBlocks(parent);
+  }
+
+  private clearDropIndicator(): void {
+    if (this.dropIndicatorHolder) {
+      this.dropIndicatorHolder.removeAttribute('data-drop-indicator');
+      this.dropIndicatorHolder.style.removeProperty('--drop-indicator-depth');
+      this.dropIndicatorHolder = null;
+    }
+  }
+
+  private handleDragLeaveEvent = (event: DragEvent): void => {
+    const holder = this.Blok.UI.nodes.holder;
+    const related = event.relatedTarget as Node | null;
+
+    if (related && holder.contains(related)) {
+      return;
+    }
+
+    this.clearDropIndicator();
+  };
+
+  private handleDropEvent = async (event: DragEvent): Promise<void> => {
+    this.clearDropIndicator();
+
+    if (this.Blok.DragManager?.isDragging) {
+      return;
+    }
+
+    if (!this.dataTransferHasFiles(event.dataTransfer)) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const { BlockManager, Toolbar } = this.Blok;
+    const currentBlock = BlockManager.setCurrentBlockByChildNode(event.target as HTMLElement);
+
+    if (!currentBlock) {
+      return;
+    }
+
+    if (this.toolRegistry.isException(currentBlock.name)) {
+      return;
+    }
+
+    if (event.dataTransfer) {
+      const dropTarget = event.target instanceof Element ? event.target : undefined;
+
+      await this.processDataTransfer(event.dataTransfer, dropTarget);
+    }
+
+    Toolbar.moveAndOpen();
+  };
+
   /**
    * Check if browser behavior suits better.
    */
   private isNativeBehaviour(element: EventTarget): boolean {
-    return dom$.isNativeInput(element);
+    return dom$.isNativeInput(element) ||
+      (element instanceof HTMLElement && (
+        element.contentEditable === 'plaintext-only' ||
+        element.getAttribute('contenteditable') === 'plaintext-only'
+      ));
   }
 
   /**

package/src/components/modules/paste/tool-registry.ts

@@ -197,24 +197,34 @@ export class ToolRegistry {
   /**
    * Find tool for a given file.
    */
-  public findToolForFile(file: File): string | undefined {
+  public findToolForFile(file: File, preferredToolName?: string): string | undefined {
     const extension = file.name.split('.').pop()?.toLowerCase() ?? '';
 
-    const foundConfig = Object
-      .entries(this.toolsFiles)
-      .find(([, { mimeTypes, extensions }]) => {
-        const [fileType, fileSubtype] = file.type.split('/');
-
-        const foundExt = extensions.find((ext) => ext.toLowerCase() === extension);
-        const foundMimeType = mimeTypes.find((mime) => {
-          const [type, subtype] = mime.split('/');
+    const matches = (config: FilesSubstitution): boolean => {
+      const [fileType, fileSubtype] = file.type.split('/');
 
-          return type === fileType && (subtype === fileSubtype || subtype === '*');
-        });
+      const foundExt = config.extensions.find((ext) => ext.toLowerCase() === extension);
+      const foundMimeType = config.mimeTypes.find((mime) => {
+        const [type, subtype] = mime.split('/');
 
-        return foundExt !== undefined || foundMimeType !== undefined;
+        return type === fileType && (subtype === fileSubtype || subtype === '*');
       });
 
+      return foundExt !== undefined || foundMimeType !== undefined;
+    };
+
+    if (preferredToolName !== undefined) {
+      const preferredConfig = this.toolsFiles[preferredToolName];
+
+      if (preferredConfig !== undefined && matches(preferredConfig)) {
+        return preferredToolName;
+      }
+    }
+
+    const foundConfig = Object
+      .entries(this.toolsFiles)
+      .find(([, config]) => matches(config));
+
     return foundConfig?.[0];
   }
 

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

@@ -144,8 +144,13 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
    * Open Block Settings pane
    * @param targetBlock - near which Block we should open BlockSettings
    * @param trigger - element to position the popover relative to
+   * @param options - popover placement overrides
    */
-  public async open(targetBlock?: Block, trigger?: HTMLElement): Promise<void> {
+  public async open(
+    targetBlock?: Block,
+    trigger?: HTMLElement,
+    options?: { placeLeftOfAnchor?: boolean }
+  ): Promise<void> {
     const selectedBlocks = this.Blok.BlockSelection.selectedBlocks;
     const hasMultipleBlocksSelected = selectedBlocks.length > 1;
 
@@ -193,6 +198,10 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
 
       const items = await this.getTunesItems(block, commonTunes, toolTunes);
 
+      const contextLabel = hasMultipleBlocksSelected
+        ? `${selectedBlocks.length} blocks`
+        : (await block.getActiveToolboxEntry())?.title ?? block.name;
+
       const PopoverClass = isMobileScreen() ? PopoverMobile : PopoverDesktop;
       const popoverParams: PopoverParams & { flipper?: Flipper } = {
         searchable: true,
@@ -203,7 +212,10 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
           search: this.Blok.I18n.t('popover.search'),
         },
         autoFocusFirstItem: false,
-        minWidth: '250px',
+        minWidth: '220px',
+        placeLeftOfAnchor: options?.placeLeftOfAnchor ?? true,
+        viewportMargin: 50,
+        contextLabel,
       };
 
       if (PopoverClass === PopoverDesktop) {

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

@@ -134,6 +134,20 @@ export class Toolbar extends Module<ToolbarNodes> {
    */
   private plusInsertedBlock: Block | null = null;
 
+  /**
+   * Drops the pre-plus focus-restoration context.
+   *
+   * Called when the user commits to editing the plus-opened block — e.g. types
+   * "/" to activate slash search. After that point a Closed event is not a
+   * dismissal (Escape / click outside) but a transition: the toolbox is torn
+   * down and reopened, and restoring caret to the originally-focused block
+   * would strand the caret away from the block the user is actually typing in.
+   */
+  public discardPlusContext(): void {
+    this.preToolboxBlock = null;
+    this.plusInsertedBlock = null;
+  }
+
   /**
    * @class
    * @param moduleConfiguration - Module Configuration
@@ -319,6 +333,14 @@ export class Toolbar extends Module<ToolbarNodes> {
         this.nodes.actions?.setAttribute('data-blok-opened', 'true');
         if (this.nodes.actions) {
           this.nodes.actions.style.pointerEvents = 'auto';
+          /**
+           * Reset inline pointer-events overrides that a previous
+           * left-edge block may have set on actions descendants so
+           * non-left-edge blocks regain click-ability everywhere.
+           */
+          for (const descendant of Array.from(this.nodes.actions.querySelectorAll<HTMLElement>('*'))) {
+            descendant.style.pointerEvents = '';
+          }
         }
       },
     };
@@ -519,6 +541,14 @@ export class Toolbar extends Module<ToolbarNodes> {
      */
     this.positioner.applyContentOffset(this.nodes, targetBlock);
 
+    /**
+     * Keep the toolbar aligned with the block's current bounds while its size
+     * changes without dispatching a `BlockChanged` event (e.g. image resize
+     * handle drag). ResizeObserver fires on every frame of the user's drag and
+     * re-runs Y + content-offset calculations so + / ⋮⋮ follow the image edge.
+     */
+    this.positioner.watchTargetResize(targetBlockHolder, () => this.repositionToolbar());
+
     /**
      * Do not show Block Tunes Toggler near single and empty block
      */
@@ -546,7 +576,21 @@ export class Toolbar extends Module<ToolbarNodes> {
       || isToggleHeader;
 
     if (hasLeftEdgeInteraction && this.nodes.actions) {
+      /**
+       * CSS pointer-events does not inherit — every descendant of `actions`
+       * keeps its default `auto` and will still intercept clicks that land
+       * on its painted area. For left-edge blocks (toggle, callout,
+       * header-with-arrow) the actions rectangle visually overlaps the
+       * block's own left-edge interactive element (toggle arrow / callout
+       * emoji) once the toolbar is margin-aligned, so a toolbar SVG
+       * swallows the arrow click. Walk every descendant and disable pointer
+       * events explicitly, then restore them on the settings toggler so the
+       * drag handle / tunes-menu still work.
+       */
       this.nodes.actions.style.pointerEvents = 'none';
+      for (const descendant of Array.from(this.nodes.actions.querySelectorAll<HTMLElement>('*'))) {
+        descendant.style.pointerEvents = 'none';
+      }
       this.restoreSettingsTogglerForLeftEdgeBlock(targetBlock);
     }
 
@@ -783,6 +827,7 @@ export class Toolbar extends Module<ToolbarNodes> {
       this.nodes.content.style.maxWidth = '';
     }
     this.positioner.setHoveredTarget(null);
+    this.positioner.stopWatchingTargetResize();
 
     this.reset();
   }
@@ -1108,8 +1153,8 @@ export class Toolbar extends Module<ToolbarNodes> {
       /**
        * 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.
+       * the block that was focused BEFORE the plus button was clicked. The
+       * newly-inserted empty line is intentionally kept in place.
        *
        * When a tool IS selected, ToolboxEvent.BlockAdded fires first and clears
        * preToolboxBlock, so this branch is skipped for that case.
@@ -1118,21 +1163,9 @@ export class Toolbar extends Module<ToolbarNodes> {
         const blockToRestore = this.preToolboxBlock;
 
         this.preToolboxBlock = null;
+        this.plusInsertedBlock = 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
+        if (blockToRestore.inputs.length > 0) {
           this.Blok.Caret.setToBlock(blockToRestore, this.Blok.Caret.positions.END);
         }
 

package/src/components/modules/toolbar/inline/selection-validator.ts

@@ -58,6 +58,15 @@ export class InlineSelectionValidator {
       return { allowed: false, reason: `Target tag ${target.tagName} conflicts with selection` };
     }
 
+    // Code block (`<pre><code contenteditable="plaintext-only">`) is plain-text
+    // content. Inline formatting would inject HTML into the plaintext-only
+    // region and break syntax highlighting, so suppress the toolbar there.
+    const focusElement = this.nodeToElement(currentSelection.focusNode);
+
+    if (target.closest('pre') !== null || focusElement?.closest('pre')) {
+      return { allowed: false, reason: 'Selection is inside a code block' };
+    }
+
     const anchorElement = $.isElement(currentSelection.anchorNode)
       ? currentSelection.anchorNode as HTMLElement
       : currentSelection.anchorNode.parentElement;
@@ -158,4 +167,12 @@ export class InlineSelectionValidator {
 
     return SelectionUtils.get();
   }
+
+  private nodeToElement(node: Node | null | undefined): Element | null {
+    if (!node) {
+      return null;
+    }
+
+    return $.isElement(node) ? node as HTMLElement : node.parentElement;
+  }
 }

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

@@ -112,8 +112,10 @@ export class PlusButtonHandler {
         '[&_svg]:h-[22px] [&_svg]:w-[22px]',
         // Hover (can-hover)
         'can-hover:hover:bg-bg-light',
-        // Keep hover background when toolbox is open
-        'group-data-[blok-toolbox-opened=true]:bg-bg-light',
+        // Hide when the toolbox popover is open
+        'group-data-[blok-toolbox-opened=true]:hidden',
+        // Hide when block settings popover is open
+        'group-data-[blok-block-settings-opened=true]:hidden',
         // Mobile styles (static positioning with overlay-pane appearance)
         'mobile:bg-popover-bg mobile:border mobile:border-mobile-border mobile:shadow-overlay-pane mobile:rounded-[6px] mobile:z-2',
         'mobile:w-toolbox-btn-mobile mobile:h-toolbox-btn-mobile',

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

@@ -19,6 +19,12 @@ export class ToolbarPositioner {
    */
   private hoveredTarget: Element | null = null;
 
+  /**
+   * Observer that fires when the hovered block's holder changes size so the
+   * toolbar can recompute Y + content offset mid-drag (e.g. image resize).
+   */
+  private targetResizeObserver: ResizeObserver | null = null;
+
   /**
    * Gets the current last toolbar Y position
    */
@@ -47,6 +53,25 @@ export class ToolbarPositioner {
     this.lastToolbarY = null;
   }
 
+  /**
+   * Observe an element (e.g. the hovered block holder) and fire `onResize`
+   * when its box changes. Replaces any previous observer.
+   */
+  public watchTargetResize(target: Element, onResize: () => void): void {
+    this.stopWatchingTargetResize();
+    if (typeof ResizeObserver === 'undefined') return;
+    this.targetResizeObserver = new ResizeObserver(() => onResize());
+    this.targetResizeObserver.observe(target);
+  }
+
+  /**
+   * Stops the current resize observer, if any.
+   */
+  public stopWatchingTargetResize(): void {
+    this.targetResizeObserver?.disconnect();
+    this.targetResizeObserver = null;
+  }
+
   /**
    * Calculates the Y position for the toolbar, centered on the first line of the block
    * @param options - Positioning options containing target block, hovered target, and mobile state
@@ -176,6 +201,8 @@ export class ToolbarPositioner {
       wrapper.style.top = `${newToolbarY}px`;
     }
 
+    this.applyContentOffset(nodes, options.targetBlock);
+
     return positionChanged;
   }