Merge pull request #2832 from dimaanj/fix-merge-headers

[Table] Fix merge headers
udecode · Dec 26, 2023 · 41f29f2 · 41f29f2
2 parents 7af5306 + a0ee2e4
commit 41f29f2
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 15 deletions.
diff --git a/.changeset/serious-masks-punch.md 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
@@ -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
@@ -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 = <V extends Value = Value>(
     // 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 = <V extends Value = Value>(
     // 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 = <V extends Value = Value>(
 
     // 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
@@ -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 = <V extends Value = Value>(
     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
@@ -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
@@ -70,7 +70,7 @@ export const insertTableRow = <V extends Value>(
       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,