@jackuait/blok 0.10.0-beta.8 → 0.10.0

package/src/tools/list/index.ts

@@ -52,6 +52,8 @@ export class ListItem implements BlockTool {
   private depthValidator: ListDepthValidator;
   private markerCalculator: ListMarkerCalculator;
   private markerManager: OrderedMarkerManager | null;
+  private placeholderCleanup: (() => void) | null = null;
+  private boundHandleKeyDown: ((event: KeyboardEvent) => void) | null = null;
 
   private blockId?: string;
 
@@ -120,16 +122,24 @@ export class ListItem implements BlockTool {
     if (this.readOnly) {
       return;
     }
-    setupPlaceholder(element, this.placeholder);
+    this.placeholderCleanup = setupPlaceholder(element, this.placeholder);
   }
 
   public render(): HTMLElement {
+    if (this._element) {
+      return this._element;
+    }
+
     const blockIndex = this.blockId
       ? this.api.blocks.getBlockIndex(this.blockId) ?? this.api.blocks.getCurrentBlockIndex()
       : this.api.blocks.getCurrentBlockIndex();
     const depth = this._data.depth ?? 0;
     const markerDepth = this.markerCalculator.getVisualDepth(blockIndex, depth);
 
+    if (!this.boundHandleKeyDown) {
+      this.boundHandleKeyDown = this.handleKeyDown.bind(this);
+    }
+
     this._element = renderListItem({
       data: this._data,
       readOnly: this.readOnly,
@@ -145,12 +155,54 @@ export class ListItem implements BlockTool {
           content.classList.toggle('opacity-60', checked);
         }
       },
-      keydownHandler: this.readOnly ? undefined : this.handleKeyDown.bind(this),
+      keydownHandler: this.readOnly ? undefined : this.boundHandleKeyDown,
     });
 
     return this._element;
   }
 
+  public setReadOnly(state: boolean): void {
+    if (!this._element) {
+      return;
+    }
+
+    this.readOnly = state;
+
+    const content = this.getContentElement();
+
+    // Toggle contentEditable on content container
+    if (content) {
+      content.contentEditable = state ? 'false' : 'true';
+    }
+
+    // Toggle checkbox disabled state for checklists
+    const checkbox = this._element.querySelector<HTMLInputElement>('input[type="checkbox"]');
+
+    if (checkbox) {
+      checkbox.disabled = state;
+    }
+
+    // Toggle keydown handler and placeholder
+    if (state) {
+      if (this.boundHandleKeyDown) {
+        this._element.removeEventListener('keydown', this.boundHandleKeyDown);
+      }
+
+      if (this.placeholderCleanup) {
+        this.placeholderCleanup();
+        this.placeholderCleanup = null;
+      }
+    } else {
+      if (this.boundHandleKeyDown) {
+        this._element.addEventListener('keydown', this.boundHandleKeyDown);
+      }
+
+      if (content) {
+        this.placeholderCleanup = setupPlaceholder(content, this.placeholder);
+      }
+    }
+  }
+
   public rendered(): void {
     this.updateMarkersAfterPositionChange();
   }
@@ -408,7 +460,7 @@ export class ListItem implements BlockTool {
           content.classList.toggle('opacity-60', checked);
         }
       },
-      keydownHandler: this.readOnly ? undefined : this.handleKeyDown.bind(this),
+      keydownHandler: this.readOnly ? undefined : this.boundHandleKeyDown ?? undefined,
     });
 
     if (newElement) {

package/src/tools/list/list-helpers.ts

@@ -19,8 +19,8 @@ export const getContentElement = (
   if (!element) return null;
 
   if (style === 'checklist') {
-    const contentEditable = element.querySelector('[contenteditable]');
-    return contentEditable instanceof HTMLElement ? contentEditable : null;
+    const checklistContent = element.querySelector('[data-blok-testid="list-checklist-content"]');
+    return checklistContent instanceof HTMLElement ? checklistContent : null;
   }
 
   const contentContainer = element.querySelector('[data-blok-testid="list-content-container"]');

package/src/tools/nested-blocks.ts

@@ -0,0 +1,25 @@
+import { DATA_ATTR } from '../components/constants/data-attributes';
+
+/**
+ * Mount child block holders into a container, skipping children that are
+ * already in place or claimed by another nested-blocks container.
+ *
+ * Used by toggle, header, and callout tools to reconcile child holders
+ * during the `rendered()` lifecycle hook.
+ */
+export const mountChildBlocks = (
+  container: HTMLElement,
+  children: { holder: HTMLElement }[],
+): void => {
+  for (const child of children) {
+    if (child.holder.parentElement === container) {
+      continue;
+    }
+
+    if (child.holder.closest(`[${DATA_ATTR.nestedBlocks}]`)) {
+      continue;
+    }
+
+    container.appendChild(child.holder);
+  }
+};

package/src/tools/paragraph/index.ts

@@ -19,7 +19,7 @@ import type {
 import { DATA_ATTR } from '../../components/constants';
 import { IconText } from '../../components/icons';
 import { stripFakeBackgroundElements } from '../../components/utils';
-import { PLACEHOLDER_EMPTY_EDITOR_CLASSES, PLACEHOLDER_FOCUS_ONLY_CLASSES, setupPlaceholder } from '../../components/utils/placeholder';
+import { isContentEmpty, PLACEHOLDER_EMPTY_EDITOR_CLASSES, PLACEHOLDER_FOCUS_ONLY_CLASSES, setupPlaceholder } from '../../components/utils/placeholder';
 import { twMerge } from '../../components/utils/tw';
 
 /**
@@ -117,6 +117,11 @@ export class Paragraph implements BlockTool {
    */
   private readOnly: boolean;
 
+  /**
+   * Cleanup function for placeholder behavior, returned by setupPlaceholder
+   */
+  private placeholderCleanup: (() => void) | null = null;
+
   /**
    * Placeholder for Paragraph Tool
    */
@@ -157,9 +162,7 @@ export class Paragraph implements BlockTool {
     this.api = api;
     this.readOnly = readOnly;
 
-    if (!this.readOnly) {
-      this.onKeyUp = this.onKeyUp.bind(this);
-    }
+    this.onKeyUp = this.onKeyUp.bind(this);
 
     this._placeholder = config?.placeholder ?? Paragraph.DEFAULT_PLACEHOLDER;
     this._data = data ?? { text: '' };
@@ -263,7 +266,7 @@ export class Paragraph implements BlockTool {
     if (!this.readOnly) {
       div.contentEditable = 'true';
       div.addEventListener('keyup', this.onKeyUp);
-      setupPlaceholder(div, this.api.i18n.t(this._placeholder), 'data-blok-placeholder-active');
+      this.placeholderCleanup = setupPlaceholder(div, this.api.i18n.t(this._placeholder), 'data-blok-placeholder-active');
     }
 
     return div;
@@ -275,11 +278,49 @@ export class Paragraph implements BlockTool {
    * @returns HTMLDivElement
    */
   public render(): HTMLDivElement {
-    this._element = this.drawView();
+    if (!this._element) {
+      this._element = this.drawView();
+    }
 
     return this._element;
   }
 
+  /**
+   * Toggle read-only mode in-place without re-rendering the DOM element.
+   * Manages contentEditable, keyup listener, placeholder, and empty-content <br>.
+   *
+   * @param state - true to enter read-only mode, false to exit
+   */
+  public setReadOnly(state: boolean): void {
+    if (!this._element) {
+      return;
+    }
+
+    this.readOnly = state;
+
+    if (state) {
+      this._element.contentEditable = 'false';
+      this._element.removeEventListener('keyup', this.onKeyUp);
+
+      if (this.placeholderCleanup) {
+        this.placeholderCleanup();
+        this.placeholderCleanup = null;
+      }
+
+      if (isContentEmpty(this._element)) {
+        this._element.innerHTML = '<br>';
+      }
+    } else {
+      this._element.contentEditable = 'true';
+      this._element.addEventListener('keyup', this.onKeyUp);
+      this.placeholderCleanup = setupPlaceholder(this._element, this.api.i18n.t(this._placeholder), 'data-blok-placeholder-active');
+
+      if (this._element.innerHTML === '<br>') {
+        this._element.innerHTML = '';
+      }
+    }
+  }
+
   /**
    * Method that specified how to merge two Text blocks.
    * Called by Editor by backspace at the beginning of the Block

package/src/tools/quote/index.ts

@@ -13,7 +13,7 @@ import type { MenuConfig } from '../../../types/tools/menu-config';
 import { DATA_ATTR } from '../../components/constants';
 import { IconQuote } from '../../components/icons';
 import { stripFakeBackgroundElements } from '../../components/utils';
-import { PLACEHOLDER_FOCUS_ONLY_CLASSES, setupPlaceholder } from '../../components/utils/placeholder';
+import { isContentEmpty, PLACEHOLDER_FOCUS_ONLY_CLASSES, setupPlaceholder } from '../../components/utils/placeholder';
 import { twMerge } from '../../components/utils/tw';
 
 export interface QuoteData extends BlockToolData {
@@ -40,6 +40,7 @@ const LARGE_CLASS = 'text-[1.2em]';
 export class Quote implements BlockTool {
   private api: API;
   private readOnly: boolean;
+  private placeholderCleanup: (() => void) | null = null;
   private _data: QuoteData;
   private _element: HTMLQuoteElement | null = null;
 
@@ -51,9 +52,7 @@ export class Quote implements BlockTool {
       size: data?.size ?? 'default',
     };
 
-    if (!this.readOnly) {
-      this.onKeyUp = this.onKeyUp.bind(this);
-    }
+    this.onKeyUp = this.onKeyUp.bind(this);
   }
 
   public onKeyUp(e: KeyboardEvent): void {
@@ -70,7 +69,7 @@ export class Quote implements BlockTool {
     }
   }
 
-  public render(): HTMLQuoteElement {
+  private drawView(): HTMLQuoteElement {
     const el = document.createElement('blockquote');
 
     el.className = twMerge(
@@ -91,14 +90,50 @@ export class Quote implements BlockTool {
     if (!this.readOnly) {
       el.contentEditable = 'true';
       el.addEventListener('keyup', this.onKeyUp);
-      setupPlaceholder(el, this.api.i18n.t(DEFAULT_PLACEHOLDER), 'data-blok-placeholder-active');
+      this.placeholderCleanup = setupPlaceholder(el, this.api.i18n.t(DEFAULT_PLACEHOLDER), 'data-blok-placeholder-active');
     }
 
-    this._element = el;
-
     return el;
   }
 
+  public render(): HTMLQuoteElement {
+    if (!this._element) {
+      this._element = this.drawView();
+    }
+
+    return this._element;
+  }
+
+  public setReadOnly(state: boolean): void {
+    if (!this._element) {
+      return;
+    }
+
+    this.readOnly = state;
+
+    if (state) {
+      this._element.contentEditable = 'false';
+      this._element.removeEventListener('keyup', this.onKeyUp);
+
+      if (this.placeholderCleanup) {
+        this.placeholderCleanup();
+        this.placeholderCleanup = null;
+      }
+
+      if (isContentEmpty(this._element)) {
+        this._element.innerHTML = '<br>';
+      }
+    } else {
+      this._element.contentEditable = 'true';
+      this._element.addEventListener('keyup', this.onKeyUp);
+      this.placeholderCleanup = setupPlaceholder(this._element, this.api.i18n.t(DEFAULT_PLACEHOLDER), 'data-blok-placeholder-active');
+
+      if (this._element.innerHTML === '<br>') {
+        this._element.innerHTML = '';
+      }
+    }
+  }
+
   public save(blockContent: HTMLQuoteElement): QuoteData {
     return {
       text: stripFakeBackgroundElements(blockContent.innerHTML),

package/src/tools/stub/index.ts

@@ -73,6 +73,16 @@ export class Stub implements BlockTool {
     return this.savedData;
   }
 
+  /**
+   * Toggle read-only mode in-place.
+   * Stub has no interactive elements, so this is intentionally a no-op.
+   *
+   * @param _state - read-only state (unused)
+   */
+  public setReadOnly(_state: boolean): void {
+    // no-op: stub blocks have no editable content
+  }
+
   /**
    * Create Tool html markup
    * @returns {HTMLElement}

package/src/tools/table/index.ts

@@ -54,8 +54,10 @@ import type { PendingHighlight } from './table-row-col-action-handler';
 import { TableRowColControls } from './table-row-col-controls';
 import type { RowColAction } from './table-row-col-controls';
 import { registerAdditionalRestrictedTools } from './table-restrictions';
+import { TableCornerDrag } from './table-corner-drag';
 import { TableScrollHaze } from './table-scroll-haze';
 import type { CellPlacement, ClipboardBlockData, LegacyCellContent, TableCellsClipboard, TableData, TableConfig } from './types';
+import { isCellWithBlocks } from './types';
 
 const DEFAULT_ROWS = 3;
 const DEFAULT_COLS = 3;
@@ -93,6 +95,7 @@ export class Table implements BlockTool {
   private rowColControls: TableRowColControls | null = null;
   private cellBlocks: TableCellBlocks | null = null;
   private cellSelection: TableCellSelection | null = null;
+  private cornerDrag: TableCornerDrag | null = null;
   private scrollHaze: TableScrollHaze | null = null;
   private element: HTMLDivElement | null = null;
   private gridElement: HTMLElement | null = null;
@@ -102,6 +105,8 @@ export class Table implements BlockTool {
   private pendingHighlight: PendingHighlight | null = null;
   private isNewTable = false;
   private unregisterRestrictedTools: (() => void) | null = null;
+  private gridPasteCleanup: (() => void) | null = null;
+  private keyboardNavCleanup: (() => void) | null = null;
 
   /**
    * Generation counter for setData calls.
@@ -193,12 +198,18 @@ export class Table implements BlockTool {
     this.resize = null;
     this.addControls?.destroy();
     this.addControls = null;
+    this.cornerDrag?.destroy();
+    this.cornerDrag = null;
     this.rowColControls?.destroy();
     this.rowColControls = null;
     this.cellSelection?.destroy();
     this.cellSelection = null;
     this.scrollHaze?.destroy();
     this.scrollHaze = null;
+    this.gridPasteCleanup?.();
+    this.gridPasteCleanup = null;
+    this.keyboardNavCleanup?.();
+    this.keyboardNavCleanup = null;
   }
 
   /**
@@ -256,6 +267,8 @@ export class Table implements BlockTool {
     newTbody: Element,
     blockHolders: Map<string, HTMLElement>
   ): void {
+    const mounted = new Set<string>();
+
     content.forEach((rowData, r) => {
       rowData.forEach((cellContent, c) => {
         if (typeof cellContent === 'string') {
@@ -283,8 +296,9 @@ export class Table implements BlockTool {
         cellContent.blocks.forEach(blockId => {
           const holder = blockHolders.get(blockId);
 
-          if (holder) {
+          if (holder && !mounted.has(blockId)) {
             container.appendChild(holder);
+            mounted.add(blockId);
           }
         });
       });
@@ -323,6 +337,7 @@ export class Table implements BlockTool {
   private initSubsystems(gridEl: HTMLElement): void {
     this.initResize(gridEl);
     this.initAddControls(gridEl);
+    this.initCornerDrag(gridEl);
     this.initRowColControls(gridEl);
     this.initCellSelection(gridEl);
     this.initGridPasteListener(gridEl);
@@ -482,7 +497,7 @@ export class Table implements BlockTool {
 
     if (!this.readOnly) {
       this.initCellBlocks(gridEl);
-      setupKeyboardNavigation(gridEl, this.cellBlocks);
+      this.keyboardNavCleanup = setupKeyboardNavigation(gridEl, this.cellBlocks);
     }
 
     return wrapper;
@@ -558,6 +573,64 @@ export class Table implements BlockTool {
     }
   }
 
+  /**
+   * Toggle read-only mode in place without re-rendering.
+   * Entering readonly tears down all interactive subsystems and cell blocks;
+   * exiting readonly recreates them.
+   */
+  public setReadOnly(state: boolean): void {
+    const wrapper = this.element;
+    const gridEl = this.gridElement;
+
+    if (!wrapper || !gridEl) {
+      return;
+    }
+
+    this.readOnly = state;
+
+    if (state) {
+      // Entering readonly: tear down interactive subsystems
+      this.teardownSubsystems();
+      this.cellBlocks?.destroy();
+      this.cellBlocks = null;
+
+      // Remove grip overlay
+      if (this.gripOverlay) {
+        this.gripOverlay.remove();
+        this.gripOverlay = null;
+      }
+
+      // Update wrapper classes and attributes
+      WRAPPER_EDIT_CLASSES.forEach(cls => wrapper.classList.remove(cls));
+      wrapper.setAttribute('data-blok-table-readonly', '');
+
+      // Mount cell content as non-interactive
+      const snap = this.model.snapshot();
+
+      mountCellBlocksReadOnly(gridEl, snap.content, this.api, this.blockId ?? '');
+    } else {
+      // Exiting readonly: restore interactive subsystems
+      wrapper.removeAttribute('data-blok-table-readonly');
+      WRAPPER_EDIT_CLASSES.forEach(cls => wrapper.classList.add(cls));
+
+      // Create grip overlay
+      const overlay = document.createElement('div');
+
+      overlay.setAttribute('data-blok-table-grip-overlay', '');
+      overlay.style.position = 'absolute';
+      overlay.style.inset = '0';
+      overlay.style.pointerEvents = 'none';
+      overlay.style.zIndex = '3';
+      wrapper.appendChild(overlay);
+      this.gripOverlay = overlay;
+
+      // Initialize cell blocks and subsystems
+      this.initCellBlocks(gridEl);
+      this.keyboardNavCleanup = setupKeyboardNavigation(gridEl, this.cellBlocks);
+      this.initSubsystems(gridEl);
+    }
+  }
+
   /**
    * Remove blocks that claim this table as parent but are not referenced in any cell.
    *
@@ -595,7 +668,28 @@ export class Table implements BlockTool {
   }
 
   public save(_blockContent: HTMLElement): TableData {
-    return this.model.snapshot();
+    const data = this.model.snapshot();
+
+    // Filter out block IDs that don't belong to this table.
+    // Corrupted data may contain cross-table references; persisting them
+    // causes DOM node stealing and data loss on subsequent renders.
+    data.content = data.content.map(row =>
+      row.map(cell => {
+        if (!isCellWithBlocks(cell)) {
+          return cell;
+        }
+
+        const filtered = cell.blocks.filter(blockId => {
+          const block = this.api.blocks.getById?.(blockId);
+
+          return !block || block.parentId === this.blockId;
+        });
+
+        return { ...cell, blocks: filtered };
+      })
+    );
+
+    return data;
   }
 
   public validate(savedData: TableData): boolean {
@@ -900,6 +994,10 @@ export class Table implements BlockTool {
       wrapper: this.element,
       grid: gridEl,
       i18n: this.api.i18n,
+      getTableSize: () => ({
+        rows: this.model.rows,
+        cols: this.model.cols,
+      }),
       getNewColumnWidth: () => {
         const colWidths = this.model.colWidths ?? readPixelWidths(gridEl);
 
@@ -1040,6 +1138,131 @@ export class Table implements BlockTool {
     }
   }
 
+  private initCornerDrag(gridEl: HTMLElement): void {
+    this.cornerDrag?.destroy();
+
+    if (!this.element) {
+      return;
+    }
+
+    this.cornerDrag = new TableCornerDrag({
+      wrapper: this.element,
+      gridEl,
+      onAddRow: () => {
+        this.runStructuralOp(() => {
+          this.grid.addRow(gridEl);
+          this.model.addRow();
+          populateNewCells(gridEl, this.cellBlocks);
+          updateHeadingStyles(this.gridElement, this.model.withHeadings);
+          updateHeadingColumnStyles(this.gridElement, this.model.withHeadingColumn);
+        });
+      },
+      onAddColumn: () => {
+        this.runStructuralOp(() => {
+          const colWidths = this.model.colWidths ?? readPixelWidths(gridEl);
+          const halfWidth = this.model.initialColWidth !== undefined
+            ? Math.round((this.model.initialColWidth / 2) * 100) / 100
+            : computeHalfAvgWidth(colWidths);
+          const newWidths = [...colWidths, halfWidth];
+
+          this.grid.addColumn(gridEl, undefined, colWidths, halfWidth);
+          this.model.addColumn(undefined, halfWidth);
+          this.model.setColWidths(newWidths);
+          applyPixelWidths(gridEl, newWidths);
+          enableScrollOverflow(this.ensureScrollContainer());
+          populateNewCells(gridEl, this.cellBlocks);
+          updateHeadingColumnStyles(this.gridElement, this.model.withHeadingColumn);
+        });
+      },
+      onRemoveLastRow: () => {
+        this.runStructuralOp(() => {
+          const rowCount = this.grid.getRowCount(gridEl);
+
+          if (rowCount <= 1) {
+            return;
+          }
+
+          const { blocksToDelete } = this.model.deleteRow(rowCount - 1);
+
+          this.cellBlocks?.deleteBlocks(blocksToDelete);
+          this.grid.deleteRow(gridEl, rowCount - 1);
+        });
+      },
+      onRemoveLastColumn: () => {
+        this.runStructuralOp(() => {
+          const colCount = this.grid.getColumnCount(gridEl);
+
+          if (colCount <= 1) {
+            return;
+          }
+
+          const { blocksToDelete } = this.model.deleteColumn(colCount - 1);
+
+          this.cellBlocks?.deleteBlocks(blocksToDelete);
+          this.grid.deleteColumn(gridEl, colCount - 1);
+
+          const updatedWidths = this.model.colWidths;
+
+          if (updatedWidths) {
+            applyPixelWidths(gridEl, updatedWidths);
+          }
+        });
+      },
+      onDragStart: () => {
+        if (this.resize) {
+          this.resize.enabled = false;
+        }
+        this.rowColControls?.hideAllGrips();
+        this.rowColControls?.setGripsDisplay(false);
+        this.addControls?.setDisplay(false);
+      },
+      onDragEnd: () => {
+        this.initResize(gridEl);
+        this.rowColControls?.refresh();
+        this.addControls?.setDisplay(true);
+        this.addControls?.syncRowButtonWidth();
+      },
+      getTableSize: () => {
+        return { rows: this.model.rows, cols: this.model.cols };
+      },
+      canRemoveLastRow: () => {
+        return this.model.rows > 1 && isRowEmpty(gridEl, this.model.rows - 1);
+      },
+      canRemoveLastColumn: () => {
+        return this.model.cols > 1 && isColumnEmpty(gridEl, this.model.cols - 1);
+      },
+      onClickAdd: () => {
+        this.runTransactedStructuralOp(() => {
+          // Add row
+          this.grid.addRow(gridEl);
+          this.model.addRow();
+          populateNewCells(gridEl, this.cellBlocks);
+          updateHeadingStyles(this.gridElement, this.model.withHeadings);
+          updateHeadingColumnStyles(this.gridElement, this.model.withHeadingColumn);
+
+          // Add column
+          const colWidths = this.model.colWidths ?? readPixelWidths(gridEl);
+          const halfWidth = this.model.initialColWidth !== undefined
+            ? Math.round((this.model.initialColWidth / 2) * 100) / 100
+            : computeHalfAvgWidth(colWidths);
+          const newWidths = [...colWidths, halfWidth];
+
+          this.grid.addColumn(gridEl, undefined, colWidths, halfWidth);
+          this.model.addColumn(undefined, halfWidth);
+          this.model.setColWidths(newWidths);
+          applyPixelWidths(gridEl, newWidths);
+          populateNewCells(gridEl, this.cellBlocks);
+          updateHeadingColumnStyles(this.gridElement, this.model.withHeadingColumn);
+
+          // Refresh subsystems
+          this.initResize(gridEl);
+          this.rowColControls?.refresh();
+          this.addControls?.syncRowButtonWidth();
+        });
+      },
+    });
+  }
+
   private initRowColControls(gridEl: HTMLElement): void {
     this.rowColControls?.destroy();
 
@@ -1063,6 +1286,7 @@ export class Table implements BlockTool {
         }
 
         this.addControls?.setDisplay(!isDragging);
+        this.cornerDrag?.setDisplay(!isDragging);
 
         if (isDragging) {
           this.api.toolbar.close({ setExplicitlyClosed: false });
@@ -1442,6 +1666,7 @@ export class Table implements BlockTool {
         }
 
         this.addControls?.setInteractive(!hasSelection);
+        this.cornerDrag?.setInteractive(!hasSelection);
         this.rowColControls?.setGripsDisplay(!hasSelection);
       },
       onSelectionRangeChange: () => {
@@ -1531,9 +1756,14 @@ export class Table implements BlockTool {
   }
 
   private initGridPasteListener(gridEl: HTMLElement): void {
-    gridEl.addEventListener('paste', (e: ClipboardEvent) => {
+    const handler = (e: ClipboardEvent): void => {
       this.handleGridPaste(e, gridEl);
-    });
+    };
+
+    gridEl.addEventListener('paste', handler);
+    this.gridPasteCleanup = () => {
+      gridEl.removeEventListener('paste', handler);
+    };
   }
 
   private handleGridPaste(e: ClipboardEvent, gridEl: HTMLElement): void {
@@ -1633,7 +1863,9 @@ export class Table implements BlockTool {
 
     const range = selection.getRangeAt(0);
 
-    range.deleteContents();
+    if (!range.collapsed) {
+      range.deleteContents();
+    }
 
     const fragment = document.createDocumentFragment();
     const wrapper = document.createElement('div');