white-space div on NodeViews?

[WilliamIPark]

Hey. We're having quite a few issues stemming from this extra div added to the dom when using a NodeView, particularly around layout and animation. From my understanding the white-space rule is required, but is the approach with the additional div the optimal way to include it?

[nperez0111]

This is where that white-space: inherit element is created, it has to do with node views' content and is the wrapper element to inject the react rendered content into. The reason that it exists is that prosemirror expects a node view to be generated synchronously, whereas react can only render asynchronously. So we inject this element, and have React render into that.

This is where the data-node-view-content element is create, it is an element rendered by your react app to signal where prosemirror should inject into using that ref there. It has to exist as a handoff from React to prosemirror to not have React destroy the element that prosemirror is trying to render the rich text into.

So, all of that to say, there is no good way to get rid of that element because of how React works. You'd either have to use the JS NodeView API, or Vue because both of those have a more sane rendering approach.