Custom rendering with ReactNodeViewRenderer inside table cell

[seleckis]

Is it possible to create custom rendering for table cell content? There is a @tiptap/extension-table-cell extension which can be extended by TableCell.extend and with ReactNodeViewRenderer I can render whatever I want. But I need to leave table cell as is and intercept content rendering of a cell. Should I extend Paragraph extension in this case and check if its parent is a table cell, or something? What if I don't know what is rendering inside table cell and I just want to wrap everything with another element and leave table cell functionality as is.

[nperez0111]

I don't fully understand why you would not do as you said and do a TableCell.extend?

If you are saying that because ReactNodeViewRenderer renders a div you cannot do that? NodeViewWrapper allows an as prop so you can do something like as="td"

[seleckis]

By documentation it should be used like this:

import TTTableCell from "@tiptap/extension-table-cell";

function Component() {
  return (
    <NodeViewWrapper as="td">
      <NodeViewContent />
    </NodeViewWrapper>
  );
}

export const TableCell = TTTableCell.extend({
   addNodeView() {
      return ReactNodeViewRenderer(Component);
   },
});

In this case ReactNodeViewRenderer ads extra div and produces wrong table structure:

<table>
  <tr>
    <div class="react-renderer node-tableCell">
      <td>
        ....

[bdbch]

I created an issue out of this and will look into it.

[bdbch]

OK double verified this.

You should absolutely be able to pass in

return ReactNodeViewRenderer(Component, {
  as: 'td',
})

which creates a ReactRenderer wrapper as a td element.

[stefanomarra]

Hi @seleckis,
were you able to find a solution and make the TableCell.extend work?
I'm struggling to make everything work as expected

[seleckis]

TableCell.extend works, but I don't need to use it for custom rendering anymore, I just add custom attributes and commands. Maybe you can try to use contentDOMElementTag to make external tag as td and use <NodeViewWrapper as="div"> for internal container.

[israel-arvizu]

I figured something out that worked for me, not sure if this is what you asking, but I used the as parameter in the ReactNodeViewRenderer to render the outer react renderer layer as a td so the table structure remains the same, and then passed a custom component in TableCellView to have a custom component I can modify, like so:

const TableCellNode = TableCell.extend<TableCellOptions>({
...
addNodeView() {
  return ReactNodeViewRenderer(TableCellView, {
    as: "td",
    attrs: ({ node }) => ({
      colSpan: node.attrs.colspan || 1,
      rowSpan: node.attrs.rowspan || 1,
      style: node.attrs.colwidth
        ? `width: ${node.attrs.colwidth[0]}px; position: relative;`
        : "position: relative;",
      "data-colwidth": node.attrs.colwidth?.join(","),
      "data-id": node.attrs.id,
    }),
  });
},
...

Basic Custom Component that I can start modifying:

export const TableCellView = ({ node }: NodeViewProps) => {
    return (
        <NodeViewWrapper style={{ display: "contents" }}>
            <NodeViewContent />
        </NodeViewWrapper>
    );
};