Skip to content

Column that have not been resized by the user don't have a set widthΒ #238

@Ragnar-Oock

Description

@Ragnar-Oock
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 :

  1. columns might be too narrow
  2. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions