Skip to content

Commit

Permalink
[TablePlugin] update remaining tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@dimaanj
dimaanj committed Sep 22, 2023
1 parent b07eae0 commit 9ef9bd7
Show file tree
Hide file tree
Showing 8 changed files with 262 additions and 54 deletions.
25 changes: 25 additions & 0 deletions apps/www/src/registry/default/plate-ui/table-dropdown-menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
deleteRow,
deleteTable,
ELEMENT_TABLE,
getTableEntries,
insertTable,
insertTableColumn,
insertTableRow,
Expand All @@ -32,6 +33,8 @@ export function TableDropdownMenu(props: DropdownMenuProps) {
match: { type: ELEMENT_TABLE },
});

const { cell, row } = getTableEntries(editor) || {};

const openState = useOpenState();

return (
Expand Down Expand Up @@ -82,6 +85,17 @@ export function TableDropdownMenu(props: DropdownMenuProps) {
<span>Column</span>
</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuItem
className="min-w-[180px]"
disabled={!tableSelected}
onSelect={async () => {
insertTableColumn(editor, { at: cell![1] });
focusEditor(editor);
}}
>
<Icons.add className={iconVariants({ variant: 'menuItem' })} />
Insert column before
</DropdownMenuItem>
<DropdownMenuItem
className="min-w-[180px]"
disabled={!tableSelected}
Expand Down Expand Up @@ -113,6 +127,17 @@ export function TableDropdownMenu(props: DropdownMenuProps) {
<span>Row</span>
</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuItem
className="min-w-[180px]"
disabled={!tableSelected}
onSelect={async () => {
insertTableRow(editor, { at: row![1] });
focusEditor(editor);
}}
>
<Icons.add className={iconVariants({ variant: 'menuItem' })} />
Insert row before
</DropdownMenuItem>
<DropdownMenuItem
className="min-w-[180px]"
disabled={!tableSelected}
Expand Down
52 changes: 30 additions & 22 deletions packages/table/src/transforms/deleteColumn.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,18 @@ describe('deleteColumn', () => {
<editor>
<htable>
<htr>
<htd>
<htd rowIndex={0} colIndex={0} rowSpan={1} colSpan={1}>
<hp>11</hp>
</htd>
<htd>
<htd rowIndex={0} colIndex={1} rowSpan={1} colSpan={1}>
<hp>12</hp>
</htd>
</htr>
<htr>
<htd>
<htd rowIndex={1} colIndex={0} rowSpan={1} colSpan={1}>
<hp>21</hp>
</htd>
<htd>
<htd rowIndex={1} colIndex={1} rowSpan={1} colSpan={1}>
<hp>
22
<cursor />
Expand All @@ -41,12 +41,12 @@ describe('deleteColumn', () => {
<editor>
<htable>
<htr>
<htd>
<htd rowIndex={0} colIndex={0} rowSpan={1} colSpan={1}>
<hp>11</hp>
</htd>
</htr>
<htr>
<htd>
<htd rowIndex={1} colIndex={0} rowSpan={1} colSpan={1}>
<hp>21</hp>
</htd>
</htr>
Expand All @@ -71,18 +71,18 @@ describe('deleteColumn', () => {
<editor>
<htable>
<htr>
<htd>
<htd rowIndex={0} colIndex={0} rowSpan={1} colSpan={1}>
<hp>11</hp>
</htd>
<htd>
<htd rowIndex={0} colIndex={1} rowSpan={1} colSpan={1}>
<hp>
12
<cursor />
</hp>
</htd>
</htr>
<htr>
<htd>
<htd rowIndex={1} colIndex={0} rowSpan={1} colSpan={2}>
<hp>21</hp>
</htd>
</htr>
Expand All @@ -94,12 +94,12 @@ describe('deleteColumn', () => {
<editor>
<htable>
<htr>
<htd>
<htd rowIndex={0} colIndex={0} rowSpan={1} colSpan={1}>
<hp>11</hp>
</htd>
</htr>
<htr>
<htd>
<htd rowIndex={1} colIndex={0} rowSpan={1} colSpan={1}>
<hp>21</hp>
</htd>
</htr>
Expand All @@ -124,18 +124,18 @@ describe('deleteColumn', () => {
<editor>
<htable>
<htr>
<htd>
<htd rowIndex={0} colIndex={0} rowSpan={1} colSpan={1}>
<hp>
11
<cursor />
</hp>
</htd>
<htd>
<htd rowIndex={0} colIndex={1} rowSpan={1} colSpan={1}>
<hp>12</hp>
</htd>
</htr>
<htr>
<htd>
<htd rowIndex={1} colIndex={0} rowSpan={1} colSpan={2}>
<hp>21</hp>
</htd>
</htr>
Expand All @@ -147,12 +147,12 @@ describe('deleteColumn', () => {
<editor>
<htable>
<htr>
<htd>
<htd rowIndex={0} colIndex={1} rowSpan={1} colSpan={1}>
<hp>12</hp>
</htd>
</htr>
<htr>
<htd>
<htd rowIndex={1} colIndex={0} rowSpan={1} colSpan={2}>
<hp>21</hp>
</htd>
</htr>
Expand All @@ -165,7 +165,15 @@ describe('deleteColumn', () => {
plugins: [createTablePlugin()],
});

console.log(
'before delete',
JSON.stringify(editor.children, undefined, 4)
);
deleteColumn(editor);
console.log(
'after delete',
JSON.stringify(editor.children, undefined, 4)
);

expect(editor.children).toEqual(output.children);
});
Expand All @@ -177,15 +185,15 @@ describe('deleteColumn', () => {
<editor>
<htable>
<htr>
<htd>
<htd rowIndex={0} colIndex={0} rowSpan={1} colSpan={1}>
<hp>11</hp>
</htd>
<htd>
<htd rowIndex={1} colIndex={0} rowSpan={1} colSpan={1}>
<hp>12</hp>
</htd>
</htr>
<htr>
<htd>
<htd rowIndex={1} colIndex={0} rowSpan={1} colSpan={2}>
<hp>
21
<cursor />
Expand All @@ -200,15 +208,15 @@ describe('deleteColumn', () => {
<editor>
<htable>
<htr>
<htd>
<htd rowIndex={0} colIndex={0} rowSpan={1} colSpan={1}>
<hp>11</hp>
</htd>
<htd>
<htd rowIndex={1} colIndex={0} rowSpan={1} colSpan={1}>
<hp>12</hp>
</htd>
</htr>
<htr>
<htd>
<htd rowIndex={1} colIndex={0} rowSpan={1} colSpan={2}>
<hp>
21
<cursor />
Expand Down
18 changes: 12 additions & 6 deletions packages/table/src/transforms/deleteColumn.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import {
findNodePath,
getAboveNode,
getPluginType,
insertElements,
Expand All @@ -16,6 +15,7 @@ import { ELEMENT_TABLE, ELEMENT_TR } from '../createTablePlugin';
import { getTableColumnCount } from '../queries';
import { TTableCellElement, TTableElement, TTableRowElement } from '../types';
import { findCellByIndexes, getCellTypes } from '../utils';
import { getCellPath } from '../utils/getCellPath';

export const deleteColumn = <V extends Value>(editor: PlateEditor<V>) => {
if (
Expand Down Expand Up @@ -49,7 +49,9 @@ export const deleteColumn = <V extends Value>(editor: PlateEditor<V>) => {
(cI) => {
const colIndex = deletingColIndex + cI;
const found = findCellByIndexes(table, rI, colIndex);
affectedCellsSet.add(found);
if (found) {
affectedCellsSet.add(found);
}
}
);
});
Expand Down Expand Up @@ -88,14 +90,17 @@ export const deleteColumn = <V extends Value>(editor: PlateEditor<V>) => {
const curColIndex = curCell.colIndex!;
const curColSpan = curCell.colSpan!;

// simplify logic here. use getParent
const curRow = table.children[curRowIndex] as TTableRowElement;
const startingCellIndex = curRow.children.findIndex((curC) => {
const cell = curC as TTableCellElement;
return cell.colIndex! >= curColIndex + 1;
});

const startingCell = curRow.children[startingCellIndex];
const startingCellPath = findNodePath(editor, startingCell);
const startingCell = curRow.children.at(
startingCellIndex
) as TTableCellElement;
const startingCellPath = getCellPath(tableEntry, startingCell);
const colsNumberAffected = endingColIndex - curColIndex + 1;

const newCell = {
Expand All @@ -110,7 +115,8 @@ export const deleteColumn = <V extends Value>(editor: PlateEditor<V>) => {
const curCell = cur as TTableCellElement;
const curColIndex = curCell.colIndex!;
const curColSpan = curCell.colSpan!;
const curCellPath = findNodePath(editor, curCell)!;

const curCellPath = getCellPath(tableEntry, curCell);

const curCellEndingColIndex = Math.min(
curColIndex + curColSpan - 1,
Expand Down Expand Up @@ -146,7 +152,7 @@ export const deleteColumn = <V extends Value>(editor: PlateEditor<V>) => {
const curRowIndex = curCell.rowIndex!;

if (curColIndex >= deletingColIndex && curColIndex <= endingColIndex) {
const cellPath = findNodePath(editor, curCell)!;
const cellPath = getCellPath(tableEntry, curCell);

if (!paths[curRowIndex]) {
paths[curRowIndex] = [];
Expand Down
7 changes: 6 additions & 1 deletion packages/table/src/transforms/insertTableColumn.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,12 @@ const makeTableWithCols = ({
{rowCols.map((row, rowIndex) => (
<htr>
{row.map((col, colIndex) => (
<htd>
<htd
rowIndex={rowIndex}
colIndex={colIndex}
rowSpan={1}
colSpan={1}
>
<hp>
{col === '' ? <htext /> : col}
{cursorPath &&
Expand Down
39 changes: 21 additions & 18 deletions packages/table/src/transforms/insertTableColumn.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ import { getCellPath } from '../utils/getCellPath';
const createEmptyCell = <V extends Value>(
editor: PlateEditor<V>,
row: TTableRowElement,
rowSpan: number,
newCellChildren?: TDescendant[],
header?: boolean
) => {
Expand All @@ -39,13 +38,10 @@ const createEmptyCell = <V extends Value>(
)
: header;

return {
...getEmptyCellNode(editor, {
header: isHeaderRow,
newCellChildren,
}),
rowSpan,
};
return getEmptyCellNode(editor, {
header: isHeaderRow,
newCellChildren,
});
};

export const insertTableColumn = <V extends Value>(
Expand Down Expand Up @@ -157,20 +153,26 @@ export const insertTableColumn = <V extends Value>(

const row = getParentNode(editor, currentCellPath)!;
const rowElement = row[0] as TTableRowElement;
const emptyCell = createEmptyCell(
editor,
rowElement,
curRowSpan,
newCellChildren,
header
);
const emptyCell = {
...createEmptyCell(editor, rowElement, newCellChildren, header),
colIndex: nextColIndex,
rowIndex: curRowIndex,
rowSpan: curRowSpan,
colSpan: 1,
};
insertElements(editor, emptyCell, {
at: placementPath,
select: !disableSelect && curCell.rowIndex === currentRowIndex,
});
}

updateRestCellsInRow(editor, currentCellPath, curRowIndex, curColIndex);
const startingColIndex = firstCol ? curColIndex : curColIndex + 1;
updateRestCellsInRow(
editor,
currentCellPath,
curRowIndex,
startingColIndex
);
});

withoutNormalizing(editor, () => {
Expand Down Expand Up @@ -229,10 +231,11 @@ const updateRestCellsInRow = <V extends Value>(
if (!freshRowEntry) return;
const [freshRow] = freshRowEntry;

const startingColPath = currentCellPath.at(-1)!;
// const startingColPath = currentCellPath.at(-1)!;
const startingColIndex = curColIndex;
let assignColIndex = curColIndex;
freshRow.children.forEach((c, cP) => {
if (cP > startingColPath) {
if (cP > startingColIndex) {
const cE = c as TTableCellElement;
// colIndex might be undefined for just inserted cell
const cI = cE.colIndex || assignColIndex;
Expand Down
Loading

0 comments on commit 9ef9bd7

Please sign in to comment.