@jackuait/blok 0.10.10 → 0.10.12

package/src/tools/callout/index.ts

@@ -67,10 +67,26 @@ export class CalloutTool implements BlockTool {
   private _emojiPicker: EmojiPicker | null = null;
   private _colorPicker: ColorPickerHandle | null = null;
   private blockId?: string;
+  /**
+   * Text captured from a source block during conversion (paragraph -> callout).
+   * Callout stores its rich content inside child blocks rather than in `data`,
+   * so the first-time `rendered()` hook seeds a child paragraph with this
+   * text — preserving the original content across the conversion.
+   */
+  private _pendingChildText: string | null = null;
 
   constructor({ data, api, readOnly, block }: BlockToolConstructorOptions<CalloutData, CalloutConfig>) {
     this.api = api;
     this.readOnly = readOnly;
+
+    const importedText = typeof (data as Record<string, unknown>).__importedText === 'string'
+      ? (data as Record<string, unknown>).__importedText as string
+      : null;
+
+    if (importedText !== null && importedText.length > 0) {
+      this._pendingChildText = importedText;
+    }
+
     this._data = this.normalizeData(data);
 
     if (block) {
@@ -156,13 +172,23 @@ export class CalloutTool implements BlockTool {
       const blockIndex = this.api.blocks.getBlockIndex(this.blockId);
 
       if (blockIndex !== undefined) {
-        const newBlock = this.api.blocks.insertInsideParent(this.blockId, blockIndex + 1);
+        // If conversion handed us source text to preserve, seed the first
+        // child paragraph with it (single-shot — cleared immediately).
+        const seedText = this._pendingChildText;
+
+        this._pendingChildText = null;
+
+        const childData = seedText !== null && seedText.length > 0
+          ? { text: seedText }
+          : undefined;
+
+        const newBlock = this.api.blocks.insertInsideParent(this.blockId, blockIndex + 1, childData);
 
         // Manually append the new child's holder — insertInsideParent places it in the
         // flat block list but doesn't know about our childContainer DOM.
         this._dom.childContainer.appendChild(newBlock.holder);
 
-        this.api.caret.setToBlock(newBlock.id, 'start');
+        this.api.caret.setToBlock(newBlock.id, seedText !== null ? 'end' : 'start');
       }
     }
   }
@@ -392,11 +418,20 @@ export class CalloutTool implements BlockTool {
 
   public static get conversionConfig(): ConversionConfig<CalloutData> {
     return {
-      import: (): CalloutData => ({
+      /**
+       * Callout stores its text inside child blocks, not in its own `data`.
+       * On import we capture the source block's text through a transient
+       * `__importedText` field that the callout constructor reads and the
+       * `rendered()` hook uses to seed the first child paragraph with the
+       * original content — preserving the text across paragraph -> callout
+       * conversion.
+       */
+      import: (stringToImport: string): CalloutData => ({
         emoji: DEFAULT_EMOJI,
         textColor: null,
         backgroundColor: null,
-      }),
+        __importedText: stringToImport,
+      } as CalloutData),
     };
   }
 

package/src/tools/list/data-normalizer.ts

@@ -10,7 +10,7 @@ import type { ListItemConfig, ListItemData, ListItemStyle } from './types';
  * Type for legacy list item format (used for type guard)
  */
 type LegacyListItemFormat = {
-  items: Array<{ content: string; checked?: boolean | string }>;
+  items: Array<string | { content?: string; text?: string; checked?: boolean | string }>;
   style?: ListItemStyle;
   start?: number;
 };
@@ -117,8 +117,17 @@ export const normalizeListItemData = (
   // This provides backward compatibility when legacy data is passed directly to the tool
   if (isLegacyFormat(data)) {
     const firstItem = data.items[0];
-    const text = firstItem?.content || '';
-    const checked = firstItem?.checked || false;
+    // handle string items and old {text,checked} shape
+    const extractLegacy = (item: typeof firstItem): { text: string; checked: boolean | string | undefined } => {
+      if (typeof item === 'string') {
+        return { text: item, checked: false };
+      }
+      if (item !== null && typeof item === 'object') {
+        return { text: item.content ?? item.text ?? '', checked: item.checked ?? false };
+      }
+      return { text: '', checked: false };
+    };
+    const { text, checked } = extractLegacy(firstItem);
 
     return {
       text,

package/src/tools/table/index.ts

@@ -675,9 +675,10 @@ export class Table implements BlockTool {
     // (blocks deleted but matrix not updated); persisting them causes DOM
     // node stealing and data loss on subsequent renders.
     const tableId = this.blockId ?? '';
+    const gridEl = this.gridElement;
 
-    data.content = data.content.map(row =>
-      row.map(cell => {
+    data.content = data.content.map((row, rowIndex) =>
+      row.map((cell, colIndex) => {
         if (!isCellWithBlocks(cell)) {
           return cell;
         }
@@ -688,6 +689,35 @@ export class Table implements BlockTool {
           return block != null && (block.parentId ?? '') === tableId;
         });
 
+        // Recover from a stale model snapshot: if the model says this cell is
+        // empty but the live DOM still has child blocks parented to the table
+        // here, harvest their ids from the DOM. Without this guard, a
+        // mid-render snapshot can persist empty cells to Yjs and become an
+        // attractor state that later undo presses revert to — see
+        // table-undo-redo-orphans regression.
+        if (filtered.length === 0 && gridEl) {
+          const cellEl = gridEl.querySelector<HTMLElement>(
+            `[${CELL_ROW_ATTR}="${rowIndex}"][${CELL_COL_ATTR}="${colIndex}"]`
+          );
+          const container = cellEl?.querySelector<HTMLElement>(`[${CELL_BLOCKS_ATTR}]`);
+          const harvested = container
+            ? Array.from(container.querySelectorAll<HTMLElement>('[data-blok-id]'))
+              .map(el => el.getAttribute('data-blok-id') ?? '')
+              .filter(id => {
+                if (!id) {
+                  return false;
+                }
+                const block = this.api.blocks.getById?.(id);
+
+                return block != null && (block.parentId ?? '') === tableId;
+              })
+            : [];
+
+          if (harvested.length > 0) {
+            return { ...cell, blocks: harvested };
+          }
+        }
+
         return { ...cell, blocks: filtered };
       })
     );
@@ -772,6 +802,8 @@ export class Table implements BlockTool {
       return;
     }
 
+    const isSyncReplay = this.api.blocks.isSyncingFromYjs;
+
     this.runStructuralOp(() => {
       const setDataContent = this.cellBlocks?.initializeCells(this.initialContent ?? []) ?? this.initialContent ?? [];
 
@@ -782,9 +814,14 @@ export class Table implements BlockTool {
         return;
       }
 
-      // When undoing reverts content to empty, the grid has default dimensions
-      // but initializeCells([]) mounted zero blocks. Pre-populate the model
-      // with empty cell entries so populateNewCells can place blocks correctly.
+      // When an undo replay reverts content to empty, the DOM grid has its
+      // default dimensions but the model has zero rows. Reflect the grid
+      // shape in the model with empty cells so subsequent operations have
+      // valid bounds. Do NOT call populateNewCells here — fabricating new
+      // paragraph blocks during a Yjs replay creates orphans that survive
+      // the next undo cycle (regression: table-undo-redo-orphans).
+      // If Yjs actually contains child blocks for those cells they will
+      // arrive via separate block-add events.
       if (this.api.blocks.isSyncingFromYjs && setDataContent.length === 0 && gridEl) {
         const emptyGridContent = Array.from(gridEl.querySelectorAll(`[${ROW_ATTR}]`), (row) => {
           const cellCount = row.querySelectorAll(`[${CELL_ATTR}]`).length;
@@ -796,8 +833,6 @@ export class Table implements BlockTool {
           ...this.model.snapshot(),
           content: emptyGridContent,
         });
-
-        populateNewCells(gridEl, this.cellBlocks);
       } else {
         this.model.replaceAll({
           ...this.model.snapshot(),
@@ -825,6 +860,23 @@ export class Table implements BlockTool {
     const snapSet = this.model.snapshot();
     applyCellColors(gridEl, snapSet.content);
     applyCellPlacements(gridEl, snapSet.content);
+
+    if (isSyncReplay) {
+      // Catch blocks already restored by sibling Yjs ops in this same replay
+      // batch — they may be sitting at the top level waiting to be reattached
+      // to their original cell. Without this, multi-cell undo restoration
+      // leaves cell content as orphan top-level blocks.
+      this.cellBlocks?.reclaimReferencedBlocks();
+      // Yjs sometimes restores sibling blocks AFTER this sync transaction
+      // commits. Schedule a second pass on the next microtask so blocks that
+      // arrive late are still attached to their cells.
+      void Promise.resolve().then(() => {
+        if (currentGeneration !== this.setDataGeneration) {
+          return;
+        }
+        this.cellBlocks?.reclaimReferencedBlocks();
+      });
+    }
   }
 
   public onPaste(event: HTMLPasteEvent): void {

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

@@ -1,7 +1,7 @@
 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 { CELL_ATTR, ROW_ATTR, CELL_ROW_ATTR, CELL_COL_ATTR } from './table-core';
 import type { TableModel } from './table-model';
 import type { LegacyCellContent, CellContent } from './types';
 import { isCellWithBlocks } from './types';
@@ -353,7 +353,9 @@ export class TableCellBlocks {
    * - Cells that already have block references get those blocks mounted.
    * - If referenced blocks are missing from BlockManager, a fallback paragraph is created.
    */
-  public initializeCells(content: LegacyCellContent[][]): CellContent[][] {
+  public initializeCells(
+    content: LegacyCellContent[][]
+  ): CellContent[][] {
     const rowElements = this.gridElement.querySelectorAll(`[${ROW_ATTR}]`);
     const normalizedContent: CellContent[][] = [];
 
@@ -437,6 +439,63 @@ export class TableCellBlocks {
     return normalizedContent;
   }
 
+  /**
+   * After a setData/render rebuild, reclaim any blocks the model references
+   * whose holders are not yet mounted in their model cell. This catches blocks
+   * that were restored via separate Yjs ops in a different transaction order
+   * — without it the restored block would float at the top level as an orphan
+   * (regression: table-undo-redo-orphans, multi-cell undo restoration).
+   */
+  public reclaimReferencedBlocks(): void {
+    const snapshot = this.model.snapshot();
+
+    snapshot.content.forEach((row, rowIndex) => {
+      row.forEach((cellContent, colIndex) => {
+        if (!isCellWithBlocks(cellContent) || cellContent.blocks.length === 0) {
+          return;
+        }
+
+        const cell = this.gridElement.querySelector<HTMLElement>(
+          `[${CELL_ROW_ATTR}="${rowIndex}"][${CELL_COL_ATTR}="${colIndex}"]`
+        );
+
+        if (!cell) {
+          return;
+        }
+
+        const container = cell.querySelector<HTMLElement>(`[${CELL_BLOCKS_ATTR}]`);
+
+        if (!container) {
+          return;
+        }
+
+        for (const blockId of cellContent.blocks) {
+          const getIndex = this.api.blocks.getBlockIndex;
+          const getByIndex = this.api.blocks.getBlockByIndex;
+
+          if (typeof getIndex !== 'function' || typeof getByIndex !== 'function') {
+            return;
+          }
+
+          const index = getIndex(blockId);
+
+          if (index === undefined) {
+            continue;
+          }
+          const block = getByIndex(index);
+
+          if (!block) {
+            continue;
+          }
+          if (container.contains(block.holder)) {
+            continue;
+          }
+          this.claimBlockForCell(cell, blockId);
+        }
+      });
+    });
+  }
+
   /**
    * Remove placeholder attributes from contenteditable elements inside a cell container.
    * Blocks in table cells should feel like plain table fields, not standalone paragraphs.
@@ -635,7 +694,14 @@ export class TableCellBlocks {
    * When a block is removed, ensure no cell is left empty.
    */
   private handleBlockMutation = (data: unknown): void => {
-    if (this.isStructuralOpActive()) {
+    // While a structural op (setData / paste / row-col change) is rebuilding
+    // the table, defer events so they don't operate on stale DOM. EXCEPT for
+    // Yjs replay: an undo/redo that restores a previously-owned cell block
+    // fires block-added DURING the table's own setData, and discarding it
+    // would leave the restored block as a top-level orphan
+    // (regression: table-undo-redo-orphans). Process those immediately —
+    // recordedCellPos lookup below will route the block back to its cell.
+    if (this.isStructuralOpActive() && !this.api.blocks.isSyncingFromYjs) {
       this.deferredEvents.push(data);
 
       return;
@@ -674,6 +740,27 @@ export class TableCellBlocks {
       return;
     }
 
+    // Yjs undo replay: a block this table previously owned is being restored.
+    // The model's contentGrid still references its id from a prior render but
+    // the DOM is empty (we deliberately did not fabricate a replacement, see
+    // table-undo-redo-orphans regression). Reattach it to the recorded cell
+    // before falling through to adjacency-based heuristics, otherwise the
+    // restored block lands as a top-level orphan.
+    const recordedCellPos = this.model.findCellForBlock(detail.target.id);
+
+    if (recordedCellPos) {
+      const cellEl = this.gridElement.querySelector<HTMLElement>(
+        `[${CELL_ROW_ATTR}="${recordedCellPos.row}"][${CELL_COL_ATTR}="${recordedCellPos.col}"]`
+      );
+
+      if (cellEl) {
+        this.claimBlockForCell(cellEl, detail.target.id);
+        this.cellsPendingCheck.delete(cellEl);
+
+        return;
+      }
+    }
+
     const blockIndex = detail.index;
 
     if (blockIndex === undefined) {

package/types/api/blocks.d.ts

@@ -189,9 +189,10 @@ export interface Blocks {
    *
    * @param parentId - id of the parent block
    * @param insertIndex - flat block index where the new block should appear
+   * @param childData - optional data override for the child block (default: empty paragraph)
    * @returns BlockAPI for the newly created child block
    */
-  insertInsideParent(parentId: string, insertIndex: number): BlockAPI;
+  insertInsideParent(parentId: string, insertIndex: number, childData?: BlockToolData): BlockAPI;
 
   /**
    * Execute a function within a transaction.