Prosemirror Table with strict schema and copy paste

1

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.

image
image1587×1084 198 KB

But if I copy cells from the second column, slice consists of additional nodes which breaks the table.

image
image2122×1089 386 KB

And in the end it breaks the table, adding random cells/rows, because the code of clipCells and pastedCells receive those extra nodes.

image
image2534×161 6.17 KB

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 :slight_smile:

EDIT:

I’m also providing the pasted HTML:

  1. 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>"
  1. 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>"
2

I can’t edit the og message and I pasted bugged scheme. Here is correct one.

  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": "text-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, { "data-type": "date-cell" }),
      },
    ],
  };