@jackuait/blok 0.6.0-beta.4 → 0.6.0-beta.5

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

@@ -20,6 +20,7 @@ const CELL_CLASSES = [
   'outline-none',
   'leading-normal',
   'text-sm',
+  'cursor-text',
 ];
 
 /**
@@ -131,7 +132,7 @@ export class TableGrid {
    * those widths and the new column is added in px mode. This prevents
    * existing columns from shrinking when the table is in percent mode.
    */
-  public addColumn(table: HTMLElement, index?: number, colWidths?: number[]): boolean {
+  public addColumn(table: HTMLElement, index?: number, colWidths?: number[], newColWidth?: number): boolean {
     const rows = table.querySelectorAll(`[${ROW_ATTR}]`);
     const oldColCount = this.getColumnCount(table);
     const hasValidColWidths = colWidths !== undefined && colWidths.length === oldColCount;
@@ -142,7 +143,7 @@ export class TableGrid {
     }
 
     if (usePx) {
-      this.addColumnPx(rows, oldColCount, index);
+      this.addColumnPx(rows, oldColCount, index, newColWidth);
 
       return true;
     }
@@ -170,24 +171,15 @@ export class TableGrid {
   }
 
   /**
-   * Add column in px mode: keep existing widths, add new column at half the average width
+   * Add column in px mode: keep existing widths, add new column at given width or half the average
    */
-  private addColumnPx(rows: NodeListOf<Element>, oldColCount: number, index?: number): void {
-    const firstRow = rows[0];
-    const firstRowCells = firstRow?.querySelectorAll(`[${CELL_ATTR}]`);
-    const totalWidth = Array.from(firstRowCells ?? []).reduce(
-      (sum, node) => sum + (parseFloat((node as HTMLElement).style.width) || 0),
-      0
-    );
-
-    const newColWidth = oldColCount > 0
-      ? Math.round((totalWidth / oldColCount / 2) * 100) / 100
-      : 0;
+  private addColumnPx(rows: NodeListOf<Element>, oldColCount: number, index?: number, newColWidth?: number): void {
+    const computedWidth = newColWidth ?? this.computeHalfAvgPxWidth(rows, oldColCount);
 
     rows.forEach(row => {
       const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
       const isAppend = index === undefined || index >= cells.length;
-      const cell = this.createCell(`${newColWidth}px`);
+      const cell = this.createCell(`${computedWidth}px`);
 
       if (!isAppend) {
         row.insertBefore(cell, cells[index]);
@@ -199,6 +191,19 @@ export class TableGrid {
     });
   }
 
+  private computeHalfAvgPxWidth(rows: NodeListOf<Element>, oldColCount: number): number {
+    const firstRow = rows[0];
+    const firstRowCells = firstRow?.querySelectorAll(`[${CELL_ATTR}]`);
+    const totalWidth = Array.from(firstRowCells ?? []).reduce(
+      (sum, node) => sum + (parseFloat((node as HTMLElement).style.width) || 0),
+      0
+    );
+
+    return oldColCount > 0
+      ? Math.round((totalWidth / oldColCount / 2) * 100) / 100
+      : 0;
+  }
+
   /**
    * Add column in % mode: shrink existing columns slightly and add new column at half the average width
    */

package/src/tools/table/table-grip-visuals.ts

@@ -57,9 +57,9 @@ export const createGripDotsSvg = (orientation: 'horizontal' | 'vertical'): SVGEl
  */
 export const expandGrip = (grip: HTMLElement, type: 'col' | 'row'): void => {
   if (type === 'col') {
-    grip.style.height = `${GRIP_HOVER_SIZE}px`;
+    Object.assign(grip.style, { height: `${GRIP_HOVER_SIZE}px` });
   } else {
-    grip.style.width = `${GRIP_HOVER_SIZE}px`;
+    Object.assign(grip.style, { width: `${GRIP_HOVER_SIZE}px` });
   }
 
   grip.classList.add('bg-gray-200');
@@ -79,9 +79,9 @@ export const expandGrip = (grip: HTMLElement, type: 'col' | 'row'): void => {
  */
 export const collapseGrip = (grip: HTMLElement, type: 'col' | 'row', pillSize: number): void => {
   if (type === 'col') {
-    grip.style.height = `${pillSize}px`;
+    Object.assign(grip.style, { height: `${pillSize}px` });
   } else {
-    grip.style.width = `${pillSize}px`;
+    Object.assign(grip.style, { width: `${pillSize}px` });
   }
 
   grip.classList.remove('bg-gray-200');

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

@@ -168,14 +168,15 @@ export const computeInsertColumnWidths = (
 ): number[] => {
   const colWidths = data.colWidths ?? readPixelWidths(gridEl);
 
-  grid.addColumn(gridEl, index, colWidths);
+  const halfWidth = data.initialColWidth !== undefined
+    ? Math.round((data.initialColWidth / 2) * 100) / 100
+    : computeHalfAvgWidth(colWidths);
+
+  grid.addColumn(gridEl, index, colWidths, halfWidth);
 
-  const halfAvgWidth = Math.round(
-    (colWidths.reduce((sum, w) => sum + w, 0) / colWidths.length / 2) * 100
-  ) / 100;
   const newWidths = [...colWidths];
 
-  newWidths.splice(index, 0, halfAvgWidth);
+  newWidths.splice(index, 0, halfWidth);
 
   return newWidths;
 };
@@ -185,6 +186,14 @@ export const computeHalfAvgWidth = (colWidths: number[]): number =>
     (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[] => {
@@ -309,15 +318,15 @@ export const mountCellBlocksReadOnly = (
         return;
       }
 
-      if (!isCellWithBlocks(cellContent)) {
-        // Handle legacy string content by creating a paragraph block
-        // Check if container already has blocks to ensure idempotency
-        const existingBlocks = container.querySelectorAll('[data-blok-id]');
+      // Skip legacy cells that already have blocks (idempotency guard)
+      const hasExistingBlocks = container.querySelectorAll('[data-blok-id]').length > 0;
 
-        if (existingBlocks.length > 0) {
-          return;
-        }
+      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',
@@ -379,6 +388,7 @@ export const normalizeTableData = (
     stretched: tableData.stretched ?? config.stretched ?? false,
     content: tableData.content ?? [],
     colWidths: validWidths,
+    initialColWidth: tableData.initialColWidth,
   };
 };
 

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;
+};

package/src/tools/table/table-row-col-action-handler.ts

@@ -0,0 +1,190 @@
+import type { TableCellBlocks } from './table-cell-blocks';
+import type { TableGrid } from './table-core';
+import {
+  applyPixelWidths,
+  computeInsertColumnWidths,
+  deleteColumnWithBlockCleanup,
+  deleteRowWithBlockCleanup,
+  populateNewCells,
+  redistributePercentWidths,
+  syncColWidthsAfterMove,
+} from './table-operations';
+import type { RowColAction } from './table-row-col-controls';
+import type { TableData } from './types';
+
+/**
+ * Describes which row or column to highlight after an action completes.
+ */
+export type PendingHighlight = { type: 'row' | 'col'; index: number };
+
+interface ActionContext {
+  grid: TableGrid;
+  data: TableData;
+  cellBlocks: TableCellBlocks | null;
+}
+
+interface ActionResult {
+  pendingHighlight: PendingHighlight | null;
+  moveSelection: { type: 'row' | 'col'; index: number } | null;
+  colWidths: number[] | undefined;
+  withHeadings: boolean;
+  withHeadingColumn: boolean;
+}
+
+const handleInsertRow = (
+  gridEl: HTMLElement,
+  index: number,
+  ctx: ActionContext,
+): ActionResult => {
+  ctx.grid.addRow(gridEl, index);
+  populateNewCells(gridEl, ctx.cellBlocks);
+
+  return {
+    pendingHighlight: { type: 'row', index },
+    moveSelection: null,
+    colWidths: ctx.data.colWidths,
+    withHeadings: ctx.data.withHeadings,
+    withHeadingColumn: ctx.data.withHeadingColumn,
+  };
+};
+
+const handleInsertCol = (
+  gridEl: HTMLElement,
+  index: number,
+  ctx: ActionContext,
+): ActionResult => {
+  const colWidths = computeInsertColumnWidths(gridEl, index, ctx.data, ctx.grid);
+
+  populateNewCells(gridEl, ctx.cellBlocks);
+
+  return {
+    pendingHighlight: { type: 'col', index },
+    moveSelection: null,
+    colWidths,
+    withHeadings: ctx.data.withHeadings,
+    withHeadingColumn: ctx.data.withHeadingColumn,
+  };
+};
+
+const handleMoveRow = (
+  gridEl: HTMLElement,
+  fromIndex: number,
+  toIndex: number,
+  ctx: ActionContext,
+): ActionResult => {
+  ctx.grid.moveRow(gridEl, fromIndex, toIndex);
+
+  return {
+    pendingHighlight: null,
+    moveSelection: { type: 'row', index: toIndex },
+    colWidths: ctx.data.colWidths,
+    withHeadings: ctx.data.withHeadings,
+    withHeadingColumn: ctx.data.withHeadingColumn,
+  };
+};
+
+const handleMoveCol = (
+  gridEl: HTMLElement,
+  fromIndex: number,
+  toIndex: number,
+  ctx: ActionContext,
+): ActionResult => {
+  ctx.grid.moveColumn(gridEl, fromIndex, toIndex);
+
+  return {
+    pendingHighlight: null,
+    moveSelection: { type: 'col', index: toIndex },
+    colWidths: syncColWidthsAfterMove(ctx.data.colWidths, fromIndex, toIndex),
+    withHeadings: ctx.data.withHeadings,
+    withHeadingColumn: ctx.data.withHeadingColumn,
+  };
+};
+
+const handleDeleteRow = (
+  gridEl: HTMLElement,
+  index: number,
+  ctx: ActionContext,
+): ActionResult => {
+  deleteRowWithBlockCleanup(gridEl, index, ctx.grid, ctx.cellBlocks);
+  const newRowCount = ctx.grid.getRowCount(gridEl);
+  const neighborRow = index < newRowCount ? index : index - 1;
+
+  return {
+    pendingHighlight: { type: 'row', index: neighborRow },
+    moveSelection: null,
+    colWidths: ctx.data.colWidths,
+    withHeadings: ctx.data.withHeadings,
+    withHeadingColumn: ctx.data.withHeadingColumn,
+  };
+};
+
+const handleDeleteCol = (
+  gridEl: HTMLElement,
+  index: number,
+  ctx: ActionContext,
+): ActionResult => {
+  const colWidths = deleteColumnWithBlockCleanup(gridEl, index, ctx.data.colWidths, ctx.grid, ctx.cellBlocks);
+
+  if (colWidths) {
+    applyPixelWidths(gridEl, colWidths);
+  } else {
+    redistributePercentWidths(gridEl);
+  }
+
+  const newColCount = ctx.grid.getColumnCount(gridEl);
+  const neighborCol = index < newColCount ? index : index - 1;
+
+  return {
+    pendingHighlight: { type: 'col', index: neighborCol },
+    moveSelection: null,
+    colWidths,
+    withHeadings: ctx.data.withHeadings,
+    withHeadingColumn: ctx.data.withHeadingColumn,
+  };
+};
+
+/**
+ * Execute a row/column action on the table grid.
+ * Returns the updated colWidths, withHeadings, withHeadingColumn values
+ * along with pendingHighlight and moveSelection for the caller to apply.
+ */
+export const executeRowColAction = (
+  gridEl: HTMLElement,
+  action: RowColAction,
+  ctx: ActionContext,
+): ActionResult => {
+  switch (action.type) {
+    case 'insert-row-above':
+      return handleInsertRow(gridEl, action.index, ctx);
+    case 'insert-row-below':
+      return handleInsertRow(gridEl, action.index + 1, ctx);
+    case 'insert-col-left':
+      return handleInsertCol(gridEl, action.index, ctx);
+    case 'insert-col-right':
+      return handleInsertCol(gridEl, action.index + 1, ctx);
+    case 'move-row':
+      return handleMoveRow(gridEl, action.fromIndex, action.toIndex, ctx);
+    case 'move-col':
+      return handleMoveCol(gridEl, action.fromIndex, action.toIndex, ctx);
+    case 'delete-row':
+      return handleDeleteRow(gridEl, action.index, ctx);
+    case 'delete-col':
+      return handleDeleteCol(gridEl, action.index, ctx);
+    case 'toggle-heading':
+      return {
+        pendingHighlight: { type: 'row', index: 0 },
+        moveSelection: null,
+        colWidths: ctx.data.colWidths,
+        withHeadings: !ctx.data.withHeadings,
+        withHeadingColumn: ctx.data.withHeadingColumn,
+      };
+    case 'toggle-heading-column':
+      return {
+        pendingHighlight: { type: 'col', index: 0 },
+        moveSelection: null,
+        colWidths: ctx.data.colWidths,
+        withHeadings: ctx.data.withHeadings,
+        withHeadingColumn: !ctx.data.withHeadingColumn,
+      };
+  }
+};