NodeViewContent generates an unnecessary div

[anton-liubushkin]

What’s the bug you are facing?

I'm using React and working on a custom extension for tables and encountered that the NodeViewContent component always creates a nested div element.

↓

How can we reproduce the bug on our side?

1. Create a node view with React or add the Node view to a table extension
2. Use NodeViewContent to render child content

export const TableComponent: FC<NodeViewProps> = (props) => {
 /* Some sort of code */
  return (
    <table>
      <NodeViewContent as="tbody" />
    </table>
  )
}

Can you provide a CodeSandbox?

No response

What did you expect to happen?

I would like to avoid unnecessary elements in the DOM.

Anything to add? (optional)

No response

Did you update your dependencies?

• Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• Yes, I’m a sponsor. 💖

[philippkuehn]

Duplicate of #1527

[anton-liubushkin]

@philippkuehn, if I understand correctly, there is no way to get rid of the internal div element?

<NodeViewContent as="table">
converts into

<table as="table" data-node-view-content="" style="white-space: pre-wrap;">
  <div style="white-space: inherit;"> // <-- This ugly wrapper
    /* content */
  </div>
</table>

[henrykuzmick]

@philippkuehn I don't think this should be closed? #2213 doesn't seem to fix the unnecessary div problem.

This causes a number of issues.

Let's say I want to add some controls around a table. I could extend the Table plugin and add addNodeView.

Inside of the component used I'd render some control handles and <NodeViewContent as="table" /> in the middle.

This in turn breaks the structure of the table and most of the commands from the Table extension.

[sradu]

I'm running into too. Any chance this will get merged soon?

[levi-putna]

Beyond tables, this also creates issues when you want to use a CSS grid layout on the children.

You develop an extension and add some controls that enable you to manage the grid layout of your component. You apply your grid class to the NodeViewContent, <NodeViewContent className="grid grid-cols-12 gap-4" />.

Then, an inner div is added, and instead of the grid classes applying to the children, they are applied to the inner div breaking the layout.

<div class="grid grid-cols-12 gap-4" data-node-view-content="" style="white-space: pre-wrap;">
    <div style="white-space: inherit;"> // <-- This ugly div wrapper again.
        <h1 padding="0" span="10" class="col-span-10">Sample Heading</h1>
        <p padding="0" span="10" class="col-span-2">This is some placeholder text...</p>
    </div>
</div>

[ludusrusso]

@levi-putna I have a similar problem, did you find a way to fix this?