diff --git a/src/columnresizing.ts b/src/columnresizing.ts index 3f53572..34458ac 100644 --- a/src/columnresizing.ts +++ b/src/columnresizing.ts @@ -23,7 +23,14 @@ export const columnResizingPluginKey = new PluginKey( */ export type ColumnResizingOptions = { handleWidth?: number; + /** + * Minimum width of a cell /column. The column cannot be resized smaller than this. + */ cellMinWidth?: number; + /** + * The default minWidth of a cell / column when it doesn't have an explicit width (i.e.: it has not been resized manually) + */ + defaultCellMinWidth?: number; lastColumnResizable?: boolean; /** * A custom node view for the rendering table nodes. By default, the plugin @@ -50,6 +57,7 @@ export type Dragging = { startX: number; startWidth: number }; export function columnResizing({ handleWidth = 5, cellMinWidth = 25, + defaultCellMinWidth = 100, View = TableView, lastColumnResizable = true, }: ColumnResizingOptions = {}): Plugin { @@ -61,7 +69,7 @@ export function columnResizing({ const tableName = tableNodeTypes(state.schema).table.name; if (View && nodeViews) { nodeViews[tableName] = (node, view) => { - return new View(node, cellMinWidth, view); + return new View(node, defaultCellMinWidth, view); }; } return new ResizeState(-1, false); @@ -80,19 +88,13 @@ export function columnResizing({ handleDOMEvents: { mousemove: (view, event) => { - handleMouseMove( - view, - event, - handleWidth, - cellMinWidth, - lastColumnResizable, - ); + handleMouseMove(view, event, handleWidth, lastColumnResizable); }, mouseleave: (view) => { handleMouseLeave(view); }, mousedown: (view, event) => { - handleMouseDown(view, event, cellMinWidth); + handleMouseDown(view, event, cellMinWidth, defaultCellMinWidth); }, }, @@ -138,7 +140,6 @@ function handleMouseMove( view: EditorView, event: MouseEvent, handleWidth: number, - cellMinWidth: number, lastColumnResizable: boolean, ): void { const pluginState = columnResizingPluginKey.getState(view.state); @@ -186,6 +187,7 @@ function handleMouseDown( view: EditorView, event: MouseEvent, cellMinWidth: number, + defaultCellMinWidth: number, ): boolean { const win = view.dom.ownerDocument.defaultView ?? window; @@ -223,7 +225,12 @@ function handleMouseDown( if (!pluginState) return; if (pluginState.dragging) { const dragged = draggedWidth(pluginState.dragging, event, cellMinWidth); - displayColumnWidth(view, pluginState.activeHandle, dragged, cellMinWidth); + displayColumnWidth( + view, + pluginState.activeHandle, + dragged, + defaultCellMinWidth, + ); } } @@ -290,10 +297,10 @@ function edgeCell( function draggedWidth( dragging: Dragging, event: MouseEvent, - cellMinWidth: number, + resizeMinWidth: number, ): number { const offset = event.clientX - dragging.startX; - return Math.max(cellMinWidth, dragging.startWidth + offset); + return Math.max(resizeMinWidth, dragging.startWidth + offset); } function updateHandle(view: EditorView, value: number): void { @@ -335,7 +342,7 @@ function displayColumnWidth( view: EditorView, cell: number, width: number, - cellMinWidth: number, + defaultCellMinWidth: number, ): void { const $cell = view.state.doc.resolve(cell); const table = $cell.node(-1), @@ -353,7 +360,7 @@ function displayColumnWidth( table, dom.firstChild as HTMLTableColElement, dom as HTMLTableElement, - cellMinWidth, + defaultCellMinWidth, col, width, ); diff --git a/src/tableview.ts b/src/tableview.ts index c3130bc..c9c50f2 100644 --- a/src/tableview.ts +++ b/src/tableview.ts @@ -11,19 +11,24 @@ export class TableView implements NodeView { public colgroup: HTMLTableColElement; public contentDOM: HTMLTableSectionElement; - constructor(public node: Node, public cellMinWidth: number) { + constructor(public node: Node, public defaultCellMinWidth: number) { this.dom = document.createElement('div'); this.dom.className = 'tableWrapper'; this.table = this.dom.appendChild(document.createElement('table')); this.colgroup = this.table.appendChild(document.createElement('colgroup')); - updateColumnsOnResize(node, this.colgroup, this.table, cellMinWidth); + updateColumnsOnResize(node, this.colgroup, this.table, defaultCellMinWidth); this.contentDOM = this.table.appendChild(document.createElement('tbody')); } update(node: Node): boolean { if (node.type != this.node.type) return false; this.node = node; - updateColumnsOnResize(node, this.colgroup, this.table, this.cellMinWidth); + updateColumnsOnResize( + node, + this.colgroup, + this.table, + this.defaultCellMinWidth, + ); return true; } @@ -42,7 +47,7 @@ export function updateColumnsOnResize( node: Node, colgroup: HTMLTableColElement, table: HTMLTableElement, - cellMinWidth: number, + defaultCellMinWidth: number, overrideCol?: number, overrideValue?: number, ): void { @@ -58,13 +63,20 @@ export function updateColumnsOnResize( const hasWidth = overrideCol == col ? overrideValue : colwidth && colwidth[j]; const cssWidth = hasWidth ? hasWidth + 'px' : ''; - totalWidth += hasWidth || cellMinWidth; + totalWidth += hasWidth || defaultCellMinWidth; if (!hasWidth) fixedWidth = false; if (!nextDOM) { - colgroup.appendChild(document.createElement('col')).style.width = - cssWidth; + const col = document.createElement('col'); + col.style.width = cssWidth; + col.style.minWidth = cssWidth.length ? '' : defaultCellMinWidth + 'px'; + colgroup.appendChild(col); } else { - if (nextDOM.style.width != cssWidth) nextDOM.style.width = cssWidth; + if (nextDOM.style.width != cssWidth) { + nextDOM.style.width = cssWidth; + nextDOM.style.minWidth = cssWidth.length + ? '' + : defaultCellMinWidth + 'px'; + } nextDOM = nextDOM.nextSibling as HTMLElement; } }