From 44af218451317e1ae29d66ebf5b14c3cf414692b Mon Sep 17 00:00:00 2001 From: yousefed Date: Fri, 25 Oct 2024 11:09:46 +0200 Subject: [PATCH 1/4] separate cellMinWidth and resizeMinWidth --- src/columnresizing.ts | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/src/columnresizing.ts b/src/columnresizing.ts index 3f535728..dc5f449d 100644 --- a/src/columnresizing.ts +++ b/src/columnresizing.ts @@ -23,7 +23,16 @@ 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. + */ + resizeMinWidth?: number; lastColumnResizable?: boolean; /** * A custom node view for the rendering table nodes. By default, the plugin @@ -50,6 +59,7 @@ export type Dragging = { startX: number; startWidth: number }; export function columnResizing({ handleWidth = 5, cellMinWidth = 25, + resizeMinWidth = cellMinWidth, View = TableView, lastColumnResizable = true, }: ColumnResizingOptions = {}): Plugin { @@ -84,7 +94,6 @@ export function columnResizing({ view, event, handleWidth, - cellMinWidth, lastColumnResizable, ); }, @@ -92,7 +101,7 @@ export function columnResizing({ handleMouseLeave(view); }, mousedown: (view, event) => { - handleMouseDown(view, event, cellMinWidth); + handleMouseDown(view, event, cellMinWidth, resizeMinWidth); }, }, @@ -138,7 +147,6 @@ function handleMouseMove( view: EditorView, event: MouseEvent, handleWidth: number, - cellMinWidth: number, lastColumnResizable: boolean, ): void { const pluginState = columnResizingPluginKey.getState(view.state); @@ -186,6 +194,7 @@ function handleMouseDown( view: EditorView, event: MouseEvent, cellMinWidth: number, + resizeMinWidth: number, ): boolean { const win = view.dom.ownerDocument.defaultView ?? window; @@ -209,7 +218,7 @@ function handleMouseDown( updateColumnWidth( view, pluginState.activeHandle, - draggedWidth(pluginState.dragging, event, cellMinWidth), + draggedWidth(pluginState.dragging, event, resizeMinWidth), ); view.dispatch( view.state.tr.setMeta(columnResizingPluginKey, { setDragging: null }), @@ -222,7 +231,7 @@ function handleMouseDown( const pluginState = columnResizingPluginKey.getState(view.state); if (!pluginState) return; if (pluginState.dragging) { - const dragged = draggedWidth(pluginState.dragging, event, cellMinWidth); + const dragged = draggedWidth(pluginState.dragging, event, resizeMinWidth); displayColumnWidth(view, pluginState.activeHandle, dragged, cellMinWidth); } } @@ -290,10 +299,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 { From d0e12478bb92f8fdde7e14185d85eca5bc7012a7 Mon Sep 17 00:00:00 2001 From: yousefed Date: Fri, 25 Oct 2024 11:09:54 +0200 Subject: [PATCH 2/4] set minwidth on col elements --- src/tableview.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/tableview.ts b/src/tableview.ts index c3130bc8..c432636c 100644 --- a/src/tableview.ts +++ b/src/tableview.ts @@ -61,10 +61,15 @@ export function updateColumnsOnResize( totalWidth += hasWidth || cellMinWidth; 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 ? '' : cellMinWidth + '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 ? '' : cellMinWidth + 'px'; + } nextDOM = nextDOM.nextSibling as HTMLElement; } } From 09dea0556a77b907d7115e7694b63038ca778686 Mon Sep 17 00:00:00 2001 From: yousefed Date: Fri, 25 Oct 2024 12:25:18 +0200 Subject: [PATCH 3/4] 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; } From f55ac76a17da8a8dbf39ce0576d3ccead1f45cb1 Mon Sep 17 00:00:00 2001 From: ocavue Date: Fri, 25 Oct 2024 21:31:06 +1100 Subject: [PATCH 4/4] run prettier --- src/columnresizing.ts | 20 ++++++++++---------- src/tableview.ts | 11 +++++++++-- 2 files changed, 19 insertions(+), 12 deletions(-) diff --git a/src/columnresizing.ts b/src/columnresizing.ts index cd9cc6f5..34458ac1 100644 --- a/src/columnresizing.ts +++ b/src/columnresizing.ts @@ -27,9 +27,9 @@ export type ColumnResizingOptions = { * 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) - */ + /** + * 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; /** @@ -88,12 +88,7 @@ export function columnResizing({ handleDOMEvents: { mousemove: (view, event) => { - handleMouseMove( - view, - event, - handleWidth, - lastColumnResizable, - ); + handleMouseMove(view, event, handleWidth, lastColumnResizable); }, mouseleave: (view) => { handleMouseLeave(view); @@ -230,7 +225,12 @@ function handleMouseDown( if (!pluginState) return; if (pluginState.dragging) { const dragged = draggedWidth(pluginState.dragging, event, cellMinWidth); - displayColumnWidth(view, pluginState.activeHandle, dragged, defaultCellMinWidth); + displayColumnWidth( + view, + pluginState.activeHandle, + dragged, + defaultCellMinWidth, + ); } } diff --git a/src/tableview.ts b/src/tableview.ts index b9a51f77..c9c50f21 100644 --- a/src/tableview.ts +++ b/src/tableview.ts @@ -23,7 +23,12 @@ export class TableView implements NodeView { update(node: Node): boolean { if (node.type != this.node.type) return false; this.node = node; - updateColumnsOnResize(node, this.colgroup, this.table, this.defaultCellMinWidth); + updateColumnsOnResize( + node, + this.colgroup, + this.table, + this.defaultCellMinWidth, + ); return true; } @@ -68,7 +73,9 @@ export function updateColumnsOnResize( } else { if (nextDOM.style.width != cssWidth) { nextDOM.style.width = cssWidth; - nextDOM.style.minWidth = cssWidth.length ? '' : defaultCellMinWidth + 'px'; + nextDOM.style.minWidth = cssWidth.length + ? '' + : defaultCellMinWidth + 'px'; } nextDOM = nextDOM.nextSibling as HTMLElement; }