@jackuait/blok 0.10.0-beta.9 → 0.10.0

package/src/tools/table/table-add-controls.ts

@@ -1,7 +1,7 @@
 import type { I18n } from '../../../types/api';
 import { IconPlus } from '../../components/icons';
 import { createTooltipContent } from '../../components/modules/toolbar/tooltip';
-import { hide as hideTooltip, onHover } from '../../components/utils/tooltip';
+import { hide as hideTooltip, onHover, show as showTooltip } from '../../components/utils/tooltip';
 import { twMerge } from '../../components/utils/tw';
 
 const ADD_ROW_ATTR = 'data-blok-table-add-row';
@@ -29,7 +29,7 @@ const VISUAL_CLASSES = [
   'justify-center',
   'border',
   'border-gray-300',
-  'rounded-full',
+  'rounded-sm',
   'group-hover/add:bg-gray-50',
 ];
 
@@ -56,6 +56,7 @@ interface TableAddControlsOptions {
   onDragAddCol: () => void;
   onDragRemoveCol: () => void;
   onDragEnd: () => void;
+  getTableSize: () => { rows: number; cols: number };
   /** Returns the pixel width of a newly added column, used as the drag unit size. */
   getNewColumnWidth?: () => number;
 }
@@ -94,6 +95,7 @@ export class TableAddControls {
   private boundPointerCancel: (e: PointerEvent) => void;
   private boundRowPointerDown: (e: PointerEvent) => void;
   private boundColPointerDown: (e: PointerEvent) => void;
+  private getTableSize: () => { rows: number; cols: number };
   private getNewColumnWidth: (() => number) | undefined;
   private scrollContainer: HTMLElement | null = null;
   private boundScrollHandler: (() => void) | null = null;
@@ -112,6 +114,7 @@ export class TableAddControls {
     this.onDragAddCol = options.onDragAddCol;
     this.onDragRemoveCol = options.onDragRemoveCol;
     this.onDragEnd = options.onDragEnd;
+    this.getTableSize = options.getTableSize;
     this.getNewColumnWidth = options.getNewColumnWidth;
     this.boundMouseMove = this.handleMouseMove.bind(this);
     this.boundDocumentMouseMove = this.handleDocumentMouseMove.bind(this);
@@ -324,6 +327,20 @@ export class TableAddControls {
     this.addColBtn.remove();
   }
 
+  private showDimensionTooltip(): void {
+    if (!this.dragState) {
+      return;
+    }
+
+    const size = this.getTableSize();
+    const target = this.dragState.axis === 'row' ? this.addRowBtn : this.addColBtn;
+    const opts = this.dragState.axis === 'row'
+      ? { placement: 'bottom' as const, marginTop: -16 }
+      : { placement: 'bottom' as const };
+
+    showTooltip(target, `${size.cols}\u00D7${size.rows}`, opts);
+  }
+
   private handlePointerDown(axis: 'row' | 'col', e: PointerEvent): void {
     e.preventDefault();
 
@@ -380,8 +397,18 @@ export class TableAddControls {
     if (Math.abs(delta) > DRAG_THRESHOLD && !this.dragState.didDrag) {
       this.dragState.didDrag = true;
       document.body.style.cursor = axis === 'row' ? 'row-resize' : 'col-resize';
-      hideTooltip();
+      this.showDimensionTooltip();
       this.onDragStart();
+
+      return;
+    }
+
+    if (this.dragState.didDrag) {
+      this.showDimensionTooltip();
+    }
+
+    if (this.dragState.didDrag) {
+      this.showDimensionTooltip();
     }
   }
 
@@ -400,6 +427,7 @@ export class TableAddControls {
     target.removeEventListener('pointercancel', this.boundPointerCancel);
 
     document.body.style.cursor = '';
+    hideTooltip();
     this.dragState = null;
 
     if (!didDrag) {
@@ -431,6 +459,7 @@ export class TableAddControls {
     target.removeEventListener('pointercancel', this.boundPointerCancel);
 
     document.body.style.cursor = '';
+    hideTooltip();
     this.dragState = null;
 
     if (didDrag) {
@@ -495,8 +524,8 @@ export class TableAddControls {
    * Document-level mousemove handler.
    * Catches mouse movements outside the wrapper (e.g. in the ::after
    * pseudo-element zone below the grid, which has pointer-events-none).
-   * Only delegates to handleMouseMove when the cursor is within the
-   * proximity zone around the grid to avoid unnecessary work.
+   * Delegates to handleMouseMove when the cursor is within the proximity
+   * zone around the grid; schedules hiding when the cursor is far away.
    */
   private handleDocumentMouseMove(e: MouseEvent): void {
     if (this.wrapper.contains(e.target as Node)) {
@@ -513,6 +542,9 @@ export class TableAddControls {
 
     if (nearGrid) {
       this.handleMouseMove(e);
+    } else {
+      this.scheduleHideRow();
+      this.scheduleHideCol();
     }
   }
 

package/src/tools/table/table-cell-blocks.ts

@@ -1,4 +1,5 @@
 import type { API } from '../../../types';
+import { DATA_ATTR } from '../../components/constants/data-attributes';
 
 import { CELL_ATTR, ROW_ATTR, CELL_COL_ATTR } from './table-core';
 import type { TableModel } from './table-model';
@@ -7,15 +8,6 @@ import { isCellWithBlocks } from './types';
 
 export const CELL_BLOCKS_ATTR = 'data-blok-table-cell-blocks';
 
-/**
- * Check if an element is inside a block-based table cell
- */
-export const isInCellBlock = (element: HTMLElement): boolean => {
-  const cellBlocksContainer = element.closest(`[${CELL_BLOCKS_ATTR}]`);
-
-  return cellBlocksContainer !== null;
-};
-
 /**
  * Get the cell element that contains the given element
  */
@@ -390,9 +382,9 @@ export class TableCellBlocks {
         const referencedBlockIds = isCellWithBlocks(cellContent) && cellContent.blocks.length > 0
           ? [...cellContent.blocks]
           : null;
-        const mountedIds = referencedBlockIds
+        const { mountedIds, replacements } = referencedBlockIds
           ? this.mountBlocksInCell(container, referencedBlockIds)
-          : [];
+          : { mountedIds: [] as string[], replacements: new Map<string, string>() };
 
         const cellColorProps: Pick<CellContent, 'color' | 'textColor'> = {};
 
@@ -406,7 +398,12 @@ export class TableCellBlocks {
         }
 
         if (mountedIds.length > 0) {
-          normalizedRow.push({ blocks: referencedBlockIds ?? mountedIds, ...cellColorProps });
+          const baseIds = referencedBlockIds ?? mountedIds;
+          const blockIds = replacements.size > 0
+            ? baseIds.map(id => replacements.get(id) ?? id)
+            : baseIds;
+
+          normalizedRow.push({ blocks: blockIds, ...cellColorProps });
         } else {
           const text = typeof cellContent === 'string'
             ? cellContent
@@ -455,10 +452,15 @@ export class TableCellBlocks {
 
   /**
    * Mount existing blocks into a cell container by their IDs.
-   * Returns the IDs of blocks that were successfully mounted.
+   * Returns the IDs of blocks that were successfully mounted and a map of
+   * original→duplicate IDs for blocks that were already in another cell.
    */
-  private mountBlocksInCell(container: HTMLElement, blockIds: string[]): string[] {
+  private mountBlocksInCell(
+    container: HTMLElement,
+    blockIds: string[]
+  ): { mountedIds: string[]; replacements: Map<string, string> } {
     const mountedIds: string[] = [];
+    const replacements = new Map<string, string>();
 
     for (const blockId of blockIds) {
       const index = this.api.blocks.getBlockIndex(blockId);
@@ -473,11 +475,30 @@ export class TableCellBlocks {
         continue;
       }
 
+      // Guard: if the block is already mounted in another nested container
+      // (table cell, toggle, callout, header), create a duplicate with the
+      // same tool name and data rather than stealing the DOM node.
+      if (block.holder.closest(`[${DATA_ATTR.nestedBlocks}]`)) {
+        const duplicate = this.api.blocks.insert(
+          block.name,
+          block.preservedData,
+          {},
+          this.api.blocks.getBlocksCount(),
+          false
+        );
+
+        container.appendChild(duplicate.holder);
+        this.api.blocks.setBlockParent(duplicate.id, this.tableBlockId);
+        mountedIds.push(duplicate.id);
+        replacements.set(blockId, duplicate.id);
+        continue;
+      }
+
       container.appendChild(block.holder);
       this.api.blocks.setBlockParent(blockId, this.tableBlockId);
       mountedIds.push(blockId);
     }
-    return mountedIds;
+    return { mountedIds, replacements };
   }
 
   /**
@@ -508,6 +529,12 @@ export class TableCellBlocks {
       return;
     }
 
+    // Guard: skip blocks already mounted in another nested container.
+    // Without this, insertBefore would steal the DOM node from the other container.
+    if (block.holder.closest(`[${DATA_ATTR.nestedBlocks}]`)) {
+      return;
+    }
+
     // Insert at the correct DOM position based on the flat array order,
     // so that pressing Enter on a non-last paragraph inserts the new block
     // right after the current one instead of always at the end of the cell.
@@ -1026,7 +1053,11 @@ export class TableCellBlocks {
   }
 
   /**
-   * Delete blocks by their IDs (in reverse index order to avoid shifting issues)
+   * Delete blocks by their IDs (in reverse index order to avoid shifting issues).
+   * Preserves scroll position because api.blocks.delete() is async — its internal
+   * `await` defers Caret.setToBlock() to microtasks that run AFTER this method returns,
+   * causing unwanted page jumps via element.focus() and window.scrollBy().
+   * We use Promise.all().then() to schedule the scroll restore after all those microtasks.
    */
   public deleteBlocks(blockIds: string[]): void {
     const blockIndices = blockIds
@@ -1034,8 +1065,16 @@ export class TableCellBlocks {
       .filter((index): index is number => index !== undefined)
       .sort((a, b) => b - a);
 
-    blockIndices.forEach(index => {
-      void this.api.blocks.delete(index);
+    const savedScrollY = window.scrollY;
+
+    const deletePromises = blockIndices.map(index => {
+      return this.api.blocks.delete(index);
+    });
+
+    void Promise.all(deletePromises).then(() => {
+      if (window.scrollY !== savedScrollY) {
+        window.scrollTo(0, savedScrollY);
+      }
     });
   }
 

package/src/tools/table/table-core.ts

@@ -1,4 +1,5 @@
 import { twMerge } from '../../components/utils/tw';
+import { DATA_ATTR } from '../../components/constants/data-attributes';
 
 import { CELL_BLOCKS_ATTR } from './table-cell-blocks';
 import type { TableModel } from './table-model';
@@ -631,6 +632,7 @@ export class TableGrid {
     const blocksContainer = document.createElement('div');
 
     blocksContainer.setAttribute(CELL_BLOCKS_ATTR, '');
+    blocksContainer.setAttribute(DATA_ATTR.nestedBlocks, '');
     blocksContainer.style.display = 'flex';
     blocksContainer.style.flexDirection = 'column';
     blocksContainer.style.minHeight = '100%';

package/src/tools/table/table-corner-drag.ts

@@ -0,0 +1,247 @@
+import { show as showTooltip, hide as hideTooltip } from '../../components/utils/tooltip';
+
+const CORNER_DRAG_ATTR = 'data-blok-table-corner-drag';
+
+export interface TableCornerDragOptions {
+  wrapper: HTMLElement;
+  gridEl: HTMLElement;
+  onAddRow: () => void;
+  onAddColumn: () => void;
+  onRemoveLastRow: () => void;
+  onRemoveLastColumn: () => void;
+  onDragStart: () => void;
+  onDragEnd: () => void;
+  getTableSize: () => { rows: number; cols: number };
+  canRemoveLastRow: () => boolean;
+  canRemoveLastColumn: () => boolean;
+  onClickAdd?: () => void;
+}
+
+const DRAG_THRESHOLD = 5;
+
+interface DragState {
+  startX: number;
+  startY: number;
+  unitWidth: number;
+  unitHeight: number;
+  addedRows: number;
+  addedCols: number;
+  pointerId: number;
+  didDrag: boolean;
+}
+
+export class TableCornerDrag {
+  private wrapper: HTMLElement;
+  private gridEl: HTMLElement;
+  private hitZone: HTMLElement;
+  private getTableSize: () => { rows: number; cols: number };
+  private onAddRow: () => void;
+  private onAddColumn: () => void;
+  private onRemoveLastRow: () => void;
+  private onRemoveLastColumn: () => void;
+  private onDragStart: () => void;
+  private onDragEnd: () => void;
+  private canRemoveLastRow: () => boolean;
+  private canRemoveLastColumn: () => boolean;
+  private onClickAdd: (() => void) | null;
+  private dragState: DragState | null = null;
+  private readonly boundMouseEnter: () => void;
+  private readonly boundMouseLeave: () => void;
+  private readonly boundPointerDown: (e: PointerEvent) => void;
+  private readonly boundPointerMove: (e: PointerEvent) => void;
+  private readonly boundPointerUp: (e: PointerEvent) => void;
+
+  constructor(options: TableCornerDragOptions) {
+    this.wrapper = options.wrapper;
+    this.gridEl = options.gridEl;
+    this.getTableSize = options.getTableSize;
+    this.onAddRow = options.onAddRow;
+    this.onAddColumn = options.onAddColumn;
+    this.onRemoveLastRow = options.onRemoveLastRow;
+    this.onRemoveLastColumn = options.onRemoveLastColumn;
+    this.onDragStart = options.onDragStart;
+    this.onDragEnd = options.onDragEnd;
+    this.canRemoveLastRow = options.canRemoveLastRow;
+    this.canRemoveLastColumn = options.canRemoveLastColumn;
+    this.onClickAdd = options.onClickAdd ?? null;
+
+    this.hitZone = document.createElement('div');
+    this.hitZone.setAttribute(CORNER_DRAG_ATTR, '');
+    this.hitZone.setAttribute('contenteditable', 'false');
+    this.hitZone.style.position = 'absolute';
+    this.hitZone.style.width = '36px';
+    this.hitZone.style.height = '36px';
+    this.hitZone.style.cursor = 'nwse-resize';
+    this.hitZone.style.zIndex = '2';
+    this.hitZone.style.pointerEvents = 'auto';
+    this.hitZone.style.bottom = '-36px';
+    this.hitZone.style.right = '-16px';
+
+    this.boundMouseEnter = this.handleMouseEnter.bind(this);
+    this.boundMouseLeave = this.handleMouseLeave.bind(this);
+    this.boundPointerDown = this.handlePointerDown.bind(this);
+    this.boundPointerMove = this.handlePointerMove.bind(this);
+    this.boundPointerUp = this.handlePointerUp.bind(this);
+
+    this.hitZone.addEventListener('mouseenter', this.boundMouseEnter);
+    this.hitZone.addEventListener('mouseleave', this.boundMouseLeave);
+    this.hitZone.addEventListener('pointerdown', this.boundPointerDown);
+
+    this.wrapper.appendChild(this.hitZone);
+  }
+
+  private updateTooltip(): void {
+    const size = this.getTableSize();
+
+    showTooltip(this.hitZone, `${size.cols}\u00D7${size.rows}`, { placement: 'bottom' });
+  }
+
+  private handleMouseEnter(): void {
+    this.updateTooltip();
+  }
+
+  private handleMouseLeave(): void {
+    if (this.dragState !== null) {
+      return;
+    }
+    hideTooltip();
+  }
+
+  private measureUnitHeight(): number {
+    const rows = this.gridEl.querySelectorAll('[data-blok-table-row]');
+    const lastRow = rows[rows.length - 1] as HTMLElement | undefined;
+
+    return lastRow?.offsetHeight || 30;
+  }
+
+  private measureUnitWidth(): number {
+    const firstRow = this.gridEl.querySelector('[data-blok-table-row]');
+
+    if (!firstRow) {
+      return 100;
+    }
+
+    const cells = firstRow.querySelectorAll('[data-blok-table-cell]');
+    const lastCell = cells[cells.length - 1] as HTMLElement | undefined;
+
+    return lastCell?.offsetWidth || 100;
+  }
+
+  private handlePointerDown(e: PointerEvent): void {
+    this.dragState = {
+      startX: e.clientX,
+      startY: e.clientY,
+      unitWidth: this.measureUnitWidth(),
+      unitHeight: this.measureUnitHeight(),
+      addedRows: 0,
+      addedCols: 0,
+      pointerId: e.pointerId,
+      didDrag: false,
+    };
+
+    this.updateTooltip();
+
+    this.hitZone.setPointerCapture(e.pointerId);
+    this.hitZone.addEventListener('pointermove', this.boundPointerMove);
+    this.hitZone.addEventListener('pointerup', this.boundPointerUp);
+  }
+
+  private handlePointerMove(e: PointerEvent): void {
+    if (this.dragState === null) {
+      return;
+    }
+
+    const dx = e.clientX - this.dragState.startX;
+    const dy = e.clientY - this.dragState.startY;
+
+    if (!this.dragState.didDrag) {
+      const distance = Math.sqrt(dx * dx + dy * dy);
+
+      if (distance < DRAG_THRESHOLD) {
+        return;
+      }
+
+      this.dragState.didDrag = true;
+      document.body.style.cursor = 'nwse-resize';
+      document.body.style.userSelect = 'none';
+      this.onDragStart();
+    }
+
+    const { unitHeight, unitWidth } = this.dragState;
+
+    const targetRows = Math.trunc(dy / unitHeight);
+    const targetCols = Math.trunc(dx / unitWidth);
+
+    while (this.dragState.addedRows < targetRows) {
+      this.onAddRow();
+      this.dragState.addedRows++;
+    }
+
+    while (this.dragState.addedRows > targetRows && this.canRemoveLastRow()) {
+      this.onRemoveLastRow();
+      this.dragState.addedRows--;
+    }
+
+    while (this.dragState.addedCols < targetCols) {
+      this.onAddColumn();
+      this.dragState.addedCols++;
+    }
+
+    while (this.dragState.addedCols > targetCols && this.canRemoveLastColumn()) {
+      this.onRemoveLastColumn();
+      this.dragState.addedCols--;
+    }
+
+    this.updateTooltip();
+  }
+
+  private handlePointerUp(_e: PointerEvent): void {
+    if (this.dragState === null) {
+      return;
+    }
+
+    const { didDrag, pointerId } = this.dragState;
+
+    this.dragState = null;
+    hideTooltip();
+    this.hitZone.releasePointerCapture(pointerId);
+    this.hitZone.removeEventListener('pointermove', this.boundPointerMove);
+    this.hitZone.removeEventListener('pointerup', this.boundPointerUp);
+
+    if (!didDrag) {
+      if (this.onClickAdd) {
+        this.onClickAdd();
+      } else {
+        this.onAddRow();
+        this.onAddColumn();
+      }
+    } else {
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+      this.onDragEnd();
+    }
+  }
+
+  public setDisplay(visible: boolean): void {
+    this.hitZone.style.display = visible ? '' : 'none';
+  }
+
+  public setInteractive(interactive: boolean): void {
+    this.hitZone.style.pointerEvents = interactive ? 'auto' : 'none';
+  }
+
+  public destroy(): void {
+    this.hitZone.removeEventListener('mouseenter', this.boundMouseEnter);
+    this.hitZone.removeEventListener('mouseleave', this.boundMouseLeave);
+    this.hitZone.removeEventListener('pointerdown', this.boundPointerDown);
+    this.hitZone.removeEventListener('pointermove', this.boundPointerMove);
+    this.hitZone.removeEventListener('pointerup', this.boundPointerUp);
+    if (this.dragState?.didDrag) {
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    }
+    this.dragState = null;
+    hideTooltip();
+    this.hitZone.remove();
+  }
+}

package/src/tools/table/table-operations.ts

@@ -1,4 +1,5 @@
 import type { API } from '../../../types';
+import { DATA_ATTR } from '../../components/constants/data-attributes';
 
 import type { TableCellBlocks } from './table-cell-blocks';
 import { CELL_BLOCKS_ATTR } from './table-cell-blocks';
@@ -288,16 +289,28 @@ export const mountCellBlocksReadOnly = (
 
       if (!isCellWithBlocks(cellContent)) {
         // Read-only render path must not mutate block state.
-        // Use innerHTML so that legacy HTML markup (e.g. <b>bold</b>) is
-        // interpreted by the browser rather than shown as literal text.
-        container.innerHTML = cellContent;
+        // Wrap in a div with leading-[1.5] so the line-height matches paragraph
+        // blocks used in edit mode (where legacy strings are converted to real
+        // paragraph blocks with that line-height). Without this wrapper, the
+        // text inherits the cell's leading-none, producing shorter cells.
+        const wrapper = document.createElement('div');
+
+        wrapper.className = 'leading-[1.5]';
+        wrapper.innerHTML = cellContent;
+        container.replaceChildren(wrapper);
 
         return;
       }
 
-      // If this container previously rendered legacy text, clear it before mounting holders.
-      if (!hasExistingBlocks && (container.textContent ?? '').length > 0) {
-        container.textContent = '';
+      // Clear the container before (re-)mounting block holders.
+      // This covers two cases:
+      //   1. Legacy text was previously rendered and needs to be replaced with blocks.
+      //   2. Block holders are already mounted (e.g. from edit mode before a
+      //      setReadOnly toggle) — without clearing, the clone-guard below would
+      //      duplicate every holder because it detects them inside a
+      //      [data-blok-nested-blocks] container and appends a cloneNode(true).
+      if (hasExistingBlocks || (container.textContent ?? '').length > 0) {
+        container.replaceChildren();
       }
 
       for (const blockId of cellContent.blocks) {
@@ -313,12 +326,20 @@ export const mountCellBlocksReadOnly = (
           continue;
         }
 
+        // Skip blocks that don't belong to this table.
+        // Corrupted data may contain cross-table references; mounting them
+        // would steal (or clone) DOM nodes from the other table.
+        if (block.parentId !== _tableBlockId) {
+          continue;
+        }
+
         // Guard: if the block holder is already inside another table cell's
-        // blocks container, skip it. Without this check, appendChild would
-        // move (steal) the DOM node from the first table, leaving its cell
-        // empty. This can happen when corrupted data references the same
-        // block in multiple tables.
-        if (block.holder.closest(`[${CELL_BLOCKS_ATTR}]`)) {
+        // blocks container, clone its visual content instead of moving (stealing)
+        // the DOM node. This can happen when corrupted data references the same
+        // block in multiple tables. In read-only mode a deep clone is safe
+        // because the content is non-interactive.
+        if (block.holder.closest(`[${DATA_ATTR.nestedBlocks}]`)) {
+          container.appendChild(block.holder.cloneNode(true));
           continue;
         }
 
@@ -374,8 +395,8 @@ export const normalizeTableData = (
 export const setupKeyboardNavigation = (
   gridEl: HTMLElement,
   cellBlocks: TableCellBlocks | null,
-): void => {
-  gridEl.addEventListener('keydown', (event: KeyboardEvent) => {
+): (() => void) => {
+  const handler = (event: KeyboardEvent): void => {
     const target = event.target as HTMLElement;
     const cell = target.closest<HTMLElement>(`[${CELL_ATTR}]`);
 
@@ -388,7 +409,13 @@ export const setupKeyboardNavigation = (
     if (position) {
       cellBlocks?.handleKeyDown(event, position);
     }
-  });
+  };
+
+  gridEl.addEventListener('keydown', handler);
+
+  return () => {
+    gridEl.removeEventListener('keydown', handler);
+  };
 };
 
 export const SCROLL_OVERFLOW_CLASSES = ['overflow-x-auto', 'overflow-y-hidden'];

package/src/tools/toggle/dom-builder.ts

@@ -88,6 +88,7 @@ export const buildToggleItem = (context: ToggleDOMBuilderContext): ToggleBuildRe
   const childContainerElement = document.createElement('div');
   childContainerElement.className = TOGGLE_CHILDREN_STYLES;
   childContainerElement.setAttribute(TOGGLE_ATTR.toggleChildren, '');
+  childContainerElement.setAttribute(DATA_ATTR.nestedBlocks, '');
   // Block DOM mutations inside the children container from triggering the toggle tool's
   // didMutated → syncBlockDataToYjs path. Child block insertions/removals are tracked
   // via the block hierarchy (parentId / contentIds) and must not create spurious Yjs

package/src/tools/toggle/index.ts

@@ -229,6 +229,31 @@ export class ToggleItem implements BlockTool {
     this.setOpenState(false);
   }
 
+  public setReadOnly(state: boolean): void {
+    if (!this._element) {
+      return;
+    }
+
+    const wasReadOnly = this.readOnly;
+
+    this.readOnly = state;
+
+    // Toggle contentEditable on the content element
+    if (this._contentElement) {
+      this._contentElement.contentEditable = state ? 'false' : 'true';
+    }
+
+    // Manage block changed event subscription
+    if (state && !wasReadOnly) {
+      this.api.events.off('block changed', this.handleBlockChanged);
+    } else if (!state && wasReadOnly) {
+      this.api.events.on('block changed', this.handleBlockChanged);
+    }
+
+    // Update body placeholder visibility (hidden in read-only mode)
+    this.updateBodyPlaceholderVisibility();
+  }
+
   public removed(): void {
     this.api.events.off('block changed', this.handleBlockChanged);
   }

package/src/tools/toggle/toggle-lifecycle.ts

@@ -6,6 +6,7 @@
 
 import type { API } from '../../../types';
 
+import { mountChildBlocks } from '../nested-blocks';
 import { setupPlaceholder } from '../../components/utils/placeholder';
 
 import { TOGGLE_ATTR } from './constants';
@@ -94,11 +95,11 @@ export const updateChildrenVisibility = (
     arrowElement.focus();
   }
 
-  for (const child of children) {
-    if (childContainer && child.holder.parentElement !== childContainer) {
-      childContainer.appendChild(child.holder);
-    }
+  if (childContainer) {
+    mountChildBlocks(childContainer, children);
+  }
 
+  for (const child of children) {
     if (isOpen) {
       child.holder.classList.remove('hidden');
     } else {

package/src/types-internal/jsdom.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Declaration for jsdom (used in CLI for HTML conversion)
+ */
+declare module 'jsdom' {
+  export class JSDOM {
+    constructor(html: string);
+    window: typeof globalThis;
+  }
+}