diff --git a/apps/www/src/lib/plate/demo/values/tableValue.tsx b/apps/www/src/lib/plate/demo/values/tableValue.tsx index 09c5493cf3..ecf8252c97 100644 --- a/apps/www/src/lib/plate/demo/values/tableValue.tsx +++ b/apps/www/src/lib/plate/demo/values/tableValue.tsx @@ -105,113 +105,6 @@ export const createSpanningTable = (): any => ( ); -export const createMergedCellsTable = (): any => ( - - - - - - Heading - - - - - Cell 1 - - - - - Cell 11 - - - - - Cell 2 - - - - - - Cell 3 - - {/* - Cell 77 - */} - - Cell 7 - - - - - - Cell 4 - - - {/* - Cell 5 - */} - - Cell 8 - - - - -); - -export const createAutoLayoutTable = (): any => ( - - - - - - Heading - - - - - Cell 1 - - - - - Cell 11 - - - - - Cell 2 - - - - - - Cell 3 - - {/* - Cell 77 - */} - - Cell 7 - - - - - - Cell 4 - - - {/* - Cell 5 - */} - - Cell 8 - - - - -); - - export const tableValue: any = ( 🏓 Table @@ -219,13 +112,10 @@ export const tableValue: any = ( Create customizable tables with resizable columns and rows, allowing you to design structured layouts. - {createMergedCellsTable()} - {/* {createSpanningTable()} - {createAutoLayoutTable()} */} - {/* {createTable()} */} - {/* + {createTable()} + This table is an example of rendering a table spanning multiple columns: - {createSpanningTable()} */} + {createSpanningTable()} -); +); \ No newline at end of file diff --git a/packages/table/src/components/TableElement/useSelectedCells.ts b/packages/table/src/components/TableElement/useSelectedCells.ts index 0fa222c7c4..b7f426c710 100644 --- a/packages/table/src/components/TableElement/useSelectedCells.ts +++ b/packages/table/src/components/TableElement/useSelectedCells.ts @@ -28,9 +28,8 @@ export const useSelectedCells = () => { useEffect(() => { if (readOnly) return; - const { tableEntries, cellEntries } = getTableGridAbove(editor, { - format: 'all', - }); + const tableEntries = getTableGridAbove(editor, { format: 'table' }); + const cellEntries = getTableGridAbove(editor, { format: 'cell' }); if (cellEntries?.length > 1) { const cells = cellEntries.map((entry) => entry[0]); const tables = tableEntries.map((entry) => entry[0]); diff --git a/packages/table/src/createTablePlugin.ts b/packages/table/src/createTablePlugin.ts index 0c9b45c77a..9a271dd31b 100644 --- a/packages/table/src/createTablePlugin.ts +++ b/packages/table/src/createTablePlugin.ts @@ -36,7 +36,7 @@ export const createTablePlugin = createPluginFactory({ }); }, minColumnWidth: 48, - disableCellsMerging: false, + disableCellsMerging: true, _cellIndices: new WeakMap() as TableStoreCellAttributes, }, withOverrides: withTable, diff --git a/packages/table/src/merge/deleteRow.ts b/packages/table/src/merge/deleteRow.ts index 9abd57d2fa..24027f9d8b 100644 --- a/packages/table/src/merge/deleteRow.ts +++ b/packages/table/src/merge/deleteRow.ts @@ -24,7 +24,7 @@ import { getCellTypes } from '../utils'; import { findCellByIndexes } from './findCellByIndexes'; import { getCellIndices } from './getCellIndices'; -export const deleteTableRowMerging = ( +export const deleteTableMergeRow = ( editor: PlateEditor ) => { if ( diff --git a/packages/table/src/merge/getCellIndices.ts b/packages/table/src/merge/getCellIndices.ts index 92de49f4dd..7a1a9aa3f5 100644 --- a/packages/table/src/merge/getCellIndices.ts +++ b/packages/table/src/merge/getCellIndices.ts @@ -6,5 +6,6 @@ export const getCellIndices = ( options: TablePlugin, startCell: TTableCellElement ) => { - return options._cellIndices.get(startCell); + // optional typing needs for tests + return options._cellIndices?.get(startCell); }; diff --git a/packages/table/src/merge/insertTableColumn.ts b/packages/table/src/merge/insertTableColumn.ts index 07acf5484c..edf99f08e8 100644 --- a/packages/table/src/merge/insertTableColumn.ts +++ b/packages/table/src/merge/insertTableColumn.ts @@ -27,7 +27,7 @@ import { findCellByIndexes } from './findCellByIndexes'; import { getCellIndices } from './getCellIndices'; import { getCellPath } from './getCellPath'; -export const insertTableColumnMerging = ( +export const insertTableMergeColumn = ( editor: PlateEditor, { disableSelect, @@ -153,7 +153,7 @@ export const insertTableColumnMerging = ( }; insertElements(editor, emptyCell, { at: placementPath, - select: !disableSelect && curRowIndex === currentRowIndex, + // select: !disableSelect && curRowIndex === currentRowIndex, }); } }); diff --git a/packages/table/src/merge/insertTableRow.ts b/packages/table/src/merge/insertTableRow.ts index 593c912e0d..cf1d7a7d9f 100644 --- a/packages/table/src/merge/insertTableRow.ts +++ b/packages/table/src/merge/insertTableRow.ts @@ -29,7 +29,7 @@ import { findCellByIndexes } from './findCellByIndexes'; import { getCellIndices } from './getCellIndices'; import { getCellPath } from './getCellPath'; -export const insertTableRowMerging = ( +export const insertTableMergeRow = ( editor: PlateEditor, { header, @@ -168,18 +168,8 @@ export const insertTableRowMerging = ( }, { at: nextRowPath, + // select: !disableSelect } ); }); - - if (!disableSelect) { - const nextCellPath = cellPath; - if (Path.isPath(at)) { - nextCellPath[nextCellPath.length - 2] = at.at(-2)!; - } else { - nextCellPath[nextCellPath.length - 2] += cellRowSpan; - } - - select(editor, nextCellPath); - } }; diff --git a/packages/table/src/queries/getTableGridAbove.ts b/packages/table/src/queries/getTableGridAbove.ts index e1ff3450df..fe677ef16c 100644 --- a/packages/table/src/queries/getTableGridAbove.ts +++ b/packages/table/src/queries/getTableGridAbove.ts @@ -11,41 +11,32 @@ import { Path } from 'slate'; import { getCellTypes } from '../utils/getCellType'; import { getEmptyTableNode } from '../utils/getEmptyTableNode'; import { - FormatType, getTableGridByRange, GetTableGridByRangeOptions, - GetTableGridReturnType, } from './getTableGridByRange'; -export type GetTableGridAboveOptions< - T extends FormatType, - V extends Value = Value, -> = GetAboveNodeOptions & Pick, 'format'>; +export type GetTableGridAboveOptions = + GetAboveNodeOptions & Pick; /** * Get sub table above anchor and focus. * Format: tables or cells. */ -export const getTableGridAbove = < - T extends FormatType, - V extends Value = Value, ->( +export const getTableGridAbove = ( editor: PlateEditor, - { format, ...options }: GetTableGridAboveOptions -): GetTableGridReturnType => { - const formatType = (format as string) || 'table'; + { format = 'table', ...options }: GetTableGridAboveOptions = {} +): TElementEntry[] => { const edges = getEdgeBlocksAbove(editor, { match: { type: getCellTypes(editor), }, ...options, }); - if (edges) { const [start, end] = edges; if (!Path.equals(start[1], end[1])) { - const entryResult = getTableGridByRange(editor, { + return getTableGridByRange(editor, { at: { anchor: { path: start[1], @@ -58,24 +49,16 @@ export const getTableGridAbove = < }, format, }); - - return entryResult; } - const table = getEmptyTableNode(editor, { rowCount: 1 }); - table.children[0].children = [start[0]]; - if (formatType === 'table') { - return [[table, start[1].slice(0, -2)]] as GetTableGridReturnType; + if (format === 'table') { + const table = getEmptyTableNode(editor, { rowCount: 1 }); + table.children[0].children = [start[0]]; + return [[table, start[1].slice(0, -2)]]; } - if (formatType === 'cell') { - return [start] as GetTableGridReturnType; - } - - return { - tableEntries: [[table, start[1].slice(0, -2)]], - cellEntries: [start], - } as GetTableGridReturnType; + return [start]; } - return [] as TElementEntry[] as GetTableGridReturnType; -}; \ No newline at end of file + + return []; +}; diff --git a/packages/table/src/queries/getTableGridByRange.ts b/packages/table/src/queries/getTableGridByRange.ts index 8e90eb157a..2d1b3115d6 100644 --- a/packages/table/src/queries/getTableGridByRange.ts +++ b/packages/table/src/queries/getTableGridByRange.ts @@ -13,18 +13,7 @@ import { getTableMergeGridByRange } from '../merge/getTableGridByRange'; import { TablePlugin, TTableElement } from '../types'; import { getEmptyTableNode } from '../utils/getEmptyTableNode'; -export type FormatType = 'table' | 'cell' | 'all'; - -export interface TableGridEntries { - tableEntries: TElementEntry[]; - cellEntries: TElementEntry[]; -} - -export type GetTableGridReturnType = T extends 'all' - ? TableGridEntries - : TElementEntry[]; - -export interface GetTableGridByRangeOptions { +export interface GetTableGridByRangeOptions { at: Range; /** @@ -32,21 +21,18 @@ export interface GetTableGridByRangeOptions { * - table element * - array of cells */ - format?: T; + format?: 'table' | 'cell'; } /** * Get sub table between 2 cell paths. */ -export const getTableGridByRange = ( +export const getTableGridByRange = ( editor: PlateEditor, - { at, format }: GetTableGridByRangeOptions -): GetTableGridReturnType => { - const { disableCellsMerging } = getPluginOptions( - editor, - ELEMENT_TABLE - ); - if (!disableCellsMerging) { + { at, format = 'table' }: GetTableGridByRangeOptions +): TElementEntry[] => { + const options = getPluginOptions(editor, ELEMENT_TABLE); + if (!options.disableCellsMerging) { return getTableMergeGridByRange(editor, { at, format }); } @@ -103,15 +89,8 @@ export const getTableGridByRange = ( } if (format === 'cell') { - return cellEntries as GetTableGridReturnType; - } - - if (format === 'table') { - return [[table, tablePath]] as GetTableGridReturnType; + return cellEntries; } - return { - tableEntries: [[table, tablePath]], - cellEntries, - } as GetTableGridReturnType; + return [[table, tablePath]]; }; diff --git a/packages/table/src/transforms/deleteRow.ts b/packages/table/src/transforms/deleteRow.ts index a37032be30..eaba0c8376 100644 --- a/packages/table/src/transforms/deleteRow.ts +++ b/packages/table/src/transforms/deleteRow.ts @@ -9,7 +9,7 @@ import { } from '@udecode/plate-common'; import { ELEMENT_TABLE, ELEMENT_TR } from '../createTablePlugin'; -import { deleteTableRowMerging } from '../merge/deleteRow'; +import { deleteTableMergeRow } from '../merge/deleteRow'; import { TablePlugin, TTableElement } from '../types'; export const deleteRow = (editor: PlateEditor) => { @@ -18,7 +18,7 @@ export const deleteRow = (editor: PlateEditor) => { ELEMENT_TABLE ); if (!disableCellsMerging) { - return deleteTableRowMerging(editor); + return deleteTableMergeRow(editor); } if ( diff --git a/packages/table/src/transforms/insertTableColumn.ts b/packages/table/src/transforms/insertTableColumn.ts index 2938e089ad..da0c0c8544 100644 --- a/packages/table/src/transforms/insertTableColumn.ts +++ b/packages/table/src/transforms/insertTableColumn.ts @@ -13,7 +13,7 @@ import { import { Path } from 'slate'; import { ELEMENT_TABLE, ELEMENT_TH } from '../createTablePlugin'; -import { insertTableColumnMerging } from '../merge/insertTableColumn'; +import { insertTableMergeColumn } from '../merge/insertTableColumn'; import { TablePlugin, TTableElement } from '../types'; import { getEmptyCellNode } from '../utils/getEmptyCellNode'; import { getCellTypes } from '../utils/index'; @@ -45,7 +45,7 @@ export const insertTableColumn = ( ELEMENT_TABLE ); if (!disableCellsMerging) { - return insertTableColumnMerging(editor, options); + return insertTableMergeColumn(editor, options); } const { disableSelect, fromCell, at, header } = options; diff --git a/packages/table/src/transforms/insertTableRow.ts b/packages/table/src/transforms/insertTableRow.ts index a4519d431e..78c91dd1dd 100644 --- a/packages/table/src/transforms/insertTableRow.ts +++ b/packages/table/src/transforms/insertTableRow.ts @@ -13,7 +13,7 @@ import { import { Path } from 'slate'; import { ELEMENT_TABLE, ELEMENT_TH, ELEMENT_TR } from '../createTablePlugin'; -import { insertTableRowMerging } from '../merge/insertTableRow'; +import { insertTableMergeRow } from '../merge/insertTableRow'; import { TablePlugin } from '../types'; import { getCellTypes, getEmptyCellNode } from '../utils/index'; @@ -35,7 +35,7 @@ export const insertTableRow = ( ELEMENT_TABLE ); if (!disableCellsMerging) { - return insertTableRowMerging(editor, options); + return insertTableMergeRow(editor, options); } const { header, fromRow, at, disableSelect } = options; diff --git a/packages/table/src/withDeleteTable.spec.tsx b/packages/table/src/withDeleteTable.spec.tsx index f40e3b6322..98ef7814d4 100644 --- a/packages/table/src/withDeleteTable.spec.tsx +++ b/packages/table/src/withDeleteTable.spec.tsx @@ -3,6 +3,7 @@ import { createPlateEditor, PlateEditor } from '@udecode/plate-common'; import { jsx } from '@udecode/plate-test-utils'; +import { createTablePlugin } from './createTablePlugin'; import { withDeleteTable } from './withDeleteTable'; jsx; @@ -50,6 +51,7 @@ describe('withDeleteTable', () => { let editor = createPlateEditor({ editor: input, + plugins: [createTablePlugin()], }); editor = withDeleteTable(editor); @@ -104,6 +106,7 @@ describe('withDeleteTable', () => { let editor = createPlateEditor({ editor: input, + plugins: [createTablePlugin()], }); editor = withDeleteTable(editor); @@ -178,6 +181,7 @@ describe('withDeleteTable', () => { editor = createPlateEditor({ editor: input, + plugins: [createTablePlugin()], }); editor = withDeleteTable(editor); diff --git a/packages/table/src/withGetFragmentTable.ts b/packages/table/src/withGetFragmentTable.ts index 99b742d5ff..eba871bdd2 100644 --- a/packages/table/src/withGetFragmentTable.ts +++ b/packages/table/src/withGetFragmentTable.ts @@ -39,7 +39,7 @@ export const withGetFragmentTable = < newFragment.push(...(rows[0].children[0].children as TElement[])); return; } else { - const subTable = getTableGridAbove(editor, { format: 'table' }); + const subTable = getTableGridAbove(editor); if (subTable.length > 0) { newFragment.push(subTable[0][0]); return; diff --git a/packages/table/src/withTable.ts b/packages/table/src/withTable.ts index ecf76ef4ab..71392dde4e 100644 --- a/packages/table/src/withTable.ts +++ b/packages/table/src/withTable.ts @@ -5,7 +5,6 @@ import { withDeleteTable } from './withDeleteTable'; import { withGetFragmentTable } from './withGetFragmentTable'; import { withInsertFragmentTable } from './withInsertFragmentTable'; import { withInsertTextTable } from './withInsertTextTable'; -import { withMergedCells } from './withMergedCells'; import { withNormalizeTable } from './withNormalizeTable'; import { withSelectionTable } from './withSelectionTable'; import { withSetFragmentDataTable } from './withSetFragmentDataTable';