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

package/src/tools/table/table-operations.ts

@@ -0,0 +1,475 @@
+import type { API } from '../../../types';
+
+import type { TableCellBlocks } from './table-cell-blocks';
+import { CELL_BLOCKS_ATTR } from './table-cell-blocks';
+import { BORDER_WIDTH, ROW_ATTR, CELL_ATTR } from './table-core';
+import type { TableGrid } from './table-core';
+import type { LegacyCellContent, TableData } from './types';
+import { isCellWithBlocks } from './types';
+
+// ─── Pure DOM helpers ───────────────────────────────────────────────
+
+export const readPixelWidths = (gridEl: HTMLElement): number[] => {
+  const firstRow = gridEl.querySelector(`[${ROW_ATTR}]`);
+
+  if (!firstRow) {
+    return [];
+  }
+
+  const cells = firstRow.querySelectorAll(`[${CELL_ATTR}]`);
+
+  return Array.from(cells).map(cell =>
+    (cell as HTMLElement).getBoundingClientRect().width
+  );
+};
+
+export const applyPixelWidths = (gridEl: HTMLElement, widths: number[]): void => {
+  const totalWidth = widths.reduce((sum, w) => sum + w, 0);
+  const gridStyle: HTMLElement = gridEl;
+
+  gridStyle.style.width = `${totalWidth + BORDER_WIDTH}px`;
+
+  const rowEls = gridEl.querySelectorAll(`[${ROW_ATTR}]`);
+
+  rowEls.forEach(row => {
+    const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
+
+    cells.forEach((node, i) => {
+      if (i < widths.length) {
+        const cellEl = node as HTMLElement;
+
+        cellEl.style.width = `${widths[i]}px`;
+      }
+    });
+  });
+};
+
+export const getCellPosition = (gridEl: HTMLElement, cell: HTMLElement): { row: number; col: number } | null => {
+  const rows = Array.from(gridEl.querySelectorAll(`[${ROW_ATTR}]`));
+
+  const rowIndex = rows.findIndex(row => {
+    const cells = Array.from(row.querySelectorAll(`[${CELL_ATTR}]`));
+
+    return cells.includes(cell);
+  });
+
+  if (rowIndex === -1) {
+    return null;
+  }
+
+  const cells = Array.from(rows[rowIndex].querySelectorAll(`[${CELL_ATTR}]`));
+  const colIndex = cells.indexOf(cell);
+
+  return { row: rowIndex, col: colIndex };
+};
+
+// ─── Cell emptiness ─────────────────────────────────────────────────
+
+export const isCellEmpty = (cell: HTMLElement): boolean => {
+  const container = cell.querySelector(`[${CELL_BLOCKS_ATTR}]`);
+
+  if (!container) {
+    return true;
+  }
+
+  return (container.textContent ?? '').trim().length === 0;
+};
+
+export const isRowEmpty = (gridEl: HTMLElement, rowIndex: number): boolean => {
+  const rows = gridEl.querySelectorAll(`[${ROW_ATTR}]`);
+  const row = rows[rowIndex];
+
+  if (!row) {
+    return true;
+  }
+
+  const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
+
+  return Array.from(cells).every(cell => isCellEmpty(cell as HTMLElement));
+};
+
+export const isColumnEmpty = (gridEl: HTMLElement, colIndex: number): boolean => {
+  const rows = gridEl.querySelectorAll(`[${ROW_ATTR}]`);
+
+  return Array.from(rows).every(row => {
+    const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
+    const cell = cells[colIndex] as HTMLElement | undefined;
+
+    return !cell || isCellEmpty(cell);
+  });
+};
+
+// ─── Percent-mode width redistribution ──────────────────────────────
+
+export const redistributePercentWidths = (gridEl: HTMLElement): void => {
+  const rows = gridEl.querySelectorAll(`[${ROW_ATTR}]`);
+  const firstRow = rows[0];
+
+  if (!firstRow) {
+    return;
+  }
+
+  const firstRowCells = firstRow.querySelectorAll(`[${CELL_ATTR}]`);
+  const currentTotal = Array.from(firstRowCells).reduce(
+    (sum, cell) => sum + (parseFloat((cell as HTMLElement).style.width) || 0),
+    0,
+  );
+
+  if (currentTotal <= 0) {
+    return;
+  }
+
+  const scale = 100 / currentTotal;
+
+  rows.forEach(row => {
+    const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
+
+    cells.forEach(cell => {
+      const el = cell as HTMLElement;
+      const oldWidth = parseFloat(el.style.width) || 0;
+
+      el.style.width = `${Math.round(oldWidth * scale * 100) / 100}%`;
+    });
+  });
+};
+
+// ─── Column width bookkeeping ───────────────────────────────────────
+
+export const syncColWidthsAfterMove = (colWidths: number[] | undefined, fromIndex: number, toIndex: number): number[] | undefined => {
+  if (!colWidths) {
+    return colWidths;
+  }
+
+  const widths = [...colWidths];
+  const [moved] = widths.splice(fromIndex, 1);
+
+  widths.splice(toIndex, 0, moved);
+
+  return widths;
+};
+
+export const syncColWidthsAfterDeleteColumn = (colWidths: number[] | undefined, index: number): number[] | undefined => {
+  if (!colWidths) {
+    return colWidths;
+  }
+
+  const widths = [...colWidths];
+
+  widths.splice(index, 1);
+
+  return widths.length > 0 ? widths : undefined;
+};
+
+export const computeInsertColumnWidths = (
+  gridEl: HTMLElement,
+  index: number,
+  data: TableData,
+  grid: TableGrid,
+): number[] => {
+  const colWidths = data.colWidths ?? readPixelWidths(gridEl);
+
+  const halfWidth = data.initialColWidth !== undefined
+    ? Math.round((data.initialColWidth / 2) * 100) / 100
+    : computeHalfAvgWidth(colWidths);
+
+  grid.addColumn(gridEl, index, colWidths, halfWidth);
+
+  const newWidths = [...colWidths];
+
+  newWidths.splice(index, 0, halfWidth);
+
+  return newWidths;
+};
+
+export const computeHalfAvgWidth = (colWidths: number[]): number =>
+  Math.round(
+    (colWidths.reduce((sum, w) => sum + w, 0) / colWidths.length / 2) * 100
+  ) / 100;
+
+export const computeInitialColWidth = (colWidths: number[]): number => {
+  if (colWidths.length === 0) {
+    return 0;
+  }
+
+  return Math.round((colWidths.reduce((sum, w) => sum + w, 0) / colWidths.length) * 100) / 100;
+};
+
+// ─── Block IDs from cells ───────────────────────────────────────────
+
+export const getBlockIdsInRow = (element: HTMLElement | null, cellBlocks: TableCellBlocks | null, rowIndex: number): string[] => {
+  if (!element) {
+    return [];
+  }
+
+  const rows = element.querySelectorAll(`[${ROW_ATTR}]`);
+  const row = rows[rowIndex];
+
+  if (!row) {
+    return [];
+  }
+
+  return cellBlocks?.getBlockIdsFromCells(row.querySelectorAll(`[${CELL_ATTR}]`)) ?? [];
+};
+
+export const getBlockIdsInColumn = (element: HTMLElement | null, cellBlocks: TableCellBlocks | null, colIndex: number): string[] => {
+  if (!element) {
+    return [];
+  }
+
+  const rows = element.querySelectorAll(`[${ROW_ATTR}]`);
+  const cellsInColumn: Element[] = [];
+
+  rows.forEach(row => {
+    const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
+
+    if (colIndex < cells.length) {
+      cellsInColumn.push(cells[colIndex]);
+    }
+  });
+
+  return cellBlocks?.getBlockIdsFromCells(cellsInColumn) ?? [];
+};
+
+// ─── Row/column deletion with block cleanup ─────────────────────────
+
+export const deleteRowWithBlockCleanup = (
+  gridEl: HTMLElement,
+  rowIndex: number,
+  grid: TableGrid,
+  cellBlocks: TableCellBlocks | null,
+): void => {
+  const rows = gridEl.querySelectorAll(`[${ROW_ATTR}]`);
+  const row = rows[rowIndex];
+
+  if (row && cellBlocks) {
+    const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
+
+    cellBlocks.deleteBlocks(cellBlocks.getBlockIdsFromCells(cells));
+  }
+
+  grid.deleteRow(gridEl, rowIndex);
+};
+
+export const deleteColumnWithBlockCleanup = (
+  gridEl: HTMLElement,
+  colIndex: number,
+  colWidths: number[] | undefined,
+  grid: TableGrid,
+  cellBlocks: TableCellBlocks | null,
+): number[] | undefined => {
+  if (cellBlocks) {
+    const rows = gridEl.querySelectorAll(`[${ROW_ATTR}]`);
+    const cellsInColumn: Element[] = [];
+
+    rows.forEach(row => {
+      const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
+
+      if (colIndex < cells.length) {
+        cellsInColumn.push(cells[colIndex]);
+      }
+    });
+
+    cellBlocks.deleteBlocks(cellBlocks.getBlockIdsFromCells(cellsInColumn));
+  }
+
+  grid.deleteColumn(gridEl, colIndex);
+
+  return syncColWidthsAfterDeleteColumn(colWidths, colIndex);
+};
+
+// ─── Populate new cells ─────────────────────────────────────────────
+
+export const populateNewCells = (gridEl: HTMLElement, cellBlocks: TableCellBlocks | null): void => {
+  const cells = gridEl.querySelectorAll(`[${CELL_ATTR}]`);
+
+  cells.forEach(cell => {
+    cellBlocks?.ensureCellHasBlock(cell as HTMLElement);
+  });
+};
+
+// ─── Readonly block mounting ────────────────────────────────────────
+
+export const mountCellBlocksReadOnly = (
+  gridEl: HTMLElement,
+  content: LegacyCellContent[][],
+  api: API,
+): void => {
+  const rowElements = gridEl.querySelectorAll(`[${ROW_ATTR}]`);
+
+  content.forEach((rowData, rowIndex) => {
+    const row = rowElements[rowIndex];
+
+    if (!row) {
+      return;
+    }
+
+    const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
+
+    rowData.forEach((cellContent, colIndex) => {
+      const cell = cells[colIndex] as HTMLElement | undefined;
+
+      if (!cell) {
+        return;
+      }
+
+      const container = cell.querySelector<HTMLElement>(`[${CELL_BLOCKS_ATTR}]`);
+
+      if (!container) {
+        return;
+      }
+
+      // Skip legacy cells that already have blocks (idempotency guard)
+      const hasExistingBlocks = container.querySelectorAll('[data-blok-id]').length > 0;
+
+      if (!isCellWithBlocks(cellContent) && hasExistingBlocks) {
+        return;
+      }
+
+      if (!isCellWithBlocks(cellContent)) {
+        // Handle legacy string content by creating a paragraph block
+        const legacyText = typeof cellContent === 'string' ? cellContent : '';
+        const insertedBlock = api.blocks.insert(
+          'paragraph',
+          { text: legacyText },
+          {},
+          undefined,
+          true
+        );
+
+        insertedBlock?.holder && container.appendChild(insertedBlock.holder);
+
+        return;
+      }
+
+      for (const blockId of cellContent.blocks) {
+        const index = api.blocks.getBlockIndex(blockId);
+
+        if (index === undefined) {
+          continue;
+        }
+
+        const block = api.blocks.getBlockByIndex(index);
+
+        if (!block) {
+          continue;
+        }
+
+        container.appendChild(block.holder);
+      }
+    });
+  });
+};
+
+// ─── Data normalization ─────────────────────────────────────────────
+
+export const normalizeTableData = (
+  data: TableData | Record<string, never>,
+  config: { withHeadings?: boolean; stretched?: boolean },
+): TableData => {
+  const isTableData = typeof data === 'object' && data !== null && 'content' in data;
+
+  if (!isTableData) {
+    return {
+      withHeadings: config.withHeadings ?? false,
+      withHeadingColumn: false,
+      stretched: config.stretched ?? false,
+      content: [],
+    };
+  }
+
+  const tableData = data as TableData;
+  const cols = tableData.content?.[0]?.length;
+  const colWidths = tableData.colWidths;
+  const validWidths = colWidths && cols && colWidths.length === cols ? colWidths : undefined;
+
+  return {
+    withHeadings: tableData.withHeadings ?? config.withHeadings ?? false,
+    withHeadingColumn: tableData.withHeadingColumn ?? false,
+    stretched: tableData.stretched ?? config.stretched ?? false,
+    content: tableData.content ?? [],
+    colWidths: validWidths,
+    initialColWidth: tableData.initialColWidth,
+  };
+};
+
+// ─── Keyboard navigation ────────────────────────────────────────────
+
+export const setupKeyboardNavigation = (
+  gridEl: HTMLElement,
+  cellBlocks: TableCellBlocks | null,
+): void => {
+  gridEl.addEventListener('keydown', (event: KeyboardEvent) => {
+    const target = event.target as HTMLElement;
+    const cell = target.closest<HTMLElement>(`[${CELL_ATTR}]`);
+
+    if (!cell) {
+      return;
+    }
+
+    const position = getCellPosition(gridEl, cell);
+
+    if (position) {
+      cellBlocks?.handleKeyDown(event, position);
+    }
+  });
+};
+
+export const SCROLL_OVERFLOW_CLASSES = ['overflow-x-auto', 'pt-[9px]', 'pl-[9px]'];
+
+export const enableScrollOverflow = (element: HTMLDivElement | null): void => {
+  element?.classList.add(...SCROLL_OVERFLOW_CLASSES);
+};
+
+// ─── Heading styles ─────────────────────────────────────────────────
+
+export const updateHeadingStyles = (element: HTMLDivElement | null, withHeadings: boolean): void => {
+  if (!element) {
+    return;
+  }
+
+  const gridEl = element.firstElementChild as HTMLElement;
+
+  if (!gridEl) {
+    return;
+  }
+
+  const rows = gridEl.querySelectorAll(`[${ROW_ATTR}]`);
+
+  rows.forEach(row => {
+    row.removeAttribute('data-blok-table-heading');
+  });
+
+  if (withHeadings && rows.length > 0) {
+    rows[0].setAttribute('data-blok-table-heading', '');
+  }
+};
+
+export const updateHeadingColumnStyles = (element: HTMLDivElement | null, withHeadingColumn: boolean): void => {
+  if (!element) {
+    return;
+  }
+
+  const gridEl = element.firstElementChild as HTMLElement;
+
+  if (!gridEl) {
+    return;
+  }
+
+  const allCells = gridEl.querySelectorAll(`[${CELL_ATTR}]`);
+
+  allCells.forEach(cell => {
+    cell.removeAttribute('data-blok-table-heading-col');
+  });
+
+  if (withHeadingColumn) {
+    const rows = gridEl.querySelectorAll(`[${ROW_ATTR}]`);
+
+    rows.forEach(row => {
+      const firstCell = row.querySelector(`[${CELL_ATTR}]`);
+
+      if (firstCell) {
+        firstCell.setAttribute('data-blok-table-heading-col', '');
+      }
+    });
+  }
+};

package/src/tools/table/table-resize.ts

@@ -17,11 +17,14 @@ export class TableResize {
   private gridEl: HTMLElement;
   private colWidths: number[];
   private onChange: (widths: number[]) => void;
+  private onDragStart: (() => void) | null;
+  private onDrag: (() => void) | null;
   private isDragging = false;
   private dragStartX = 0;
   private dragColIndex = -1;
   private startColWidth = 0;
   private handles: HTMLElement[] = [];
+  private needsInitialApply: boolean;
 
   private boundPointerDown: (e: PointerEvent) => void;
   private boundPointerMove: (e: PointerEvent) => void;
@@ -43,17 +46,24 @@ export class TableResize {
     });
   }
 
-  constructor(gridEl: HTMLElement, colWidths: number[], onChange: (widths: number[]) => void) {
+  constructor(gridEl: HTMLElement, colWidths: number[], onChange: (widths: number[]) => void, onDragStart?: () => void, onDrag?: () => void, skipInitialApply = false) {
     this.gridEl = gridEl;
     this.colWidths = [...colWidths];
     this.onChange = onChange;
+    this.onDragStart = onDragStart ?? null;
+    this.onDrag = onDrag ?? null;
+    this.needsInitialApply = skipInitialApply;
 
     this.boundPointerDown = this.onPointerDown.bind(this);
     this.boundPointerMove = this.onPointerMove.bind(this);
     this.boundPointerUp = this.onPointerUp.bind(this);
 
     this.gridEl.style.position = 'relative';
-    this.applyWidths();
+
+    if (!skipInitialApply) {
+      this.applyWidths();
+    }
+
     this.createHandles();
 
     this.gridEl.addEventListener('pointerdown', this.boundPointerDown);
@@ -96,17 +106,20 @@ export class TableResize {
     handle.style.left = `${leftPx - HANDLE_HIT_WIDTH / 2}px`;
     handle.style.cursor = 'col-resize';
     handle.style.zIndex = '2';
+    handle.style.background = 'linear-gradient(to right, transparent 7px, #3b82f6 7px, #3b82f6 9px, transparent 9px)';
+    handle.style.opacity = '0';
+    handle.style.transition = 'opacity 150ms ease';
     handle.setAttribute('contenteditable', 'false');
 
     handle.addEventListener('mouseenter', () => {
       if (!this.isDragging) {
-        handle.style.background = 'linear-gradient(to right, transparent 7px, #3b82f6 7px, #3b82f6 9px, transparent 9px)';
+        handle.style.opacity = '1';
       }
     });
 
     handle.addEventListener('mouseleave', () => {
       if (!this.isDragging) {
-        handle.style.background = '';
+        handle.style.opacity = '0';
       }
     });
 
@@ -139,6 +152,12 @@ export class TableResize {
 
     e.preventDefault();
 
+    if (this.needsInitialApply) {
+      this.applyWidths();
+      this.updateHandlePositions();
+      this.needsInitialApply = false;
+    }
+
     const colStr = target.getAttribute('data-col');
 
     if (colStr === null) {
@@ -150,9 +169,10 @@ export class TableResize {
     this.dragStartX = e.clientX;
     this.startColWidth = this.colWidths[this.dragColIndex];
 
+    this.onDragStart?.();
     this.gridEl.style.userSelect = 'none';
 
-    target.style.background = 'linear-gradient(to right, transparent 7px, #3b82f6 7px, #3b82f6 9px, transparent 9px)';
+    target.style.opacity = '1';
 
     if (target.setPointerCapture) {
       target.setPointerCapture(e.pointerId);
@@ -174,6 +194,7 @@ export class TableResize {
     this.colWidths[this.dragColIndex] = newWidth;
     this.applyWidths();
     this.updateHandlePositions();
+    this.onDrag?.();
   }
 
   private onPointerUp(): void {
@@ -187,7 +208,7 @@ export class TableResize {
     const activeHandle = this.handles[this.dragColIndex];
 
     if (activeHandle) {
-      activeHandle.style.background = '';
+      activeHandle.style.opacity = '0';
     }
 
     document.removeEventListener('pointermove', this.boundPointerMove);

package/src/tools/table/table-restrictions.ts

@@ -0,0 +1,64 @@
+import type { API } from '../../../types';
+import type { Block } from '../../components/block';
+
+/**
+ * List of block tools that are restricted from being inserted into table cells.
+ * These tools create semantic or structural issues when nested in table cells.
+ */
+export const RESTRICTED_TOOLS = ['header', 'table'];
+
+/**
+ * Check if a block or element is inside a table cell.
+ * Uses the data-blok-table-cell-blocks attribute to detect cell containers.
+ *
+ * @param block - Block instance or HTMLElement to check
+ * @returns true if inside a table cell, false otherwise
+ */
+export const isInsideTableCell = (block: Block | HTMLElement | null | undefined): boolean => {
+  if (!block) {
+    return false;
+  }
+
+  const element = block instanceof HTMLElement ? block : block.holder;
+
+  return element.closest('[data-blok-table-cell-blocks]') !== null;
+};
+
+/**
+ * Check if a tool name is restricted inside table cells.
+ *
+ * @param toolName - Name of the block tool to check
+ * @returns true if the tool is restricted in table cells, false otherwise
+ */
+export const isRestrictedInTableCell = (toolName: string): boolean => {
+  return RESTRICTED_TOOLS.includes(toolName);
+};
+
+/**
+ * Convert a restricted block to a paragraph block, preserving text content.
+ * Replaces the original block in place.
+ *
+ * @param block - The block to convert
+ * @param api - Blok API instance
+ * @returns The newly created paragraph block
+ * @throws Error if block index cannot be found
+ */
+export const convertToParagraph = (block: Block, api: API): Block => {
+  const text = block.holder.textContent || '';
+  const blockIndex = api.blocks.getBlockIndex(block.id);
+
+  if (blockIndex === undefined) {
+    throw new Error('Block index not found');
+  }
+
+  // Replace with paragraph, preserving text
+  return api.blocks.insert(
+    'paragraph',
+    { text },
+    {},
+    blockIndex,
+    false, // don't focus
+    true,  // replace existing
+    block.id
+  ) as unknown as Block;
+};