Hello!
I’m trying to achieve a table with more stricter schema, ie to have a specific types of nodes in column’s cell.
Approach that I have taken was to extend the schema of existing tableNodes
to add different kinds of cells and content
to tableRow
. This seems to be working fine but I have issues with copy pasting.
const tableNodesCreated = tableNodes({
cellContent: "block*",
tableGroup: "block",
cellAttributes: {},
});
const textCellNode: NodeSpec = {
...tableNodesCreated.table_cell,
toDOM: (node) => {
return ["td", setCellAttrs(node, { "data-type": "text-cell" }), 0];
},
parseDOM: [
{
tag: "td[data-type='text-cell']",
getAttrs: (dom) => getCellAttrs(dom, { "data-type": "date-cell" }),
},
],
};
const dateCellNode: NodeSpec = {
...tableNodesCreated.table_cell,
toDOM: (node) => {
return ["td", setCellAttrs(node, { "data-type": "date-cell" }), 0];
},
parseDOM: [
{
tag: "td[data-type='date-cell']",
getAttrs: (dom) => getCellAttrs(dom, {}),
},
],
};
const tableRowNode: NodeSpec = {
...tableNodesCreated.table_row,
content: "date_cell text_cell date_cell",
};
The issue with copy-paste:
I’m inserting table with a structure similar to this:
{ type: 'table', content: [
{type: 'table_row', content: [{type: 'dateCell'}, {type: 'textCell'}, {type: 'dateCell'} ]},
// a couple od the same with text content inside cells
]}
If I copy and past first column everything looks alright. The pasted slice consists only of selected rows.
But if I copy cells from the second column, slice consists of additional nodes which breaks the table.
And in the end it breaks the table, adding random cells/rows, because the code of clipCells
and pastedCells
receive those extra nodes.
I wonder if my idea to add stricter columns is correct and what I’m doing wrong here.
In my original PoC I used custom Node with a datepicker, but I was able to distill the issue to this form.
btw big fan of this community, it already helped me a lot before I created the account to post this
EDIT:
I’m also providing the pasted HTML:
- working transformation to a slice
"<meta charset='utf-8'><table data-pm-slice="1 1 -2 []"><tbody><tr><td data-type="date-cell"><p>DateCell1 1-1</p></td></tr><tr><td data-type="date-cell"><p>DateCell1 2-1</p></td></tr></tbody></table>"
- Transformation to a slice with an issue
"<meta charset='utf-8'><table data-pm-slice="1 1 -2 []"><tbody><tr><td data-type="text-cell"><p>Cell 1-2</p></td></tr><tr><td data-type="text-cell"><p>Cell 2-2</p></td></tr></tbody></table>"