diff --git a/src/columnresizing.ts b/src/columnresizing.ts index 34458ac1..a8a4ec1b 100644 --- a/src/columnresizing.ts +++ b/src/columnresizing.ts @@ -234,6 +234,8 @@ function handleMouseDown( } } + displayColumnWidth(view, pluginState.activeHandle, width, defaultCellMinWidth); + win.addEventListener('mouseup', finish); win.addEventListener('mousemove', move); event.preventDefault(); @@ -397,6 +399,12 @@ export function handleDecorations( const pos = start + cellPos + table.nodeAt(cellPos)!.nodeSize - 1; const dom = document.createElement('div'); dom.className = 'column-resize-handle'; + if (columnResizingPluginKey.getState(state)?.dragging) { + decorations.push(Decoration.node(start + cellPos, start + cellPos + table.nodeAt(cellPos)!.nodeSize, { + class: 'column-resize-dragging' + })); + } + decorations.push(Decoration.widget(pos, dom)); } } diff --git a/src/tableview.ts b/src/tableview.ts index c9c50f21..3253d0b4 100644 --- a/src/tableview.ts +++ b/src/tableview.ts @@ -15,6 +15,7 @@ export class TableView implements NodeView { this.dom = document.createElement('div'); this.dom.className = 'tableWrapper'; this.table = this.dom.appendChild(document.createElement('table')); + this.table.style.setProperty('--default-cell-min-width', `${defaultCellMinWidth}px`); this.colgroup = this.table.appendChild(document.createElement('colgroup')); updateColumnsOnResize(node, this.colgroup, this.table, defaultCellMinWidth); this.contentDOM = this.table.appendChild(document.createElement('tbody')); @@ -68,14 +69,10 @@ export function updateColumnsOnResize( if (!nextDOM) { 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; - nextDOM.style.minWidth = cssWidth.length - ? '' - : defaultCellMinWidth + 'px'; } nextDOM = nextDOM.nextSibling as HTMLElement; } diff --git a/style/tables.css b/style/tables.css index 9dd62171..3a9099e7 100644 --- a/style/tables.css +++ b/style/tables.css @@ -13,6 +13,13 @@ box-sizing: border-box; position: relative; } + +.ProseMirror td:not([colwidth]):not(.column-resize-dragging), +.ProseMirror th:not([colwidth]):not(.column-resize-dragging) { + /* if there's no explicit width set and the column is not being resized, set a default width */ + min-width: var(--default-cell-min-width); +} + .ProseMirror .column-resize-handle { position: absolute; right: -2px;