From 0561f52e3924db377f4fa2559994620d71570895 Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Thu, 9 Nov 2023 02:00:03 +0300 Subject: [PATCH] update implementation of indices detection --- .../src/lib/plate/demo/values/tableValue.tsx | 20 +++-- .../TableElement/useTableColSizes.ts | 10 +-- .../TableElement/useTableElement.ts | 82 ++++++++----------- 3 files changed, 47 insertions(+), 65 deletions(-) diff --git a/apps/www/src/lib/plate/demo/values/tableValue.tsx b/apps/www/src/lib/plate/demo/values/tableValue.tsx index a6775fb21c..30417572f0 100644 --- a/apps/www/src/lib/plate/demo/values/tableValue.tsx +++ b/apps/www/src/lib/plate/demo/values/tableValue.tsx @@ -109,7 +109,7 @@ export const createMergedCellsTable = (): any => ( - + Heading @@ -119,6 +119,11 @@ export const createMergedCellsTable = (): any => ( Cell 1 + + + Cell 11 + + Cell 2 @@ -126,9 +131,12 @@ export const createMergedCellsTable = (): any => ( - + Cell 3 + {/* + Cell 77 + */} Cell 7 @@ -139,12 +147,9 @@ export const createMergedCellsTable = (): any => ( Cell 4 - + {/* Cell 5 - - - Cell 6 - + */} Cell 8 @@ -153,6 +158,7 @@ export const createMergedCellsTable = (): any => ( ); + export const tableValue: any = ( 🏓 Table diff --git a/packages/table/src/components/TableElement/useTableColSizes.ts b/packages/table/src/components/TableElement/useTableColSizes.ts index 5135f4c53e..dbb31290f1 100644 --- a/packages/table/src/components/TableElement/useTableColSizes.ts +++ b/packages/table/src/components/TableElement/useTableColSizes.ts @@ -2,25 +2,17 @@ import { useEffect } from 'react'; import { findNodePath, getPluginOptions, - PlateEditor, unsetNodes, useEditorRef, } from '@udecode/plate-common'; -import { BaseEditor, Editor, Path } from 'slate'; import { ELEMENT_TABLE } from '../../createTablePlugin'; import { getTableColumnCount, getTableOverriddenColSizes, - getTableRowIndex, } from '../../queries/index'; import { useTableStore } from '../../stores/tableStore'; -import { - TablePlugin, - TTableCellElement, - TTableElement, - TTableRowElement, -} from '../../types'; +import { TablePlugin, TTableElement } from '../../types'; /** * Returns colSizes with overrides applied. diff --git a/packages/table/src/components/TableElement/useTableElement.ts b/packages/table/src/components/TableElement/useTableElement.ts index 6de2a58cee..bb139cf579 100644 --- a/packages/table/src/components/TableElement/useTableElement.ts +++ b/packages/table/src/components/TableElement/useTableElement.ts @@ -3,14 +3,15 @@ import { collapseSelection, findNodePath, getNode, + getParentNode, getPluginOptions, + PlateEditor, useEditorRef, useElement, } from '@udecode/plate-common'; import { Path } from 'slate'; import { ELEMENT_TABLE } from '../../createTablePlugin'; -import { getTableRowIndex } from '../../queries'; import { useTableStore } from '../../stores/tableStore'; import { TablePlugin, @@ -97,6 +98,11 @@ export const useTableElement = () => { }; }; +const cellAttributes = new WeakMap< + TTableCellElement, + { row: number; col: number } +>(); + function getCellIndices( editor: PlateEditor, tableEl: TTableElement, @@ -110,66 +116,41 @@ function getCellIndices( for (let r = 0; r < tableNodes.length; r++) { const row = tableNodes[r] as TTableRowElement; - // console.log('row.type', row.type); - // if (row.type === 'tr') { - rowIndex++; let cIndex = 0; for (let c = 0; c < row.children.length; c++) { const cell = row.children[c] as TTableCellElement; - // console.log('current cell', cell); - // console.log('cell.type', cell.type); - // if (cell.type === 'th') { const curCellPath = [r, c]; - // const curCellPath = findNodePath(editor, cell)!; - if (Path.equals(curCellPath, cellPath)) { - // colIndex = cIndex; - console.log('early break', cIndex); + colIndex = cIndex; + rowIndex = r; break; } cIndex += cell.colSpan || 1; // consider 0 and undefined as 1 - console.log('incrementing cell index,', cIndex); - // } - } - - // If target cell is not in this row, but the rowSpan from previous rows is impacting - // the colIndex for the next row, then increment manually - if (rowIndex >= 1) { - console.log('tableNodes', tableNodes, 'rowIndex', rowIndex); - tableNodes.slice(0, rowIndex).forEach((pR, _rowIndex) => { - const prevRow = pR as TTableRowElement; - console.log('current row', row, 'prevRow', prevRow); - - prevRow.children.forEach((pC) => { - const prevCell = pC as TTableCellElement; - console.log('prevCell', prevCell); - if ( - prevCell.rowSpan && - prevCell.rowSpan > 1 && - rowIndex - _rowIndex < prevCell.rowSpan - ) { - cIndex += prevCell.colSpan || 1; - console.log( - 'increment by affected row span:', - _rowIndex, - cIndex, - cellPath - ); - } - }); - }); - } - // } - - if (colIndex !== -1) { - // Break once we've found the target cell - colIndex = cIndex; - console.log('breaking, we found cell'); - break; } } + tableNodes.slice(0, rowIndex).forEach((pR, _rowIndex) => { + const prevRow = pR as TTableRowElement; + prevRow.children.forEach((pC) => { + const prevCell = pC as TTableCellElement; + const prevIndices = cellAttributes.get(prevCell); + if (prevIndices) { + const { col: prevColIndex } = prevIndices; + if ( + // colIndex affects + prevColIndex <= colIndex && + // rowSpan affects + prevCell.rowSpan && + prevCell.rowSpan > 1 && + rowIndex - _rowIndex < prevCell.rowSpan + ) { + colIndex += prevCell.colSpan || 1; + } + } + }); + }); + if (rowIndex === -1 || colIndex === -1) { console.log('Invalid cell location.'); return null; @@ -212,6 +193,9 @@ const calculateCellIndexes = ( ); const indices = getCellIndices(editor, tableNode, tablePath, cellPath); + if (indices) { + cellAttributes.set(cell, indices); + } rowIndicesArray.push(indices); }