From 09dea0556a77b907d7115e7694b63038ca778686 Mon Sep 17 00:00:00 2001 From: yousefed Date: Fri, 25 Oct 2024 12:25:18 +0200 Subject: [PATCH] address feedback --- src/columnresizing.ts | 32 +++++++++++++++----------------- src/tableview.ts | 14 +++++++------- 2 files changed, 22 insertions(+), 24 deletions(-) diff --git a/src/columnresizing.ts b/src/columnresizing.ts index dc5f449d..cd9cc6f5 100644 --- a/src/columnresizing.ts +++ b/src/columnresizing.ts @@ -23,16 +23,14 @@ export const columnResizingPluginKey = new PluginKey( */ export type ColumnResizingOptions = { handleWidth?: number; -/** - * Minimum width of a cell / column when it doesn't have an explicit width set - */ - cellMinWidth?: number; /** - * Minimum width of a column when it doesn't have an explicit width set - * Defaults to `cellMinWidth`, but can be set to a different value to allow - * resizing to smaller than the default cell width. + * Minimum width of a cell /column. The column cannot be resized smaller than this. */ - resizeMinWidth?: number; + 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 @@ -59,7 +57,7 @@ export type Dragging = { startX: number; startWidth: number }; export function columnResizing({ handleWidth = 5, cellMinWidth = 25, - resizeMinWidth = cellMinWidth, + defaultCellMinWidth = 100, View = TableView, lastColumnResizable = true, }: ColumnResizingOptions = {}): Plugin { @@ -71,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); @@ -101,7 +99,7 @@ export function columnResizing({ handleMouseLeave(view); }, mousedown: (view, event) => { - handleMouseDown(view, event, cellMinWidth, resizeMinWidth); + handleMouseDown(view, event, cellMinWidth, defaultCellMinWidth); }, }, @@ -194,7 +192,7 @@ function handleMouseDown( view: EditorView, event: MouseEvent, cellMinWidth: number, - resizeMinWidth: number, + defaultCellMinWidth: number, ): boolean { const win = view.dom.ownerDocument.defaultView ?? window; @@ -218,7 +216,7 @@ function handleMouseDown( updateColumnWidth( view, pluginState.activeHandle, - draggedWidth(pluginState.dragging, event, resizeMinWidth), + draggedWidth(pluginState.dragging, event, cellMinWidth), ); view.dispatch( view.state.tr.setMeta(columnResizingPluginKey, { setDragging: null }), @@ -231,8 +229,8 @@ function handleMouseDown( const pluginState = columnResizingPluginKey.getState(view.state); if (!pluginState) return; if (pluginState.dragging) { - const dragged = draggedWidth(pluginState.dragging, event, resizeMinWidth); - displayColumnWidth(view, pluginState.activeHandle, dragged, cellMinWidth); + const dragged = draggedWidth(pluginState.dragging, event, cellMinWidth); + displayColumnWidth(view, pluginState.activeHandle, dragged, defaultCellMinWidth); } } @@ -344,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), @@ -362,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 c432636c..b9a51f77 100644 --- a/src/tableview.ts +++ b/src/tableview.ts @@ -11,19 +11,19 @@ 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 +42,7 @@ export function updateColumnsOnResize( node: Node, colgroup: HTMLTableColElement, table: HTMLTableElement, - cellMinWidth: number, + defaultCellMinWidth: number, overrideCol?: number, overrideValue?: number, ): void { @@ -58,17 +58,17 @@ 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) { const col = document.createElement('col'); col.style.width = cssWidth; - col.style.minWidth = cssWidth.length ? '' : cellMinWidth + 'px'; + col.style.minWidth = cssWidth.length ? '' : defaultCellMinWidth + 'px'; colgroup.appendChild(col); } else { if (nextDOM.style.width != cssWidth) { nextDOM.style.width = cssWidth; - nextDOM.style.minWidth = cssWidth.length ? '' : cellMinWidth + 'px'; + nextDOM.style.minWidth = cssWidth.length ? '' : defaultCellMinWidth + 'px'; } nextDOM = nextDOM.nextSibling as HTMLElement; }