@jackuait/blok 0.13.1 → 0.14.0

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

@@ -310,6 +310,31 @@ export class BlockOperations {
       this.transferParentLinkToNewBlock(replacedBlockId, block, replacedParentId);
     }
 
+    /**
+     * Non-replace insert positioned directly after a block that lives inside a
+     * `column` must inherit that column as its parent. The block-settings
+     * "Duplicate" action inserts the copy at the source block's index + 1 with
+     * no follow-up reparent; without this, the copy keeps a null parentId and
+     * the Saver emits it as a root sibling — orphaned out of the column even
+     * though the store already mounted its holder inside the column DOM.
+     *
+     * Scoped to a column predecessor (not every parented predecessor) so that
+     * internal callers which seed/reparent explicitly — split, paste,
+     * insertInsideParent, column seeding (whose predecessor is the column_list,
+     * not a column) — are untouched and never see a transient wrong-parent
+     * state. `forceTopLevel` callers opt out entirely.
+     */
+    if (!replace && !forceTopLevel && block.parentId === null) {
+      const predecessor = this.repository.getBlockByIndex(targetIndex - 1);
+      const predecessorParent = predecessor?.parentId !== null && predecessor?.parentId !== undefined
+        ? this.repository.getBlockById(predecessor.parentId)
+        : undefined;
+
+      if (predecessorParent !== undefined && predecessorParent.name === 'column') {
+        this.hierarchy.setBlockParent(block, predecessorParent.id);
+      }
+    }
+
     /**
      * Update the raw currentBlockIndex BEFORE firing the mutation event so
      * that listeners (e.g. TableCellBlocks.handleBlockMutation) see the
@@ -434,19 +459,57 @@ export class BlockOperations {
         parentBlock.contentIds = parentBlock.contentIds.filter(id => id !== block.id);
       }
 
-      // Promote children to root level when a parent block is removed
-      for (const childId of block.contentIds) {
-        const childBlock = this.repository.getBlockById(childId);
+      /**
+       * Removing a columns wrapper (`column` or `column_list`) drops its ENTIRE
+       * descendant subtree rather than promoting children to root.
+       *
+       * A column / column_list is pure layout: its children only make sense
+       * inside it. Promoting them (the generic toggle/callout behaviour below)
+       * leaks the deleted column's content out to the document root and — for a
+       * nested column_list — strands structurally-invalid `column` blocks at
+       * root (a column may only live inside a column_list). The flat blocks
+       * array is the Saver's source of truth, so descendants left in it
+       * resurface in the output even though their holders were detached when the
+       * wrapper's holder was removed. Splice the whole subtree out so nothing
+       * survives orphaned.
+       *
+       * Other container tools (toggle, callout, toggleable header) keep the
+       * promote-to-root behaviour: deleting the container preserves its body.
+       */
+      const isColumnsWrapper = block.name === 'column' || block.name === 'column_list';
+      const descendants = isColumnsWrapper ? this.collectDescendants(block) : [];
+
+      if (isColumnsWrapper) {
+        // Detach every block in the subtree first so a nested column /
+        // column_list descendant's removed() hook finds no children and its
+        // auto-unwrap is a no-op while we tear the subtree down.
+        for (const descendant of descendants) {
+          descendant.parentId = null;
+          descendant.contentIds = [];
+        }
+      } else {
+        // Promote children to root level when a (non-columns) parent block is removed
+        this.promoteChildrenToRoot(block, block.contentIds);
+      }
 
-        if (childBlock === undefined) {
+      blocksStore.remove(index);
+
+      // Splice the columns subtree's descendants out of the flat array + Yjs.
+      // The wrapper's holder.remove() above already detached their DOM; this
+      // removes their model entries so the Saver never re-emits them.
+      for (const descendant of descendants) {
+        const descendantIndex = this.repository.getBlockIndex(descendant);
+
+        if (descendantIndex < 0) {
           continue;
         }
 
-        childBlock.parentId = null;
-        childBlock.holder.classList.remove('hidden');
-      }
+        blocksStore.remove(descendantIndex);
 
-      blocksStore.remove(index);
+        if (!skipYjsSync) {
+          this.dependencies.YjsManager.removeBlock(descendant.id);
+        }
+      }
 
       /**
        * Force call of didMutated event on Block removal
@@ -494,6 +557,27 @@ export class BlockOperations {
         this.currentBlockIndexValue = 0;
       }
 
+      /**
+       * A `column` is pure layout — it exists only to host child blocks. When
+       * the block just removed was its LAST child, the now-empty column has
+       * nothing to lay out, so remove it too. Deleting the column fires its
+       * removed() hook, which unwraps the column_list when this drops the list
+       * to a single column (see Column.removed -> unwrapColumnListIfCollapsed).
+       *
+       * `parentBlock.contentIds` was already pruned of the removed child above,
+       * so an empty list means a childless column. Fire-and-forget, mirroring
+       * the async unwrap it may trigger; the recursive remove re-resolves the
+       * column's index, so a shifted flat array never targets the wrong block.
+       */
+      if (
+        parentBlock !== undefined &&
+        parentBlock.name === 'column' &&
+        parentBlock.contentIds.length === 0 &&
+        this.repository.getBlockIndex(parentBlock) >= 0
+      ) {
+        void this.removeBlock(parentBlock, addLastBlock, skipYjsSync, blocksStore);
+      }
+
       this.assertHierarchyInvariantInDev('removeBlock');
 
       resolve();
@@ -615,6 +699,83 @@ export class BlockOperations {
    * @param childIds - Array of child block IDs to reparent
    * @param newParentId - New parent block ID
    */
+  /**
+   * Depth-first collection of every descendant block beneath `block`,
+   * resolved through the live `contentIds` links. Cycle-safe via a visited
+   * set. Used to drop a whole columns subtree (column / column_list) on
+   * removal so no descendant is left orphaned in the flat blocks array.
+   * @param block - root of the subtree (excluded from the result)
+   */
+  private collectDescendants(block: Block): Block[] {
+    const result: Block[] = [];
+    const visited = new Set<string>([block.id]);
+    const stack = [...block.contentIds];
+
+    while (stack.length > 0) {
+      const childId = stack.pop();
+
+      if (childId === undefined || visited.has(childId)) {
+        continue;
+      }
+
+      visited.add(childId);
+
+      const childBlock = this.repository.getBlockById(childId);
+
+      if (childBlock === undefined) {
+        continue;
+      }
+
+      result.push(childBlock);
+      stack.push(...childBlock.contentIds);
+    }
+
+    return result;
+  }
+
+  /**
+   * Promote the given child blocks to root level (parentId = null) and unhide
+   * their holders. Used when a non-columns container (toggle/callout/header) is
+   * removed so its body survives at root.
+   *
+   * Lift each surviving child's holder out of the container's
+   * `[data-blok-toggle-children]` container to immediately before the
+   * container's own holder, BEFORE the caller's `blocksStore.remove()` runs
+   * `container.holder.remove()` — which destroys EVERY descendant holder. Left
+   * nested, a promoted child's holder would be wiped, leaving the model saying
+   * "at root" while the live holder no longer exists.
+   *
+   * The lift is SCOPED to children whose IMMEDIATE container is a
+   * toggle-children container — the promote-and-preserve tools
+   * (toggle/callout/toggleable-header) all mount their direct children there.
+   * Self-managing containers like table/database keep their children in their
+   * own cell containers and tear that subtree down themselves, so their holders
+   * must stay nested and are deliberately not lifted. The match must be on the
+   * IMMEDIATE container, not any ancestor: a table cell block sitting inside a
+   * toggle has an ANCESTOR toggle-children container, but its immediate
+   * container is the cell — lifting it would leak the table's cells to root.
+   * @param container - the block being removed
+   * @param childIds - ids of the removed container's direct children
+   */
+  private promoteChildrenToRoot(container: Block, childIds: string[]): void {
+    const containerInDom = container.holder.parentElement !== null;
+
+    for (const childId of childIds) {
+      const childBlock = this.repository.getBlockById(childId);
+
+      if (childBlock === undefined) {
+        continue;
+      }
+
+      childBlock.parentId = null;
+      childBlock.holder.classList.remove('hidden');
+
+      if (containerInDom && childBlock.holder.parentElement?.matches('[data-blok-toggle-children]') === true) {
+        container.holder.before(childBlock.holder);
+      }
+    }
+  }
+
   private reparentChildren(childIds: string[], newParentId: string): void {
     for (const childId of childIds) {
       const childBlock = this.repository.getBlockById(childId);
@@ -707,6 +868,8 @@ export class BlockOperations {
      */
     const newToolCanHostChildren = newTool === 'toggle' ||
       newTool === 'callout' ||
+      newTool === 'column_list' ||
+      newTool === 'column' ||
       (newTool === 'header' && (data as { isToggleable?: boolean }).isToggleable === true);
 
     if (oldContentIds.length > 0 && !newToolCanHostChildren) {
@@ -791,6 +954,42 @@ export class BlockOperations {
      */
     const destinationParentId = neighborBlock !== undefined ? neighborBlock.parentId : null;
 
+    /**
+     * Column-boundary clamp (keyboard / public-api move only).
+     *
+     * A column's blocks sit contiguously in the flat array, immediately
+     * before the next sibling column's blocks. A naive flat move-down on the
+     * LAST block of a column (or move-up on the FIRST) lands it next to a
+     * block in the ADJACENT column; the cross-container auto-heal below would
+     * then re-parent it into that sibling column — ejecting it out of its own
+     * column. Block-settings "move down/up" and the keyboard shortcuts must
+     * reorder WITHIN the column only, never cross the column edge.
+     *
+     * Clamp to a no-op when: the moving block lives in a `column`, and the
+     * destination neighbour belongs to a DIFFERENT parent (the move would
+     * cross the column boundary). Within-column reorders keep the same parent,
+     * so they are never clamped.
+     *
+     * Skipped while a Yjs move group is open (the drag path): DragController
+     * legitimately drags blocks across columns and assigns the parent itself.
+     */
+    if (
+      movingBlock !== undefined
+      && !this.dependencies.YjsManager.isInMoveGroup
+    ) {
+      const movingParent = movingBlock.parentId !== null
+        ? this.repository.getBlockById(movingBlock.parentId)
+        : undefined;
+
+      if (
+        movingParent !== undefined
+        && movingParent.name === 'column'
+        && destinationParentId !== movingBlock.parentId
+      ) {
+        return;
+      }
+    }
+
     // Suppress stopCapturing to keep DOM + Yjs move as single undo entry
     this.suppressStopCapturing = true;
     try {

package/src/components/modules/blockManager/yjs-sync.ts

@@ -596,9 +596,30 @@ export class BlockYjsSync {
 
       // Promote children to root level before removing the parent block.
       // This matches removeBlock() in operations.ts — without this,
-      // children whose DOM is inside the toggle's container are destroyed
+      // children whose DOM is inside the parent's container are destroyed
       // along with the parent, and children in the blocks array become
       // orphaned with a stale parentId pointing to a deleted block.
+      //
+      // Beyond the model promotion (parentId = null), the child's DOM holder
+      // must be LIFTED out of the parent's subtree before blocksStore.remove()
+      // calls parent.holder.remove() — that destroys EVERY descendant holder,
+      // including children that survive at root (e.g. when undo tears down a
+      // column_list and its columns, the leaf holders nested inside the doomed
+      // column subtree would be wiped even though the model promotes them to
+      // root, leaving model "at root" but the live holder gone). Yjs deletes a
+      // nested structure parent-first, so lifting each direct child one level —
+      // to immediately before the parent's own holder — walks every surviving
+      // descendant out to the document root across the cascade.
+      //
+      // Scope the lift to children whose IMMEDIATE container is a preserve-body
+      // container: a toggle-children container (toggle/callout/header) or a
+      // columns structure (a column inside the columns row, or a leaf inside a
+      // column's own container). Self-managing containers (table/database) keep
+      // their children in their own cell containers and tear that subtree down
+      // themselves — their cells must stay nested, so they are not lifted (a
+      // table deleted inside a column would otherwise leak its cells to root).
+      const parentHolderInDom = block.holder.parentElement !== null;
+
       for (const childId of block.contentIds) {
         const childBlock = this.repository.getBlockById(childId);
 
@@ -608,6 +629,20 @@ export class BlockYjsSync {
 
         childBlock.parentId = null;
         childBlock.holder.classList.remove('hidden');
+
+        // Every branch keys on the IMMEDIATE container, never an ancestor: a
+        // table/database cell sitting inside a toggle or column has a
+        // preserve-body ANCESTOR, but its immediate container is the cell —
+        // lifting it would leak the self-managing container's cells to root.
+        const immediateContainer = childBlock.holder.parentElement;
+        const isPreserveBodyChild =
+          immediateContainer?.matches('[data-blok-toggle-children]') === true ||
+          immediateContainer?.matches('[data-blok-columns]') === true ||
+          immediateContainer?.parentElement?.matches('[data-blok-column]') === true;
+
+        if (parentHolderInDom && isPreserveBodyChild && block.holder.contains(childBlock.holder)) {
+          block.holder.before(childBlock.holder);
+        }
       }
 
       // Remove from DOM

package/src/components/modules/caret.ts

@@ -523,11 +523,48 @@ export class Caret extends Module {
       return true;
     }
 
-    const getBlockToNavigate = (): Block | null => {
-      if (nextBlock !== null) {
+    /**
+     * Horizontal navigation across a container boundary must NOT slide into a
+     * sibling cell/column. When the next flat-array block belongs to the same
+     * outermost container (e.g. a sibling column of the same column_list) but a
+     * DIFFERENT DOM container than the current block, resolve to the block after
+     * the whole container instead. Sibling blocks stacked in the SAME column
+     * (same DOM container) keep their normal in-place move.
+     */
+    const resolveNextAcrossContainer = (): Block | null => {
+      if (nextBlock === null || currentBlock.parentId === null) {
+        return nextBlock;
+      }
+
+      const sameDomContainer = currentBlock.holder.parentElement !== null &&
+        currentBlock.holder.parentElement === nextBlock.holder.parentElement;
+
+      if (sameDomContainer) {
+        return nextBlock;
+      }
+
+      const containerId = this.resolveContainerToExit(currentBlock.parentId);
+
+      if (!this.shouldExitContainer(currentBlock, nextBlock, containerId)) {
         return nextBlock;
       }
 
+      /**
+       * Exiting a column boundary horizontally must escape the WHOLE column_list
+       * to the block after it — never slide sideways into the adjacent sibling
+       * column. (Sibling blocks stacked in the same column took the same-DOM-
+       * container fast path above and never reach here.)
+       */
+      return this.findFirstBlockAfterParent(containerId);
+    };
+
+    const getBlockToNavigate = (): Block | null => {
+      const resolvedNextBlock = resolveNextAcrossContainer();
+
+      if (resolvedNextBlock !== null) {
+        return resolvedNextBlock;
+      }
+
       /**
        * This code allows to exit from the last non-initial tool:
        * https://github.com/codex-team/editor.js/issues/1103
@@ -591,8 +628,45 @@ export class Caret extends Module {
       return true;
     }
 
-    if (previousBlock !== null && navigationAllowed) {
-      this.setToBlock(previousBlock, this.positions.END);
+    /**
+     * Horizontal navigation across a container boundary must NOT slide into a
+     * sibling cell/column. When the previous flat-array block belongs to the
+     * same outermost container (e.g. a sibling column of the same column_list)
+     * but a DIFFERENT DOM container, resolve to the block before the whole
+     * container instead. Sibling blocks stacked in the SAME column keep their
+     * normal in-place move.
+     */
+    const resolvePreviousAcrossContainer = (): Block | null => {
+      if (previousBlock === null || currentBlock.parentId === null) {
+        return previousBlock;
+      }
+
+      const sameDomContainer = currentBlock.holder.parentElement !== null &&
+        currentBlock.holder.parentElement === previousBlock.holder.parentElement;
+
+      if (sameDomContainer) {
+        return previousBlock;
+      }
+
+      const containerId = this.resolveContainerToExit(currentBlock.parentId);
+
+      if (!this.shouldExitContainer(currentBlock, previousBlock, containerId)) {
+        return previousBlock;
+      }
+
+      /**
+       * Exiting a column boundary horizontally must escape the WHOLE column_list
+       * to the block before it — never slide sideways into the adjacent sibling
+       * column. (Sibling blocks stacked in the same column took the same-DOM-
+       * container fast path above and never reach here.)
+       */
+      return this.findFirstBlockBeforeParent(containerId);
+    };
+
+    const blockToNavigate = resolvePreviousAcrossContainer();
+
+    if (blockToNavigate !== null && navigationAllowed) {
+      this.setToBlock(blockToNavigate, this.positions.END);
 
       return true;
     }
@@ -694,27 +768,26 @@ export class Caret extends Module {
     }
 
     /**
-     * If current block is inside a table cell (has parentId), check if we should
-     * exit the table. This handles two cases:
-     * 1. nextBlock is in a different cell of the same table → skip to block after table
-     * 2. nextBlock is null (last block in flat list) → table is at the end
+     * If current block is inside a container (has parentId), check if we should
+     * exit the whole container. This handles:
+     * 1. nextBlock is in a different cell/column of the same container → skip to
+     *    the block after the container (never slide into a sibling column)
+     * 2. nextBlock is null (last block in flat list) → container is at the end
      */
-    const shouldExitParent = currentBlock.parentId !== null && (
-      nextBlock === null ||
-      nextBlock.parentId === currentBlock.parentId ||
-      nextBlock.id === currentBlock.parentId
-    );
+    const containerToExit = currentBlock.parentId !== null
+      ? this.resolveContainerToExit(currentBlock.parentId)
+      : null;
 
-    if (shouldExitParent && currentBlock.parentId !== null) {
-      const blockAfterTable = this.findFirstBlockAfterParent(currentBlock.parentId);
+    if (containerToExit !== null && this.shouldExitContainer(currentBlock, nextBlock, containerToExit)) {
+      const blockAfterContainer = this.findFirstBlockAfterParent(containerToExit);
 
-      if (blockAfterTable !== null) {
-        this.setToBlockAtXPosition(blockAfterTable, caretX, true);
+      if (blockAfterContainer !== null) {
+        this.setToBlockAtXPosition(blockAfterContainer, caretX, true);
 
         return true;
       }
 
-      // No block after table — create one
+      // No block after the container — create one
       const newBlock = BlockManager.insertAtEnd();
 
       this.setToBlock(newBlock, this.positions.START);
@@ -820,18 +893,17 @@ export class Caret extends Module {
 
     /**
      * If current block is inside a container, the "previous block" in the flat
-     * array may belong to a DIFFERENT cell of the SAME parent (e.g., a sibling
-     * cell of the same table). Navigating to it would jump across cells, which
-     * Notion-style navigation should treat as exiting the container UP.
+     * array may belong to a DIFFERENT cell/column of the SAME container (e.g., a
+     * sibling column of the same column_list). Navigating to it would jump
+     * across the layout, which Notion-style navigation should treat as exiting
+     * the WHOLE container UP — past the column_list, not into a sibling column.
      */
-    const shouldExitParent = currentBlock.parentId !== null && (
-      previousBlock === null ||
-      previousBlock.parentId === currentBlock.parentId ||
-      previousBlock.id === currentBlock.parentId
-    );
+    const containerToExit = currentBlock.parentId !== null
+      ? this.resolveContainerToExit(currentBlock.parentId)
+      : null;
 
-    if (shouldExitParent && currentBlock.parentId !== null) {
-      const blockBeforeContainer = this.findFirstBlockBeforeParent(currentBlock.parentId);
+    if (containerToExit !== null && this.shouldExitContainer(currentBlock, previousBlock, containerToExit)) {
+      const blockBeforeContainer = this.findFirstBlockBeforeParent(containerToExit);
 
       if (blockBeforeContainer !== null) {
         this.setToBlockAtXPosition(blockBeforeContainer, caretX, false);
@@ -872,8 +944,14 @@ export class Caret extends Module {
   }
 
   /**
-   * Find the first block after a parent block (e.g., a table) by scanning the flat
-   * block array and skipping blocks whose parentId matches.
+   * Find the first block after a parent container by scanning the flat block
+   * array and skipping every block that belongs to the container's subtree.
+   *
+   * The container may be a single-level nest (table cell) or a multi-level nest
+   * (column_list > column > block). A block belongs to the container when the
+   * container's id appears anywhere on its ancestor chain, so blocks nested two
+   * levels deep (a paragraph inside a column inside the column_list) are skipped
+   * too — without that, ArrowDown/ArrowRight would land back inside the layout.
    */
   private findFirstBlockAfterParent(parentBlockId: string): Block | null {
     const { BlockManager } = this.Blok;
@@ -884,7 +962,103 @@ export class Caret extends Module {
       return null;
     }
 
-    return blocks.slice(parentIndex + 1).find(b => b.parentId !== parentBlockId) ?? null;
+    return blocks
+      .slice(parentIndex + 1)
+      .find(b => !this.isWithinContainer(b, parentBlockId)) ?? null;
+  }
+
+  /**
+   * Resolves the outermost container block that a nested block should exit when
+   * vertical/horizontal navigation crosses out of it.
+   *
+   * For a single-level nest (table cell) this is just `parentId`. For a
+   * multi-level nest (a block inside a `column`, the column inside a
+   * `column_list`) we must climb to the `column_list` so navigation exits the
+   * WHOLE layout instead of sliding into the sibling column. We climb the
+   * parentId chain to the topmost ancestor block that is still resolvable;
+   * when the immediate parent block is not registered (as in the table case),
+   * the parentId itself is the container to exit.
+   * @param parentId - immediate parentId of the navigating block
+   */
+  private resolveContainerToExit(parentId: string): string {
+    const getBlockById = this.Blok.BlockManager.getBlockById?.bind(this.Blok.BlockManager);
+
+    if (getBlockById === undefined) {
+      return parentId;
+    }
+
+    const parent = getBlockById(parentId);
+
+    if (parent === undefined || parent.parentId === null) {
+      return parentId;
+    }
+
+    return this.resolveContainerToExit(parent.parentId);
+  }
+
+  /**
+   * Whether `block` lives inside the container identified by `containerId`,
+   * i.e. the container appears anywhere on the block's parentId chain. Used to
+   * decide when a flat-array neighbour belongs to the same layout we are
+   * exiting (e.g. a sibling column of the same column_list).
+   * @param block - candidate block to test
+   * @param containerId - id of the container to test against
+   */
+  private isWithinContainer(block: Block, containerId: string): boolean {
+    const ancestorId = block.parentId;
+
+    if (ancestorId === null) {
+      return false;
+    }
+
+    if (ancestorId === containerId) {
+      return true;
+    }
+
+    const getBlockById = this.Blok.BlockManager.getBlockById?.bind(this.Blok.BlockManager);
+
+    if (getBlockById === undefined) {
+      return false;
+    }
+
+    const ancestor = getBlockById(ancestorId);
+
+    if (ancestor === undefined) {
+      return false;
+    }
+
+    return this.isWithinContainer(ancestor, containerId);
+  }
+
+  /**
+   * Decides whether navigating from a nested `currentBlock` to its flat-array
+   * neighbour `candidate` should be treated as exiting the whole container
+   * rather than an in-place caret move. True when:
+   * - there is no neighbour (the layout is at the document edge), or
+   * - the neighbour belongs to the SAME outermost container subtree (e.g. a
+   *   sibling column of the same column_list), or
+   * - the neighbour IS the container itself (an ancestor of the current block).
+   *
+   * Same-DOM-container sibling moves are handled earlier by the fast path and
+   * never reach this check.
+   * @param currentBlock - the block the caret is leaving
+   * @param candidate - the flat-array neighbour caret would move to
+   * @param containerId - outermost container resolved for currentBlock
+   */
+  private shouldExitContainer(currentBlock: Block, candidate: Block | null, containerId: string): boolean {
+    if (currentBlock.parentId === null) {
+      return false;
+    }
+
+    if (candidate === null) {
+      return true;
+    }
+
+    if (candidate.id === containerId) {
+      return true;
+    }
+
+    return this.isWithinContainer(candidate, containerId);
   }
 
   /**