@domternal/extension-table 0.2.0

package/dist/index.d.cts

@@ -0,0 +1,273 @@
+import { CommandSpec, Node } from '@domternal/core';
+import { Node as Node$1, Schema } from '@domternal/pm/model';
+import { EditorView, NodeView } from '@domternal/pm/view';
+import { EditorState, Transaction } from '@domternal/pm/state';
+export { CellSelection, TableMap } from '@domternal/pm/tables';
+
+/**
+ * Table Node
+ *
+ * Block-level table container using HTML <table>.
+ * Built on prosemirror-tables for cell selection, keyboard nav, and table editing.
+ *
+ * Commands (18):
+ * - insertTable: Insert new table with configurable rows/cols/header
+ * - deleteTable: Delete entire table
+ * - addRowBefore / addRowAfter: Insert row
+ * - deleteRow: Delete current row
+ * - addColumnBefore / addColumnAfter: Insert column
+ * - deleteColumn: Delete current column
+ * - mergeCells: Merge selected cells into one
+ * - splitCell: Split a merged cell back to individual cells
+ * - toggleHeaderRow / toggleHeaderColumn / toggleHeaderCell: Toggle header
+ * - setCellAttribute: Set cell attribute
+ * - goToNextCell / goToPreviousCell: Cell navigation
+ * - fixTables: Repair malformed tables
+ * - setCellSelection: Programmatic cell selection
+ *
+ * Features:
+ * - goToNextCell/goToPreviousCell exposed as standalone commands
+ * - fixTables exposed as command
+ * - setCellSelection for programmatic cell range selection
+ * - Fully typed options and command params
+ * - Framework-agnostic: TableView isolated for wrapper replacement
+ */
+
+declare module '@domternal/core' {
+    interface RawCommands {
+        insertTable: CommandSpec<[options?: {
+            rows?: number;
+            cols?: number;
+            withHeaderRow?: boolean;
+        }]>;
+        deleteTable: CommandSpec;
+        addRowBefore: CommandSpec;
+        addRowAfter: CommandSpec;
+        deleteRow: CommandSpec;
+        addColumnBefore: CommandSpec;
+        addColumnAfter: CommandSpec;
+        deleteColumn: CommandSpec;
+        toggleHeaderRow: CommandSpec;
+        toggleHeaderColumn: CommandSpec;
+        toggleHeaderCell: CommandSpec;
+        mergeCells: CommandSpec;
+        splitCell: CommandSpec;
+        setCellAttribute: CommandSpec<[name: string, value: unknown]>;
+        goToNextCell: CommandSpec;
+        goToPreviousCell: CommandSpec;
+        fixTables: CommandSpec;
+        setCellSelection: CommandSpec<[position: {
+            anchorCell: number;
+            headCell?: number;
+        }]>;
+    }
+}
+interface TableOptions {
+    /**
+     * Custom HTML attributes for the rendered table element.
+     */
+    HTMLAttributes: Record<string, unknown>;
+    /**
+     * Minimum cell width in pixels (floor when dragging).
+     * @default 25
+     */
+    cellMinWidth: number;
+    /**
+     * Default width for columns without an explicit colwidth attribute.
+     * Must match the columnResizing plugin default for consistent resize behavior.
+     * @default 100
+     */
+    defaultCellMinWidth: number;
+    /**
+     * Column resize behavior when dragging a column border.
+     * - `'neighbor'`: adjacent column compensates, table width stays constant (Google Docs style)
+     * - `'independent'`: only dragged column changes, table width grows/shrinks
+     * - `'redistribute'`: all columns redistribute to fill available width (prosemirror-tables default)
+     * @default 'neighbor'
+     */
+    resizeBehavior: 'neighbor' | 'independent' | 'redistribute';
+    /**
+     * Prevent the table from exceeding its container (.tableWrapper) width.
+     * When true: last-column resize is capped, add-column redistributes if needed.
+     * When false: original behavior (table can grow beyond container).
+     * @default true
+     */
+    constrainToContainer: boolean;
+    /**
+     * Allow selecting the entire table as a node selection.
+     * @default false
+     */
+    allowTableNodeSelection: boolean;
+    /**
+     * Custom NodeView constructor. Override to provide framework-specific rendering.
+     * Set to null to disable custom NodeView.
+     */
+    View: (new (node: Node$1, cellMinWidth: number, view: EditorView, defaultCellMinWidth?: number, constrainToContainer?: boolean) => NodeView) | null;
+}
+declare const Table: Node<TableOptions, unknown>;
+
+/**
+ * TableRow Node
+ *
+ * Table row (<tr>). Contains table cells and/or table header cells.
+ */
+
+interface TableRowOptions {
+    HTMLAttributes: Record<string, unknown>;
+}
+declare const TableRow: Node<TableRowOptions, unknown>;
+
+/**
+ * TableCell Node
+ *
+ * Table data cell (<td>). Contains block content.
+ * Supports colspan, rowspan, colwidth, and background attributes.
+ */
+
+interface TableCellOptions {
+    HTMLAttributes: Record<string, unknown>;
+}
+declare const TableCell: Node<TableCellOptions, unknown>;
+
+/**
+ * TableHeader Node
+ *
+ * Table header cell (<th>). Contains block content.
+ * Same attributes as TableCell (colspan, rowspan, colwidth, background).
+ */
+
+interface TableHeaderOptions {
+    HTMLAttributes: Record<string, unknown>;
+}
+declare const TableHeader: Node<TableHeaderOptions, unknown>;
+
+/**
+ * TableView - Custom NodeView for table rendering
+ *
+ * Creates: div.dm-table-container > [handles] + div.tableWrapper > table > colgroup + tbody
+ * - Container enables row/column hover controls (handles with dropdown menus)
+ * - Wrapper div enables horizontal scrolling for wide tables
+ * - Colgroup reflects column widths from the columnResizing plugin
+ * - ContentDOM = tbody (ProseMirror renders row content into tbody)
+ */
+
+declare class TableView implements NodeView {
+    node: Node$1;
+    cellMinWidth: number;
+    defaultCellMinWidth: number;
+    view: EditorView;
+    constrainToContainer: boolean;
+    dom: HTMLElement;
+    table: HTMLTableElement;
+    colgroup: HTMLTableColElement;
+    contentDOM: HTMLElement;
+    private wrapper;
+    private colHandle;
+    private rowHandle;
+    private cellToolbar;
+    private colorBtn;
+    private alignBtn;
+    private mergeBtn;
+    private splitBtn;
+    private headerBtn;
+    private cellHandle;
+    private cellHandleCell;
+    private dropdown;
+    /** When true, the plugin skips showing the cell toolbar (row/col dropdown is open). */
+    suppressCellToolbar: boolean;
+    /** When true, column resize drag is active — all handles/menus are hidden. */
+    private _resizeDragging;
+    private hoveredCell;
+    private hoveredRow;
+    private hoveredCol;
+    private hideTimeout;
+    private boundMouseMove;
+    private boundMouseLeave;
+    private boundCancelHide;
+    private boundDocMouseDown;
+    private boundDocKeyDown;
+    private boundScroll;
+    constructor(node: Node$1, cellMinWidth: number, view: EditorView, defaultCellMinWidth?: number, constrainToContainer?: boolean);
+    update(node: Node$1): boolean;
+    destroy(): void;
+    ignoreMutation(mutation: MutationRecord | {
+        type: 'selection';
+    }): boolean;
+    private createHandle;
+    private buildCellToolbar;
+    private createToolbarButton;
+    private onMouseMove;
+    private onMouseLeave;
+    private cancelHide;
+    private showHandles;
+    private hideHandles;
+    private positionHandles;
+    private getCellIndices;
+    /** Called by the cellHandlePlugin when CellSelection changes. */
+    updateCellHandle(active: boolean): void;
+    /** Hide all controls during column resize drag. Called by the plugin. */
+    hideForResize(): void;
+    /** Re-enable controls after column resize drag ends. Called by the plugin. */
+    showAfterResize(): void;
+    /** Show cell handle at the top-center of the given cell. Always repositions (no early return). */
+    showCellHandle(cell: HTMLTableCellElement): void;
+    /** Hide cell handle. */
+    hideCellHandle(): void;
+    /** Click on cell handle → create CellSelection for that cell. */
+    private onCellHandleClick;
+    /** Dismiss other floating overlays (bubble menu, etc.) */
+    private dismissOverlays;
+    private onColClick;
+    private onRowClick;
+    private getTablePos;
+    /** Dispatch a CellSelection and focus the editor. */
+    private dispatchCellSelection;
+    private selectRow;
+    private selectColumn;
+    private setCursorInCell;
+    private showDropdown;
+    /** Shared open/toggle for toolbar dropdown buttons. */
+    private openToolbarDropdown;
+    private showColorDropdown;
+    private showAlignmentDropdown;
+    private createAlignItem;
+    private positionToolbarDropdown;
+    private addDropdownListeners;
+    private removeDropdownListeners;
+    private closeDropdown;
+    private onDocMouseDown;
+    private onDocKeyDown;
+    private execRowCmd;
+    private execColCmd;
+    /**
+     * Update colgroup col elements based on cell widths.
+     * Matches prosemirror-tables' updateColumnsOnResize behavior:
+     * - Reuses existing col elements (avoids DOM churn during resize)
+     * - Uses defaultCellMinWidth for totalWidth calc (matches columnResizing plugin)
+     * - Columns without explicit widths get empty style.width (table-layout: fixed distributes)
+     */
+    private updateColumns;
+}
+
+/**
+ * Creates a table node from schema types.
+ *
+ * Builds table → rows → cells structure.
+ * First row gets tableHeader cells if withHeaderRow is true.
+ */
+
+declare function createTable(schema: Schema, rows: number, cols: number, withHeaderRow: boolean, cellContent?: Node$1): Node$1;
+
+/**
+ * Keyboard handler that deletes the table when all cells are selected.
+ *
+ * Used for Backspace, Delete, Mod-Backspace, Mod-Delete.
+ * When a CellSelection covers all cells in a table, delete the entire table.
+ */
+
+declare function deleteTableWhenAllCellsSelected({ state, dispatch, }: {
+    state: EditorState;
+    dispatch?: (tr: Transaction) => void;
+}): boolean;
+
+export { Table, TableCell, type TableCellOptions, TableHeader, type TableHeaderOptions, type TableOptions, TableRow, type TableRowOptions, TableView, createTable, deleteTableWhenAllCellsSelected };

package/dist/index.d.ts

@@ -0,0 +1,273 @@
+import { CommandSpec, Node } from '@domternal/core';
+import { Node as Node$1, Schema } from '@domternal/pm/model';
+import { EditorView, NodeView } from '@domternal/pm/view';
+import { EditorState, Transaction } from '@domternal/pm/state';
+export { CellSelection, TableMap } from '@domternal/pm/tables';
+
+/**
+ * Table Node
+ *
+ * Block-level table container using HTML <table>.
+ * Built on prosemirror-tables for cell selection, keyboard nav, and table editing.
+ *
+ * Commands (18):
+ * - insertTable: Insert new table with configurable rows/cols/header
+ * - deleteTable: Delete entire table
+ * - addRowBefore / addRowAfter: Insert row
+ * - deleteRow: Delete current row
+ * - addColumnBefore / addColumnAfter: Insert column
+ * - deleteColumn: Delete current column
+ * - mergeCells: Merge selected cells into one
+ * - splitCell: Split a merged cell back to individual cells
+ * - toggleHeaderRow / toggleHeaderColumn / toggleHeaderCell: Toggle header
+ * - setCellAttribute: Set cell attribute
+ * - goToNextCell / goToPreviousCell: Cell navigation
+ * - fixTables: Repair malformed tables
+ * - setCellSelection: Programmatic cell selection
+ *
+ * Features:
+ * - goToNextCell/goToPreviousCell exposed as standalone commands
+ * - fixTables exposed as command
+ * - setCellSelection for programmatic cell range selection
+ * - Fully typed options and command params
+ * - Framework-agnostic: TableView isolated for wrapper replacement
+ */
+
+declare module '@domternal/core' {
+    interface RawCommands {
+        insertTable: CommandSpec<[options?: {
+            rows?: number;
+            cols?: number;
+            withHeaderRow?: boolean;
+        }]>;
+        deleteTable: CommandSpec;
+        addRowBefore: CommandSpec;
+        addRowAfter: CommandSpec;
+        deleteRow: CommandSpec;
+        addColumnBefore: CommandSpec;
+        addColumnAfter: CommandSpec;
+        deleteColumn: CommandSpec;
+        toggleHeaderRow: CommandSpec;
+        toggleHeaderColumn: CommandSpec;
+        toggleHeaderCell: CommandSpec;
+        mergeCells: CommandSpec;
+        splitCell: CommandSpec;
+        setCellAttribute: CommandSpec<[name: string, value: unknown]>;
+        goToNextCell: CommandSpec;
+        goToPreviousCell: CommandSpec;
+        fixTables: CommandSpec;
+        setCellSelection: CommandSpec<[position: {
+            anchorCell: number;
+            headCell?: number;
+        }]>;
+    }
+}
+interface TableOptions {
+    /**
+     * Custom HTML attributes for the rendered table element.
+     */
+    HTMLAttributes: Record<string, unknown>;
+    /**
+     * Minimum cell width in pixels (floor when dragging).
+     * @default 25
+     */
+    cellMinWidth: number;
+    /**
+     * Default width for columns without an explicit colwidth attribute.
+     * Must match the columnResizing plugin default for consistent resize behavior.
+     * @default 100
+     */
+    defaultCellMinWidth: number;
+    /**
+     * Column resize behavior when dragging a column border.
+     * - `'neighbor'`: adjacent column compensates, table width stays constant (Google Docs style)
+     * - `'independent'`: only dragged column changes, table width grows/shrinks
+     * - `'redistribute'`: all columns redistribute to fill available width (prosemirror-tables default)
+     * @default 'neighbor'
+     */
+    resizeBehavior: 'neighbor' | 'independent' | 'redistribute';
+    /**
+     * Prevent the table from exceeding its container (.tableWrapper) width.
+     * When true: last-column resize is capped, add-column redistributes if needed.
+     * When false: original behavior (table can grow beyond container).
+     * @default true
+     */
+    constrainToContainer: boolean;
+    /**
+     * Allow selecting the entire table as a node selection.
+     * @default false
+     */
+    allowTableNodeSelection: boolean;
+    /**
+     * Custom NodeView constructor. Override to provide framework-specific rendering.
+     * Set to null to disable custom NodeView.
+     */
+    View: (new (node: Node$1, cellMinWidth: number, view: EditorView, defaultCellMinWidth?: number, constrainToContainer?: boolean) => NodeView) | null;
+}
+declare const Table: Node<TableOptions, unknown>;
+
+/**
+ * TableRow Node
+ *
+ * Table row (<tr>). Contains table cells and/or table header cells.
+ */
+
+interface TableRowOptions {
+    HTMLAttributes: Record<string, unknown>;
+}
+declare const TableRow: Node<TableRowOptions, unknown>;
+
+/**
+ * TableCell Node
+ *
+ * Table data cell (<td>). Contains block content.
+ * Supports colspan, rowspan, colwidth, and background attributes.
+ */
+
+interface TableCellOptions {
+    HTMLAttributes: Record<string, unknown>;
+}
+declare const TableCell: Node<TableCellOptions, unknown>;
+
+/**
+ * TableHeader Node
+ *
+ * Table header cell (<th>). Contains block content.
+ * Same attributes as TableCell (colspan, rowspan, colwidth, background).
+ */
+
+interface TableHeaderOptions {
+    HTMLAttributes: Record<string, unknown>;
+}
+declare const TableHeader: Node<TableHeaderOptions, unknown>;
+
+/**
+ * TableView - Custom NodeView for table rendering
+ *
+ * Creates: div.dm-table-container > [handles] + div.tableWrapper > table > colgroup + tbody
+ * - Container enables row/column hover controls (handles with dropdown menus)
+ * - Wrapper div enables horizontal scrolling for wide tables
+ * - Colgroup reflects column widths from the columnResizing plugin
+ * - ContentDOM = tbody (ProseMirror renders row content into tbody)
+ */
+
+declare class TableView implements NodeView {
+    node: Node$1;
+    cellMinWidth: number;
+    defaultCellMinWidth: number;
+    view: EditorView;
+    constrainToContainer: boolean;
+    dom: HTMLElement;
+    table: HTMLTableElement;
+    colgroup: HTMLTableColElement;
+    contentDOM: HTMLElement;
+    private wrapper;
+    private colHandle;
+    private rowHandle;
+    private cellToolbar;
+    private colorBtn;
+    private alignBtn;
+    private mergeBtn;
+    private splitBtn;
+    private headerBtn;
+    private cellHandle;
+    private cellHandleCell;
+    private dropdown;
+    /** When true, the plugin skips showing the cell toolbar (row/col dropdown is open). */
+    suppressCellToolbar: boolean;
+    /** When true, column resize drag is active — all handles/menus are hidden. */
+    private _resizeDragging;
+    private hoveredCell;
+    private hoveredRow;
+    private hoveredCol;
+    private hideTimeout;
+    private boundMouseMove;
+    private boundMouseLeave;
+    private boundCancelHide;
+    private boundDocMouseDown;
+    private boundDocKeyDown;
+    private boundScroll;
+    constructor(node: Node$1, cellMinWidth: number, view: EditorView, defaultCellMinWidth?: number, constrainToContainer?: boolean);
+    update(node: Node$1): boolean;
+    destroy(): void;
+    ignoreMutation(mutation: MutationRecord | {
+        type: 'selection';
+    }): boolean;
+    private createHandle;
+    private buildCellToolbar;
+    private createToolbarButton;
+    private onMouseMove;
+    private onMouseLeave;
+    private cancelHide;
+    private showHandles;
+    private hideHandles;
+    private positionHandles;
+    private getCellIndices;
+    /** Called by the cellHandlePlugin when CellSelection changes. */
+    updateCellHandle(active: boolean): void;
+    /** Hide all controls during column resize drag. Called by the plugin. */
+    hideForResize(): void;
+    /** Re-enable controls after column resize drag ends. Called by the plugin. */
+    showAfterResize(): void;
+    /** Show cell handle at the top-center of the given cell. Always repositions (no early return). */
+    showCellHandle(cell: HTMLTableCellElement): void;
+    /** Hide cell handle. */
+    hideCellHandle(): void;
+    /** Click on cell handle → create CellSelection for that cell. */
+    private onCellHandleClick;
+    /** Dismiss other floating overlays (bubble menu, etc.) */
+    private dismissOverlays;
+    private onColClick;
+    private onRowClick;
+    private getTablePos;
+    /** Dispatch a CellSelection and focus the editor. */
+    private dispatchCellSelection;
+    private selectRow;
+    private selectColumn;
+    private setCursorInCell;
+    private showDropdown;
+    /** Shared open/toggle for toolbar dropdown buttons. */
+    private openToolbarDropdown;
+    private showColorDropdown;
+    private showAlignmentDropdown;
+    private createAlignItem;
+    private positionToolbarDropdown;
+    private addDropdownListeners;
+    private removeDropdownListeners;
+    private closeDropdown;
+    private onDocMouseDown;
+    private onDocKeyDown;
+    private execRowCmd;
+    private execColCmd;
+    /**
+     * Update colgroup col elements based on cell widths.
+     * Matches prosemirror-tables' updateColumnsOnResize behavior:
+     * - Reuses existing col elements (avoids DOM churn during resize)
+     * - Uses defaultCellMinWidth for totalWidth calc (matches columnResizing plugin)
+     * - Columns without explicit widths get empty style.width (table-layout: fixed distributes)
+     */
+    private updateColumns;
+}
+
+/**
+ * Creates a table node from schema types.
+ *
+ * Builds table → rows → cells structure.
+ * First row gets tableHeader cells if withHeaderRow is true.
+ */
+
+declare function createTable(schema: Schema, rows: number, cols: number, withHeaderRow: boolean, cellContent?: Node$1): Node$1;
+
+/**
+ * Keyboard handler that deletes the table when all cells are selected.
+ *
+ * Used for Backspace, Delete, Mod-Backspace, Mod-Delete.
+ * When a CellSelection covers all cells in a table, delete the entire table.
+ */
+
+declare function deleteTableWhenAllCellsSelected({ state, dispatch, }: {
+    state: EditorState;
+    dispatch?: (tr: Transaction) => void;
+}): boolean;
+
+export { Table, TableCell, type TableCellOptions, TableHeader, type TableHeaderOptions, type TableOptions, TableRow, type TableRowOptions, TableView, createTable, deleteTableWhenAllCellsSelected };