@jackuait/blok 0.10.0-beta.9 → 0.10.1

package/src/tools/table/index.ts

@@ -54,8 +54,10 @@ import type { PendingHighlight } from './table-row-col-action-handler';
 import { TableRowColControls } from './table-row-col-controls';
 import type { RowColAction } from './table-row-col-controls';
 import { registerAdditionalRestrictedTools } from './table-restrictions';
+import { TableCornerDrag } from './table-corner-drag';
 import { TableScrollHaze } from './table-scroll-haze';
 import type { CellPlacement, ClipboardBlockData, LegacyCellContent, TableCellsClipboard, TableData, TableConfig } from './types';
+import { isCellWithBlocks } from './types';
 
 const DEFAULT_ROWS = 3;
 const DEFAULT_COLS = 3;
@@ -93,6 +95,7 @@ export class Table implements BlockTool {
   private rowColControls: TableRowColControls | null = null;
   private cellBlocks: TableCellBlocks | null = null;
   private cellSelection: TableCellSelection | null = null;
+  private cornerDrag: TableCornerDrag | null = null;
   private scrollHaze: TableScrollHaze | null = null;
   private element: HTMLDivElement | null = null;
   private gridElement: HTMLElement | null = null;
@@ -102,6 +105,8 @@ export class Table implements BlockTool {
   private pendingHighlight: PendingHighlight | null = null;
   private isNewTable = false;
   private unregisterRestrictedTools: (() => void) | null = null;
+  private gridPasteCleanup: (() => void) | null = null;
+  private keyboardNavCleanup: (() => void) | null = null;
 
   /**
    * Generation counter for setData calls.
@@ -193,12 +198,18 @@ export class Table implements BlockTool {
     this.resize = null;
     this.addControls?.destroy();
     this.addControls = null;
+    this.cornerDrag?.destroy();
+    this.cornerDrag = null;
     this.rowColControls?.destroy();
     this.rowColControls = null;
     this.cellSelection?.destroy();
     this.cellSelection = null;
     this.scrollHaze?.destroy();
     this.scrollHaze = null;
+    this.gridPasteCleanup?.();
+    this.gridPasteCleanup = null;
+    this.keyboardNavCleanup?.();
+    this.keyboardNavCleanup = null;
   }
 
   /**
@@ -256,6 +267,8 @@ export class Table implements BlockTool {
     newTbody: Element,
     blockHolders: Map<string, HTMLElement>
   ): void {
+    const mounted = new Set<string>();
+
     content.forEach((rowData, r) => {
       rowData.forEach((cellContent, c) => {
         if (typeof cellContent === 'string') {
@@ -283,8 +296,9 @@ export class Table implements BlockTool {
         cellContent.blocks.forEach(blockId => {
           const holder = blockHolders.get(blockId);
 
-          if (holder) {
+          if (holder && !mounted.has(blockId)) {
             container.appendChild(holder);
+            mounted.add(blockId);
           }
         });
       });
@@ -323,6 +337,7 @@ export class Table implements BlockTool {
   private initSubsystems(gridEl: HTMLElement): void {
     this.initResize(gridEl);
     this.initAddControls(gridEl);
+    this.initCornerDrag(gridEl);
     this.initRowColControls(gridEl);
     this.initCellSelection(gridEl);
     this.initGridPasteListener(gridEl);
@@ -482,7 +497,7 @@ export class Table implements BlockTool {
 
     if (!this.readOnly) {
       this.initCellBlocks(gridEl);
-      setupKeyboardNavigation(gridEl, this.cellBlocks);
+      this.keyboardNavCleanup = setupKeyboardNavigation(gridEl, this.cellBlocks);
     }
 
     return wrapper;
@@ -558,6 +573,64 @@ export class Table implements BlockTool {
     }
   }
 
+  /**
+   * Toggle read-only mode in place without re-rendering.
+   * Entering readonly tears down all interactive subsystems and cell blocks;
+   * exiting readonly recreates them.
+   */
+  public setReadOnly(state: boolean): void {
+    const wrapper = this.element;
+    const gridEl = this.gridElement;
+
+    if (!wrapper || !gridEl) {
+      return;
+    }
+
+    this.readOnly = state;
+
+    if (state) {
+      // Entering readonly: tear down interactive subsystems
+      this.teardownSubsystems();
+      this.cellBlocks?.destroy();
+      this.cellBlocks = null;
+
+      // Remove grip overlay
+      if (this.gripOverlay) {
+        this.gripOverlay.remove();
+        this.gripOverlay = null;
+      }
+
+      // Update wrapper classes and attributes
+      WRAPPER_EDIT_CLASSES.forEach(cls => wrapper.classList.remove(cls));
+      wrapper.setAttribute('data-blok-table-readonly', '');
+
+      // Mount cell content as non-interactive
+      const snap = this.model.snapshot();
+
+      mountCellBlocksReadOnly(gridEl, snap.content, this.api, this.blockId ?? '');
+    } else {
+      // Exiting readonly: restore interactive subsystems
+      wrapper.removeAttribute('data-blok-table-readonly');
+      WRAPPER_EDIT_CLASSES.forEach(cls => wrapper.classList.add(cls));
+
+      // Create grip overlay
+      const overlay = document.createElement('div');
+
+      overlay.setAttribute('data-blok-table-grip-overlay', '');
+      overlay.style.position = 'absolute';
+      overlay.style.inset = '0';
+      overlay.style.pointerEvents = 'none';
+      overlay.style.zIndex = '3';
+      wrapper.appendChild(overlay);
+      this.gripOverlay = overlay;
+
+      // Initialize cell blocks and subsystems
+      this.initCellBlocks(gridEl);
+      this.keyboardNavCleanup = setupKeyboardNavigation(gridEl, this.cellBlocks);
+      this.initSubsystems(gridEl);
+    }
+  }
+
   /**
    * Remove blocks that claim this table as parent but are not referenced in any cell.
    *
@@ -595,7 +668,28 @@ export class Table implements BlockTool {
   }
 
   public save(_blockContent: HTMLElement): TableData {
-    return this.model.snapshot();
+    const data = this.model.snapshot();
+
+    // Filter out block IDs that don't belong to this table.
+    // Corrupted data may contain cross-table references; persisting them
+    // causes DOM node stealing and data loss on subsequent renders.
+    data.content = data.content.map(row =>
+      row.map(cell => {
+        if (!isCellWithBlocks(cell)) {
+          return cell;
+        }
+
+        const filtered = cell.blocks.filter(blockId => {
+          const block = this.api.blocks.getById?.(blockId);
+
+          return !block || block.parentId === this.blockId;
+        });
+
+        return { ...cell, blocks: filtered };
+      })
+    );
+
+    return data;
   }
 
   public validate(savedData: TableData): boolean {
@@ -900,6 +994,10 @@ export class Table implements BlockTool {
       wrapper: this.element,
       grid: gridEl,
       i18n: this.api.i18n,
+      getTableSize: () => ({
+        rows: this.model.rows,
+        cols: this.model.cols,
+      }),
       getNewColumnWidth: () => {
         const colWidths = this.model.colWidths ?? readPixelWidths(gridEl);
 
@@ -1040,6 +1138,131 @@ export class Table implements BlockTool {
     }
   }
 
+  private initCornerDrag(gridEl: HTMLElement): void {
+    this.cornerDrag?.destroy();
+
+    if (!this.element) {
+      return;
+    }
+
+    this.cornerDrag = new TableCornerDrag({
+      wrapper: this.element,
+      gridEl,
+      onAddRow: () => {
+        this.runStructuralOp(() => {
+          this.grid.addRow(gridEl);
+          this.model.addRow();
+          populateNewCells(gridEl, this.cellBlocks);
+          updateHeadingStyles(this.gridElement, this.model.withHeadings);
+          updateHeadingColumnStyles(this.gridElement, this.model.withHeadingColumn);
+        });
+      },
+      onAddColumn: () => {
+        this.runStructuralOp(() => {
+          const colWidths = this.model.colWidths ?? readPixelWidths(gridEl);
+          const halfWidth = this.model.initialColWidth !== undefined
+            ? Math.round((this.model.initialColWidth / 2) * 100) / 100
+            : computeHalfAvgWidth(colWidths);
+          const newWidths = [...colWidths, halfWidth];
+
+          this.grid.addColumn(gridEl, undefined, colWidths, halfWidth);
+          this.model.addColumn(undefined, halfWidth);
+          this.model.setColWidths(newWidths);
+          applyPixelWidths(gridEl, newWidths);
+          enableScrollOverflow(this.ensureScrollContainer());
+          populateNewCells(gridEl, this.cellBlocks);
+          updateHeadingColumnStyles(this.gridElement, this.model.withHeadingColumn);
+        });
+      },
+      onRemoveLastRow: () => {
+        this.runStructuralOp(() => {
+          const rowCount = this.grid.getRowCount(gridEl);
+
+          if (rowCount <= 1) {
+            return;
+          }
+
+          const { blocksToDelete } = this.model.deleteRow(rowCount - 1);
+
+          this.cellBlocks?.deleteBlocks(blocksToDelete);
+          this.grid.deleteRow(gridEl, rowCount - 1);
+        });
+      },
+      onRemoveLastColumn: () => {
+        this.runStructuralOp(() => {
+          const colCount = this.grid.getColumnCount(gridEl);
+
+          if (colCount <= 1) {
+            return;
+          }
+
+          const { blocksToDelete } = this.model.deleteColumn(colCount - 1);
+
+          this.cellBlocks?.deleteBlocks(blocksToDelete);
+          this.grid.deleteColumn(gridEl, colCount - 1);
+
+          const updatedWidths = this.model.colWidths;
+
+          if (updatedWidths) {
+            applyPixelWidths(gridEl, updatedWidths);
+          }
+        });
+      },
+      onDragStart: () => {
+        if (this.resize) {
+          this.resize.enabled = false;
+        }
+        this.rowColControls?.hideAllGrips();
+        this.rowColControls?.setGripsDisplay(false);
+        this.addControls?.setDisplay(false);
+      },
+      onDragEnd: () => {
+        this.initResize(gridEl);
+        this.rowColControls?.refresh();
+        this.addControls?.setDisplay(true);
+        this.addControls?.syncRowButtonWidth();
+      },
+      getTableSize: () => {
+        return { rows: this.model.rows, cols: this.model.cols };
+      },
+      canRemoveLastRow: () => {
+        return this.model.rows > 1 && isRowEmpty(gridEl, this.model.rows - 1);
+      },
+      canRemoveLastColumn: () => {
+        return this.model.cols > 1 && isColumnEmpty(gridEl, this.model.cols - 1);
+      },
+      onClickAdd: () => {
+        this.runTransactedStructuralOp(() => {
+          // Add row
+          this.grid.addRow(gridEl);
+          this.model.addRow();
+          populateNewCells(gridEl, this.cellBlocks);
+          updateHeadingStyles(this.gridElement, this.model.withHeadings);
+          updateHeadingColumnStyles(this.gridElement, this.model.withHeadingColumn);
+
+          // Add column
+          const colWidths = this.model.colWidths ?? readPixelWidths(gridEl);
+          const halfWidth = this.model.initialColWidth !== undefined
+            ? Math.round((this.model.initialColWidth / 2) * 100) / 100
+            : computeHalfAvgWidth(colWidths);
+          const newWidths = [...colWidths, halfWidth];
+
+          this.grid.addColumn(gridEl, undefined, colWidths, halfWidth);
+          this.model.addColumn(undefined, halfWidth);
+          this.model.setColWidths(newWidths);
+          applyPixelWidths(gridEl, newWidths);
+          populateNewCells(gridEl, this.cellBlocks);
+          updateHeadingColumnStyles(this.gridElement, this.model.withHeadingColumn);
+
+          // Refresh subsystems
+          this.initResize(gridEl);
+          this.rowColControls?.refresh();
+          this.addControls?.syncRowButtonWidth();
+        });
+      },
+    });
+  }
+
   private initRowColControls(gridEl: HTMLElement): void {
     this.rowColControls?.destroy();
 
@@ -1063,6 +1286,7 @@ export class Table implements BlockTool {
         }
 
         this.addControls?.setDisplay(!isDragging);
+        this.cornerDrag?.setDisplay(!isDragging);
 
         if (isDragging) {
           this.api.toolbar.close({ setExplicitlyClosed: false });
@@ -1442,6 +1666,7 @@ export class Table implements BlockTool {
         }
 
         this.addControls?.setInteractive(!hasSelection);
+        this.cornerDrag?.setInteractive(!hasSelection);
         this.rowColControls?.setGripsDisplay(!hasSelection);
       },
       onSelectionRangeChange: () => {
@@ -1531,9 +1756,14 @@ export class Table implements BlockTool {
   }
 
   private initGridPasteListener(gridEl: HTMLElement): void {
-    gridEl.addEventListener('paste', (e: ClipboardEvent) => {
+    const handler = (e: ClipboardEvent): void => {
       this.handleGridPaste(e, gridEl);
-    });
+    };
+
+    gridEl.addEventListener('paste', handler);
+    this.gridPasteCleanup = () => {
+      gridEl.removeEventListener('paste', handler);
+    };
   }
 
   private handleGridPaste(e: ClipboardEvent, gridEl: HTMLElement): void {
@@ -1633,7 +1863,9 @@ export class Table implements BlockTool {
 
     const range = selection.getRangeAt(0);
 
-    range.deleteContents();
+    if (!range.collapsed) {
+      range.deleteContents();
+    }
 
     const fragment = document.createDocumentFragment();
     const wrapper = document.createElement('div');

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%';