diff --git a/.changeset/serious-masks-punch.md b/.changeset/serious-masks-punch.md new file mode 100644 index 0000000000..4788e824e3 --- /dev/null +++ b/.changeset/serious-masks-punch.md @@ -0,0 +1,6 @@ +--- +"@udecode/plate-table": patch +--- + +- Fix: merge of header cells in table +- Fix: #2831 diff --git a/packages/table/src/components/TableCellElement/useTableCellElementState.ts b/packages/table/src/components/TableCellElement/useTableCellElementState.ts index 3edf24fee1..95339e5826 100644 --- a/packages/table/src/components/TableCellElement/useTableCellElementState.ts +++ b/packages/table/src/components/TableCellElement/useTableCellElementState.ts @@ -71,7 +71,7 @@ export const useTableCellElementState = ({ const rowIndex = getTableRowIndex(editor, cellElement); const rowSize = - rowSizeOverrides.get(rowIndex) ?? rowElement?.size ?? undefined; + rowSizeOverrides.get?.(rowIndex) ?? rowElement?.size ?? undefined; const isFirstCell = colIndex === 0; const isFirstRow = tableElement.children?.[0] === rowElement; @@ -115,7 +115,7 @@ export const useTableCellElementState = ({ const endingColIndex = colIndex + colSpan - 1; const rowSize = - rowSizeOverrides.get(endingRowIndex) ?? rowElement?.size ?? undefined; + rowSizeOverrides.get?.(endingRowIndex) ?? rowElement?.size ?? undefined; const isFirstCell = colIndex === 0; const isFirstRow = tableElement.children?.[0] === rowElement; diff --git a/packages/table/src/merge/mergeTableCells.ts b/packages/table/src/merge/mergeTableCells.ts index 45553400c5..1cab0d1aea 100644 --- a/packages/table/src/merge/mergeTableCells.ts +++ b/packages/table/src/merge/mergeTableCells.ts @@ -1,4 +1,5 @@ import { + collapseSelection, getBlockAbove, getPluginOptions, getPluginType, @@ -10,7 +11,7 @@ import { } from '@udecode/plate-common'; import { cloneDeep } from 'lodash'; -import { ELEMENT_TABLE } from '../createTablePlugin'; +import { ELEMENT_TABLE, ELEMENT_TH } from '../createTablePlugin'; import { getTableGridAbove } from '../queries'; import { getColSpan } from '../queries/getColSpan'; import { getRowSpan } from '../queries/getRowSpan'; @@ -78,14 +79,7 @@ export const mergeTableCells = ( // and values are an array of all paths with that column const cols: { [key: string]: number[][] } = {}; - // A boolean to keep track if we have a header cell among the cells we are merging - let hasHeaderCell = false; - cellEntries.forEach(([entry, path]) => { - if (!hasHeaderCell && entry.type === 'table_header_cell') { - hasHeaderCell = true; - } - const rowIndex = path.at(-2)!; if (cols[rowIndex]) { @@ -107,7 +101,7 @@ export const mergeTableCells = ( // calculated colSpan and rowSpan attributes and combined content const mergedCell = { ...getEmptyCellNode(editor, { - header: cellEntries[0][0].type === 'th', + header: cellEntries[0][0].type === getPluginType(editor, ELEMENT_TH), newCellChildren: contents, }), colSpan, @@ -116,5 +110,6 @@ export const mergeTableCells = ( // insert the new merged cell in place of the first cell in the selection insertElements(editor, mergedCell, { at: cellEntries[0][1] }); + collapseSelection(editor); }); }; diff --git a/packages/table/src/merge/unmergeTableCells.ts b/packages/table/src/merge/unmergeTableCells.ts index a0451d9768..40e5400938 100644 --- a/packages/table/src/merge/unmergeTableCells.ts +++ b/packages/table/src/merge/unmergeTableCells.ts @@ -10,7 +10,7 @@ import { withoutNormalizing, } from '@udecode/plate-common'; -import { ELEMENT_TABLE, ELEMENT_TR } from '../createTablePlugin'; +import { ELEMENT_TABLE, ELEMENT_TH, ELEMENT_TR } from '../createTablePlugin'; import { getTableGridAbove } from '../queries'; import { getColSpan } from '../queries/getColSpan'; import { getRowSpan } from '../queries/getRowSpan'; @@ -34,7 +34,7 @@ export const unmergeTableCells = ( const createEmptyCell = (children?: TDescendant[]) => { return { ...getEmptyCellNode(editor, { - header: cellElem.type === 'th', + header: cellElem.type === getPluginType(editor, ELEMENT_TH), newCellChildren: children, }), colSpan: 1, diff --git a/packages/table/src/queries/getTableOverriddenColSizes.ts b/packages/table/src/queries/getTableOverriddenColSizes.ts index c9e5b96a03..baaf4cb0b8 100644 --- a/packages/table/src/queries/getTableOverriddenColSizes.ts +++ b/packages/table/src/queries/getTableOverriddenColSizes.ts @@ -16,7 +16,7 @@ export const getTableOverriddenColSizes = ( tableNode.colSizes ? [...tableNode.colSizes] : (Array.from({ length: colCount }).fill(0) as number[]) - ).map((size, index) => colSizeOverrides?.get(index) ?? size); + ).map((size, index) => colSizeOverrides?.get?.(index) ?? size); return colSizes; }; diff --git a/packages/table/src/transforms/insertTableRow.ts b/packages/table/src/transforms/insertTableRow.ts index 3e520d0093..1b2eb45bdf 100644 --- a/packages/table/src/transforms/insertTableRow.ts +++ b/packages/table/src/transforms/insertTableRow.ts @@ -70,7 +70,7 @@ export const insertTableRow = ( const isHeaderColumn = !hasSingleRow && (tableEntry[0].children as TElement[]).every( - (n) => n.children[i].type === ELEMENT_TH + (n) => n.children[i].type === getPluginType(editor, ELEMENT_TH) ); return getEmptyCellNode(editor, { header: header ?? isHeaderColumn,