@jackuait/blok 0.6.0-beta.9 → 0.6.0

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

@@ -19,10 +19,10 @@ import { announce } from '../../utils/announcer';
 import { convertStringToBlockData, isBlockConvertable } from '../../utils/blocks';
 import type { EventsDispatcher } from '../../utils/events';
 import { sanitizeBlocks, clean, composeSanitizerConfig } from '../../utils/sanitizer';
+import { isInsideTableCell, isRestrictedInTableCell } from '../../../tools/table/table-restrictions';
 import type { Caret } from '../caret';
 import type { I18n } from '../i18n';
 import type { YjsManager } from '../yjs';
-
 import type { BlockFactory } from './factory';
 import type { BlockHierarchy } from './hierarchy';
 import type { BlockRepository } from './repository';
@@ -191,6 +191,7 @@ export class BlockOperations {
       replace = false,
       tunes,
       skipYjsSync = false,
+      appendToWorkingArea = false,
     } = options;
 
     const targetIndex = index ?? this.currentBlockIndex + (replace ? 0 : 1);
@@ -204,15 +205,33 @@ export class BlockOperations {
       this.repository.getBlockByIndex(targetIndex)?.unwatchBlockMutations();
     }
 
-    const toolName = tool ?? this.dependencies.config.defaultBlock;
+    const resolvedToolName = (() => {
+      const name = tool ?? this.dependencies.config.defaultBlock;
 
-    if (toolName === undefined) {
-      throw new Error('Could not insert Block. Tool name is not specified.');
-    }
+      if (name === undefined) {
+        throw new Error('Could not insert Block. Tool name is not specified.');
+      }
+
+      // Demote restricted tools to paragraph when inserting inside a table cell.
+      // For replace: check the block being replaced (new block takes its DOM position).
+      // For insert: check the predecessor block (new block is placed after it in the DOM).
+      // Using the block AT targetIndex for non-replace inserts is wrong because that
+      // block may be a child paragraph inside a table cell that gets displaced, while
+      // the new block actually lands at the top level.
+      const neighborBlock = replace
+        ? this.repository.getBlockByIndex(targetIndex)
+        : (this.repository.getBlockByIndex(targetIndex - 1) ?? this.repository.getBlockByIndex(targetIndex));
+
+      if (neighborBlock !== undefined && isInsideTableCell(neighborBlock) && isRestrictedInTableCell(name)) {
+        return this.dependencies.config.defaultBlock ?? 'paragraph';
+      }
+
+      return name;
+    })();
 
     // Bind events immediately for user-created blocks so mutations are tracked right away
     const block = this.factory.composeBlock({
-      tool: toolName,
+      tool: resolvedToolName,
       bindEventsImmediately: true,
       ...(id !== undefined && { id }),
       ...(data !== undefined && { data }),
@@ -235,7 +254,7 @@ export class BlockOperations {
       });
     }
 
-    blocksStore.insert(targetIndex, block, replace);
+    blocksStore.insert(targetIndex, block, replace, appendToWorkingArea);
 
     /**
      * Force call of didMutated event on Block insertion
@@ -245,9 +264,11 @@ export class BlockOperations {
     });
 
     /**
-     * Sync to Yjs data layer (unless caller is handling sync separately)
+     * Sync to Yjs data layer (unless caller is handling sync separately,
+     * or we're inside an atomic operation like paste where all Yjs sync
+     * is deferred until the operation completes)
      */
-    if (!skipYjsSync) {
+    if (!skipYjsSync && !this.yjsSync.isSyncingFromYjs) {
       this.dependencies.YjsManager.addBlock({
         id: block.id,
         type: block.name,
@@ -298,7 +319,7 @@ export class BlockOperations {
   public insertAtEnd(blocksStore: BlocksStore): Block {
     this.currentBlockIndexValue = this.repository.length - 1;
 
-    return this.insert({}, blocksStore);
+    return this.insert({ appendToWorkingArea: true }, blocksStore);
   }
 
   /**
@@ -319,6 +340,15 @@ export class BlockOperations {
         throw new Error('Can\'t find a Block to remove');
       }
 
+      // Clean up parent's contentIds before removing the block
+      const parentBlock = block.parentId !== null
+        ? this.repository.getBlockById(block.parentId)
+        : undefined;
+
+      if (parentBlock !== undefined) {
+        parentBlock.contentIds = parentBlock.contentIds.filter(id => id !== block.id);
+      }
+
       blocksStore.remove(index);
 
       /**
@@ -467,6 +497,17 @@ export class BlockOperations {
       return;
     }
 
+    // Check if the move would place a restricted tool inside a table cell
+    const movingBlock = this.repository.getBlockByIndex(fromIndex);
+    const neighborBlock = this.repository.getBlockByIndex(toIndex);
+
+    if (movingBlock !== undefined && neighborBlock !== undefined &&
+        isInsideTableCell(neighborBlock) && isRestrictedInTableCell(movingBlock.name)) {
+      log(`Warning during 'move' call: '${movingBlock.name}' is restricted in table cells.`, 'warn');
+
+      return;
+    }
+
     // Suppress stopCapturing to keep DOM + Yjs move as single undo entry
     this.suppressStopCapturing = true;
     try {
@@ -765,33 +806,27 @@ export class BlockOperations {
     replace = false,
     blocksStore: BlocksStore
   ): Promise<Block> {
-    // Insert block without syncing to Yjs yet (we'll sync final state after onPaste)
-    const block = this.insert({
-      tool: toolName,
-      replace,
-      skipYjsSync: true,
-    }, blocksStore);
+    // Insert block without syncing to Yjs yet.
+    // Wrap in atomic operation so that child blocks created during rendered()
+    // (e.g., table cell paragraph blocks) also skip Yjs sync.
+    const block = this.yjsSync.withAtomicOperation(() => {
+      return this.insert({
+        tool: toolName,
+        replace,
+        skipYjsSync: true,
+      }, blocksStore);
+    });
+
+    // Wait for the block to be fully rendered before calling onPaste,
+    // because onPaste may change the tool's root element and needs
+    // mutation watchers to be bound first.
+    await block.ready;
 
-    // Suppress auto-sync during paste processing
+    // Call onPaste within atomic operation so child blocks created
+    // during cell initialization also skip Yjs sync.
     this.yjsSync.withAtomicOperation(() => {
-      /**
-       * We need to call onPaste after Block will be ready
-       * because onPaste could change tool's root element, and we need to do that after block.watchBlockMutations() bound
-       * to detect tool root element change
-       * @todo make this.insert() awaitable and remove requestIdleCallback
-       */
-      return void block.ready.then(() => {
-        block.call(BlockToolAPI.ON_PASTE, pasteEvent as unknown as Record<string, unknown>);
-
-        /**
-         * onPaste might cause the tool to replace its root element (e.g., Header changing level).
-         * Since mutation observers are set up asynchronously via requestIdleCallback,
-         * we need to manually refresh the tool element reference here.
-         */
-        block.refreshToolRootElement();
-      }).catch((e) => {
-        log(`${toolName}: onPaste callback call is failed`, 'error', e);
-      });
+      block.call(BlockToolAPI.ON_PASTE, pasteEvent as unknown as Record<string, unknown>);
+      block.refreshToolRootElement();
     });
 
     // Sync final state to Yjs as single operation

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

@@ -201,6 +201,28 @@ export class BlockRepository {
     return previousBlocks.find((block) => !!block.inputs.length);
   }
 
+  /**
+   * Walks up the parentId chain and returns the top-level (root) block.
+   * If the block has no parent, returns it as-is.
+   * Used by selection modules to treat hierarchical blocks (e.g. table cells)
+   * as a single unit rather than selecting child blocks individually.
+   * @param block - the block to resolve
+   * @returns {Block} the root ancestor block
+   */
+  public resolveToRootBlock(block: Block): Block {
+    if (block.parentId === null) {
+      return block;
+    }
+
+    const parent = this.getBlockById(block.parentId);
+
+    if (parent === undefined) {
+      return block;
+    }
+
+    return this.resolveToRootBlock(parent);
+  }
+
   /**
    * Get block at a specific index from the blocks store nodes array
    * @param index - the index

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

@@ -48,6 +48,8 @@ export interface InsertBlockOptions {
   tunes?: { [name: string]: BlockTuneData };
   /** Skip syncing to Yjs (caller handles sync separately) */
   skipYjsSync?: boolean;
+  /** When true, append block to workingArea instead of positioning relative to adjacent blocks */
+  appendToWorkingArea?: boolean;
 }
 
 /**
@@ -105,7 +107,7 @@ export interface ConvertBlockOptions {
  */
 export type BlocksStore = Blocks & {
   [index: number]: Block | undefined;
-  insert(index: number, block: Block, replace?: boolean): void;
+  insert(index: number, block: Block, replace?: boolean, appendToWorkingArea?: boolean): void;
   remove(index: number): void;
   move(toIndex: number, fromIndex: number, skipDOM?: boolean): void;
 };

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

@@ -112,21 +112,43 @@ export class BlockYjsSync {
    * @param fn - Function to execute
    * @param options - Options for controlling the atomic operation behavior
    */
-  public withAtomicOperation<T>(fn: () => T, options?: { extendThroughRAF?: boolean }): T {
+  /**
+   * Begin an atomic operation by incrementing sync count and suppressing stop capturing.
+   *
+   * @returns cleanup function to call when operation completes
+   */
+  private beginAtomicOperation(): () => void {
     this.yjsSyncCount++;
     const operations = this.dependencies.operations;
-    const shouldExtend = options?.extendThroughRAF === true;
 
     if (operations) {
       operations.suppressStopCapturing = true;
     }
 
-    const decrementSyncCount = (): void => {
+    return (): void => {
       this.yjsSyncCount--;
       if (operations && this.yjsSyncCount === 0) {
         operations.suppressStopCapturing = false;
       }
     };
+  }
+
+  /**
+   * End an atomic operation, optionally deferring cleanup through RAF.
+   *
+   * @param cleanup - function to call to decrement sync count
+   * @param extendThroughRAF - if true, defer cleanup until after next animation frame
+   */
+  private endAtomicOperation(cleanup: () => void, extendThroughRAF: boolean): void {
+    if (extendThroughRAF) {
+      requestAnimationFrame(cleanup);
+    } else {
+      cleanup();
+    }
+  }
+
+  public withAtomicOperation<T>(fn: () => T, options?: { extendThroughRAF?: boolean }): T {
+    const cleanup = this.beginAtomicOperation();
 
     try {
       const result = fn();
@@ -134,16 +156,34 @@ export class BlockYjsSync {
       // If extendThroughRAF is true, delay decrementing yjsSyncCount until after requestAnimationFrame callbacks
       // This ensures that DOM updates scheduled by rendered() hooks don't trigger
       // block data sync to Yjs, which would create new undo entries and clear the redo stack
-      if (shouldExtend) {
-        requestAnimationFrame(decrementSyncCount);
-      } else {
-        decrementSyncCount();
-      }
+      this.endAtomicOperation(cleanup, options?.extendThroughRAF === true);
 
       return result;
     } catch (error) {
-      // If an error occurs, decrement immediately
-      decrementSyncCount();
+      cleanup();
+      throw error;
+    }
+  }
+
+  /**
+   * Async version of withAtomicOperation for operations that return promises.
+   * Keeps yjsSyncCount elevated until the async work completes, then optionally
+   * extends through RAF to cover deferred DOM callbacks.
+   *
+   * @param fn - Async function to execute
+   * @param options - Options for controlling the atomic operation behavior
+   */
+  public async withAtomicOperationAsync(
+    fn: () => Promise<void>,
+    options?: { extendThroughRAF?: boolean }
+  ): Promise<void> {
+    const cleanup = this.beginAtomicOperation();
+
+    try {
+      await fn();
+      this.endAtomicOperation(cleanup, options?.extendThroughRAF === true);
+    } catch (error) {
+      cleanup();
       throw error;
     }
   }
@@ -165,25 +205,28 @@ export class BlockYjsSync {
    * @param event - the block change event from YjsManager
    */
   private syncBlockFromYjs(event: BlockChangeEvent): void {
-    const { blockId, type: changeType } = event;
-
-    if (changeType === 'update') {
-      this.handleYjsUpdate(blockId);
+    if (event.type === 'update') {
+      this.handleYjsUpdate(event.blockId);
       return;
     }
 
-    if (changeType === 'move') {
+    if (event.type === 'move') {
       this.handleYjsMove();
       return;
     }
 
-    if (changeType === 'add') {
-      this.handleYjsAdd(blockId);
+    if (event.type === 'add') {
+      this.handleYjsAdd(event.blockId);
+      return;
+    }
+
+    if (event.type === 'batch-add') {
+      this.handleYjsBatchAdd(event.blockIds);
       return;
     }
 
-    if (changeType === 'remove') {
-      this.handleYjsRemove(blockId);
+    if (event.type === 'remove') {
+      this.handleYjsRemove(event.blockId);
     }
   }
 
@@ -221,19 +264,32 @@ export class BlockYjsSync {
         bindEventsImmediately: true,
       });
 
-      // Increment counter to prevent syncing back to Yjs during undo/redo
-      this.yjsSyncCount++;
-      try {
+      // Use atomic operation with RAF extension to prevent DOM mutation observers
+      // from syncing back to Yjs after block replacement
+      this.withAtomicOperation(() => {
         this.handlers.replaceBlock(blockIndex, newBlock);
-      } finally {
-        this.yjsSyncCount--;
-      }
+      }, { extendThroughRAF: true });
     } else {
-      // Just update data
-      this.yjsSyncCount++;
-      void block.setData(data).finally(() => {
-        this.yjsSyncCount--;
-      });
+      // Update data in-place; if tool can't handle it, recreate the block.
+      // Use async atomic operation with RAF extension to keep isSyncingFromYjs
+      // true through the entire setData lifecycle + one RAF frame, preventing
+      // DOM mutation observers from writing back to Yjs and clearing the redo stack.
+      void this.withAtomicOperationAsync(async () => {
+        const success = await block.setData(data);
+
+        if (!success) {
+          const blockIndex = this.handlers.getBlockIndex(block);
+          const newBlock = this.factory.composeBlock({
+            id: block.id,
+            tool: block.name,
+            data,
+            tunes: block.preservedTunes,
+            bindEventsImmediately: true,
+          });
+
+          this.handlers.replaceBlock(blockIndex, newBlock);
+        }
+      }, { extendThroughRAF: true });
     }
   }
 
@@ -290,6 +346,80 @@ export class BlockYjsSync {
     }, { extendThroughRAF: true });
   }
 
+  /**
+   * Handle batch block add from Yjs (undo/redo).
+   *
+   * When multiple blocks are restored at once (e.g. a table + its cell
+   * paragraphs), we use a two-pass approach:
+   *   1. Create ALL blocks and insert them into the blocks array (no DOM).
+   *   2. Activate each block (DOM insert + RENDERED lifecycle hook).
+   *
+   * This ensures that when a parent tool's `rendered()` hook fires (pass 2),
+   * child blocks already exist in BlockManager, so helpers like
+   * `mountBlocksInCell()` can find them by ID.
+   */
+  private handleYjsBatchAdd(blockIds: string[]): void {
+    const yjsBlocks = this.dependencies.YjsManager.toJSON();
+
+    // Collect blocks to create — skip any that already exist
+    const toCreate: Array<{ blockId: string; toolName: string; data: Record<string, unknown>; parentId: string | undefined; targetIndex: number }> = [];
+
+    for (const blockId of blockIds) {
+      if (this.repository.getBlockById(blockId) !== undefined) {
+        continue;
+      }
+
+      const yblock = this.dependencies.YjsManager.getBlockById(blockId);
+
+      if (yblock === undefined) {
+        continue;
+      }
+
+      const toolName = yblock.get('type') as string;
+      const data = this.dependencies.YjsManager.yMapToObject(yblock.get('data') as YMap<unknown>);
+      const parentId = yblock.get('parentId') as string | undefined;
+      const targetIndex = yjsBlocks.findIndex((b) => b.id === blockId);
+
+      if (targetIndex === -1) {
+        continue;
+      }
+
+      toCreate.push({ blockId, toolName, data, parentId: parentId ?? undefined, targetIndex });
+    }
+
+    if (toCreate.length === 0) {
+      return;
+    }
+
+    this.withAtomicOperation(() => {
+      // Pass 1 — create blocks and add to array (no DOM, no RENDERED)
+      const created: Array<{ block: Block; targetIndex: number; parentId: string | undefined }> = [];
+
+      for (const entry of toCreate) {
+        const block = this.factory.composeBlock({
+          id: entry.blockId,
+          tool: entry.toolName,
+          data: entry.data,
+          parentId: entry.parentId,
+          bindEventsImmediately: true,
+        });
+
+        this.blocksStore.addToArray(entry.targetIndex, block);
+        created.push({ block, targetIndex: entry.targetIndex, parentId: entry.parentId });
+      }
+
+      // Pass 2 — activate blocks (DOM insert + RENDERED), then emit events
+      for (const { block, targetIndex, parentId } of created) {
+        this.blocksStore.activateBlock(block);
+        this.handlers.onBlockAdded(block, targetIndex);
+
+        if (parentId !== undefined) {
+          this.handlers.updateIndentation(block);
+        }
+      }
+    }, { extendThroughRAF: true });
+  }
+
   /**
    * Handle block remove from Yjs (undo/redo - removing a previously added block)
    */
@@ -306,17 +436,21 @@ export class BlockYjsSync {
       return;
     }
 
-    // Emit block-removed event BEFORE removal so listeners can inspect
-    // the block's DOM position (e.g., which table cell it's in)
-    this.handlers.onBlockRemoved(block, index);
+    // Keep Yjs sync state active for the full remove lifecycle so listeners
+    // and block.destroy handlers can detect undo/redo-originated removals.
+    this.withAtomicOperation(() => {
+      // Emit block-removed event BEFORE removal so listeners can inspect
+      // the block's DOM position (e.g., which table cell it's in)
+      this.handlers.onBlockRemoved(block, index);
 
-    // Remove from DOM
-    this.blocksStore.remove(index);
+      // Remove from DOM
+      this.blocksStore.remove(index);
 
-    // If all blocks removed, insert a default block
-    if (this.blocksStore.length === 0) {
-      this.handlers.insertDefaultBlock(true);
-    }
+      // If all blocks removed, insert a default block
+      if (this.blocksStore.length === 0) {
+        this.handlers.insertDefaultBlock(true);
+      }
+    });
   }
 
   /**

package/src/components/modules/blockSelection.ts

@@ -65,6 +65,9 @@ export class BlockSelection extends Module {
       b: {},
       i: {},
       u: {},
+      mark: {
+        style: true,
+      },
     };
 
     return composeSanitizerConfig(this.config.sanitizer as SanitizerConfig, baseConfig);

package/src/components/modules/crossBlockSelection.ts

@@ -269,13 +269,21 @@ export class CrossBlockSelection extends Module {
       return;
     }
 
-    const relatedBlock = BlockManager.getBlockByChildNode(mouseEvent.relatedTarget as Node) || this.lastSelectedBlock;
-    const targetBlock = BlockManager.getBlockByChildNode(mouseEvent.target as Node);
+    const rawRelatedBlock = BlockManager.getBlockByChildNode(mouseEvent.relatedTarget as Node) || this.lastSelectedBlock;
+    const rawTargetBlock = BlockManager.getBlockByChildNode(mouseEvent.target as Node);
 
-    if (!relatedBlock || !targetBlock) {
+    if (!rawRelatedBlock || !rawTargetBlock) {
       return;
     }
 
+    /**
+     * Resolve child blocks (e.g. paragraphs inside table cells) to their root parent.
+     * Without this, dragging across a table would select individual cell blocks
+     * from the flat blocks array instead of treating the table as a single unit.
+     */
+    const relatedBlock = BlockManager.resolveToRootBlock(rawRelatedBlock);
+    const targetBlock = BlockManager.resolveToRootBlock(rawTargetBlock);
+
     if (targetBlock === relatedBlock) {
       return;
     }

package/src/components/modules/drag/preview/DragPreview.ts

@@ -23,11 +23,19 @@ export class DragPreview {
     // Reset styles on clone
     clone.className = twMerge(PREVIEW_STYLES.content, isStretched ? 'max-w-none' : '');
 
+    // Set explicit width on clone so percentage-based children (e.g. table cells)
+    // have a sizing reference inside the position:fixed preview container
+    const computedWidth = contentElement.getBoundingClientRect().width;
+
+    if (computedWidth > 0) {
+      clone.style.width = `${computedWidth}px`;
+    }
+
     // Reset margin on the tool's rendered element (first child) to prevent offset
     const toolElement = clone.firstElementChild as HTMLElement | null;
 
     if (toolElement) {
-      toolElement.className = twMerge(toolElement.className, '!m-0');
+      toolElement.className = twMerge(toolElement.className, 'm-0!');
     }
 
     preview.appendChild(clone);
@@ -100,7 +108,7 @@ export class DragPreview {
       const toolElement = clone.firstElementChild as HTMLElement | null;
 
       if (toolElement) {
-        toolElement.className = twMerge(toolElement.className, '!m-0');
+        toolElement.className = twMerge(toolElement.className, 'm-0!');
       }
 
       // Position with cumulative offset