List items being interpreted as lists?

[OllieJT]

I am using block-content-to-react for some basic rich text. Somewhere in the pipeline it is turning what should be:

<ol>
   <li>Alpha<li>
   <li>Bravo<li>
   <li>Charlie<li>
</ol>

Into

<ol>
   <li>Alpha<li>
</ol>
<ol>
   <li>Bravo<li>
</ol>
<ol>
   <li>Charlie<li>
</ol>

Which is affecting the numberd list and intended spacing for the elements.

Here is what I have in sanity and what I expect:

...but here in staging it breaks what should be a list into multiple lists:

[luigimannoni]

I am facing the exact same issue for the past week. It was present on a 1.x.x release but also updating to 2.0.7 doesn't solve the problem.

However got me thinking and found out that the list items are sent as single nodes rather than a node with multiple children, maybe perhaps this should rather a bug from the Sanity core itself rather than the block-content-to-react module. Nevermind, the block-content-to-html just works fine.

One idea (which I haven't implemented due to time constraints) is to cycle on each node until the prop listItems doesn't exist anymore and then render the collected children on a custom component instead invoking the block serializer.
Or, maybe switch to block-content-to-html just for the lists (heh)

[runeb]

@OllieJT @luigimannoni Are you by any chance sending each block item to the renderer separately? Like mapping over them and passing them in? That will produce this kind of output. If you instead pass in the whole array of block items it should render correctly.

[rexxars]

If you are able to reproduce this issue in the @portabletext/react module, let us know!

Closing this as we are missing reproduction data.

[luigimannoni]

Sorry @rexxars completely forgot about this issue.

Coincidentally I had picked up an old codebase in these weeks with this exact bug happening again after updating block-content-to-react, latest sanity client and latest react.

I have solved by using @portabletext/react instead