Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Ragnar-Oock opened this issue Aug 2, 2024 · 0 comments
Open

Comments

@Ragnar-Oock
Copy link

Ragnar-Oock commented Aug 2, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant