From 88e1dc4eaaa2c855592ad8a0ac5f4e8f4b500a07 Mon Sep 17 00:00:00 2001 From: felixfeng Date: Sun, 31 Mar 2024 15:30:00 +0800 Subject: [PATCH 1/6] fix --- packages/table/src/transforms/deleteColumn.ts | 50 +++++++++++++++++-- .../table/src/utils/getCellRowIndexByPath.ts | 5 ++ 2 files changed, 51 insertions(+), 4 deletions(-) create mode 100644 packages/table/src/utils/getCellRowIndexByPath.ts diff --git a/packages/table/src/transforms/deleteColumn.ts b/packages/table/src/transforms/deleteColumn.ts index b7262d2c3d..2f5e5d892f 100644 --- a/packages/table/src/transforms/deleteColumn.ts +++ b/packages/table/src/transforms/deleteColumn.ts @@ -1,15 +1,19 @@ import { + createPathRef, getAboveNode, getPluginOptions, getPluginType, + isExpanded, PlateEditor, removeNodes, setNodes, someNode, TElement, + TNodeEntry, Value, withoutNormalizing, } from '@udecode/plate-common'; +import { PathRef } from 'slate'; import { ELEMENT_TABLE, @@ -18,7 +22,9 @@ import { ELEMENT_TR, } from '../createTablePlugin'; import { deleteTableMergeColumn } from '../merge/deleteColumn'; -import { TablePlugin, TTableElement } from '../types'; +import { getTableGridAbove } from '../queries'; +import { TablePlugin, TTableCellElement, TTableElement } from '../types'; +import { getCellRowIndexByPath } from '../utils/getCellRowIndexByPath'; export const deleteColumn = (editor: PlateEditor) => { const { enableMerging } = getPluginOptions( @@ -29,6 +35,45 @@ export const deleteColumn = (editor: PlateEditor) => { return deleteTableMergeColumn(editor); } + const tableEntry = getAboveNode(editor, { + match: { type: getPluginType(editor, ELEMENT_TABLE) }, + }); + + if (!tableEntry) return; + + if (isExpanded(editor.selection)) { + const rowCount = tableEntry[0].children.length; + + const cells = getTableGridAbove(editor, { + format: 'cell', + }) as TNodeEntry[]; + + let lastCellRowIndex = -1; + let selectionRowCount = 0; + + const pathRefs: PathRef[] = []; + + cells.forEach(([cell, cellPath], index) => { + const currentCellRowIndex = getCellRowIndexByPath(cellPath); + + // not on the same line + if (currentCellRowIndex !== lastCellRowIndex) { + selectionRowCount += 1; + } + + pathRefs.push(createPathRef(editor, cellPath)); + lastCellRowIndex = currentCellRowIndex; + }); + + if (rowCount === selectionRowCount) { + pathRefs.forEach((pathRef) => { + removeNodes(editor, { at: pathRef.unref()! }); + }); + } + + return; + } + if ( someNode(editor, { match: { type: getPluginType(editor, ELEMENT_TABLE) }, @@ -45,9 +90,6 @@ export const deleteColumn = (editor: PlateEditor) => { const trEntry = getAboveNode(editor, { match: { type: getPluginType(editor, ELEMENT_TR) }, }); - const tableEntry = getAboveNode(editor, { - match: { type: getPluginType(editor, ELEMENT_TABLE) }, - }); if ( tdEntry && diff --git a/packages/table/src/utils/getCellRowIndexByPath.ts b/packages/table/src/utils/getCellRowIndexByPath.ts new file mode 100644 index 0000000000..8d63629b4a --- /dev/null +++ b/packages/table/src/utils/getCellRowIndexByPath.ts @@ -0,0 +1,5 @@ +import { Path } from 'slate'; + +export const getCellRowIndexByPath = (cellPath: Path): number => { + return cellPath.slice(0, -1)[cellPath.length - 2]; +}; From 3970c5f5f7477ed7febe55554d9c413659ace64c Mon Sep 17 00:00:00 2001 From: felixfeng Date: Sun, 31 Mar 2024 15:32:30 +0800 Subject: [PATCH 2/6] fix ts --- .changeset/swift-eggs-look.md | 5 +++++ packages/table/src/withMarkTable.tsx | 6 +++--- 2 files changed, 8 insertions(+), 3 deletions(-) create mode 100644 .changeset/swift-eggs-look.md diff --git a/.changeset/swift-eggs-look.md b/.changeset/swift-eggs-look.md new file mode 100644 index 0000000000..92ed1fa02b --- /dev/null +++ b/.changeset/swift-eggs-look.md @@ -0,0 +1,5 @@ +--- +"@udecode/plate-table": patch +--- + +fix can not remove table column when selection is expanded diff --git a/packages/table/src/withMarkTable.tsx b/packages/table/src/withMarkTable.tsx index 0ae240f95f..75077d0cde 100644 --- a/packages/table/src/withMarkTable.tsx +++ b/packages/table/src/withMarkTable.tsx @@ -4,6 +4,7 @@ import { isText, PlateEditor, setNodes, + TElement, unsetNodes, Value, } from '@udecode/plate-common'; @@ -27,9 +28,8 @@ export const withMarkTable = < if (matchesCell.length === 0) return addMark(key, value); matchesCell.forEach(([cell, cellPath]) => { - setNodes( + setNodes( editor, - //@ts-ignore { [key]: value, }, @@ -85,7 +85,7 @@ export const withMarkTable = < keys.splice(keys.indexOf('text'), 1); keys.forEach((k) => { - totalMarks[k] = true; + totalMarks[k] = item[k]; }); }); }); From ca47d716791bd1102d22a34d2111ebaf90e711f1 Mon Sep 17 00:00:00 2001 From: felixfeng Date: Sun, 31 Mar 2024 15:34:36 +0800 Subject: [PATCH 3/6] chore: code style --- packages/table/src/transforms/deleteColumn.ts | 128 +++++++++--------- 1 file changed, 65 insertions(+), 63 deletions(-) diff --git a/packages/table/src/transforms/deleteColumn.ts b/packages/table/src/transforms/deleteColumn.ts index 2f5e5d892f..d013ac96b8 100644 --- a/packages/table/src/transforms/deleteColumn.ts +++ b/packages/table/src/transforms/deleteColumn.ts @@ -35,6 +35,14 @@ export const deleteColumn = (editor: PlateEditor) => { return deleteTableMergeColumn(editor); } + if ( + !someNode(editor, { + match: { type: getPluginType(editor, ELEMENT_TABLE) }, + }) + ) { + return; + } + const tableEntry = getAboveNode(editor, { match: { type: getPluginType(editor, ELEMENT_TABLE) }, }); @@ -74,73 +82,67 @@ export const deleteColumn = (editor: PlateEditor) => { return; } + const tdEntry = getAboveNode(editor, { + match: { + type: [ + getPluginType(editor, ELEMENT_TD), + getPluginType(editor, ELEMENT_TH), + ], + }, + }); + const trEntry = getAboveNode(editor, { + match: { type: getPluginType(editor, ELEMENT_TR) }, + }); + if ( - someNode(editor, { - match: { type: getPluginType(editor, ELEMENT_TABLE) }, - }) + tdEntry && + trEntry && + tableEntry && + // Cannot delete the last cell + trEntry[0].children.length > 1 ) { - const tdEntry = getAboveNode(editor, { - match: { - type: [ - getPluginType(editor, ELEMENT_TD), - getPluginType(editor, ELEMENT_TH), - ], - }, - }); - const trEntry = getAboveNode(editor, { - match: { type: getPluginType(editor, ELEMENT_TR) }, - }); + const [tableNode, tablePath] = tableEntry; - if ( - tdEntry && - trEntry && - tableEntry && - // Cannot delete the last cell - trEntry[0].children.length > 1 - ) { - const [tableNode, tablePath] = tableEntry; - - const tdPath = tdEntry[1]; - const colIndex = tdPath.at(-1)!; - - const pathToDelete = tdPath.slice(); - const replacePathPos = pathToDelete.length - 2; - - withoutNormalizing(editor, () => { - tableNode.children.forEach((row, rowIdx) => { - pathToDelete[replacePathPos] = rowIdx; - - // for tables containing rows of different lengths - // - don't delete if only one cell in row - // - don't delete if row doesn't have this cell - if ( - (row.children as TElement[]).length === 1 || - colIndex > (row.children as TElement[]).length - 1 - ) - return; - - removeNodes(editor, { - at: pathToDelete, - }); - }); + const tdPath = tdEntry[1]; + const colIndex = tdPath.at(-1)!; + + const pathToDelete = tdPath.slice(); + const replacePathPos = pathToDelete.length - 2; + + withoutNormalizing(editor, () => { + tableNode.children.forEach((row, rowIdx) => { + pathToDelete[replacePathPos] = rowIdx; + + // for tables containing rows of different lengths + // - don't delete if only one cell in row + // - don't delete if row doesn't have this cell + if ( + (row.children as TElement[]).length === 1 || + colIndex > (row.children as TElement[]).length - 1 + ) + return; - const { colSizes } = tableNode; - - if (colSizes) { - const newColSizes = [...colSizes]; - newColSizes.splice(colIndex, 1); - - setNodes( - editor, - { - colSizes: newColSizes, - }, - { - at: tablePath, - } - ); - } + removeNodes(editor, { + at: pathToDelete, + }); }); - } + + const { colSizes } = tableNode; + + if (colSizes) { + const newColSizes = [...colSizes]; + newColSizes.splice(colIndex, 1); + + setNodes( + editor, + { + colSizes: newColSizes, + }, + { + at: tablePath, + } + ); + } + }); } }; From 47eb7fb7f2647ebf9538ffb3b903884f9dd0a4a9 Mon Sep 17 00:00:00 2001 From: felixfeng Date: Sun, 31 Mar 2024 18:06:33 +0800 Subject: [PATCH 4/6] remove row --- packages/table/src/merge/deleteColumn.ts | 6 +++ packages/table/src/merge/deleteRow.ts | 6 +++ .../table/src/merge/deleteRowWhenExpanded.ts | 39 ++++++++++++++++ packages/table/src/transforms/deleteColumn.ts | 42 ++--------------- .../transforms/deleteColumnWhenExpanded.ts | 46 +++++++++++++++++++ .../table/src/utils/getCellRowIndexByPath.ts | 2 +- 6 files changed, 102 insertions(+), 39 deletions(-) create mode 100644 packages/table/src/merge/deleteRowWhenExpanded.ts create mode 100644 packages/table/src/transforms/deleteColumnWhenExpanded.ts diff --git a/packages/table/src/merge/deleteColumn.ts b/packages/table/src/merge/deleteColumn.ts index 7b466576de..2aeb1a148e 100644 --- a/packages/table/src/merge/deleteColumn.ts +++ b/packages/table/src/merge/deleteColumn.ts @@ -2,6 +2,7 @@ import { getAboveNode, getPluginOptions, getPluginType, + isExpanded, PlateEditor, removeNodes, setNodes, @@ -13,6 +14,7 @@ import { Path } from 'slate'; import { ELEMENT_TABLE, ELEMENT_TR } from '../createTablePlugin'; import { getColSpan } from '../queries/getColSpan'; +import { deleteColumnWhenExpanded } from '../transforms/deleteColumnWhenExpanded'; import { TablePlugin, TTableCellElement, TTableElement } from '../types'; import { getCellTypes } from '../utils'; import { findCellByIndexes } from './findCellByIndexes'; @@ -36,6 +38,10 @@ export const deleteTableMergeColumn = ( match: { type: getPluginType(editor, ELEMENT_TABLE) }, }); if (!tableEntry) return; + + if (isExpanded(editor.selection)) + return deleteColumnWhenExpanded(editor, tableEntry); + const table = tableEntry[0] as TTableElement; const selectedCellEntry = getAboveNode(editor, { diff --git a/packages/table/src/merge/deleteRow.ts b/packages/table/src/merge/deleteRow.ts index 33155bd639..f0806ce700 100644 --- a/packages/table/src/merge/deleteRow.ts +++ b/packages/table/src/merge/deleteRow.ts @@ -4,6 +4,7 @@ import { getPluginOptions, getPluginType, insertElements, + isExpanded, PlateEditor, removeNodes, setNodes, @@ -21,6 +22,7 @@ import { TTableRowElement, } from '../types'; import { getCellTypes } from '../utils'; +import { deleteRowWhenExpanded } from './deleteRowWhenExpanded'; import { findCellByIndexes } from './findCellByIndexes'; import { getCellIndices } from './getCellIndices'; @@ -41,6 +43,10 @@ export const deleteTableMergeRow = ( match: { type: getPluginType(editor, ELEMENT_TABLE) }, }); if (!currentTableItem) return; + + if (isExpanded(editor.selection)) + return deleteRowWhenExpanded(editor, currentTableItem); + const table = currentTableItem[0] as TTableElement; const selectedCellEntry = getAboveNode(editor, { diff --git a/packages/table/src/merge/deleteRowWhenExpanded.ts b/packages/table/src/merge/deleteRowWhenExpanded.ts new file mode 100644 index 0000000000..917534fb1f --- /dev/null +++ b/packages/table/src/merge/deleteRowWhenExpanded.ts @@ -0,0 +1,39 @@ +import { + PlateEditor, + removeNodes, + TNodeEntry, + Value, +} from '@udecode/plate-common'; + +import { getTableGridAbove } from '../queries'; +import { TTableCellElement } from '../types'; + +export const deleteRowWhenExpanded = ( + editor: PlateEditor, + [table, tablePath]: TNodeEntry +) => { + const rowCount = table.children.length; + + const cells = getTableGridAbove(editor, { + format: 'cell', + }) as TNodeEntry[]; + + const firsRowIndex = cells[0][1].at(-2) ?? null; + + if (firsRowIndex === null) return; + + let acrossColumn = 0; + + cells.forEach(([cell, cellPath], index) => { + if (cellPath.at(-2) === firsRowIndex) { + acrossColumn += cell.colSpan ?? 1; + } + }); + + if (acrossColumn === rowCount) { + for (let i = firsRowIndex; i <= acrossColumn; i++) { + const removedPath = tablePath.concat(i); + removeNodes(editor, { at: removedPath }); + } + } +}; diff --git a/packages/table/src/transforms/deleteColumn.ts b/packages/table/src/transforms/deleteColumn.ts index d013ac96b8..031b9b6cf9 100644 --- a/packages/table/src/transforms/deleteColumn.ts +++ b/packages/table/src/transforms/deleteColumn.ts @@ -1,5 +1,4 @@ import { - createPathRef, getAboveNode, getPluginOptions, getPluginType, @@ -9,11 +8,9 @@ import { setNodes, someNode, TElement, - TNodeEntry, Value, withoutNormalizing, } from '@udecode/plate-common'; -import { PathRef } from 'slate'; import { ELEMENT_TABLE, @@ -22,9 +19,8 @@ import { ELEMENT_TR, } from '../createTablePlugin'; import { deleteTableMergeColumn } from '../merge/deleteColumn'; -import { getTableGridAbove } from '../queries'; -import { TablePlugin, TTableCellElement, TTableElement } from '../types'; -import { getCellRowIndexByPath } from '../utils/getCellRowIndexByPath'; +import { TablePlugin, TTableElement } from '../types'; +import { deleteColumnWhenExpanded } from './deleteColumnWhenExpanded'; export const deleteColumn = (editor: PlateEditor) => { const { enableMerging } = getPluginOptions( @@ -49,38 +45,8 @@ export const deleteColumn = (editor: PlateEditor) => { if (!tableEntry) return; - if (isExpanded(editor.selection)) { - const rowCount = tableEntry[0].children.length; - - const cells = getTableGridAbove(editor, { - format: 'cell', - }) as TNodeEntry[]; - - let lastCellRowIndex = -1; - let selectionRowCount = 0; - - const pathRefs: PathRef[] = []; - - cells.forEach(([cell, cellPath], index) => { - const currentCellRowIndex = getCellRowIndexByPath(cellPath); - - // not on the same line - if (currentCellRowIndex !== lastCellRowIndex) { - selectionRowCount += 1; - } - - pathRefs.push(createPathRef(editor, cellPath)); - lastCellRowIndex = currentCellRowIndex; - }); - - if (rowCount === selectionRowCount) { - pathRefs.forEach((pathRef) => { - removeNodes(editor, { at: pathRef.unref()! }); - }); - } - - return; - } + if (isExpanded(editor.selection)) + return deleteColumnWhenExpanded(editor, tableEntry); const tdEntry = getAboveNode(editor, { match: { diff --git a/packages/table/src/transforms/deleteColumnWhenExpanded.ts b/packages/table/src/transforms/deleteColumnWhenExpanded.ts new file mode 100644 index 0000000000..a4f0fe3bc2 --- /dev/null +++ b/packages/table/src/transforms/deleteColumnWhenExpanded.ts @@ -0,0 +1,46 @@ +import { + createPathRef, + PlateEditor, + removeNodes, + TNodeEntry, + Value, +} from '@udecode/plate-common'; +import { PathRef } from 'slate'; + +import { getTableGridAbove } from '../queries'; +import { TTableCellElement } from '../types'; +import { getCellRowIndexByPath } from '../utils/getCellRowIndexByPath'; + +export const deleteColumnWhenExpanded = ( + editor: PlateEditor, + tableEntry: TNodeEntry +) => { + const rowCount = tableEntry[0].children.length; + + const cells = getTableGridAbove(editor, { + format: 'cell', + }) as TNodeEntry[]; + + let lastCellRowIndex = -1; + let selectionRowCount = 0; + + const pathRefs: PathRef[] = []; + + cells.forEach(([cell, cellPath], index) => { + const currentCellRowIndex = getCellRowIndexByPath(cellPath); + + // not on the same line + if (currentCellRowIndex !== lastCellRowIndex) { + selectionRowCount += cell.rowSpan ?? 1; + } + + pathRefs.push(createPathRef(editor, cellPath)); + lastCellRowIndex = currentCellRowIndex; + }); + + if (rowCount === selectionRowCount) { + pathRefs.forEach((pathRef) => { + removeNodes(editor, { at: pathRef.unref()! }); + }); + } +}; diff --git a/packages/table/src/utils/getCellRowIndexByPath.ts b/packages/table/src/utils/getCellRowIndexByPath.ts index 8d63629b4a..acdf798db2 100644 --- a/packages/table/src/utils/getCellRowIndexByPath.ts +++ b/packages/table/src/utils/getCellRowIndexByPath.ts @@ -1,5 +1,5 @@ import { Path } from 'slate'; export const getCellRowIndexByPath = (cellPath: Path): number => { - return cellPath.slice(0, -1)[cellPath.length - 2]; + return cellPath.at(-2) ?? -1; }; From 86fd298881d25f09f03d2dac2689d9d4de7fd64e Mon Sep 17 00:00:00 2001 From: felixfeng Date: Sun, 31 Mar 2024 18:11:55 +0800 Subject: [PATCH 5/6] fix: table remove row --- .../src/{transforms => merge}/deleteColumnWhenExpanded.ts | 0 packages/table/src/transforms/deleteColumn.ts | 2 +- packages/table/src/transforms/deleteRow.ts | 7 +++++++ 3 files changed, 8 insertions(+), 1 deletion(-) rename packages/table/src/{transforms => merge}/deleteColumnWhenExpanded.ts (100%) diff --git a/packages/table/src/transforms/deleteColumnWhenExpanded.ts b/packages/table/src/merge/deleteColumnWhenExpanded.ts similarity index 100% rename from packages/table/src/transforms/deleteColumnWhenExpanded.ts rename to packages/table/src/merge/deleteColumnWhenExpanded.ts diff --git a/packages/table/src/transforms/deleteColumn.ts b/packages/table/src/transforms/deleteColumn.ts index 031b9b6cf9..26f1616b6c 100644 --- a/packages/table/src/transforms/deleteColumn.ts +++ b/packages/table/src/transforms/deleteColumn.ts @@ -19,8 +19,8 @@ import { ELEMENT_TR, } from '../createTablePlugin'; import { deleteTableMergeColumn } from '../merge/deleteColumn'; +import { deleteColumnWhenExpanded } from '../merge/deleteColumnWhenExpanded'; import { TablePlugin, TTableElement } from '../types'; -import { deleteColumnWhenExpanded } from './deleteColumnWhenExpanded'; export const deleteColumn = (editor: PlateEditor) => { const { enableMerging } = getPluginOptions( diff --git a/packages/table/src/transforms/deleteRow.ts b/packages/table/src/transforms/deleteRow.ts index 6bc239bf24..f9b200e4a7 100644 --- a/packages/table/src/transforms/deleteRow.ts +++ b/packages/table/src/transforms/deleteRow.ts @@ -2,6 +2,7 @@ import { getAboveNode, getPluginOptions, getPluginType, + isExpanded, PlateEditor, removeNodes, someNode, @@ -10,6 +11,7 @@ import { import { ELEMENT_TABLE, ELEMENT_TR } from '../createTablePlugin'; import { deleteTableMergeRow } from '../merge/deleteRow'; +import { deleteRowWhenExpanded } from '../merge/deleteRowWhenExpanded'; import { TablePlugin, TTableElement } from '../types'; export const deleteRow = (editor: PlateEditor) => { @@ -29,6 +31,11 @@ export const deleteRow = (editor: PlateEditor) => { const currentTableItem = getAboveNode(editor, { match: { type: getPluginType(editor, ELEMENT_TABLE) }, }); + if (!currentTableItem) return; + + if (isExpanded(editor.selection)) + return deleteRowWhenExpanded(editor, currentTableItem); + const currentRowItem = getAboveNode(editor, { match: { type: getPluginType(editor, ELEMENT_TR) }, }); From 4c9c86d56dd55ae3e715f05caf6d3f3659b6afd3 Mon Sep 17 00:00:00 2001 From: felixfeng Date: Sun, 31 Mar 2024 18:14:34 +0800 Subject: [PATCH 6/6] fix --- packages/table/src/merge/deleteColumn.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/table/src/merge/deleteColumn.ts b/packages/table/src/merge/deleteColumn.ts index 2aeb1a148e..827156b48a 100644 --- a/packages/table/src/merge/deleteColumn.ts +++ b/packages/table/src/merge/deleteColumn.ts @@ -14,9 +14,9 @@ import { Path } from 'slate'; import { ELEMENT_TABLE, ELEMENT_TR } from '../createTablePlugin'; import { getColSpan } from '../queries/getColSpan'; -import { deleteColumnWhenExpanded } from '../transforms/deleteColumnWhenExpanded'; import { TablePlugin, TTableCellElement, TTableElement } from '../types'; import { getCellTypes } from '../utils'; +import { deleteColumnWhenExpanded } from './deleteColumnWhenExpanded'; import { findCellByIndexes } from './findCellByIndexes'; import { getCellIndices } from './getCellIndices'; import { getCellPath } from './getCellPath';