@jackuait/blok 0.10.0-beta.6 → 0.10.0-beta.7

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

@@ -2,7 +2,7 @@ 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 { BORDER_WIDTH, ROW_ATTR, CELL_ATTR, CELL_COL_ATTR } from './table-core';
 import type { TableGrid } from './table-core';
 import type { LegacyCellContent, TableData } from './types';
 import { isCellWithBlocks } from './types';
@@ -10,37 +10,51 @@ import { isCellWithBlocks } from './types';
 // ─── Pure DOM helpers ───────────────────────────────────────────────
 
 export const readPixelWidths = (gridEl: HTMLElement): number[] => {
-  const firstRow = gridEl.querySelector(`[${ROW_ATTR}]`);
+  const colgroup = gridEl.querySelector('colgroup');
 
-  if (!firstRow) {
+  if (!colgroup) {
     return [];
   }
 
-  const cells = firstRow.querySelectorAll(`[${CELL_ATTR}]`);
+  const cols = colgroup.querySelectorAll('col');
+  const firstCol = cols[0] as HTMLElement | undefined;
 
-  return Array.from(cells).map(cell =>
-    (cell as HTMLElement).getBoundingClientRect().width
+  // When columns use percentage widths, parseFloat would return the percentage
+  // number (e.g. 50 from "50%") which is not a pixel value. In that case,
+  // read actual rendered widths from the first row's cells.
+  if (firstCol && firstCol.style.width.endsWith('%')) {
+    const firstRow = gridEl.querySelector(`[${ROW_ATTR}]`);
+
+    if (firstRow) {
+      return Array.from(firstRow.querySelectorAll(`[${CELL_ATTR}]`)).map(
+        cell => Math.round(cell.getBoundingClientRect().width)
+      );
+    }
+  }
+
+  return Array.from(cols).map(col =>
+    parseFloat((col as HTMLElement).style.width) || 0
   );
 };
 
 export const applyPixelWidths = (gridEl: HTMLElement, widths: number[]): void => {
   const totalWidth = widths.reduce((sum, w) => sum + w, 0);
-  const gridStyle: HTMLElement = gridEl;
+  const grid: HTMLElement = gridEl;
 
-  gridStyle.style.width = `${totalWidth + BORDER_WIDTH}px`;
+  grid.style.width = `${totalWidth + BORDER_WIDTH}px`;
 
-  const rowEls = gridEl.querySelectorAll(`[${ROW_ATTR}]`);
+  const colgroup = gridEl.querySelector('colgroup');
 
-  rowEls.forEach(row => {
-    const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
+  if (!colgroup) {
+    return;
+  }
 
-    cells.forEach((node, i) => {
-      if (i < widths.length) {
-        const cellEl = node as HTMLElement;
+  const cols = Array.from(colgroup.querySelectorAll('col')) as HTMLElement[];
 
-        cellEl.style.width = `${widths[i]}px`;
-      }
-    });
+  widths.forEach((w, i) => {
+    if (i < cols.length) {
+      cols[i].style.width = `${w}px`;
+    }
   });
 };
 
@@ -92,8 +106,7 @@ 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;
+    const cell = row.querySelector<HTMLElement>(`[${CELL_COL_ATTR}="${colIndex}"]`);
 
     return !cell || isCellEmpty(cell);
   });
@@ -102,16 +115,15 @@ export const isColumnEmpty = (gridEl: HTMLElement, colIndex: number): boolean =>
 // ─── Percent-mode width redistribution ──────────────────────────────
 
 export const redistributePercentWidths = (gridEl: HTMLElement): void => {
-  const rows = gridEl.querySelectorAll(`[${ROW_ATTR}]`);
-  const firstRow = rows[0];
+  const colgroup = gridEl.querySelector('colgroup');
 
-  if (!firstRow) {
+  if (!colgroup) {
     return;
   }
 
-  const firstRowCells = firstRow.querySelectorAll(`[${CELL_ATTR}]`);
-  const currentTotal = Array.from(firstRowCells).reduce(
-    (sum, cell) => sum + (parseFloat((cell as HTMLElement).style.width) || 0),
+  const cols = colgroup.querySelectorAll('col');
+  const currentTotal = Array.from(cols).reduce(
+    (sum, col) => sum + (parseFloat((col as HTMLElement).style.width) || 0),
     0,
   );
 
@@ -121,15 +133,11 @@ export const redistributePercentWidths = (gridEl: HTMLElement): void => {
 
   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;
+  cols.forEach(col => {
+    const el = col as HTMLElement;
+    const oldWidth = parseFloat(el.style.width) || 0;
 
-      el.style.width = `${Math.round(oldWidth * scale * 100) / 100}%`;
-    });
+    el.style.width = `${Math.round(oldWidth * scale * 100) / 100}%`;
   });
 };
 
@@ -221,10 +229,10 @@ export const getBlockIdsInColumn = (element: HTMLElement | null, cellBlocks: Tab
   const cellsInColumn: Element[] = [];
 
   rows.forEach(row => {
-    const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
+    const cell = row.querySelector(`[${CELL_COL_ATTR}="${colIndex}"]`);
 
-    if (colIndex < cells.length) {
-      cellsInColumn.push(cells[colIndex]);
+    if (cell) {
+      cellsInColumn.push(cell);
     }
   });
 
@@ -258,10 +266,8 @@ export const mountCellBlocksReadOnly = (
       return;
     }
 
-    const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
-
     rowData.forEach((cellContent, colIndex) => {
-      const cell = cells[colIndex] as HTMLElement | undefined;
+      const cell = row.querySelector<HTMLElement>(`[${CELL_COL_ATTR}="${colIndex}"]`);
 
       if (!cell) {
         return;
@@ -408,15 +414,13 @@ export const applyCellColors = (gridEl: HTMLElement, content: LegacyCellContent[
       return;
     }
 
-    const cells = rows[r].querySelectorAll(`[${CELL_ATTR}]`);
-
     rowContent.forEach((cellContent, c) => {
-      if (c >= cells.length) {
+      const el = rows[r].querySelector<HTMLElement>(`[${CELL_COL_ATTR}="${c}"]`);
+
+      if (!el) {
         return;
       }
 
-      const el = cells[c] as HTMLElement;
-
       if (isCellWithBlocks(cellContent) && cellContent.color) {
         el.style.backgroundColor = cellContent.color;
       } else {
@@ -432,6 +436,36 @@ export const applyCellColors = (gridEl: HTMLElement, content: LegacyCellContent[
   });
 };
 
+export const applyCellPlacements = (gridEl: HTMLElement, content: LegacyCellContent[][]): void => {
+  const rows = gridEl.querySelectorAll(`[${ROW_ATTR}]`);
+
+  content.forEach((rowContent, r) => {
+    if (r >= rows.length) {
+      return;
+    }
+
+    rowContent.forEach((cellContent, c) => {
+      const el = rows[r].querySelector<HTMLElement>(`[${CELL_COL_ATTR}="${c}"]`);
+
+      if (!el) {
+        return;
+      }
+
+      const blocksContainer = el.querySelector<HTMLElement>(`[${CELL_BLOCKS_ATTR}]`);
+
+      if (!blocksContainer) {
+        return;
+      }
+
+      if (isCellWithBlocks(cellContent) && cellContent.placement && cellContent.placement !== 'top-left') {
+        blocksContainer.setAttribute('data-blok-cell-placement', cellContent.placement);
+      } else {
+        blocksContainer.removeAttribute('data-blok-cell-placement');
+      }
+    });
+  });
+};
+
 export const updateHeadingColumnStyles = (gridEl: HTMLElement | null, withHeadingColumn: boolean): void => {
   if (!gridEl) {
     return;

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

@@ -1,8 +1,6 @@
 import { BORDER_WIDTH } from './table-core';
 
 const RESIZE_ATTR = 'data-blok-table-resize';
-const CELL_ATTR = 'data-blok-table-cell';
-const ROW_ATTR = 'data-blok-table-row';
 const MIN_COL_WIDTH = 50;
 const HANDLE_HIT_WIDTH = 16;
 
@@ -23,7 +21,7 @@ export class TableResize {
   private dragStartX = 0;
   private dragColIndex = -1;
   private startColWidth = 0;
-  private dragRowCells: HTMLElement[][] | null = null;
+  private dragColElements: HTMLElement[] | null = null;
   private handles: HTMLElement[] = [];
   private needsInitialApply: boolean;
 
@@ -74,7 +72,7 @@ export class TableResize {
     this.gridEl.removeEventListener('pointerdown', this.boundPointerDown);
     document.removeEventListener('pointermove', this.boundPointerMove);
     document.removeEventListener('pointerup', this.boundPointerUp);
-    this.dragRowCells = null;
+    this.dragColElements = null;
 
     this.handles.forEach(handle => handle.remove());
     this.handles = [];
@@ -170,7 +168,7 @@ export class TableResize {
     this.isDragging = true;
     this.dragStartX = e.clientX;
     this.startColWidth = this.colWidths[this.dragColIndex];
-    this.dragRowCells = this.resolveRowCells();
+    this.dragColElements = this.resolveColElements();
 
     this.onDragStart?.();
     this.gridEl.style.userSelect = 'none';
@@ -195,7 +193,7 @@ export class TableResize {
     const newWidth = Math.max(MIN_COL_WIDTH, rawWidth);
 
     this.colWidths[this.dragColIndex] = newWidth;
-    this.applyWidths(this.dragRowCells ?? undefined);
+    this.applyWidths(this.dragColElements ?? undefined);
     this.updateHandlePositions();
     this.onDrag?.();
   }
@@ -216,28 +214,32 @@ export class TableResize {
 
     document.removeEventListener('pointermove', this.boundPointerMove);
     document.removeEventListener('pointerup', this.boundPointerUp);
-    this.dragRowCells = null;
+    this.dragColElements = null;
 
     this.onChange([...this.colWidths]);
   }
 
-  private resolveRowCells(): HTMLElement[][] {
-    const rows = this.gridEl.querySelectorAll<HTMLElement>(`[${ROW_ATTR}]`);
+  private resolveColElements(): HTMLElement[] {
+    const colgroup = this.gridEl.querySelector('colgroup');
 
-    return Array.from(rows, row => Array.from(row.querySelectorAll<HTMLElement>(`[${CELL_ATTR}]`)));
+    if (!colgroup) {
+      return [];
+    }
+
+    return Array.from(colgroup.querySelectorAll<HTMLElement>('col'));
   }
 
-  private applyWidths(rowCells: HTMLElement[][] = this.resolveRowCells()): void {
+  private applyWidths(cols: HTMLElement[] = this.resolveColElements()): void {
     const totalWidth = this.colWidths.reduce((sum, w) => sum + w, 0);
 
     this.gridEl.style.width = `${totalWidth + BORDER_WIDTH}px`;
 
-    rowCells.forEach(cells => {
-      cells.forEach((cellEl, i) => {
-        if (i < this.colWidths.length) {
-          cellEl.style.setProperty('width', `${this.colWidths[i]}px`);
-        }
-      });
+    cols.forEach((colEl, i) => {
+      if (i < this.colWidths.length) {
+        const el: HTMLElement = colEl;
+
+        el.style.width = `${this.colWidths[i]}px`;
+      }
     });
   }
 }

package/src/tools/table/table-row-col-drag.ts

@@ -1,4 +1,4 @@
-import { BORDER_WIDTH, CELL_ATTR, ROW_ATTR } from './table-core';
+import { BORDER_WIDTH, CELL_ATTR, CELL_COL_ATTR, ROW_ATTR } from './table-core';
 import type { RowColAction } from './table-row-col-controls';
 
 const DRAG_THRESHOLD = 10;
@@ -10,6 +10,23 @@ const GHOST_ATTR = 'data-blok-table-drag-ghost';
  * plus the right edge of the last column.
  */
 export const getCumulativeColEdges = (grid: HTMLElement): number[] => {
+  const colgroup = grid.querySelector('colgroup');
+
+  if (colgroup) {
+    const cols = Array.from(colgroup.querySelectorAll('col'));
+
+    return cols.reduce<number[]>(
+      (edges, col) => {
+        const last = edges[edges.length - 1];
+        const width = (col as HTMLElement).offsetWidth || parseFloat((col as HTMLElement).style.width) || 0;
+
+        return [...edges, last + width];
+      },
+      [0]
+    );
+  }
+
+  // Fallback for grids without colgroup
   const firstRow = grid.querySelector(`[${ROW_ATTR}]`);
 
   if (!firstRow) {
@@ -211,14 +228,12 @@ export class TableRowColDrag {
     const dragBg = this.getDragSourceBg();
 
     rows.forEach(row => {
-      const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
+      const cellEl = row.querySelector<HTMLElement>(`[${CELL_COL_ATTR}="${this.dragFromIndex}"]`);
 
-      if (this.dragFromIndex >= cells.length) {
+      if (!cellEl) {
         return;
       }
 
-      const cellEl = cells[this.dragFromIndex] as HTMLElement;
-
       cellEl.style.backgroundColor = dragBg;
       cellEl.style.opacity = '0.7';
       this.dragOverlayCells.push(cellEl);
@@ -418,8 +433,8 @@ export class TableRowColDrag {
       return null;
     }
 
-    const firstCell = firstRow.querySelectorAll(`[${CELL_ATTR}]`)[this.dragFromIndex] as HTMLElement | undefined;
-    const lastCell = lastRow.querySelectorAll(`[${CELL_ATTR}]`)[this.dragFromIndex] as HTMLElement | undefined;
+    const firstCell = firstRow.querySelector<HTMLElement>(`[${CELL_COL_ATTR}="${this.dragFromIndex}"]`);
+    const lastCell = lastRow.querySelector<HTMLElement>(`[${CELL_COL_ATTR}="${this.dragFromIndex}"]`);
 
     if (!firstCell || !lastCell) {
       return null;
@@ -469,13 +484,12 @@ export class TableRowColDrag {
     ghostStyle.flexDirection = 'column';
 
     rows.forEach(row => {
-      const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
+      const cellEl = row.querySelector<HTMLElement>(`[${CELL_COL_ATTR}="${this.dragFromIndex}"]`);
 
-      if (this.dragFromIndex >= cells.length) {
+      if (!cellEl) {
         return;
       }
 
-      const cellEl = cells[this.dragFromIndex] as HTMLElement;
       const clone = cellEl.cloneNode(true) as HTMLElement;
 
       clone.style.width = `${cellEl.offsetWidth}px`;

package/src/tools/table/types.ts

@@ -1,10 +1,32 @@
 import type { BlockToolData } from '../../../types';
 
+/**
+ * Content placement within a cell.
+ * Describes vertical (top/middle/bottom) and horizontal (left/center/right) alignment.
+ */
+export type CellPlacement =
+  | 'top-left' | 'top-center' | 'top-right'
+  | 'middle-left' | 'middle-center' | 'middle-right'
+  | 'bottom-left' | 'bottom-center' | 'bottom-right';
+
 /**
  * Cell content always contains block IDs.
  * Every cell in the table is represented as an array of block references.
  */
-export type CellContent = { blocks: string[]; color?: string; textColor?: string; text?: string };
+export type CellContent = {
+  blocks: string[];
+  color?: string;
+  textColor?: string;
+  text?: string;
+  /** Content placement within the cell (vertical + horizontal alignment). */
+  placement?: CellPlacement;
+  /** Number of columns this cell spans (default 1 when omitted). Only set on origin cells. */
+  colspan?: number;
+  /** Number of rows this cell spans (default 1 when omitted). Only set on origin cells. */
+  rowspan?: number;
+  /** If set, this cell is covered by a merge whose origin is at [row, col]. */
+  mergedInto?: [number, number];
+};
 
 /**
  * Legacy cell content type for migration from string-based cells.
@@ -73,5 +95,5 @@ export interface ClipboardBlockData {
 export interface TableCellsClipboard {
   rows: number;
   cols: number;
-  cells: Array<Array<{ blocks: ClipboardBlockData[]; color?: string; textColor?: string }>>;
+  cells: Array<Array<{ blocks: ClipboardBlockData[]; color?: string; textColor?: string; placement?: CellPlacement }>>;
 }

package/types/data-attributes.d.ts

@@ -27,7 +27,6 @@ export const DATA_ATTR: {
   readonly empty: 'data-blok-empty';
 
   // Editor Modes
-  readonly narrow: 'data-blok-narrow';
   readonly rtl: 'data-blok-rtl';
 
   // Drag and Drop

package/types/tools/code.d.ts

@@ -8,4 +8,6 @@ export interface CodeData extends BlockToolData {
   code: string;
   /** Language identifier, e.g. "javascript", "plain text" */
   language: string;
+  /** Whether to show line numbers in the gutter */
+  lineNumbers?: boolean;
 }