@jackuait/blok 0.10.2 → 0.10.3

package/dist/full.mjs

@@ -1,7 +1,7 @@
-import { n as e, t } from "./chunks/blok-D-T1XZ92.mjs";
-import { nr as n } from "./chunks/constants-CaB-mlB5.mjs";
+import { n as e, t } from "./chunks/blok-3wc3aInM.mjs";
+import { nr as n } from "./chunks/constants-Bp622jic.mjs";
 import { t as r } from "./chunks/objectSpread2-CWwMYL_U.mjs";
-import { _ as i, a, c as o, g as s, i as c, l, m as u, n as d, o as f, s as p, t as m, v as h } from "./chunks/tools-BFK2MvVI.mjs";
+import { _ as i, a, c as o, g as s, i as c, l, m as u, n as d, o as f, s as p, t as m, v as h } from "./chunks/tools-BC1jRfoS.mjs";
 //#region src/full.ts
 var g = {
 	paragraph: {

package/dist/react.mjs

@@ -1,5 +1,5 @@
-import { t as e } from "./chunks/blok-D-T1XZ92.mjs";
-import "./chunks/constants-CaB-mlB5.mjs";
+import { t as e } from "./chunks/blok-3wc3aInM.mjs";
+import "./chunks/constants-Bp622jic.mjs";
 import { t } from "./chunks/objectSpread2-CWwMYL_U.mjs";
 import { t as n } from "./chunks/objectWithoutProperties-D0XxKB4n.mjs";
 import { forwardRef as r, useEffect as i, useMemo as a, useRef as o, useState as s } from "react";

package/dist/tools.mjs

@@ -1,3 +1,3 @@
-import { m as e } from "./chunks/constants-CaB-mlB5.mjs";
-import { _ as t, a as n, c as r, d as i, f as a, g as o, h as s, i as c, l, m as u, n as d, o as f, p, r as m, s as h, t as g, u as _, v } from "./chunks/tools-BFK2MvVI.mjs";
+import { m as e } from "./chunks/constants-Bp622jic.mjs";
+import { _ as t, a as n, c as r, d as i, f as a, g as o, h as s, i as c, l, m as u, n as d, o as f, p, r as m, s as h, t as g, u as _, v } from "./chunks/tools-BC1jRfoS.mjs";
 export { l as Bold, p as Callout, _ as Code, e as Convert, a as Divider, t as Header, m as InlineCode, r as Italic, h as Link, o as List, f as Marker, v as Paragraph, i as Quote, c as Strikethrough, s as Table, u as Toggle, n as Underline, g as defaultBlockTools, d as defaultInlineTools };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackuait/blok",
-  "version": "0.10.2",
+  "version": "0.10.3",
   "description": "Blok — headless, highly extensible rich text editor built for developers who need to implement a block-based editing experience (similar to Notion) without building it from scratch",
   "module": "dist/blok.mjs",
   "types": "./types/index.d.ts",

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/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/uiControllers/controllers/keyboard.ts

@@ -29,6 +29,33 @@ 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;
+    }
+
+    if (KEYS_REQUIRING_CARET_CAPTURE.has(event.key)) {
+      this.Blok.YjsManager.markCaretBeforeChange();
+    }
+  };
+
   constructor(options: {
     config: Controller['config'];
     eventsDispatcher: Controller['eventsDispatcher'];
@@ -54,34 +81,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);
   }
 
   /**
@@ -260,12 +273,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 +332,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/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);
   }
@@ -447,6 +463,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/popover/popover-position.ts

@@ -75,9 +75,14 @@ export function resolvePosition(input: PositionInput): ResolvedPosition {
     ? anchor.top - offset - popoverSize.height + scrollOffset.y
     : anchor.bottom + offset + scrollOffset.y;
 
-  // Clamp: ensure popover doesn't overflow above top boundary
-  const top = rawTop < boundaryTop + scrollOffset.y
-    ? boundaryTop + scrollOffset.y
+  // Clamp: ensure popover doesn't overflow above top boundary.
+  // Use the scope's top in document coords (scopeBounds.top + scrollOffset.y) rather
+  // than the viewport-clamped boundaryTop, so the clamp is correct when the page is
+  // scrolled (boundaryTop is viewport-relative; adding scrollOffset converts it to
+  // document coords but discards any negative scope top that was clamped to 0).
+  const scopeTopInDocCoords = scopeBounds.top + scrollOffset.y;
+  const top = rawTop < scopeTopInDocCoords
+    ? scopeTopInDocCoords
     : rawTop;
 
   // --- Horizontal ---

package/src/tools/table/index.ts

@@ -1575,18 +1575,9 @@ export class Table implements BlockTool {
       return [];
     }
 
-    const allRows = Array.from(gridEl.querySelectorAll(`[${ROW_ATTR}]`));
-
     return cells.map(cell => {
-      const row = cell.closest<HTMLElement>(`[${ROW_ATTR}]`);
-
-      if (!row) {
-        return null;
-      }
-
-      const rowIndex = allRows.indexOf(row);
-      const cellsInRow = Array.from(row.querySelectorAll(`[${CELL_ATTR}]`));
-      const colIndex = cellsInRow.indexOf(cell);
+      const rowIndex = parseInt(cell.getAttribute(CELL_ROW_ATTR) ?? '0', 10);
+      const colIndex = parseInt(cell.getAttribute(CELL_COL_ATTR) ?? '0', 10);
 
       const container = cell.querySelector(`[${CELL_BLOCKS_ATTR}]`);
       const blocks: ClipboardBlockData[] = [];
@@ -1643,7 +1634,7 @@ export class Table implements BlockTool {
         ...(color !== undefined ? { color } : {}),
         ...(textColor !== undefined ? { textColor } : {}),
       };
-    }).filter((entry): entry is NonNullable<typeof entry> => entry !== null);
+    });
   }
 
   private initCellSelection(gridEl: HTMLElement): void {
@@ -1741,6 +1732,9 @@ export class Table implements BlockTool {
           this.rebuildTableBody();
         });
       },
+      getCellSpan: (row, col) => {
+        return this.model.getCellSpan(row, col);
+      },
     });
   }
 
@@ -1804,9 +1798,7 @@ export class Table implements BlockTool {
       return;
     }
 
-    const targetRow = targetCell.closest<HTMLElement>(`[${ROW_ATTR}]`);
-
-    if (!targetRow) {
+    if (!targetCell.closest(`[${ROW_ATTR}]`)) {
       return;
     }
 
@@ -1827,10 +1819,9 @@ export class Table implements BlockTool {
     e.preventDefault();
     e.stopPropagation();
 
-    const rows = Array.from(gridEl.querySelectorAll(`[${ROW_ATTR}]`));
-    const targetRowIndex = rows.indexOf(targetRow);
-    const cellsInRow = Array.from(targetRow.querySelectorAll(`[${CELL_ATTR}]`));
-    const targetColIndex = cellsInRow.indexOf(targetCell);
+    // Read true model coordinates from stamped data attributes
+    const targetRowIndex = parseInt(targetCell.getAttribute(CELL_ROW_ATTR) ?? '0', 10);
+    const targetColIndex = parseInt(targetCell.getAttribute(CELL_COL_ATTR) ?? '0', 10);
 
     this.pastePayloadIntoCells(gridEl, payload, targetRowIndex, targetColIndex);
   }