diff --git a/demos/src/Nodes/Table/React/index.spec.js b/demos/src/Nodes/Table/React/index.spec.js index 28396028a..57530920d 100644 --- a/demos/src/Nodes/Table/React/index.spec.js +++ b/demos/src/Nodes/Table/React/index.spec.js @@ -63,7 +63,7 @@ context('/src/Nodes/Table/React/', () => { const html = editor.getHTML() expect(html).to.equal( - '

', + '

', ) }) }) @@ -75,7 +75,7 @@ context('/src/Nodes/Table/React/', () => { const html = editor.getHTML() expect(html).to.equal( - '

', + '

', ) }) }) diff --git a/demos/src/Nodes/Table/Vue/index.spec.js b/demos/src/Nodes/Table/Vue/index.spec.js index bdb1dada6..09082c895 100644 --- a/demos/src/Nodes/Table/Vue/index.spec.js +++ b/demos/src/Nodes/Table/Vue/index.spec.js @@ -62,7 +62,7 @@ context('/src/Nodes/Table/Vue/', () => { const html = editor.getHTML() - expect(html).to.equal('

') + expect(html).to.equal('

') }) }) @@ -72,7 +72,7 @@ context('/src/Nodes/Table/Vue/', () => { const html = editor.getHTML() - expect(html).to.equal('

') + expect(html).to.equal('

') }) }) diff --git a/packages/extension-table/src/table.ts b/packages/extension-table/src/table.ts index 944f7bd05..b16898105 100644 --- a/packages/extension-table/src/table.ts +++ b/packages/extension-table/src/table.ts @@ -22,8 +22,10 @@ import { toggleHeaderCell, } from '@tiptap/pm/tables' import { NodeView } from '@tiptap/pm/view' +import { DOMOutputSpec } from 'prosemirror-model' import { TableView } from './TableView.js' +import { createColGroup } from './utilities/createColGroup.js' import { createTable } from './utilities/createTable.js' import { deleteTableWhenAllCellsSelected } from './utilities/deleteTableWhenAllCellsSelected.js' @@ -110,8 +112,24 @@ export const Table = Node.create({ return [{ tag: 'table' }] }, - renderHTML({ HTMLAttributes }) { - return ['table', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), ['tbody', 0]] + 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}` + : `minWidth: ${tableMinWidth}`, + }), + colgroup, + ['tbody', 0], + ] + + return table }, addCommands() { diff --git a/packages/extension-table/src/utilities/createColGroup.ts b/packages/extension-table/src/utilities/createColGroup.ts new file mode 100644 index 000000000..c93dbf61a --- /dev/null +++ b/packages/extension-table/src/utilities/createColGroup.ts @@ -0,0 +1,51 @@ +import { Node as ProseMirrorNode } from '@tiptap/pm/model' +import { DOMOutputSpec } from 'prosemirror-model' + +/** + * Creates a colgroup element for a table node in ProseMirror. + * + * @param node - The ProseMirror node representing the table. + * @param cellMinWidth - The minimum width of a cell in the table. + * @param overrideCol - (Optional) The index of the column to override the width of. + * @param overrideValue - (Optional) The width value to use for the overridden column. + * @returns An object containing the colgroup element, the total width of the table, and the minimum width of the table. + */ +export function createColGroup( + node: ProseMirrorNode, + cellMinWidth: number, + overrideCol?: number, + overrideValue?: any, +) { + let totalWidth = 0 + let fixedWidth = true + const cols: DOMOutputSpec[] = [] + const row = node.firstChild + + if (!row) { + return {} + } + + for (let i = 0, col = 0; i < row.childCount; i += 1) { + const { colspan, colwidth } = row.child(i).attrs + + for (let j = 0; j < colspan; j += 1, col += 1) { + const hasWidth = overrideCol === col ? overrideValue : colwidth && colwidth[j] + const cssWidth = hasWidth ? `${hasWidth}px` : '' + + totalWidth += hasWidth || cellMinWidth + + if (!hasWidth) { + fixedWidth = false + } + + cols.push(['col', cssWidth ? { style: `width: ${cssWidth}` } : {}]) + } + } + + const tableWidth = fixedWidth ? `${totalWidth}px` : '' + const tableMinWidth = fixedWidth ? '' : `${totalWidth}px` + + const colgroup: DOMOutputSpec = ['colgroup', {}, ...cols] + + return { colgroup, tableWidth, tableMinWidth } +}