From 6ce5aa1bda818b5a573ae667646abfb60eee992d Mon Sep 17 00:00:00 2001 From: Dennis Roppelt Date: Tue, 12 Aug 2025 18:34:30 +0200 Subject: [PATCH 1/2] allow a "onresize" function to be passed that can be implemented along a custom TableView most implementations may work with the TableView's updateColumnsOnResize(..), but in case they are not, an override is useful solves #293 --- src/columnresizing.ts | 38 ++++++++++++++++++++++++++++++++++++-- 1 file changed, 36 insertions(+), 2 deletions(-) diff --git a/src/columnresizing.ts b/src/columnresizing.ts index 1e6ce71b..2adc5424 100644 --- a/src/columnresizing.ts +++ b/src/columnresizing.ts @@ -44,6 +44,14 @@ export type ColumnResizingOptions = { view: EditorView, ) => NodeView) | null; + onColumnResizeUpdate?: ( + node: ProsemirrorNode, + colgroup: HTMLTableColElement, + table: HTMLTableElement, + defaultCellMinWidth: number, + overrideCol?: number, + overrideValue?: number, + ) => void; }; /** @@ -60,6 +68,14 @@ export function columnResizing({ defaultCellMinWidth = 100, View = TableView, lastColumnResizable = true, + onColumnResizeUpdate = ( + node: ProsemirrorNode, + colgroup: HTMLTableColElement, + table: HTMLTableElement, + defaultCellMinWidth: number, + overrideCol?: number, + overrideValue?: number, + ) => updateColumnsOnResize(node, colgroup, table, defaultCellMinWidth, overrideCol, overrideValue) }: ColumnResizingOptions = {}): Plugin { const plugin = new Plugin({ key: columnResizingPluginKey, @@ -94,7 +110,7 @@ export function columnResizing({ handleMouseLeave(view); }, mousedown: (view, event) => { - handleMouseDown(view, event, cellMinWidth, defaultCellMinWidth); + handleMouseDown(view, event, cellMinWidth, defaultCellMinWidth, onColumnResizeUpdate); }, }, @@ -195,6 +211,14 @@ function handleMouseDown( event: MouseEvent, cellMinWidth: number, defaultCellMinWidth: number, + onColumnResizeUpdate: ( + node: ProsemirrorNode, + colgroup: HTMLTableColElement, + table: HTMLTableElement, + defaultCellMinWidth: number, + overrideCol?: number, + overrideValue?: number, + ) => void, ): boolean { if (!view.editable) return false; @@ -239,6 +263,7 @@ function handleMouseDown( pluginState.activeHandle, dragged, defaultCellMinWidth, + onColumnResizeUpdate, ); } } @@ -248,6 +273,7 @@ function handleMouseDown( pluginState.activeHandle, width, defaultCellMinWidth, + onColumnResizeUpdate, ); win.addEventListener('mouseup', finish); @@ -359,6 +385,14 @@ function displayColumnWidth( cell: number, width: number, defaultCellMinWidth: number, + onColumnResizeUpdate: ( + node: ProsemirrorNode, + colgroup: HTMLTableColElement, + table: HTMLTableElement, + defaultCellMinWidth: number, + overrideCol?: number, + overrideValue?: number, + ) => void, ): void { const $cell = view.state.doc.resolve(cell); const table = $cell.node(-1), @@ -372,7 +406,7 @@ function displayColumnWidth( dom = dom.parentNode; } if (!dom) return; - updateColumnsOnResize( + onColumnResizeUpdate( table, dom.firstChild as HTMLTableColElement, dom as HTMLTableElement, From e6bdca6e2732d39ef939de2496df695e4e1b4acf Mon Sep 17 00:00:00 2001 From: Dennis Roppelt Date: Tue, 12 Aug 2025 20:29:48 +0200 Subject: [PATCH 2/2] allow a "onresize" function to be passed that can be implemented along a custom TableView most implementations may work with the TableView's updateColumnsOnResize(..), but in case they are not, an override is useful solves #293 cleaned up to use a functiontype, less verbose in propagation --- src/columnresizing.ts | 41 +++++++++++++++++------------------------ 1 file changed, 17 insertions(+), 24 deletions(-) diff --git a/src/columnresizing.ts b/src/columnresizing.ts index 2adc5424..7902eee1 100644 --- a/src/columnresizing.ts +++ b/src/columnresizing.ts @@ -44,15 +44,22 @@ export type ColumnResizingOptions = { view: EditorView, ) => NodeView) | null; - onColumnResizeUpdate?: ( + /** + * an update trigger to update above View on resizing + */ + updateViewOnColumnResize?: UpdateViewOnColumnResize; +}; + +export interface UpdateViewOnColumnResize { + ( node: ProsemirrorNode, colgroup: HTMLTableColElement, table: HTMLTableElement, defaultCellMinWidth: number, overrideCol?: number, overrideValue?: number, - ) => void; -}; + ): void +} /** * @public @@ -68,7 +75,7 @@ export function columnResizing({ defaultCellMinWidth = 100, View = TableView, lastColumnResizable = true, - onColumnResizeUpdate = ( + updateViewOnColumnResize = ( node: ProsemirrorNode, colgroup: HTMLTableColElement, table: HTMLTableElement, @@ -110,7 +117,7 @@ export function columnResizing({ handleMouseLeave(view); }, mousedown: (view, event) => { - handleMouseDown(view, event, cellMinWidth, defaultCellMinWidth, onColumnResizeUpdate); + handleMouseDown(view, event, cellMinWidth, defaultCellMinWidth, updateViewOnColumnResize); }, }, @@ -211,14 +218,7 @@ function handleMouseDown( event: MouseEvent, cellMinWidth: number, defaultCellMinWidth: number, - onColumnResizeUpdate: ( - node: ProsemirrorNode, - colgroup: HTMLTableColElement, - table: HTMLTableElement, - defaultCellMinWidth: number, - overrideCol?: number, - overrideValue?: number, - ) => void, + onColumnResizeViewUpdate: UpdateViewOnColumnResize, ): boolean { if (!view.editable) return false; @@ -263,7 +263,7 @@ function handleMouseDown( pluginState.activeHandle, dragged, defaultCellMinWidth, - onColumnResizeUpdate, + onColumnResizeViewUpdate, ); } } @@ -273,7 +273,7 @@ function handleMouseDown( pluginState.activeHandle, width, defaultCellMinWidth, - onColumnResizeUpdate, + onColumnResizeViewUpdate, ); win.addEventListener('mouseup', finish); @@ -385,14 +385,7 @@ function displayColumnWidth( cell: number, width: number, defaultCellMinWidth: number, - onColumnResizeUpdate: ( - node: ProsemirrorNode, - colgroup: HTMLTableColElement, - table: HTMLTableElement, - defaultCellMinWidth: number, - overrideCol?: number, - overrideValue?: number, - ) => void, + onColumnResizeViewUpdate: UpdateViewOnColumnResize, ): void { const $cell = view.state.doc.resolve(cell); const table = $cell.node(-1), @@ -406,7 +399,7 @@ function displayColumnWidth( dom = dom.parentNode; } if (!dom) return; - onColumnResizeUpdate( + onColumnResizeViewUpdate( table, dom.firstChild as HTMLTableColElement, dom as HTMLTableElement,