How to avoid extra wrapper when using ReactNodeViewRenderer

[thiagoterleski]

In the context of extensions using react components to render elements, where the goal is to compose blocks following a template structure, I created all the extensions and set the correct rules for the content type.

The issue is that I can't properly compose the layouts because tiptap is creating "extra" wrappers for each block, specifically the <div style="white-space: inherit;">.

This is problematic since my extension blocks rely on parent components to set the grid layouts for example.

Basically the structure I am trying to create is something like:

productOverview
  productOverviewComparasion
    productOverviewPros
    productOverviewCon

In this scenario, productOverviewComparasion contains a Grid component responsible for rendering the child elements. Since this extension has an extra wrapper, the styling won't work properly.

We have other situations similar to this one, where we need to create specific template blocks but allow users to edit parts of them.

Even for the wrapper elements, I find it difficult to replace them with custom components; for example, we are using grommet for UI elements, and it seems that I can fix this by using <NodeViewContainer as={Box}> for example.

Has anyone come up with the same challenges?

[WilliamIPark]

Been fighting this little div for a couple of years now, and it has contributed towards a lot of awkward code in our product.

Quite often how we've approach it is that we'd apply the grid style further down. .product-overview-comparison > [data-node-view-wrapper] > div, for example. I contributed a PR yesterday towards Tiptap to remove the ambiguity around the final > div part of that selector.