Issue with rendering paragraphs in Sanity.io causing layout stretching on the front-end.

Hello,I am very New to
Sanity.io , just started using it this morning. Set up a studio to refactor my Portfolio project that was using JSON data until now, but ready to move to a CMS now. Set up some schemas to start refactoring.Using Next.js on the frontend, and fetching GraphQL for static props. Using block-content-to-react for rendering.

Having an issue on rendering the paragraphs on the front-end. Spaces are replaced with &nbsp , stretching out my layout. JSON data seems to be coming in fine. To be honest, I don`t even know where to start looking for this issue.

Hi and welcome, Gabor!
How did you get your JSON data into Sanity? Was this manually typed in the Studio or did you import it?

Thank you Geoff!I set up the document and objects for Sanity studio, then manually typed in all the fields. Most of my existing stuff is placeholder or need rewriting, will be doing the whole thing manually.

Tried fetching with fetch API and Axios, they both deliver, but ending up with the same result.

In the meantime, I refactored using react-portable-text. Works nicely, much cleaner, but the non-breaking spaces are still there instead of spaces.

Very interesting. The closest I can get to replicating this is by using option-spaces in the portable text editor. If I copy that text and encode it, the option-spaces are reflected as   entities. However, those non-breaking spaces don’t show on my front end nor when I inspect in the Studio.
The only thing left might be your serializer, but I don’t even know how you’d get it to convert spaces to   entities.

Yeah, finding it confusing as well, I didn`t even see anybody mention anything like that, was googling all afternoon. I tried manually rendering the individual text fields in simple paragraphs, but issue stayed. JSON object also seems fine in the console.
For serializer, I only use custom highlights at this point, but the issue is there, even with a single object, no marks.

Thanks anyway :)

Do you get the entities outside of your highlight mark?

Highlights render nicely, between them the line even breaks. It is just the normal text misbehaving, that is what renders with nbsp

The closest I can get to replicating this is by using option-spaces in the portable text editor. If I copy that text and encode it, the option-spaces are reflected as   entities. However, those non-breaking spaces don’t show on my front end nor when I inspect in the Studio.

Hi Gabor. I realized that when I try this in Chrome, I get the same result as you (the   entities show in the dev tools). I’m back to thinking it’s in the JSON, not the serializer.

Interesting. I tried in Chrome, Firefox and Edge, same issue for me in all three.

Sorry, all I meant was that the   didn’t show up in FF dev tools for me, but they did in Chrome.

Oh, I see. It shows up in Edge as well, not in Firefox

Hello there,Issue solved, it wasn`t an issue on Sanity side. Apparently, the data I manually copy-pasted to the studio replaced spaces with non-breaking-space html entities. If I go through the text manually, and replace spaces. or write it there from scratch, works without an issue.
Thanks for your help :)

Glad to hear you got it resolved, Gabor!