@jackuait/blok 0.10.2 → 0.10.4

package/src/tools/database/types.ts

@@ -0,0 +1,152 @@
+import type { BlockToolData, OutputData } from '../../../types';
+
+// ─── Property types ───
+
+export type PropertyType = 'title' | 'text' | 'number' | 'select' | 'multiSelect' | 'date' | 'checkbox' | 'url' | 'richText';
+
+export interface SelectOption {
+  id: string;
+  label: string;
+  color?: string;
+  position: string;
+}
+
+export interface SelectPropertyConfig {
+  options: SelectOption[];
+}
+
+export type PropertyConfig = SelectPropertyConfig;
+
+export interface PropertyDefinition {
+  id: string;
+  name: string;
+  type: PropertyType;
+  position: string;
+  config?: PropertyConfig;
+}
+
+export type PropertyValue = string | number | boolean | string[] | OutputData | null;
+
+// ─── Rows ───
+
+export interface DatabaseRow {
+  id: string;
+  position: string;
+  properties: Record<string, PropertyValue>;
+}
+
+export interface DatabaseRowData extends BlockToolData {
+  properties: Record<string, PropertyValue>;
+  position: string;
+}
+
+// ─── View config ───
+
+export type ViewType = 'board' | 'table' | 'gallery' | 'list';
+
+export interface SortConfig {
+  propertyId: string;
+  direction: 'asc' | 'desc';
+}
+
+export interface FilterConfig {
+  propertyId: string;
+  operator: string;
+  value: PropertyValue;
+}
+
+export interface DatabaseViewConfig {
+  id: string;
+  name: string;
+  type: ViewType;
+  position: string;
+  groupBy?: string;
+  sorts: SortConfig[];
+  filters: FilterConfig[];
+  visibleProperties: string[];
+}
+
+// ─── Top-level saved data ───
+
+/**
+ * Data saved by the database block.
+ * Schema and views only — rows are child blocks (database-row type).
+ */
+export interface DatabaseData extends BlockToolData {
+  title?: string;
+  schema: PropertyDefinition[];
+  views: DatabaseViewConfig[];
+  activeViewId: string;
+}
+
+// ─── Adapter ───
+
+export interface DatabaseAdapter {
+  loadDatabase(): Promise<{
+    schema: PropertyDefinition[];
+    views: DatabaseViewConfig[];
+  }>;
+
+  createRow(params: {
+    id: string;
+    properties: Record<string, PropertyValue>;
+    position: string;
+  }): Promise<DatabaseRow>;
+
+  updateRow(params: {
+    rowId: string;
+    properties: Record<string, PropertyValue>;
+  }): Promise<DatabaseRow>;
+
+  moveRow(params: {
+    rowId: string;
+    position: string;
+  }): Promise<DatabaseRow>;
+
+  deleteRow(params: {
+    rowId: string;
+  }): Promise<void>;
+
+  createProperty(params: {
+    id: string;
+    name: string;
+    type: PropertyType;
+    position: string;
+    config?: PropertyConfig;
+  }): Promise<PropertyDefinition>;
+
+  updateProperty(params: {
+    propertyId: string;
+    changes: Partial<Pick<PropertyDefinition, 'name' | 'config'>>;
+  }): Promise<PropertyDefinition>;
+
+  deleteProperty(params: {
+    propertyId: string;
+  }): Promise<void>;
+
+  createView(params: {
+    id: string;
+    name: string;
+    type: ViewType;
+    position: string;
+    groupBy?: string;
+    sorts?: SortConfig[];
+    filters?: FilterConfig[];
+    visibleProperties?: string[];
+  }): Promise<DatabaseViewConfig>;
+
+  updateView(params: {
+    viewId: string;
+    changes: Partial<Pick<DatabaseViewConfig,
+      'name' | 'type' | 'position' | 'groupBy' | 'sorts' | 'filters' | 'visibleProperties'
+    >>;
+  }): Promise<DatabaseViewConfig>;
+
+  deleteView(params: {
+    viewId: string;
+  }): Promise<void>;
+}
+
+export interface DatabaseConfig {
+  adapter?: DatabaseAdapter;
+}

package/src/tools/database-row/index.ts

@@ -0,0 +1,74 @@
+import type { BlockTool, BlockToolConstructorOptions } from '../../../types/tools/block-tool';
+import type { DatabaseRowData, PropertyValue } from '../database/types';
+
+/**
+ * DatabaseRowTool — lightweight block that stores a single database row.
+ *
+ * Not user-insertable (no toolbox entry). The parent DatabaseTool creates
+ * and manages row blocks; this tool's job is to hold properties and position
+ * as block data so rows participate in the block tree.
+ *
+ * Custom methods (updateProperties, updatePosition, getProperties, getPosition)
+ * are accessed by the parent DatabaseTool via block.call('methodName', params),
+ * which invokes tool instance methods by name through the Block adapter.
+ */
+export class DatabaseRowTool implements BlockTool {
+  private _data: DatabaseRowData;
+
+  constructor({ data }: BlockToolConstructorOptions<DatabaseRowData>) {
+    this._data = {
+      properties: data.properties ?? {},
+      position: data.position ?? 'a0',
+    };
+  }
+
+  public render(): HTMLDivElement {
+    const el = document.createElement('div');
+
+    el.setAttribute('data-blok-tool', 'database-row');
+
+    return el;
+  }
+
+  public save(_block: HTMLElement): DatabaseRowData {
+    return {
+      properties: this._data.properties,
+      position: this._data.position,
+    };
+  }
+
+  public validate(data: DatabaseRowData): boolean {
+    return data.properties !== null && data.properties !== undefined && typeof data.properties === 'object';
+  }
+
+  public updateProperties(changes: Record<string, PropertyValue>): void {
+    Object.assign(this._data.properties, changes);
+  }
+
+  public updatePosition(param: { position: string }): void {
+    this._data.position = param.position;
+  }
+
+  public getProperties(): Record<string, PropertyValue> {
+    return this._data.properties;
+  }
+
+  public getPosition(): string {
+    return this._data.position;
+  }
+
+  public static get isReadOnlySupported(): boolean {
+    return true;
+  }
+
+  /**
+   * No-op: DatabaseRowTool renders an invisible div with no interactive elements.
+   * Implementing this method enables the fast-path in-place read-only toggle in
+   * the ReadOnly module (which requires ALL tools to have setReadOnly()).
+   */
+  public setReadOnly(_state: boolean): void {
+    // intentionally empty
+  }
+}
+
+export type { DatabaseRowData };

package/src/tools/index.ts

@@ -26,6 +26,8 @@ export { ListItem as List } from './list';
 export { Table } from './table';
 export { ToggleItem as Toggle } from './toggle';
 export { CalloutTool as Callout } from './callout';
+export { DatabaseTool as Database } from './database';
+export { DatabaseRowTool as DatabaseRow } from './database-row';
 export { DividerTool as Divider } from './divider';
 export { Quote } from './quote';
 export { CodeTool as Code } from './code';
@@ -49,6 +51,8 @@ export const defaultBlockTools = {
   table: {},
   toggle: {},
   callout: {},
+  database: {},
+  'database-row': {},
   divider: {},
   quote: {},
   code: { inlineToolbar: false },

package/src/tools/table/index.ts

@@ -1575,18 +1575,9 @@ export class Table implements BlockTool {
       return [];
     }
 
-    const allRows = Array.from(gridEl.querySelectorAll(`[${ROW_ATTR}]`));
-
     return cells.map(cell => {
-      const row = cell.closest<HTMLElement>(`[${ROW_ATTR}]`);
-
-      if (!row) {
-        return null;
-      }
-
-      const rowIndex = allRows.indexOf(row);
-      const cellsInRow = Array.from(row.querySelectorAll(`[${CELL_ATTR}]`));
-      const colIndex = cellsInRow.indexOf(cell);
+      const rowIndex = parseInt(cell.getAttribute(CELL_ROW_ATTR) ?? '0', 10);
+      const colIndex = parseInt(cell.getAttribute(CELL_COL_ATTR) ?? '0', 10);
 
       const container = cell.querySelector(`[${CELL_BLOCKS_ATTR}]`);
       const blocks: ClipboardBlockData[] = [];
@@ -1643,7 +1634,7 @@ export class Table implements BlockTool {
         ...(color !== undefined ? { color } : {}),
         ...(textColor !== undefined ? { textColor } : {}),
       };
-    }).filter((entry): entry is NonNullable<typeof entry> => entry !== null);
+    });
   }
 
   private initCellSelection(gridEl: HTMLElement): void {
@@ -1741,6 +1732,9 @@ export class Table implements BlockTool {
           this.rebuildTableBody();
         });
       },
+      getCellSpan: (row, col) => {
+        return this.model.getCellSpan(row, col);
+      },
     });
   }
 
@@ -1804,9 +1798,7 @@ export class Table implements BlockTool {
       return;
     }
 
-    const targetRow = targetCell.closest<HTMLElement>(`[${ROW_ATTR}]`);
-
-    if (!targetRow) {
+    if (!targetCell.closest(`[${ROW_ATTR}]`)) {
       return;
     }
 
@@ -1827,10 +1819,9 @@ export class Table implements BlockTool {
     e.preventDefault();
     e.stopPropagation();
 
-    const rows = Array.from(gridEl.querySelectorAll(`[${ROW_ATTR}]`));
-    const targetRowIndex = rows.indexOf(targetRow);
-    const cellsInRow = Array.from(targetRow.querySelectorAll(`[${CELL_ATTR}]`));
-    const targetColIndex = cellsInRow.indexOf(targetCell);
+    // Read true model coordinates from stamped data attributes
+    const targetRowIndex = parseInt(targetCell.getAttribute(CELL_ROW_ATTR) ?? '0', 10);
+    const targetColIndex = parseInt(targetCell.getAttribute(CELL_COL_ATTR) ?? '0', 10);
 
     this.pastePayloadIntoCells(gridEl, payload, targetRowIndex, targetColIndex);
   }

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

@@ -86,6 +86,8 @@ interface CellSelectionOptions {
   isMergedCell?: (row: number, col: number) => boolean;
   /** Called when user requests to split a merged cell. */
   onSplitCell?: (row: number, col: number) => void;
+  /** Returns the colspan and rowspan of the cell at (row, col). Used to expand the selection rect to full merged-cell spans. */
+  getCellSpan?: (row: number, col: number) => { colspan: number; rowspan: number };
   i18n: I18n;
 }
 
@@ -118,7 +120,9 @@ export class TableCellSelection {
   private onMergeCells: ((range: SelectionRange) => void) | undefined;
   private isMergedCell: ((row: number, col: number) => boolean) | undefined;
   private onSplitCell: ((row: number, col: number) => void) | undefined;
+  private getCellSpan: ((row: number, col: number) => { colspan: number; rowspan: number }) | undefined;
   private lastPaintedRange: SelectionRange | null = null;
+  private preExpansionWasSingleCell = false;
 
   private boundPointerDown: (e: PointerEvent) => void;
   private boundPointerMove: (e: PointerEvent) => void;
@@ -148,6 +152,7 @@ export class TableCellSelection {
     this.onMergeCells = options.onMergeCells;
     this.isMergedCell = options.isMergedCell;
     this.onSplitCell = options.onSplitCell;
+    this.getCellSpan = options.getCellSpan;
     this.i18n = options.i18n;
     this.grid.style.position = 'relative';
 
@@ -466,6 +471,14 @@ export class TableCellSelection {
       return;
     }
 
+    // For single-cell selections, if the user has a non-collapsed native text
+    // selection within the cell's contenteditable (i.e., they selected specific
+    // text characters), defer to the browser's native copy so their text
+    // selection is copied rather than the whole cell block structure.
+    if (this.selectedCells.length <= 1 && this.hasNativeTextSelection()) {
+      return;
+    }
+
     e.preventDefault();
     this.onCopy?.([...this.selectedCells], e.clipboardData);
   }
@@ -475,18 +488,37 @@ export class TableCellSelection {
       return;
     }
 
+    // For single-cell selections, if the user has a non-collapsed native text
+    // selection within the cell's contenteditable, defer to the browser's native
+    // cut so their text selection is cut rather than clearing the entire cell.
+    if (this.selectedCells.length <= 1 && this.hasNativeTextSelection()) {
+      return;
+    }
+
     e.preventDefault();
     this.onCut?.([...this.selectedCells], e.clipboardData);
     this.onClearContent?.([...this.selectedCells]);
     this.clearSelection();
   }
 
+  /**
+   * Returns true if the browser has a non-collapsed text selection (i.e. the
+   * user has selected one or more characters inside a contenteditable), as
+   * opposed to a mere caret position or no selection at all.
+   */
+  private hasNativeTextSelection(): boolean {
+    const selection = window.getSelection();
+
+    return selection !== null && !selection.isCollapsed;
+  }
+
   private clearSelection(): void {
     const hadSelection = this.hasSelection;
 
     this.restoreModifiedCells();
     this.hasSelection = false;
     this.lastPaintedRange = null;
+    this.preExpansionWasSingleCell = false;
 
     if (hadSelection) {
       this.onSelectionActiveChange?.(false);
@@ -540,6 +572,50 @@ export class TableCellSelection {
     document.addEventListener('pointerdown', this.boundClearSelection);
   }
 
+  /**
+   * Expand a selection rect to fully include the spans of any merged cells
+   * whose origins fall within the rect. Iterates until the rect is stable,
+   * since pulling in a new merged cell may expose further cells that extend
+   * beyond the current boundary.
+   */
+  private expandRectToMergedSpans(rect: SelectionRange): SelectionRange {
+    if (!this.getCellSpan) {
+      return rect;
+    }
+
+    return this.expandRectStep(rect);
+  }
+
+  private expandRectStep(rect: SelectionRange): SelectionRange {
+    const getCellSpan = this.getCellSpan;
+
+    if (!getCellSpan) {
+      return rect;
+    }
+
+    const rows = Array.from({ length: rect.maxRow - rect.minRow + 1 }, (_, i) => rect.minRow + i);
+    const cols = Array.from({ length: rect.maxCol - rect.minCol + 1 }, (_, i) => rect.minCol + i);
+
+    const expanded = rows.reduce<SelectionRange>((acc, r) => {
+      return cols.reduce<SelectionRange>((inner, c) => {
+        const { colspan, rowspan } = getCellSpan(r, c);
+
+        return {
+          minRow: inner.minRow,
+          maxRow: Math.max(inner.maxRow, r + rowspan - 1),
+          minCol: inner.minCol,
+          maxCol: Math.max(inner.maxCol, c + colspan - 1),
+        };
+      }, acc);
+    }, rect);
+
+    const changed =
+      expanded.maxRow !== rect.maxRow ||
+      expanded.maxCol !== rect.maxCol;
+
+    return changed ? this.expandRectStep(expanded) : expanded;
+  }
+
   private paintSelection(): void {
     if (!this.anchorCell || !this.extentCell) {
       return;
@@ -557,12 +633,15 @@ export class TableCellSelection {
     const minCol = Math.min(this.anchorCell.col, this.extentCell.col);
     const maxCol = Math.max(this.anchorCell.col, this.extentCell.col);
 
-    this.lastPaintedRange = { minRow, maxRow, minCol, maxCol };
+    this.preExpansionWasSingleCell = minRow === maxRow && minCol === maxCol;
+    this.lastPaintedRange = this.expandRectToMergedSpans({ minRow, maxRow, minCol, maxCol });
+
+    const { minRow: expandedMinRow, maxRow: expandedMaxRow, minCol: expandedMinCol, maxCol: expandedMaxCol } = this.lastPaintedRange;
 
     const rows = this.grid.querySelectorAll(`[${ROW_ATTR}]`);
 
     // Mark selected cells
-    this.selectedCells = this.collectCellsInRange(rows, minRow, maxRow, minCol, maxCol);
+    this.selectedCells = this.collectCellsInRange(rows, expandedMinRow, expandedMaxRow, expandedMinCol, expandedMaxCol);
     this.selectedCells.forEach(cell => {
       cell.setAttribute(SELECTED_ATTR, '');
     });
@@ -570,8 +649,8 @@ export class TableCellSelection {
     // Calculate overlay position from bounding rects of corner cells.
     // Try coordinate-based lookup first (works with merged cells),
     // then fall back to index-based lookup for backwards compatibility.
-    const firstCell = this.findCellByCoordOrIndex(rows, minRow, minCol);
-    const lastCell = this.findCellByCoordOrIndex(rows, maxRow, maxCol);
+    const firstCell = this.findCellByCoordOrIndex(rows, expandedMinRow, expandedMinCol);
+    const lastCell = this.findCellByCoordOrIndex(rows, expandedMaxRow, expandedMaxCol);
 
     if (!firstCell || !lastCell) {
       return;
@@ -803,7 +882,7 @@ export class TableCellSelection {
     if (this.lastPaintedRange && this.onMergeCells) {
       const range = this.lastPaintedRange;
       const isMultiCell = range.minRow !== range.maxRow || range.minCol !== range.maxCol;
-      const canMerge = isMultiCell && this.canMergeCells?.(range);
+      const canMerge = isMultiCell && !this.preExpansionWasSingleCell && this.canMergeCells?.(range);
 
       if (canMerge) {
         mergeItems.push({
@@ -821,8 +900,9 @@ export class TableCellSelection {
     if (this.lastPaintedRange && this.onSplitCell) {
       const range = this.lastPaintedRange;
       const isSingleCell = range.minRow === range.maxRow && range.minCol === range.maxCol;
+      const isSingleOriginExpanded = this.preExpansionWasSingleCell && this.isMergedCell?.(range.minRow, range.minCol);
 
-      if (isSingleCell && this.isMergedCell?.(range.minRow, range.minCol)) {
+      if ((isSingleCell || isSingleOriginExpanded) && this.isMergedCell?.(range.minRow, range.minCol)) {
         mergeItems.push({
           icon: IconSplitCell,
           title: this.i18n.t('tools.table.splitCell'),
@@ -936,6 +1016,23 @@ export class TableCellSelection {
       return null;
     }
 
+    // Prefer logical coordinate attributes stamped by reindexCoordinates() —
+    // these are correct even when rows have fewer physical <td> elements than
+    // logical columns (e.g. after a colspan/rowspan merge).
+    const cellRowAttr = cell.getAttribute(CELL_ROW_ATTR);
+    const cellColAttr = cell.getAttribute(CELL_COL_ATTR);
+
+    if (cellRowAttr !== null && cellColAttr !== null) {
+      const rowIndex = parseInt(cellRowAttr, 10);
+      const colIndex = parseInt(cellColAttr, 10);
+
+      if (!isNaN(rowIndex) && !isNaN(colIndex)) {
+        return { row: rowIndex, col: colIndex };
+      }
+    }
+
+    // Fallback: physical DOM index — only used for grids without coordinate
+    // attributes (e.g. legacy non-table grid elements).
     const rows = Array.from(this.grid.querySelectorAll(`[${ROW_ATTR}]`));
     const rowIndex = rows.indexOf(row);
 
@@ -1025,6 +1122,12 @@ export class TableCellSelection {
   /**
    * Find a cell by coordinate attributes first, falling back to index-based
    * lookup when coordinate attributes are not present.
+   *
+   * When both primary lookups fail (e.g. `col` points to a covered logical
+   * column that has no physical <td> of its own), scan all cells in the row
+   * and return the one whose colspan range covers `col`.  This handles the
+   * case where `expandRectToMergedSpans` has expanded the selection corner to
+   * a column that is spanned by an origin cell at a lower column index.
    */
   private findCellByCoordOrIndex(
     rows: NodeListOf<Element>,
@@ -1039,7 +1142,23 @@ export class TableCellSelection {
       return coordCell;
     }
 
-    return rows[row]?.querySelectorAll(`[${CELL_ATTR}]`)[col] as HTMLElement | undefined;
+    const indexCell = rows[row]?.querySelectorAll(`[${CELL_ATTR}]`)[col] as HTMLElement | undefined;
+
+    if (indexCell) {
+      return indexCell;
+    }
+
+    // Neither coord-based nor index-based lookup found a cell.  Walk all
+    // physical cells in the row to find one whose logical column range covers
+    // the requested column (origin cellCol <= col <= cellCol + colSpan - 1).
+    const rowCells = Array.from(rows[row]?.querySelectorAll<HTMLElement>(`[${CELL_ATTR}]`) ?? []);
+
+    return rowCells.find(cell => {
+      const cellCol = Number(cell.getAttribute(CELL_COL_ATTR));
+      const cellColSpan = (cell as HTMLTableCellElement).colSpan || 1;
+
+      return cellCol <= col && cellCol + cellColSpan - 1 >= col;
+    });
   }
 
   /**

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

@@ -413,17 +413,71 @@ export class TableGrid {
   /**
    * Reindex coordinate attributes on all cells after structural changes.
    * Sets data-blok-table-cell-row and data-blok-table-cell-col to match
-   * each cell's current physical position.
+   * each cell's model (logical) position, accounting for colspan and rowspan.
+   *
+   * Uses sparse table reconstruction: tracks columns blocked by rowspan cells
+   * from previous rows so that each DOM cell gets the correct model column index
+   * rather than its physical DOM index.
    */
   public reindexCoordinates(table: HTMLElement): void {
-    const rows = table.querySelectorAll(`[${ROW_ATTR}]`);
+    const rows = Array.from(table.querySelectorAll(`[${ROW_ATTR}]`));
+
+    // Map from rowIndex -> Set of columnIndices occupied by rowspan cells from earlier rows
+    const occupiedCols: Map<number, Set<number>> = new Map();
 
     rows.forEach((row, r) => {
-      const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
+      const cells = Array.from(row.querySelectorAll(`[${CELL_ATTR}]`));
+      const blockedCols = occupiedCols.get(r) ?? new Set<number>();
+
+      cells.reduce((modelCol, cell) => {
+        const tdCell = cell as HTMLTableCellElement;
+
+        // Skip columns that are occupied by rowspan cells from previous rows
+        const skipBlocked = (c: number): number => (blockedCols.has(c) ? skipBlocked(c + 1) : c);
+        const col = skipBlocked(modelCol);
 
-      cells.forEach((cell, c) => {
         cell.setAttribute(CELL_ROW_ATTR, String(r));
-        cell.setAttribute(CELL_COL_ATTR, String(c));
+        cell.setAttribute(CELL_COL_ATTR, String(col));
+
+        const colSpan = tdCell.colSpan || 1;
+        const rowSpan = tdCell.rowSpan || 1;
+
+        // If this cell has rowspan > 1, mark those columns as blocked in subsequent rows
+        if (rowSpan > 1) {
+          this.blockRowspanCols(occupiedCols, r, col, rowSpan, colSpan);
+        }
+
+        // Advance by colspan
+        return col + colSpan;
+      }, 0);
+
+      occupiedCols.delete(r);
+    });
+  }
+
+  /**
+   * Register blocked columns in occupiedCols for a cell with rowspan > 1.
+   * All columns in [startCol, startCol + colSpan) are blocked for rows
+   * [startRow + 1, startRow + rowSpan).
+   */
+  private blockRowspanCols(
+    occupiedCols: Map<number, Set<number>>,
+    startRow: number,
+    startCol: number,
+    rowSpan: number,
+    colSpan: number
+  ): void {
+    Array.from({ length: rowSpan - 1 }, (_, i) => i + 1).forEach((dr) => {
+      const futureRow = startRow + dr;
+
+      if (!occupiedCols.has(futureRow)) {
+        occupiedCols.set(futureRow, new Set());
+      }
+
+      const blocked = occupiedCols.get(futureRow) as Set<number>;
+
+      Array.from({ length: colSpan }, (_, dc) => dc).forEach((dc) => {
+        blocked.add(startCol + dc);
       });
     });
   }

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

@@ -181,6 +181,10 @@ export class TableModel {
       return;
     }
 
+    if (this.isSpannedCell(row, col)) {
+      return;
+    }
+
     // Enforce invariant 5: no block in more than one cell
     const existing = this.blockCellMap.get(blockId);
 
@@ -221,6 +225,10 @@ export class TableModel {
       return;
     }
 
+    if (this.isSpannedCell(row, col)) {
+      return;
+    }
+
     // Remove old entries from map
     for (const oldId of this.contentGrid[row][col].blocks) {
       this.blockCellMap.delete(oldId);