@jackuait/blok 0.6.0-beta.0 → 0.6.0-beta.10

package/src/tools/table/table-add-controls.ts

@@ -1,59 +1,118 @@
+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 { twMerge } from '../../components/utils/tw';
 
 const ADD_ROW_ATTR = 'data-blok-table-add-row';
 const ADD_COL_ATTR = 'data-blok-table-add-col';
 const HIDE_DELAY_MS = 150;
+const DRAG_THRESHOLD = 5;
 
-const SHARED_CLASSES = [
+/**
+ * How close (px) the cursor must be to a grid edge for
+ * the corresponding add button to appear.
+ */
+const PROXIMITY_PX = 40;
+
+const HIT_AREA_CLASSES = [
   'flex',
   'items-center',
   'justify-center',
-  'cursor-pointer',
-  'border',
-  'border-gray-300',
-  'rounded-full',
-  'hover:bg-gray-50',
   'transition-opacity',
   'duration-150',
 ];
 
-const PLUS_CLASSES = [
-  'text-gray-400',
-  'text-sm',
-  'select-none',
-  'pointer-events-none',
+const VISUAL_CLASSES = [
+  'flex',
+  'items-center',
+  'justify-center',
+  'border',
+  'border-gray-300',
+  'rounded-full',
+  'group-hover/add:bg-gray-50',
 ];
 
+const ICON_SIZE = '12';
+
+interface DragState {
+  axis: 'row' | 'col';
+  startPos: number;
+  unitSize: number;
+  addedCount: number;
+  pointerId: number;
+  didDrag: boolean;
+}
+
 interface TableAddControlsOptions {
   wrapper: HTMLElement;
   grid: HTMLElement;
+  i18n: I18n;
   onAddRow: () => void;
   onAddColumn: () => void;
+  onDragStart: () => void;
+  onDragAddRow: () => void;
+  onDragRemoveRow: () => void;
+  onDragAddCol: () => void;
+  onDragRemoveCol: () => void;
+  onDragEnd: () => void;
+  /** Returns the pixel width of a newly added column, used as the drag unit size. */
+  getNewColumnWidth?: () => number;
 }
 
 /**
  * Manages hover-to-reveal "+" buttons for adding rows and columns to the table.
+ * Buttons only appear when the cursor is near the relevant edge of the grid.
+ * Supports both click (add one) and drag (add multiple) interactions.
  */
 export class TableAddControls {
   private wrapper: HTMLElement;
   private grid: HTMLElement;
+  private i18n: I18n;
   private addRowBtn: HTMLElement;
   private addColBtn: HTMLElement;
-  private hideTimeout: ReturnType<typeof setTimeout> | null = null;
+  private rowHideTimeout: ReturnType<typeof setTimeout> | null = null;
+  private colHideTimeout: ReturnType<typeof setTimeout> | null = null;
+  private rowVisible = false;
+  private colVisible = false;
+  private dragState: DragState | null = null;
 
-  private boundMouseEnter: () => void;
+  private boundMouseMove: (e: MouseEvent) => void;
   private boundMouseLeave: () => void;
   private boundAddRowClick: () => void;
   private boundAddColClick: () => void;
+  private onDragStart: () => void;
+  private onDragAddRow: () => void;
+  private onDragRemoveRow: () => void;
+  private onDragAddCol: () => void;
+  private onDragRemoveCol: () => void;
+  private onDragEnd: () => void;
+  private boundPointerMove: (e: PointerEvent) => void;
+  private boundPointerUp: (e: PointerEvent) => void;
+  private boundRowPointerDown: (e: PointerEvent) => void;
+  private boundColPointerDown: (e: PointerEvent) => void;
+  private getNewColumnWidth: (() => number) | undefined;
 
   constructor(options: TableAddControlsOptions) {
     this.wrapper = options.wrapper;
     this.grid = options.grid;
+    this.i18n = options.i18n;
 
     this.boundAddRowClick = options.onAddRow;
     this.boundAddColClick = options.onAddColumn;
-    this.boundMouseEnter = this.show.bind(this);
-    this.boundMouseLeave = this.scheduleHide.bind(this);
+    this.onDragStart = options.onDragStart;
+    this.onDragAddRow = options.onDragAddRow;
+    this.onDragRemoveRow = options.onDragRemoveRow;
+    this.onDragAddCol = options.onDragAddCol;
+    this.onDragRemoveCol = options.onDragRemoveCol;
+    this.onDragEnd = options.onDragEnd;
+    this.getNewColumnWidth = options.getNewColumnWidth;
+    this.boundMouseMove = this.handleMouseMove.bind(this);
+    this.boundMouseLeave = this.handleMouseLeave.bind(this);
+    this.boundPointerMove = this.handlePointerMove.bind(this);
+    this.boundPointerUp = this.handlePointerUp.bind(this);
+    this.boundRowPointerDown = (e: PointerEvent): void => this.handlePointerDown('row', e);
+    this.boundColPointerDown = (e: PointerEvent): void => this.handlePointerDown('col', e);
 
     this.addRowBtn = this.createAddRowButton();
     this.addColBtn = this.createAddColumnButton();
@@ -62,11 +121,12 @@ export class TableAddControls {
     this.grid.appendChild(this.addColBtn);
     this.syncRowButtonWidth();
 
-    this.wrapper.addEventListener('mouseenter', this.boundMouseEnter);
+    this.wrapper.addEventListener('mousemove', this.boundMouseMove);
     this.wrapper.addEventListener('mouseleave', this.boundMouseLeave);
 
-    this.addRowBtn.addEventListener('click', this.boundAddRowClick);
-    this.addColBtn.addEventListener('click', this.boundAddColClick);
+    this.addRowBtn.addEventListener('pointerdown', this.boundRowPointerDown);
+    this.addColBtn.addEventListener('pointerdown', this.boundColPointerDown);
+
   }
 
   /**
@@ -83,55 +143,279 @@ export class TableAddControls {
       : '100%';
   }
 
+  /**
+   * Toggle display of both add buttons.
+   * Used to hide controls during row/column drag operations.
+   */
+  public setDisplay(visible: boolean): void {
+    const display = visible ? '' : 'none';
+
+    this.addRowBtn.style.display = display;
+    this.addColBtn.style.display = display;
+  }
+
+  /**
+   * Toggle interactivity of both add buttons without removing them from the DOM.
+   * Disables pointer events and hover effects during cell selection.
+   */
+  public setInteractive(interactive: boolean): void {
+    if (!interactive) {
+      this.addRowBtn.style.pointerEvents = 'none';
+      this.addColBtn.style.pointerEvents = 'none';
+
+      return;
+    }
+
+    this.addRowBtn.style.pointerEvents = this.rowVisible ? '' : 'none';
+    this.addColBtn.style.pointerEvents = this.colVisible ? '' : 'none';
+  }
+
   public destroy(): void {
-    this.wrapper.removeEventListener('mouseenter', this.boundMouseEnter);
+    this.wrapper.removeEventListener('mousemove', this.boundMouseMove);
     this.wrapper.removeEventListener('mouseleave', this.boundMouseLeave);
-    this.addRowBtn.removeEventListener('click', this.boundAddRowClick);
-    this.addColBtn.removeEventListener('click', this.boundAddColClick);
+    this.addRowBtn.removeEventListener('pointerdown', this.boundRowPointerDown);
+    this.addColBtn.removeEventListener('pointerdown', this.boundColPointerDown);
+
+    if (this.dragState) {
+      const target = this.dragState.axis === 'row' ? this.addRowBtn : this.addColBtn;
 
-    if (this.hideTimeout !== null) {
-      clearTimeout(this.hideTimeout);
-      this.hideTimeout = null;
+      target.removeEventListener('pointermove', this.boundPointerMove);
+      target.removeEventListener('pointerup', this.boundPointerUp);
+      document.body.style.cursor = '';
+      this.dragState = null;
     }
 
+    this.clearRowTimeout();
+    this.clearColTimeout();
+
     this.addRowBtn.remove();
     this.addColBtn.remove();
   }
 
-  private show(): void {
-    if (this.hideTimeout !== null) {
-      clearTimeout(this.hideTimeout);
-      this.hideTimeout = null;
+  private handlePointerDown(axis: 'row' | 'col', e: PointerEvent): void {
+    e.preventDefault();
+
+    const target = axis === 'row' ? this.addRowBtn : this.addColBtn;
+
+    target.setPointerCapture(e.pointerId);
+
+    const unitSize = this.measureUnitSize(axis);
+
+    this.dragState = {
+      axis,
+      startPos: axis === 'row' ? e.clientY : e.clientX,
+      unitSize,
+      addedCount: 0,
+      pointerId: e.pointerId,
+      didDrag: false,
+    };
+
+    target.addEventListener('pointermove', this.boundPointerMove);
+    target.addEventListener('pointerup', this.boundPointerUp);
+  }
+
+  private handlePointerMove(e: PointerEvent): void {
+    if (!this.dragState) {
+      return;
+    }
+
+    const { axis, startPos, unitSize } = this.dragState;
+    const currentPos = axis === 'row' ? e.clientY : e.clientX;
+    const delta = currentPos - startPos;
+    const targetCount = Math.floor(delta / unitSize);
+
+    while (this.dragState.addedCount < targetCount) {
+      if (axis === 'row') {
+        this.onDragAddRow();
+      } else {
+        this.onDragAddCol();
+      }
+
+      this.dragState.addedCount++;
     }
 
-    this.addRowBtn.style.opacity = '1';
-    this.addColBtn.style.opacity = '1';
+    while (this.dragState.addedCount > targetCount) {
+      if (axis === 'row') {
+        this.onDragRemoveRow();
+      } else {
+        this.onDragRemoveCol();
+      }
+
+      this.dragState.addedCount--;
+    }
+
+    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.onDragStart();
+    }
   }
 
-  private scheduleHide(): void {
-    this.hideTimeout = setTimeout(() => {
+  private handlePointerUp(_e: PointerEvent): void {
+    if (!this.dragState) {
+      return;
+    }
+
+    const { axis, pointerId, didDrag } = this.dragState;
+
+    const target = axis === 'row' ? this.addRowBtn : this.addColBtn;
+
+    target.releasePointerCapture(pointerId);
+    target.removeEventListener('pointermove', this.boundPointerMove);
+    target.removeEventListener('pointerup', this.boundPointerUp);
+
+    document.body.style.cursor = '';
+    this.dragState = null;
+
+    if (!didDrag) {
+      const clickHandler = axis === 'row' ? this.boundAddRowClick : this.boundAddColClick;
+
+      clickHandler();
+
+      return;
+    }
+
+    this.onDragEnd();
+  }
+
+  private measureUnitSize(axis: 'row' | 'col'): number {
+    if (axis === 'row') {
+      const rows = this.grid.querySelectorAll('[data-blok-table-row]');
+      const lastRow = rows[rows.length - 1] as HTMLElement | undefined;
+
+      return lastRow?.offsetHeight || 30;
+    }
+
+    if (this.getNewColumnWidth) {
+      return this.getNewColumnWidth() || 100;
+    }
+
+    const firstRow = this.grid.querySelector('[data-blok-table-row]');
+
+    if (!firstRow) {
+      return 100;
+    }
+
+    const cells = firstRow.querySelectorAll('[data-blok-table-cell]');
+    const lastCell = cells[cells.length - 1] as HTMLElement | undefined;
+
+    return lastCell?.offsetWidth || 100;
+  }
+
+  private handleMouseMove(e: MouseEvent): void {
+    const gridRect = this.grid.getBoundingClientRect();
+    const distFromBottom = Math.abs(e.clientY - gridRect.bottom);
+    const distFromRight = Math.abs(e.clientX - gridRect.right);
+
+    if (distFromBottom <= PROXIMITY_PX) {
+      this.showRow();
+    } else {
+      this.scheduleHideRow();
+    }
+
+    if (distFromRight <= PROXIMITY_PX) {
+      this.showCol();
+    } else {
+      this.scheduleHideCol();
+    }
+  }
+
+  private handleMouseLeave(): void {
+    this.scheduleHideRow();
+    this.scheduleHideCol();
+  }
+
+  private showRow(): void {
+    this.clearRowTimeout();
+
+    if (!this.rowVisible) {
+      this.addRowBtn.style.opacity = '1';
+      this.addRowBtn.style.pointerEvents = '';
+      this.rowVisible = true;
+    }
+  }
+
+  private showCol(): void {
+    this.clearColTimeout();
+
+    if (!this.colVisible) {
+      this.addColBtn.style.opacity = '1';
+      this.addColBtn.style.pointerEvents = '';
+      this.colVisible = true;
+    }
+  }
+
+  private scheduleHideRow(): void {
+    if (!this.rowVisible || this.rowHideTimeout !== null || this.dragState?.axis === 'row') {
+      return;
+    }
+
+    this.rowHideTimeout = setTimeout(() => {
       this.addRowBtn.style.opacity = '0';
+      this.addRowBtn.style.pointerEvents = 'none';
+      this.rowVisible = false;
+      this.rowHideTimeout = null;
+    }, HIDE_DELAY_MS);
+  }
+
+  private scheduleHideCol(): void {
+    if (!this.colVisible || this.colHideTimeout !== null || this.dragState?.axis === 'col') {
+      return;
+    }
+
+    this.colHideTimeout = setTimeout(() => {
       this.addColBtn.style.opacity = '0';
-      this.hideTimeout = null;
+      this.addColBtn.style.pointerEvents = 'none';
+      this.colVisible = false;
+      this.colHideTimeout = null;
     }, HIDE_DELAY_MS);
   }
 
+  private clearRowTimeout(): void {
+    if (this.rowHideTimeout !== null) {
+      clearTimeout(this.rowHideTimeout);
+      this.rowHideTimeout = null;
+    }
+  }
+
+  private clearColTimeout(): void {
+    if (this.colHideTimeout !== null) {
+      clearTimeout(this.colHideTimeout);
+      this.colHideTimeout = null;
+    }
+  }
+
   private createAddRowButton(): HTMLElement {
     const btn = document.createElement('div');
 
-    btn.className = twMerge(SHARED_CLASSES);
+    btn.className = twMerge(HIT_AREA_CLASSES, 'group/add', 'items-start', 'cursor-row-resize');
     btn.setAttribute(ADD_ROW_ATTR, '');
     btn.setAttribute('contenteditable', 'false');
     btn.style.opacity = '0';
+    btn.style.pointerEvents = 'none';
+    btn.style.position = 'absolute';
+    btn.style.left = '0';
+    btn.style.bottom = '-36px';
+    btn.style.boxSizing = 'content-box';
     btn.style.width = '100%';
-    btn.style.height = '28px';
-    btn.style.marginTop = '4px';
+    btn.style.height = '32px';
+    btn.style.padding = '4px 8px 0';
+    btn.style.marginLeft = '-8px';
 
-    const plus = document.createElement('span');
+    const visual = document.createElement('div');
 
-    plus.className = twMerge(PLUS_CLASSES);
-    plus.textContent = '+';
-    btn.appendChild(plus);
+    visual.className = twMerge(VISUAL_CLASSES);
+    visual.style.width = '100%';
+    visual.style.height = '16px';
+
+    this.appendIcon(visual);
+    btn.appendChild(visual);
+
+    onHover(btn, createTooltipContent([
+      this.i18n.t('tools.table.clickToAddRow'),
+      this.i18n.t('tools.table.dragToAddRemoveRows'),
+    ]), { placement: 'bottom', marginTop: -16 });
 
     return btn;
   }
@@ -139,22 +423,44 @@ export class TableAddControls {
   private createAddColumnButton(): HTMLElement {
     const btn = document.createElement('div');
 
-    btn.className = twMerge(SHARED_CLASSES);
+    btn.className = twMerge(HIT_AREA_CLASSES, 'group/add', 'justify-start', 'cursor-col-resize');
     btn.setAttribute(ADD_COL_ATTR, '');
     btn.setAttribute('contenteditable', 'false');
     btn.style.opacity = '0';
+    btn.style.pointerEvents = 'none';
     btn.style.position = 'absolute';
-    btn.style.right = '-32px';
+    btn.style.right = '-36px';
     btn.style.top = '0px';
     btn.style.bottom = '0px';
-    btn.style.width = '28px';
+    btn.style.width = '32px';
+
+    const visual = document.createElement('div');
 
-    const plus = document.createElement('span');
+    visual.className = twMerge(VISUAL_CLASSES);
+    visual.style.width = '16px';
+    visual.style.height = '100%';
 
-    plus.className = twMerge(PLUS_CLASSES);
-    plus.textContent = '+';
-    btn.appendChild(plus);
+    this.appendIcon(visual);
+    btn.appendChild(visual);
+
+    onHover(btn, createTooltipContent([
+      this.i18n.t('tools.table.clickToAddColumn'),
+      this.i18n.t('tools.table.dragToAddRemoveColumns'),
+    ]), { placement: 'bottom' });
 
     return btn;
   }
+
+  private appendIcon(parent: HTMLElement): void {
+    parent.insertAdjacentHTML('beforeend', IconPlus);
+
+    const svg = parent.querySelector('svg');
+
+    if (svg) {
+      svg.setAttribute('width', ICON_SIZE);
+      svg.setAttribute('height', ICON_SIZE);
+      svg.setAttribute('viewBox', '0 0 24 24');
+      svg.classList.add('text-gray-500', 'pointer-events-none');
+    }
+  }
 }

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

@@ -45,6 +45,7 @@ interface TableCellBlocksOptions {
 export class TableCellBlocks {
   private api: API;
   private gridElement: HTMLElement;
+  private tableBlockId: string;
   private _activeCellWithBlocks: CellPosition | null = null;
   private onNavigateToCell?: CellNavigationCallback;
 
@@ -68,9 +69,11 @@ export class TableCellBlocks {
   constructor(options: TableCellBlocksOptions) {
     this.api = options.api;
     this.gridElement = options.gridElement;
+    this.tableBlockId = options.tableBlockId;
     this.onNavigateToCell = options.onNavigateToCell;
 
     this.api.events.on('block changed', this.handleBlockMutation);
+    this.gridElement.addEventListener('click', this.handleCellBlankSpaceClick);
   }
 
   /**
@@ -228,6 +231,7 @@ export class TableCellBlocks {
    * Initialize all cells with blocks.
    * - Empty cells or legacy string cells get a new paragraph block.
    * - 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[][] {
     const rowElements = this.gridElement.querySelectorAll(`[${ROW_ATTR}]`);
@@ -256,14 +260,18 @@ export class TableCellBlocks {
           return;
         }
 
-        if (isCellWithBlocks(cellContent)) {
-          this.mountBlocksInCell(container, cellContent.blocks);
-          normalizedRow.push(cellContent);
+        const mountedIds = isCellWithBlocks(cellContent)
+          ? this.mountBlocksInCell(container, cellContent.blocks)
+          : [];
+
+        if (mountedIds.length > 0) {
+          normalizedRow.push({ blocks: mountedIds });
         } else {
           const text = typeof cellContent === 'string' ? cellContent : '';
           const block = this.api.blocks.insert('paragraph', { text }, {}, this.api.blocks.getBlocksCount(), false);
 
           container.appendChild(block.holder);
+          this.api.blocks.setBlockParent(block.id, this.tableBlockId);
           normalizedRow.push({ blocks: [block.id] });
         }
 
@@ -290,9 +298,12 @@ export class TableCellBlocks {
   }
 
   /**
-   * Mount existing blocks into a cell container by their IDs
+   * Mount existing blocks into a cell container by their IDs.
+   * Returns the IDs of blocks that were successfully mounted.
    */
-  private mountBlocksInCell(container: HTMLElement, blockIds: string[]): void {
+  private mountBlocksInCell(container: HTMLElement, blockIds: string[]): string[] {
+    const mountedIds: string[] = [];
+
     for (const blockId of blockIds) {
       const index = this.api.blocks.getBlockIndex(blockId);
 
@@ -307,7 +318,11 @@ export class TableCellBlocks {
       }
 
       container.appendChild(block.holder);
+      this.api.blocks.setBlockParent(blockId, this.tableBlockId);
+      mountedIds.push(blockId);
     }
+
+    return mountedIds;
   }
 
   /**
@@ -333,6 +348,7 @@ export class TableCellBlocks {
     }
 
     container.appendChild(block.holder);
+    this.api.blocks.setBlockParent(blockId, this.tableBlockId);
     this.stripPlaceholders(container);
   }
 
@@ -391,6 +407,7 @@ export class TableCellBlocks {
     const block = this.api.blocks.insert('paragraph', { text: '' }, {}, this.api.blocks.getBlocksCount(), true);
 
     container.appendChild(block.holder);
+    this.api.blocks.setBlockParent(block.id, this.tableBlockId);
     this.stripPlaceholders(container);
   }
 
@@ -454,10 +471,20 @@ export class TableCellBlocks {
     }
 
     // For non-replace inserts: if the holder is already in a cell (placed
-    // by insertToDOM next to an adjacent cell block), no action needed.
+    // by insertToDOM next to an adjacent cell block), just strip placeholders.
     const holder = detail.target.holder;
+    const existingContainer = holder.closest<HTMLElement>(`[${CELL_BLOCKS_ATTR}]`);
+
+    if (existingContainer) {
+      this.stripPlaceholders(existingContainer);
 
-    if (holder.closest(`[${CELL_BLOCKS_ATTR}]`)) {
+      return;
+    }
+
+    // Only claim blocks whose holder is inside this table's grid.
+    // Blocks placed outside the grid (e.g., via replaceWith during toolbox
+    // insertion) should not be pulled into a cell by adjacency.
+    if (!this.gridElement.contains(holder)) {
       return;
     }
 
@@ -572,10 +599,71 @@ export class TableCellBlocks {
     });
   }
 
+  /**
+   * Delete all blocks managed by this table from the BlockManager.
+   * Called before the table block itself is removed to prevent orphaned cell blocks.
+   */
+  public deleteAllBlocks(): void {
+    const allCells = this.gridElement.querySelectorAll(`[${CELL_ATTR}]`);
+    const blockIds = this.getBlockIdsFromCells(allCells);
+
+    this.deleteBlocks(blockIds);
+  }
+
+  /**
+   * Handle clicks on blank cell space.
+   * When a click lands on the cell or blocks container (not on block content),
+   * set the caret to the end of the last block in that cell.
+   */
+  private handleCellBlankSpaceClick = (event: Event): void => {
+    const target = event.target as HTMLElement | null;
+
+    if (!target) {
+      return;
+    }
+
+    const isCell = target.hasAttribute(CELL_ATTR);
+    const isBlocksContainer = target.hasAttribute(CELL_BLOCKS_ATTR);
+
+    if (!isCell && !isBlocksContainer) {
+      return;
+    }
+
+    const cell = isCell ? target : target.closest<HTMLElement>(`[${CELL_ATTR}]`);
+
+    if (!cell) {
+      return;
+    }
+
+    const container = isCell
+      ? cell.querySelector<HTMLElement>(`[${CELL_BLOCKS_ATTR}]`)
+      : target;
+
+    if (!container) {
+      return;
+    }
+
+    const blockHolders = container.querySelectorAll('[data-blok-id]');
+    const lastHolder = blockHolders[blockHolders.length - 1];
+
+    if (!lastHolder) {
+      return;
+    }
+
+    const blockId = lastHolder.getAttribute('data-blok-id');
+
+    if (!blockId) {
+      return;
+    }
+
+    this.api.caret.setToBlock(blockId, 'end');
+  };
+
   /**
    * Clean up event listeners
    */
   destroy(): void {
+    this.gridElement.removeEventListener('click', this.handleCellBlankSpaceClick);
     this.api.events.off('block changed', this.handleBlockMutation);
     this._activeCellWithBlocks = null;
     this.cellsPendingCheck.clear();