Skip to content

Commit

Permalink
plugin-table: Add at option for inserts (#2006)
Browse files Browse the repository at this point in the history 
* Add `at` option to insertTableColumn

* Add `at` option to insertTableRow

* Create cuddly-cups-cover.md

Co-authored-by: Ziad Beyens <[email protected]>
  • Loading branch information
@Raigen @zbeyens
Raigen and zbeyens authored Nov 21, 2022
1 parent eb6c51e commit 9509d36
Show file tree
Hide file tree
Showing 5 changed files with 200 additions and 7 deletions.
5 changes: 5 additions & 0 deletions .changeset/cuddly-cups-cover.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@udecode/plate-table": patch
---

`insertTableColumn`, `insertTableRow`: new option `at`
77 changes: 77 additions & 0 deletions packages/nodes/table/src/transforms/insertTableColumn.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,4 +158,81 @@ describe('insertTableColumn', () => {
expect(editor.selection).toEqual(output.selection);
});
});

describe('when using at', () => {
it('should insert', () => {
const input = ((
<editor>
<htable>
<htr>
<htd>
<hp>11</hp>
</htd>
<htd>
<hp>12</hp>
</htd>
</htr>
<htr>
<htd>
<hp>
21
<cursor />
</hp>
</htd>
<htd>
<hp>22</hp>
</htd>
</htr>
</htable>
</editor>
) as any) as PlateEditor;

const output = ((
<editor>
<htable>
<htr>
<htd>
<hp>
<htext />
</hp>
</htd>
<htd>
<hp>11</hp>
</htd>
<htd>
<hp>12</hp>
</htd>
</htr>
<htr>
<htd>
<hp>
<cursor />
</hp>
</htd>
<htd>
<hp>21</hp>
</htd>
<htd>
<hp>22</hp>
</htd>
</htr>
</htable>
</editor>
) as any) as PlateEditor;

const editor = createPlateEditor({
editor: input,
plugins: [
createTablePlugin({
options: { newCellChildren: [{ text: '' }] },
}),
],
});

insertTableColumn(editor, { at: [0, 0, 0] });

expect(editor.children).toEqual(output.children);
expect(editor.selection).toEqual(output.selection);
});
});
});
25 changes: 22 additions & 3 deletions packages/nodes/table/src/transforms/insertTableColumn.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export const insertTableColumn = <V extends Value>(
{
disableSelect,
fromCell,
at,
header,
}: {
header?: boolean;
Expand All @@ -30,6 +31,12 @@ export const insertTableColumn = <V extends Value>(
*/
fromCell?: Path;

/**
* Exact path of the cell to insert the column at.
* Will overrule `fromCell`.
*/
at?: Path;

/**
* Disable selection after insertion.
*/
Expand All @@ -56,8 +63,16 @@ export const insertTableColumn = <V extends Value>(

const [tableNode, tablePath] = tableEntry;

const nextCellPath = Path.next(cellPath);
const nextColIndex = cellPath[cellPath.length - 1] + 1;
let nextCellPath: Path;
let nextColIndex: number;

if (Path.isPath(at)) {
nextCellPath = at;
nextColIndex = at[at.length - 1];
} else {
nextCellPath = Path.next(cellPath);
nextColIndex = cellPath[cellPath.length - 1] + 1;
}
const currentRowIndex = cellPath[cellPath.length - 2];

const { newCellChildren } = getPluginOptions<TablePlugin, V>(
Expand All @@ -69,7 +84,11 @@ export const insertTableColumn = <V extends Value>(
// for each row, insert a new cell
tableNode.children.forEach((row, rowIndex) => {
const insertCellPath = [...nextCellPath];
insertCellPath[cellPath.length - 2] = rowIndex;
if (Path.isPath(at)) {
insertCellPath[at.length - 2] = rowIndex;
} else {
insertCellPath[cellPath.length - 2] = rowIndex;
}

const isHeaderRow =
header === undefined
Expand Down
79 changes: 79 additions & 0 deletions packages/nodes/table/src/transforms/insertTableRow.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,4 +86,83 @@ describe('insertTableRow', () => {
expect(editor.selection).toEqual(output.selection);
});
});

describe('when inserting a table row at specific path', () => {
it('should insert a tr with empty cells', () => {
const input = ((
<editor>
<htable>
<htr>
<htd>
<hp>11</hp>
</htd>
<htd>
<hp>12</hp>
</htd>
</htr>
<htr>
<htd>
<hp>
21
<cursor />
</hp>
</htd>
<htd>
<hp>22</hp>
</htd>
</htr>
</htable>
</editor>
) as any) as PlateEditor;

const output = ((
<editor>
<htable>
<htr>
<htd>
<hp>
<cursor />
</hp>
</htd>
<htd>
<hp>
<htext />
</hp>
</htd>
</htr>
<htr>
<htd>
<hp>11</hp>
</htd>
<htd>
<hp>12</hp>
</htd>
</htr>
<htr>
<htd>
<hp>21</hp>
</htd>
<htd>
<hp>22</hp>
</htd>
</htr>
</htable>
</editor>
) as any) as PlateEditor;

const editor = createPlateEditor({
editor: input,
plugins: [
createTablePlugin({
options: { newCellChildren: [{ text: '' }] },
}),
],
});

insertTableRow(editor, { at: [0, 0] });

expect(editor.children).toEqual(output.children);
expect(editor.selection).toEqual(output.selection);
});
});
});
21 changes: 17 additions & 4 deletions packages/nodes/table/src/transforms/insertTableRow.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,18 @@ export const insertTableRow = <V extends Value>(
{
header,
fromRow,
at,
disableSelect,
}: { header?: boolean; fromRow?: Path; disableSelect?: boolean } = {}
}: {
header?: boolean;
fromRow?: Path;
/**
* Exact path of the row to insert the column at.
* Will overrule `fromRow`.
*/
at?: Path;
disableSelect?: boolean;
} = {}
) => {
const trEntry = fromRow
? findNode(editor, {
Expand Down Expand Up @@ -55,7 +65,7 @@ export const insertTableRow = <V extends Value>(
newCellChildren,
}),
{
at: Path.next(trPath),
at: Path.isPath(at) ? at : Path.next(trPath),
}
);
});
Expand All @@ -67,8 +77,11 @@ export const insertTableRow = <V extends Value>(
if (!cellEntry) return;

const [, nextCellPath] = cellEntry;

nextCellPath[nextCellPath.length - 2] += 1;
if (Path.isPath(at)) {
nextCellPath[nextCellPath.length - 2] = at[at.length - 2];
} else {
nextCellPath[nextCellPath.length - 2] += 1;
}

select(editor, nextCellPath);
}
Expand Down

2 comments on commit 9509d36

@vercel
Copy link

@vercel vercel bot commented on 9509d36 Nov 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

plate-examples – ./

plate-examples-git-main-udecode.vercel.app
plate-examples-udecode.vercel.app
plate-examples.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 9509d36 Nov 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

plate – ./

www.plate.udecode.io
plate-udecode.vercel.app
plate.udecode.io
plate-git-main-udecode.vercel.app

Please sign in to comment.