@jackuait/blok 0.10.7 → 0.10.9

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

@@ -441,20 +441,24 @@ export class Toolbar extends Module<ToolbarNodes> {
 
     /**
      * Adjust toolbar button visibility based on context:
-     * - Table cell focus: settings toggler hidden (drag/settings don't apply to cells)
      * - Callout first child: both plus button and settings toggler hidden
      *   to prevent overlap with the callout's emoji icon
+     *
+     * The callout block itself still shows BOTH buttons — the actions container
+     * sits outside the block (positioned via right:100% on the left gutter) and
+     * does not overlap the emoji which is inside the block at pl-8.
+     *
+     * Note: when the toolbar resolves to a parent table block from a focused
+     * cell, the settings toggler must STAY visible — it is wired via
+     * setupDraggable() to drag the parent table, so hiding it would leave the
+     * whole table undraggable while the user edits cell text.
      */
-    const focusIsInsideCell = this.isFocusInsideTableCell();
     const isCalloutFirstChild = this.isFirstChildOfCallout(targetBlock);
-    const isCalloutBlock = targetBlock.name === 'callout';
 
-    // Hide plus button for callout blocks and their first children to avoid
-    // overlap with the callout emoji icon in the left padding area.
-    plusButton.style.display = (isCalloutFirstChild || isCalloutBlock) ? 'none' : '';
+    plusButton.style.display = isCalloutFirstChild ? 'none' : '';
 
     if (settingsToggler) {
-      settingsToggler.style.display = (focusIsInsideCell || isCalloutFirstChild) ? 'none' : '';
+      settingsToggler.style.display = isCalloutFirstChild ? 'none' : '';
     }
 
     /**
@@ -466,7 +470,8 @@ export class Toolbar extends Module<ToolbarNodes> {
      * Skip when the target is the callout itself or its first child — their toolbar
      * buttons render outside the callout's visual background area.
      */
-    const calloutBg = isCalloutFirstChild || targetBlock.name === 'callout'
+    const isCalloutBlock = targetBlock.name === 'callout';
+    const calloutBg = isCalloutFirstChild || isCalloutBlock
       ? null
       : this.getCalloutBackgroundColor(targetBlock);
 
@@ -875,70 +880,48 @@ export class Toolbar extends Module<ToolbarNodes> {
     return parent;
   }
 
-  private isFocusInsideTableCell(): boolean {
-    const active = document.activeElement;
-
-    if (!active) {
-      return false;
-    }
-
-    return active.closest('[data-blok-table-cell-blocks]') !== null;
-  }
-
   /**
-   * Updates toolbar button visibility based on whether a table cell has focus.
-   * The plus button always stays visible; the settings toggler is hidden when
-   * focus is inside a cell and restored when focus moves to a regular block.
+   * Updates toolbar button visibility based on the current hovered block.
+   * Called from the focusin listener so callout first-child state is
+   * refreshed immediately when focus moves, without waiting for the next
+   * hover/moveAndOpen cycle.
    *
-   * Called from the focusin listener so button state is updated immediately
-   * on click, without waiting for the next hover/moveAndOpen cycle.
+   * INVARIANT: the ONLY reason this method may hide the settings toggler
+   * (drag handle) is `isCalloutFirstChild` — a structural property of the
+   * block, NOT where `document.activeElement` currently is. Hiding the drag
+   * handle based on focus position inside nested content (table cells,
+   * code editors, database titles, etc.) will break dragging of the
+   * containing block while the user edits its content. Do NOT add focus-
+   * based or DOM-attribute-based hide branches here. See the arch guard
+   * test in test/unit/components/modules/toolbar/index.test.ts.
    */
-  private updateToolbarButtonsForTableCellFocus(): void {
+  private updateToolbarButtonsForCalloutFirstChild(): void {
     const { plusButton, settingsToggler } = this.nodes;
 
     if (!plusButton) {
       return;
     }
 
-    const focusIsInsideCell = this.isFocusInsideTableCell();
     const isCalloutFirstChild = this.hoveredBlock !== null && this.isFirstChildOfCallout(this.hoveredBlock);
-    const isCalloutBlock = this.hoveredBlock?.name === 'callout';
 
-    plusButton.style.display = (isCalloutFirstChild || isCalloutBlock) ? 'none' : '';
+    plusButton.style.display = isCalloutFirstChild ? 'none' : '';
 
     if (settingsToggler) {
-      settingsToggler.style.display = (focusIsInsideCell || isCalloutFirstChild) ? 'none' : '';
+      settingsToggler.style.display = isCalloutFirstChild ? 'none' : '';
     }
   }
 
   /**
-   * Re-enables pointer-events on the settings toggler (and callout drag zone) after
-   * the actions container has been set to pointer-events: none for left-edge blocks.
+   * Re-enables pointer-events on the settings toggler after the actions
+   * container has been set to pointer-events: none for left-edge blocks.
    *
-   * For callout blocks: also wires the dedicated drag zone as the drag handle and
-   * re-enables the settings toggler so the settings menu remains accessible.
-   * The emoji button (at x=32px) no longer overlaps the actions zone (x=[0,29px])
-   * because the callout uses pl-8 (32px) left padding.
-   *
-   * For all other left-edge blocks (toggle, header with arrow): simply re-enables the
-   * settings toggler so it continues to function as the drag handle.
+   * Left-edge blocks (callout, toggle, header-with-arrow) disable
+   * pointer-events on the actions container so clicks pass through to the
+   * block's own left-edge interactive element (emoji / toggle arrow). The
+   * settings toggler must remain clickable on top so it can still function
+   * as the drag handle and open the block tunes menu.
    */
-  private restoreSettingsTogglerForLeftEdgeBlock(targetBlock: Block): void {
-    if (targetBlock.name === 'callout') {
-      if (this.nodes.settingsToggler) {
-        this.nodes.settingsToggler.style.pointerEvents = 'auto';
-      }
-
-      const calloutDragZone = targetBlock.holder.querySelector<HTMLElement>('[data-callout-drag-zone]');
-
-      if (calloutDragZone) {
-        calloutDragZone.style.pointerEvents = 'auto';
-        targetBlock.setupDraggable(calloutDragZone, this.Blok.DragManager);
-      }
-
-      return;
-    }
-
+  private restoreSettingsTogglerForLeftEdgeBlock(_targetBlock: Block): void {
     if (this.nodes.settingsToggler) {
       this.nodes.settingsToggler.style.pointerEvents = 'auto';
     }
@@ -1264,15 +1247,13 @@ export class Toolbar extends Module<ToolbarNodes> {
     }
 
     /**
-     * Listen for focus changes inside the editor.
-     * When the user clicks/tabs into a table cell, hide the plus button and
-     * settings toggler. When focus moves to a regular block, restore them.
-     *
-     * This runs on every focusin event (not throttled) to ensure buttons
-     * update immediately on click — no 300ms delay.
+     * Listen for focus changes inside the editor so callout first-child
+     * button state refreshes immediately on click/tab — no 300ms delay.
+     * Drag handle visibility must NOT depend on focus position inside
+     * nested content (see updateToolbarButtonsForCalloutFirstChild doc).
      */
     this.readOnlyMutableListeners.on(this.Blok.UI.nodes.wrapper, 'focusin', () => {
-      this.updateToolbarButtonsForTableCellFocus();
+      this.updateToolbarButtonsForCalloutFirstChild();
     });
 
     /**

package/src/components/modules/uiControllers/controllers/keyboard.ts

@@ -492,6 +492,26 @@ export class KeyboardController extends Controller {
       return;
     }
 
+    /**
+     * Layer 18: block undo/redo while a drag is in progress.
+     *
+     * Regression: "wrong block dropped" family. `moveUndoStack` entries capture
+     * `fromIndex`/`toIndex` at record time. Replaying them synchronously while
+     * DragController still holds a live source/target reference mutates the
+     * flat blocks array under the drag's feet — subsequent `handleDrop` then
+     * operates on stale indices and silently drops an unrelated block.
+     *
+     * The Escape handler already guards on `DragManager.isDragging` (see
+     * handleEscape above). Mirror that here: swallow the keystroke so the
+     * drag completes cleanly, then the user can undo.
+     */
+    if (this.Blok.DragManager.isDragging) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      return;
+    }
+
     // Prevent double-firing within 50ms
     const now = Date.now();
 

package/src/components/modules/yjs/block-observer.ts

@@ -1,9 +1,11 @@
 import * as Y from 'yjs';
 
-import type {
-  BlockChangeEvent,
-  BlockChangeCallback,
-  TransactionOrigin,
+import {
+  LOCAL_ORIGIN_TAGS,
+  type BlockChangeEvent,
+  type BlockChangeCallback,
+  type LocalOriginTag,
+  type TransactionOrigin,
 } from './types';
 
 /**
@@ -66,34 +68,64 @@ export class BlockObserver {
 
   /**
    * Map transaction origin to event origin.
+   *
+   * Input shapes:
+   *  - `Y.UndoManager` instance → `'undo'` or `'redo'`
+   *  - `LocalOriginTag` string  → mapped by the exhaustive switch below
+   *  - anything else            → `'remote'` (treated as a peer update)
+   *
+   * IMPORTANT: the switch is exhaustive over `LOCAL_ORIGIN_TAGS`. Adding a
+   * new tag there without teaching this switch is a compile error via the
+   * `satisfies never` guard, and the enumeration test in
+   * `block-observer.test.ts` catches any runtime drift. Do not add a local
+   * origin tag that silently falls through to `'remote'` — that is the
+   * exact bug class that broke `ensureCellHasBlock` → table row deletion.
    */
   public mapTransactionOrigin(origin: unknown): TransactionOrigin {
-    if (origin === 'local') {
-      return 'local';
-    }
-
-    if (origin === 'load') {
-      return 'load';
-    }
-
     if (this.undoManager && origin === this.undoManager) {
       return this.undoManager.undoing ? 'undo' : 'redo';
     }
 
-    // Handle custom move origins for our application-level move undo/redo
-    if (origin === 'move') {
-      return 'local';
+    if (!this.isLocalOriginTag(origin)) {
+      return 'remote';
     }
 
-    if (origin === 'move-undo') {
-      return 'undo';
-    }
-
-    if (origin === 'move-redo') {
-      return 'redo';
+    switch (origin) {
+      case 'local':
+        return 'local';
+      case 'load':
+        return 'load';
+      // `no-capture` is used by `DocumentStore.transactWithoutCapture` for
+      // local writes that must bypass the undo stack (auto-repair inserts,
+      // drag-move parent rewrites replayed by undo/redo, etc). They are
+      // LOCAL authoring writes — mapping them to `'remote'` would make
+      // `BlockYjsSync` call `setData(staleYjsData)` on the authoring block
+      // mid-operation and wipe any in-memory state the tool had written
+      // ahead of Yjs (e.g. Table's local model after `model.addRow()`).
+      case 'no-capture':
+        return 'local';
+      case 'move':
+        return 'local';
+      case 'move-undo':
+        return 'undo';
+      case 'move-redo':
+        return 'redo';
+      default: {
+        const _exhaustive: never = origin;
+
+        return _exhaustive;
+      }
     }
+  }
 
-    return 'remote';
+  /**
+   * Type guard for known local-authored origin tags.
+   */
+  private isLocalOriginTag(value: unknown): value is LocalOriginTag {
+    return (
+      typeof value === 'string' &&
+      (LOCAL_ORIGIN_TAGS as readonly string[]).includes(value)
+    );
   }
 
   /**
@@ -210,13 +242,33 @@ export class BlockObserver {
   }
 
   /**
-   * Handle map-level changes (data update).
+   * Handle map-level changes (data update, tunes update, or top-level
+   * yblock key changes like `parentId` / `contentIds`).
+   *
+   * When a remote client reparents a block, the changed Y.Map is the
+   * yblock itself — not a nested `data`/`tunes` sub-map. Detect both
+   * cases so we always emit an update event for the affected block id.
    */
   private handleMapEvent(ymap: Y.Map<unknown>, origin: TransactionOrigin): void {
     if (this.yblocks === null) {
       return;
     }
 
+    // Direct yblock change (e.g. parentId/contentIds written on the yblock itself).
+    if (this.isTopLevelYblock(ymap)) {
+      const id: unknown = ymap.get('id');
+
+      if (typeof id === 'string') {
+        this.emitChange({
+          type: 'update',
+          blockId: id,
+          origin,
+        });
+      }
+
+      return;
+    }
+
     const yblock = this.findParentBlock(ymap);
 
     if (yblock === undefined) {
@@ -230,6 +282,18 @@ export class BlockObserver {
     });
   }
 
+  /**
+   * Returns true if the given Y.Map is one of the top-level yblocks tracked
+   * in the blocks array.
+   */
+  private isTopLevelYblock(ymap: Y.Map<unknown>): boolean {
+    if (this.yblocks === null) {
+      return false;
+    }
+
+    return this.yblocks.toArray().includes(ymap);
+  }
+
   /**
    * Find the parent block Y.Map for a nested Y.Map (data or tunes).
    */

package/src/components/modules/yjs/document-store.ts

@@ -1,7 +1,7 @@
 import * as Y from 'yjs';
 
 import type { YBlockSerializer, YjsOutputBlockData } from './serializer';
-import type { TransactionOrigin } from './types';
+import type { LocalOriginTag } from './types';
 import { equals } from '../../utils/object';
 
 // Re-export YjsOutputBlockData as DocumentStoreBlockData for consistency
@@ -17,9 +17,15 @@ type DocumentStoreBlockData = YjsOutputBlockData;
  */
 export class DocumentStore {
   /**
-   * Yjs document instance
+   * Yjs document instance.
+   *
+   * PRIVATE by design: all writes MUST route through `transact` or
+   * `transactWithoutCapture` so the origin passes the `LocalOriginTag`
+   * type barrier. Exposing the raw Y.Doc lets callers bypass the
+   * whitelist and silently reintroduce the class of bugs that
+   * `BlockObserver.mapTransactionOrigin` exists to prevent.
    */
-  public readonly ydoc: Y.Doc = new Y.Doc();
+  private readonly ydoc: Y.Doc = new Y.Doc();
 
   /**
    * Yjs array containing all blocks
@@ -97,7 +103,11 @@ export class DocumentStore {
    * @param toIndex - Target index (the final position where the block should end up)
    * @param origin - Transaction origin
    */
-  public moveBlock(id: string, toIndex: number, origin: TransactionOrigin): void {
+  public moveBlock(
+    id: string,
+    toIndex: number,
+    origin: 'local' | 'move-undo' | 'move-redo'
+  ): void {
     const fromIndex = this.findBlockIndex(id);
 
     if (fromIndex === -1) {
@@ -112,7 +122,7 @@ export class DocumentStore {
     // Use the origin for the transaction:
     // - 'local' for user-initiated moves (we use 'move' so Yjs UndoManager doesn't track them)
     // - 'move-undo' / 'move-redo' for our custom undo/redo (maps to 'undo'/'redo' for DOM sync)
-    const transactionOrigin = origin === 'local' ? 'move' : origin;
+    const transactionOrigin: LocalOriginTag = origin === 'local' ? 'move' : origin;
 
     this.transact(() => {
       const yblock = this.yblocks.get(fromIndex);
@@ -150,12 +160,14 @@ export class DocumentStore {
    * @param id - Block id
    * @param key - Data property key
    * @param value - New value
+   * @returns true if a Yjs write actually occurred (value changed), false if the
+   *          equality guard short-circuited the write.
    */
-  public updateBlockData(id: string, key: string, value: unknown): void {
+  public updateBlockData(id: string, key: string, value: unknown): boolean {
     const yblock = this.getBlockById(id);
 
     if (yblock === undefined) {
-      return;
+      return false;
     }
 
     const ydata = yblock.get('data') as Y.Map<unknown>;
@@ -166,12 +178,14 @@ export class DocumentStore {
     // (e.g., marker updates in list items during undo/redo, or table content
     // arrays that are reference-different but structurally identical)
     if (equals(currentValue, value)) {
-      return;
+      return false;
     }
 
     this.transact(() => {
       ydata.set(key, value);
     }, 'local');
+
+    return true;
   }
 
   /**
@@ -199,11 +213,21 @@ export class DocumentStore {
    * @param lastEditedAt - Timestamp in milliseconds
    * @param lastEditedBy - User ID, or null
    */
-  public updateBlockMetadata(id: string, lastEditedAt: number, lastEditedBy: string | null): void {
+  public updateBlockMetadata(id: string, lastEditedAt: number, lastEditedBy: string | null): boolean {
     const yblock = this.getBlockById(id);
 
     if (yblock === undefined) {
-      return;
+      return false;
+    }
+
+    // Defensive equality guard — if both fields already match, skip the write to avoid
+    // adding an empty/no-op entry to the Yjs undo stack.
+    const currentEditedAt = yblock.get('lastEditedAt');
+    const currentEditedBy = yblock.get('lastEditedBy');
+    const editedByMatches = lastEditedBy === null || currentEditedBy === lastEditedBy;
+
+    if (currentEditedAt === lastEditedAt && editedByMatches) {
+      return false;
     }
 
     this.transact(() => {
@@ -213,6 +237,8 @@ export class DocumentStore {
         yblock.set('lastEditedBy', lastEditedBy);
       }
     }, 'local');
+
+    return true;
   }
 
   /**
@@ -230,7 +256,7 @@ export class DocumentStore {
    * @param fn - Function containing Yjs operations to execute atomically
    * @param origin - Transaction origin
    */
-  public transact(fn: () => void, origin: TransactionOrigin): void {
+  public transact(fn: () => void, origin: LocalOriginTag): void {
     this.ydoc.transact(fn, origin);
   }
 

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

@@ -43,10 +43,23 @@ export class YjsManager extends Module {
   private blockObserver: BlockObserver;
 
   /**
-   * Flag to track if move group is active
+   * Flag to track if move group is active.
+   *
+   * Read via the `isInMoveGroup` getter by `BlockManager.setBlockParent`,
+   * which routes its Yjs writes through `transactWithoutCapture` while this
+   * flag is true so the parent change attaches to the in-flight move entry
+   * instead of landing on Y.UndoManager as a separate stack item.
    */
   private isMoveGroupActive = false;
 
+  /**
+   * Whether a drag-backed move group is currently open.
+   * See `isMoveGroupActive`.
+   */
+  public get isInMoveGroup(): boolean {
+    return this.isMoveGroupActive;
+  }
+
   /**
    * Constructor - initializes all components
    */
@@ -67,6 +80,42 @@ export class YjsManager extends Module {
       this.documentStore.moveBlock(blockId, toIndex, origin);
     });
 
+    // Set up parent-restore callback — invoked by UndoHistory during
+    // move-undo/move-redo on drag-reparent entries.
+    //
+    // Writes parentId (and the two parents' contentIds) to Yjs under
+    // `transactWithoutCapture` so Y.UndoManager does not record the replay
+    // as a new stack item, then drives the in-memory BlockManager reparent
+    // directly via `reparentFromHistoryReplay`. Going direct avoids the
+    // `handleYjsUpdate` path's parentId-delete blind spot (that handler
+    // gates reconciliation on `yblock.has('parentId')` which is false after
+    // a delete, so a non-root → root undo would otherwise silently skip).
+    this.undoHistory.setParentRestoreCallback((blockId, parentId) => {
+      const yblock = this.documentStore.getBlockById(blockId);
+
+      if (yblock === undefined) {
+        return;
+      }
+
+      this.documentStore.transactWithoutCapture(() => {
+        if (parentId !== null) {
+          yblock.set('parentId', parentId);
+        } else {
+          yblock.delete('parentId');
+        }
+      });
+
+      const blockManager = this.Blok?.BlockManager;
+
+      if (blockManager !== undefined) {
+        const block = blockManager.getBlockById(blockId);
+
+        if (block !== undefined) {
+          blockManager.reparentFromHistoryReplay(block, parentId);
+        }
+      }
+    });
+
     // Set up observation
     this.blockObserver.observe(this.documentStore.yblocks, this.undoHistory.undoManager);
   }
@@ -148,10 +197,10 @@ export class YjsManager extends Module {
    * @param key - Data property key
    * @param value - New value
    */
-  public updateBlockData(id: string, key: string, value: unknown): void {
+  public updateBlockData(id: string, key: string, value: unknown): boolean {
     this.undoHistory.markCaretBeforeChange();
 
-    this.documentStore.updateBlockData(id, key, value);
+    return this.documentStore.updateBlockData(id, key, value);
   }
 
   /**
@@ -170,8 +219,8 @@ export class YjsManager extends Module {
    * @param lastEditedAt - Timestamp in milliseconds
    * @param lastEditedBy - User ID, or null
    */
-  public updateBlockMetadata(id: string, lastEditedAt: number, lastEditedBy: string | null): void {
-    this.documentStore.updateBlockMetadata(id, lastEditedAt, lastEditedBy);
+  public updateBlockMetadata(id: string, lastEditedAt: number, lastEditedBy: string | null): boolean {
+    return this.documentStore.updateBlockMetadata(id, lastEditedAt, lastEditedBy);
   }
 
   /**
@@ -259,8 +308,35 @@ export class YjsManager extends Module {
    */
   public transactMoves(fn: () => void): void {
     this.isMoveGroupActive = true;
-    this.undoHistory.transactMoves(fn);
-    this.isMoveGroupActive = false;
+    try {
+      this.undoHistory.transactMoves(fn);
+    } finally {
+      this.isMoveGroupActive = false;
+    }
+  }
+
+  /**
+   * Attach a parent change to the in-flight move entry so `undo`/`redo`
+   * restores the block's parent atomically with its position.
+   *
+   * Called from `BlockManager.setBlockParent` when a drag-backed move group
+   * is open (see `isInMoveGroup`). The accompanying Yjs parentId write must
+   * use `transactWithoutCapture` — otherwise Y.UndoManager records it as a
+   * separate stack item and the drag splits into a two-step undo.
+   * @param blockId - id of the block being reparented
+   * @param fromParentId - parent id before the reparent (null for root)
+   * @param toParentId - parent id after the reparent (null for root)
+   */
+  public recordParentChangeForPendingMove(
+    blockId: string,
+    fromParentId: string | null,
+    toParentId: string | null
+  ): void {
+    this.undoHistory.recordParentChangeForPendingMove(
+      blockId,
+      fromParentId,
+      toParentId
+    );
   }
 
   /**

package/src/components/modules/yjs/types.ts

@@ -10,8 +10,9 @@ export type BlockChangeEvent =
   | { type: 'batch-add'; blockIds: string[]; origin: TransactionOrigin };
 
 /**
- * Transaction origin types.
- * Includes 'move' and 'move-undo'/'move-redo' for custom move handling.
+ * Transaction origin types AFTER classification by
+ * `BlockObserver.mapTransactionOrigin`. This is what downstream consumers
+ * (e.g. `BlockYjsSync`) see on a `BlockChangeEvent`.
  */
 export type TransactionOrigin =
   | 'local'
@@ -23,6 +24,30 @@ export type TransactionOrigin =
   | 'move-undo'
   | 'move-redo';
 
+/**
+ * Whitelist of raw origin tags that our own code passes to `Y.Doc.transact`.
+ *
+ * Adding a new local-authored origin tag? You MUST:
+ *   1. Add it here.
+ *   2. Handle it explicitly in `BlockObserver.mapTransactionOrigin`.
+ *
+ * The mapper's exhaustiveness check and the `block-observer.test.ts`
+ * enumeration test will otherwise fail CI — preventing a repeat of the
+ * table-row-removal bug where `'no-capture'` silently fell through to
+ * `'remote'` and made `BlockYjsSync` clobber the authoring tool's state
+ * with stale Yjs data mid-operation.
+ */
+export const LOCAL_ORIGIN_TAGS = [
+  'local',
+  'load',
+  'no-capture',
+  'move',
+  'move-undo',
+  'move-redo',
+] as const;
+
+export type LocalOriginTag = (typeof LOCAL_ORIGIN_TAGS)[number];
+
 /**
  * Callback for block change events
  */
@@ -47,11 +72,19 @@ export interface CaretHistoryEntry {
 
 /**
  * Represents a single move operation within a move group.
+ *
+ * Drag-reparent flows attach `fromParentId`/`toParentId` so that undo/redo
+ * can restore the parent relationship atomically alongside the array move.
+ * Without this, a drag-reparent splits across two history stacks
+ * (`moveUndoStack` for the array move, Y.UndoManager for the parentId write)
+ * and requires two Cmd+Z presses to fully reverse.
  */
 export interface SingleMoveEntry {
   blockId: string;
   fromIndex: number;
   toIndex: number;
+  fromParentId?: string | null;
+  toParentId?: string | null;
 }
 
 /**