@jackuait/blok 0.9.0 → 0.10.0-beta.10

package/src/tools/table/index.ts

@@ -25,9 +25,10 @@ import {
 } from './table-cell-clipboard';
 import type { CellColorMode } from './table-cell-color-picker';
 import { TableCellSelection } from './table-cell-selection';
-import { TableGrid, ROW_ATTR, CELL_ATTR } from './table-core';
+import { TableGrid, ROW_ATTR, CELL_ATTR, CELL_ROW_ATTR, CELL_COL_ATTR } from './table-core';
 import {
   applyCellColors,
+  applyCellPlacements,
   applyPixelWidths,
   computeHalfAvgWidth,
   computeInitialColWidth,
@@ -54,7 +55,8 @@ import { TableRowColControls } from './table-row-col-controls';
 import type { RowColAction } from './table-row-col-controls';
 import { registerAdditionalRestrictedTools } from './table-restrictions';
 import { TableScrollHaze } from './table-scroll-haze';
-import type { ClipboardBlockData, LegacyCellContent, TableCellsClipboard, TableData, TableConfig } from './types';
+import type { CellPlacement, ClipboardBlockData, LegacyCellContent, TableCellsClipboard, TableData, TableConfig } from './types';
+import { isCellWithBlocks } from './types';
 
 const DEFAULT_ROWS = 3;
 const DEFAULT_COLS = 3;
@@ -200,6 +202,120 @@ export class Table implements BlockTool {
     this.scrollHaze = null;
   }
 
+  /**
+   * Rebuild the <tbody> from the current model state.
+   * Generates a new table via createGridFromModel (with correct colspan/rowspan),
+   * transplants existing block holders into the new cells, and swaps the tbody.
+   */
+  private rebuildTableBody(): void {
+    const gridEl = this.gridElement;
+
+    if (!gridEl) {
+      return;
+    }
+
+    const oldTbody = gridEl.querySelector('tbody');
+
+    if (!oldTbody) {
+      return;
+    }
+
+    // Collect all existing block holders by ID before replacing tbody
+    const blockHolders = new Map<string, HTMLElement>();
+
+    oldTbody.querySelectorAll('[data-blok-id]').forEach(el => {
+      const id = el.getAttribute('data-blok-id');
+
+      if (id) {
+        blockHolders.set(id, el as HTMLElement);
+      }
+    });
+
+    // Build new table from model (has correct colspan/rowspan structure)
+    const newTable = this.grid.createGridFromModel(this.model);
+    const newTbody = newTable.querySelector('tbody');
+
+    if (!newTbody) {
+      return;
+    }
+
+    // Move block holders from old cells to new cells
+    const content = this.model.snapshot().content;
+
+    this.mountBlockHoldersInNewTbody(content, newTbody, blockHolders);
+
+    // Replace old tbody with new
+    oldTbody.replaceWith(newTbody);
+  }
+
+  /**
+   * Mount block holders into the new tbody cells based on model content.
+   * Extracted to keep rebuildTableBody under nesting depth limit.
+   */
+  private mountBlockHoldersInNewTbody(
+    content: TableData['content'],
+    newTbody: Element,
+    blockHolders: Map<string, HTMLElement>
+  ): void {
+    content.forEach((rowData, r) => {
+      rowData.forEach((cellContent, c) => {
+        if (typeof cellContent === 'string') {
+          return;
+        }
+
+        if (cellContent.mergedInto) {
+          return;
+        }
+
+        const newCell = newTbody.querySelector(
+          `[${CELL_ROW_ATTR}="${r}"][${CELL_COL_ATTR}="${c}"]`
+        );
+
+        if (!newCell) {
+          return;
+        }
+
+        const container = newCell.querySelector(`[${CELL_BLOCKS_ATTR}]`);
+
+        if (!container) {
+          return;
+        }
+
+        cellContent.blocks.forEach(blockId => {
+          const holder = blockHolders.get(blockId);
+
+          if (holder) {
+            container.appendChild(holder);
+          }
+        });
+      });
+    });
+  }
+
+  /**
+   * Check if the model's content contains any merged cells.
+   */
+  private modelHasMerges(): boolean {
+    const snapshot = this.model.snapshot();
+
+    return snapshot.content.some(row =>
+      row.some(cell =>
+        typeof cell !== 'string' && ((cell.colspan ?? 1) > 1 || (cell.rowspan ?? 1) > 1)
+      )
+    );
+  }
+
+  /**
+   * Create a flat grid (no merge handling) using createGrid.
+   * Extracted from render() to keep it readable.
+   */
+  private createFlatGrid(): HTMLTableElement {
+    const rows = this.initialContent?.length || this.config.rows || DEFAULT_ROWS;
+    const cols = this.initialContent?.reduce((max, row) => Math.max(max, row?.length ?? 0), 0) || this.config.cols || DEFAULT_COLS;
+
+    return this.grid.createGrid(rows, cols, this.model.colWidths);
+  }
+
   /**
    * Initialize all visual subsystems on a grid element.
    * Shared by rendered(), setData(), and onPaste() to ensure consistent
@@ -220,6 +336,7 @@ export class Table implements BlockTool {
       title: 'Table',
       titleKey: 'tools.table.title',
       searchTerms: ['table', 'grid', 'spreadsheet'],
+      searchTermKeys: ['table', 'grid', 'spreadsheet'],
     };
   }
 
@@ -233,7 +350,7 @@ export class Table implements BlockTool {
 
   public static get pasteConfig(): PasteConfig {
     return {
-      tags: ['TABLE', 'TR', 'TH', 'TD'],
+      tags: ['TABLE', 'TR', { TH: { style: true } }, { TD: { style: true } }],
     };
   }
 
@@ -259,7 +376,7 @@ export class Table implements BlockTool {
 
           return style.length > 0 ? { style: true } : {};
         },
-        a: { href: true },
+        a: { href: true, target: '_blank', rel: 'nofollow' },
         input: { type: true, checked: true },
       },
     };
@@ -308,12 +425,14 @@ export class Table implements BlockTool {
 
     this.isNewTable = (this.initialContent?.length ?? 0) === 0;
 
-    const rows = this.initialContent?.length || this.config.rows || DEFAULT_ROWS;
-    const cols = this.initialContent?.reduce((max, row) => Math.max(max, row?.length ?? 0), 0) || this.config.cols || DEFAULT_COLS;
+    const hasContent = (this.initialContent?.length ?? 0) > 0;
+    const hasMerges = hasContent && this.modelHasMerges();
 
-    const gridEl = this.grid.createGrid(rows, cols, this.model.colWidths);
+    const gridEl = hasMerges
+      ? this.grid.createGridFromModel(this.model)
+      : this.createFlatGrid();
 
-    if ((this.initialContent?.length ?? 0) > 0) {
+    if (hasContent && !hasMerges) {
       this.grid.fillGrid(gridEl, this.initialContent ?? []);
     }
 
@@ -387,7 +506,9 @@ export class Table implements BlockTool {
 
     if (this.readOnly) {
       mountCellBlocksReadOnly(gridEl, content, this.api, this.blockId ?? '');
-      applyCellColors(gridEl, this.model.snapshot().content);
+      const snap = this.model.snapshot();
+      applyCellColors(gridEl, snap.content);
+      applyCellPlacements(gridEl, snap.content);
       this.initScrollHaze();
 
       return;
@@ -429,7 +550,9 @@ export class Table implements BlockTool {
     }
 
     this.initSubsystems(gridEl);
-    applyCellColors(gridEl, this.model.snapshot().content);
+    const snapInit = this.model.snapshot();
+    applyCellColors(gridEl, snapInit.content);
+    applyCellPlacements(gridEl, snapInit.content);
 
     if (this.isNewTable) {
       this.cellSelection?.selectRange({ minRow: 0, maxRow: 0, minCol: 0, maxCol: 0 });
@@ -473,7 +596,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 {
@@ -540,7 +684,9 @@ export class Table implements BlockTool {
     }
 
     if (this.readOnly) {
-      applyCellColors(gridEl, this.model.snapshot().content);
+      const snapRO = this.model.snapshot();
+      applyCellColors(gridEl, snapRO.content);
+      applyCellPlacements(gridEl, snapRO.content);
 
       return;
     }
@@ -601,7 +747,9 @@ export class Table implements BlockTool {
       this.rowColControls.restoreVisibleGrips(savedGripIndices.col, savedGripIndices.row);
     }
 
-    applyCellColors(gridEl, this.model.snapshot().content);
+    const snapSet = this.model.snapshot();
+    applyCellColors(gridEl, snapSet.content);
+    applyCellPlacements(gridEl, snapSet.content);
   }
 
   public onPaste(event: HTMLPasteEvent): void {
@@ -694,7 +842,9 @@ export class Table implements BlockTool {
       }, true);
 
       this.initSubsystems(gridEl);
-      applyCellColors(gridEl, this.model.snapshot().content);
+      const snapPaste = this.model.snapshot();
+      applyCellColors(gridEl, snapPaste.content);
+      applyCellPlacements(gridEl, snapPaste.content);
     }
   }
 
@@ -1182,6 +1332,38 @@ export class Table implements BlockTool {
     });
   }
 
+  private handleCellPlacementChange(cells: HTMLElement[], placement: CellPlacement): void {
+    const gridEl = this.gridElement;
+
+    if (!gridEl) {
+      return;
+    }
+
+    this.runTransactedStructuralOp(() => {
+      for (const cell of cells) {
+        const coord = getCellPosition(gridEl, cell);
+
+        if (!coord) {
+          continue;
+        }
+
+        this.model.setCellPlacement(coord.row, coord.col, placement === 'top-left' ? undefined : placement);
+
+        const blocksContainer = cell.querySelector<HTMLElement>(`[${CELL_BLOCKS_ATTR}]`);
+
+        if (!blocksContainer) {
+          continue;
+        }
+
+        if (placement === 'top-left') {
+          blocksContainer.removeAttribute('data-blok-cell-placement');
+        } else {
+          blocksContainer.setAttribute('data-blok-cell-placement', placement);
+        }
+      }
+    });
+  }
+
   private collectCellBlockData(
     cells: HTMLElement[],
   ): Array<{ row: number; col: number; blocks: ClipboardBlockData[]; color?: string; textColor?: string }> {
@@ -1332,6 +1514,30 @@ export class Table implements BlockTool {
       onColorChange: (cells, color, mode) => {
         this.handleCellColorChange(cells, color, mode);
       },
+      onPlacementChange: (cells, placement) => {
+        this.handleCellPlacementChange(cells, placement);
+      },
+      getCellPlacement: (row, col) => {
+        return this.model.getCellPlacement(row, col);
+      },
+      canMergeCells: (range) => {
+        return this.model.canMergeCells(range);
+      },
+      onMergeCells: (range) => {
+        this.runTransactedStructuralOp(() => {
+          this.model.mergeCells(range);
+          this.rebuildTableBody();
+        });
+      },
+      isMergedCell: (row, col) => {
+        return this.model.isMergedCell(row, col);
+      },
+      onSplitCell: (row, col) => {
+        this.runTransactedStructuralOp(() => {
+          this.model.splitCell(row, col);
+          this.rebuildTableBody();
+        });
+      },
     });
   }
 

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

@@ -1,6 +1,6 @@
 import type { API } from '../../../types';
 
-import { CELL_ATTR, ROW_ATTR } from './table-core';
+import { CELL_ATTR, ROW_ATTR, CELL_COL_ATTR } from './table-core';
 import type { TableModel } from './table-model';
 import type { LegacyCellContent, CellContent } from './types';
 import { isCellWithBlocks } from './types';
@@ -330,6 +330,12 @@ export class TableCellBlocks {
    * Get the number of columns in the table (based on first row)
    */
   private getColumnCount(): number {
+    const colgroup = this.gridElement.querySelector('colgroup');
+
+    if (colgroup) {
+      return colgroup.querySelectorAll('col').length;
+    }
+
     const firstRow = this.gridElement.querySelector('[data-blok-table-row]');
 
     return firstRow?.querySelectorAll('[data-blok-table-cell]').length ?? 0;
@@ -346,9 +352,7 @@ export class TableCellBlocks {
       return null;
     }
 
-    const cells = rowEl.querySelectorAll('[data-blok-table-cell]');
-
-    return (cells[col] as HTMLElement | undefined) ?? null;
+    return rowEl.querySelector<HTMLElement>(`[${CELL_COL_ATTR}="${col}"]`) ?? null;
   }
 
   /**
@@ -368,11 +372,10 @@ export class TableCellBlocks {
         return;
       }
 
-      const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
       const normalizedRow: CellContent[] = [];
 
       rowData.forEach((cellContent, colIndex) => {
-        const cell = cells[colIndex] as HTMLElement | undefined;
+        const cell = row.querySelector<HTMLElement>(`[${CELL_COL_ATTR}="${colIndex}"]`);
 
         if (!cell) {
           return;
@@ -470,6 +473,12 @@ export class TableCellBlocks {
         continue;
       }
 
+      // Guard: skip blocks already mounted in another table cell's container.
+      // Without this, appendChild would steal the DOM node from the other table.
+      if (block.holder.closest(`[${CELL_BLOCKS_ATTR}]`)) {
+        continue;
+      }
+
       container.appendChild(block.holder);
       this.api.blocks.setBlockParent(blockId, this.tableBlockId);
       mountedIds.push(blockId);
@@ -505,6 +514,12 @@ export class TableCellBlocks {
       return;
     }
 
+    // Guard: skip blocks already mounted in another table cell's container.
+    // Without this, insertBefore would steal the DOM node from the other table.
+    if (block.holder.closest(`[${CELL_BLOCKS_ATTR}]`)) {
+      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.
@@ -615,6 +630,12 @@ export class TableCellBlocks {
       return;
     }
 
+    if (type === 'block-moved') {
+      this.handleBlockMoved(detail);
+
+      return;
+    }
+
     if (type !== 'block-added') {
       return;
     }
@@ -753,6 +774,30 @@ export class TableCellBlocks {
     this.schedulePendingCellCheck();
   }
 
+  /**
+   * Handle a block-moved event: if the block left this table (its holder is
+   * no longer inside our grid), remove the stale reference from the model.
+   *
+   * Without this, cross-table moves leave ghost entries in the source table's
+   * model, causing the same block ID to appear in two tables' saved data.
+   */
+  private handleBlockMoved(detail: { target: { id: string; holder: HTMLElement } }): void {
+    const blockId = detail.target.id;
+    const cellPos = this.model.findCellForBlock(blockId);
+
+    if (!cellPos) {
+      return;
+    }
+
+    // If the holder is still inside our grid, the block was moved within
+    // this table — nothing to clean up.
+    if (this.gridElement.contains(detail.target.holder)) {
+      return;
+    }
+
+    this.model.removeBlockFromCell(cellPos.row, cellPos.col, blockId);
+  }
+
   /**
    * Find the DOM cell's row/col position and add the block to the model.
    */

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

@@ -1,5 +1,5 @@
 import type { SanitizerConfig } from '../../../types/configs/sanitizer-config';
-import type { ClipboardBlockData, TableCellsClipboard } from './types';
+import type { CellPlacement, ClipboardBlockData, TableCellsClipboard } from './types';
 import { mapToNearestPresetColor } from '../../components/utils/color-mapping';
 import { clean } from '../../components/utils/sanitizer';
 
@@ -33,6 +33,7 @@ interface CellEntry {
   blocks: ClipboardBlockData[];
   color?: string;
   textColor?: string;
+  placement?: CellPlacement;
 }
 
 /**
@@ -73,6 +74,10 @@ export function serializeCellsToClipboard(entries: CellEntry[]): TableCellsClipb
     if (entry.textColor !== undefined) {
       cells[r][c].textColor = entry.textColor;
     }
+
+    if (entry.placement !== undefined) {
+      cells[r][c].placement = entry.placement;
+    }
   }
 
   return { rows, cols, cells };
@@ -185,7 +190,7 @@ const CELL_SANITIZE_CONFIG: SanitizerConfig = {
   i: true,
   em: true,
   br: true,
-  a: { href: true },
+  a: { href: true, target: '_blank', rel: 'nofollow' },
   mark: (node: Element): { [attr: string]: boolean | string } => {
     const el = node as HTMLElement;
     const style = el.style;

package/src/tools/table/table-cell-placement-picker.ts

@@ -0,0 +1,133 @@
+import type { I18n } from '../../../types/api';
+import type { CellPlacement } from './types';
+
+interface PlacementPickerOptions {
+  i18n: I18n;
+  currentPlacement: CellPlacement | undefined;
+  onPlacementSelect: (placement: CellPlacement) => void;
+}
+
+interface PlacementPickerResult {
+  element: HTMLDivElement;
+}
+
+const PLACEMENTS: CellPlacement[] = [
+  'top-left', 'top-center', 'top-right',
+  'middle-left', 'middle-center', 'middle-right',
+  'bottom-left', 'bottom-center', 'bottom-right',
+];
+
+const I18N_KEYS: Record<CellPlacement, string> = {
+  'top-left': 'tools.table.placementTopLeft',
+  'top-center': 'tools.table.placementTopCenter',
+  'top-right': 'tools.table.placementTopRight',
+  'middle-left': 'tools.table.placementMiddleLeft',
+  'middle-center': 'tools.table.placementMiddleCenter',
+  'middle-right': 'tools.table.placementMiddleRight',
+  'bottom-left': 'tools.table.placementBottomLeft',
+  'bottom-center': 'tools.table.placementBottomCenter',
+  'bottom-right': 'tools.table.placementBottomRight',
+};
+
+const V_ALIGN: Record<string, string> = {
+  top: 'flex-start',
+  middle: 'center',
+  bottom: 'flex-end',
+};
+
+const H_ALIGN: Record<string, string> = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end',
+};
+
+export const createCellPlacementPicker = (options: PlacementPickerOptions): PlacementPickerResult => {
+  const current = options.currentPlacement ?? 'top-left';
+  const wrapper = document.createElement('div');
+
+  wrapper.style.padding = '8px';
+
+  const grid = document.createElement('div');
+
+  grid.style.display = 'grid';
+  grid.style.gridTemplateColumns = 'repeat(3, 1fr)';
+  grid.style.gap = '3px';
+
+  const label = document.createElement('div');
+
+  label.style.textAlign = 'center';
+  label.style.fontSize = '11px';
+  label.style.marginTop = '6px';
+  label.style.color = 'var(--blok-text-secondary, #707684)';
+  label.textContent = options.i18n.t(I18N_KEYS[current]);
+
+  for (const placement of PLACEMENTS) {
+    const [vKey, hKey] = placement.split('-');
+    const cell = document.createElement('div');
+
+    cell.setAttribute('data-placement', placement);
+    cell.style.width = '32px';
+    cell.style.height = '26px';
+    cell.style.borderRadius = '3px';
+    cell.style.display = 'flex';
+    cell.style.flexDirection = 'column';
+    cell.style.alignItems = H_ALIGN[hKey];
+    cell.style.justifyContent = V_ALIGN[vKey];
+    cell.style.padding = '3px';
+    cell.style.cursor = 'pointer';
+    cell.style.gap = '1px';
+
+    if (placement === current) {
+      cell.setAttribute('data-active', 'true');
+      cell.style.outline = '2px solid var(--blok-color-primary, #388AE5)';
+      cell.style.outlineOffset = '-2px';
+      cell.style.backgroundColor = 'var(--blok-item-focus-bg, rgba(35, 131, 226, 0.14))';
+    } else {
+      cell.style.backgroundColor = 'var(--blok-bg-light, #eff2f5)';
+    }
+
+    const line1 = document.createElement('div');
+
+    line1.style.width = '14px';
+    line1.style.height = '2px';
+    line1.style.borderRadius = '1px';
+    line1.style.backgroundColor = 'currentColor';
+    line1.style.opacity = '0.6';
+
+    const line2 = document.createElement('div');
+
+    line2.style.width = '9px';
+    line2.style.height = '2px';
+    line2.style.borderRadius = '1px';
+    line2.style.backgroundColor = 'currentColor';
+    line2.style.opacity = '0.3';
+
+    cell.appendChild(line1);
+    cell.appendChild(line2);
+
+    cell.addEventListener('click', () => {
+      grid.querySelectorAll('[data-placement]').forEach(el => {
+        const element = el as HTMLElement;
+        element.removeAttribute('data-active');
+        element.style.outline = '';
+        element.style.outlineOffset = '';
+        element.style.backgroundColor = 'var(--blok-bg-tertiary, #f0f0f0)';
+      });
+
+      cell.setAttribute('data-active', 'true');
+      cell.style.outline = '2px solid var(--blok-color-primary, #388AE5)';
+      cell.style.outlineOffset = '-2px';
+      cell.style.backgroundColor = 'var(--blok-item-focus-bg, rgba(35, 131, 226, 0.14))';
+      label.textContent = options.i18n.t(I18N_KEYS[placement]);
+
+      options.onPlacementSelect(placement);
+    });
+
+    grid.appendChild(cell);
+  }
+
+  wrapper.appendChild(grid);
+  wrapper.appendChild(label);
+
+  return { element: wrapper };
+};