Table bugfixes

.changeset/chatty-flowers-move.md

@@ -0,0 +1,5 @@
+---
+"@udecode/plate-table": patch
+---
+
+Hotfix: reset cell entries list when table is overflown

.changeset/orange-actors-deliver.md

@@ -0,0 +1,5 @@
+---
+"@udecode/plate-table": patch
+---
+
+Use getRowSpan\getColSpan instead of pointing at `rowspan` and `colspan` fields directly

packages/table/src/components/TableCellElement/useTableCellElementState.ts

@@ -152,8 +152,8 @@ export const useTableCellElement = ({
 
   return {
     props: {
-      colSpan: element.colSpan,
-      rowSpan: element.rowSpan,
+      colSpan: getColSpan(element),
+      rowSpan: getRowSpan(element),
     },
   };
 };

packages/table/src/merge/computeCellIndices.ts

@@ -8,6 +8,7 @@ import {
   TTableElement,
   TTableRowElement,
 } from '../types';
+import { getColSpan } from '../queries';
 
 export function computeCellIndices<V extends Value>(
   editor: PlateEditor<V>,
@@ -32,7 +33,7 @@ export function computeCellIndices<V extends Value>(
         rowIndex = r;
         break;
       }
-      cIndex += cell.colSpan || 1; // consider 0 and undefined as 1
+      cIndex += getColSpan(cell);
     }
   }
 
@@ -52,7 +53,7 @@ export function computeCellIndices<V extends Value>(
           _rowSpan > 1 &&
           rowIndex - _rowIndex < _rowSpan
         ) {
-          colIndex += prevCell.colSpan || 1;
+          colIndex += getColSpan(prevCell);
         }
       }
     });

packages/table/src/merge/isTableRectangular.ts

@@ -1,3 +1,4 @@
+import { getColSpan } from '../queries';
 import { getRowSpan } from '../queries/getRowSpan';
 import { TTableCellElement, TTableElement, TTableRowElement } from '../types';
 
@@ -20,7 +21,7 @@ export const isTableRectangular = (table?: TTableElement) => {
         if (!arr[rI + i]) {
           arr[rI + i] = 0;
         }
-        arr[rI + i] += cellElem?.colSpan || 1;
+        arr[rI + i] += getColSpan(cellElem);
       });
     });
   });

packages/table/src/withSetFragmentDataTable.ts

@@ -11,7 +11,7 @@ import {
 import { Path } from 'slate';
 
 import { ELEMENT_TH } from './createTablePlugin';
-import { getTableGridAbove } from './queries/index';
+import { getColSpan, getRowSpan, getTableGridAbove } from './queries/index';
 import { TTableCellElement } from './types';
 
 export const withSetFragmentDataTable = <
@@ -106,12 +106,10 @@ export const withSetFragmentDataTable = <
 
           const cellElement = document.createElement('td');
 
-          if (cell.colSpan !== undefined) {
-            cellElement.colSpan = cell.colSpan;
-          }
-          if (cell.rowSpan !== undefined) {
-            cellElement.rowSpan = cell.rowSpan;
-          }
+          const colSpan = getColSpan(cell);
+          cellElement.colSpan = colSpan;
+          const rowSpan = getRowSpan(cell);
+          cellElement.rowSpan = rowSpan;
 
           cellElement.innerHTML = data.getData('text/html');
           rowElement.append(cellElement);