-
Notifications
You must be signed in to change notification settings - Fork 174
Open
Description
Screen.Recording.2024-08-02.143705.mp4
The <col>
elements generated to enable column resizing don't have a min-width
set on them, this means that column can be narrower than the configured cellMinWidth
. This has 2 consequences :
- columns might be too narrow
- columns can visually jump in width when another column is resized the first time
This could be fixed by updating updateColumnsOnResize
so it sets min-width
on all <col>
(or only not those corresponding to un-resized columns)
suggested code
/**
* @public
*/
export function updateColumnsOnResize(
node: Node,
colgroup: HTMLTableColElement,
table: HTMLTableElement,
cellMinWidth: number,
overrideCol?: number,
overrideValue?: number,
): void {
let totalWidth = 0;
let fixedWidth = true;
let nextDOM = colgroup.firstChild as HTMLElement;
const row = node.firstChild;
if (!row) return;
for (let i = 0, col = 0; i < row.childCount; i++) {
const { colspan, colwidth } = row.child(i).attrs as CellAttrs;
for (let j = 0; j < colspan; j++, col++) {
const hasWidth =
overrideCol == col ? overrideValue : colwidth && colwidth[j];
const cssWidth = hasWidth ? hasWidth + 'px' : '';
totalWidth += hasWidth || cellMinWidth;
/* change start */
if (!hasWidth) {
fixedWidth = false;
nextDOM.style.minWidth = `${cellMinWidth}px`;
}
/* change end */
if (!nextDOM) {
colgroup.appendChild(document.createElement('col')).style.width =
cssWidth;
} else {
if (nextDOM.style.width != cssWidth) nextDOM.style.width = cssWidth;
nextDOM = nextDOM.nextSibling as HTMLElement;
}
}
}
while (nextDOM) {
const after = nextDOM.nextSibling;
nextDOM.parentNode?.removeChild(nextDOM);
nextDOM = after as HTMLElement;
}
if (fixedWidth) {
table.style.width = totalWidth + 'px';
table.style.minWidth = '';
} else {
table.style.width = '';
table.style.minWidth = totalWidth + 'px';
}
}
I'm open to making a PR
Linked Issue in Tiptap : ueberdosis/tiptap#5435
jomifepe
Metadata
Metadata
Assignees
Labels
No labels