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>
        ....

[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.