diff --git a/.changeset/chatty-flowers-move.md b/.changeset/chatty-flowers-move.md new file mode 100644 index 0000000000..20587c0e2a --- /dev/null +++ b/.changeset/chatty-flowers-move.md @@ -0,0 +1,5 @@ +--- +"@udecode/plate-table": patch +--- + +Hotfix: reset cell entries list when table is overflown diff --git a/.changeset/orange-actors-deliver.md b/.changeset/orange-actors-deliver.md new file mode 100644 index 0000000000..6748b0ad51 --- /dev/null +++ b/.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 diff --git a/packages/table/src/components/TableCellElement/useTableCellElementState.ts b/packages/table/src/components/TableCellElement/useTableCellElementState.ts index 12c3a644ff..067a7d08cd 100644 --- a/packages/table/src/components/TableCellElement/useTableCellElementState.ts +++ b/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), }, }; }; diff --git a/packages/table/src/merge/computeCellIndices.ts b/packages/table/src/merge/computeCellIndices.ts index c1e1efdc45..bad8710409 100644 --- a/packages/table/src/merge/computeCellIndices.ts +++ b/packages/table/src/merge/computeCellIndices.ts @@ -8,6 +8,7 @@ import { TTableElement, TTableRowElement, } from '../types'; +import { getColSpan } from '../queries'; export function computeCellIndices( editor: PlateEditor, @@ -32,7 +33,7 @@ export function computeCellIndices( rowIndex = r; break; } - cIndex += cell.colSpan || 1; // consider 0 and undefined as 1 + cIndex += getColSpan(cell); } } @@ -52,7 +53,7 @@ export function computeCellIndices( _rowSpan > 1 && rowIndex - _rowIndex < _rowSpan ) { - colIndex += prevCell.colSpan || 1; + colIndex += getColSpan(prevCell); } } }); diff --git a/packages/table/src/merge/isTableRectangular.ts b/packages/table/src/merge/isTableRectangular.ts index d0f3d42fff..9dfe4298a7 100644 --- a/packages/table/src/merge/isTableRectangular.ts +++ b/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); }); }); }); diff --git a/packages/table/src/withSetFragmentDataTable.ts b/packages/table/src/withSetFragmentDataTable.ts index 2ab54018f0..271318ea48 100644 --- a/packages/table/src/withSetFragmentDataTable.ts +++ b/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);