[Bug]: Table renders with invalid minWidth CSS property in the style attribute

[matthewfinger]

Affected Packages

extension-table

Version(s)

2.4.0

Bug Description

If I use the minimal table configuration, with just Table, TableHeader, TableRow, TableCell added to the extensions array, tables without a minimum cell/col width end up having style: `minWidth: ${tableMinWidth}`, added to the attributes, however this should be min-width.

It's pretty simple, I can see the issue right here https://github.com/ueberdosis/tiptap/blob/bd480a20097ee4522a250b1bc03e8779f014818e/packages/extension-table/src/table.ts#L289C26-L289C39

Looks like there was a PR with a fix that was recently closed by the author: #4684 instead of getting merged in.

Browser Used

Chrome

Code Example URL

https://codesandbox.io/p/sandbox/icy-dust-tgrzdd?file=%2Fsrc%2Findex.js%3A7%2C54

Expected Behavior

When a table is inserted, it should have min-width in the style attribute.

Additional Context (Optional)

No response

Dependency Updates

• Yes, I've updated all my dependencies.

[zhondori]

I also encounter this issue which is technically very easy to fix and just CSS typo in table extension code

[Ragnar-Oock]

while waiting for this issue to be resolved you can simply extend the base table extension like so :

import { Table } from '@tiptap/extension-table';

export const CorrectedTable = Table.extend({
	renderHTML(props) {
		const tableNode = this.parent(props);
		tableNode[1].style = tableNode[1].style?.replace('minWidth', 'min-width');
		return tableNode;
	},
});

Or you could copy paste the implementation of renderHTML from @tiptap/extension-table like so. But that means you have to maintain it yourself.

import { Table } from '@tiptap/extension-table';

export const CorrectedTable = Table.extend({
	renderHTML({ node, HTMLAttributes }) {
		const {
			colgroup, tableWidth, tableMinWidth
		} = createColGroup(
			node,
			this.options.cellMinWidth,
		);

		const table: DOMOutputSpec = [
			'table',
			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
				style: tableWidth
					? `width: ${ tableWidth }`
					: `min-width: ${ tableMinWidth }`, // this is the line that changed
			}),
			colgroup,
			[ 'tbody', 0 ],
		];

		return table;
	},
});

[nperez0111]

This will be fixed in the next version, I just merged in that closed PR