Retaining Line Breaks During Rendering with React

For example.. I have a

Text

field in Sanity on a document.. someone puts something like:
That’s gonna come back as something like:

But HTML/React don’t honor `\n`’s.. so the result looks like in the browser:

Trying to figure out how to render these things so the new lines are retained during rendering..

have you tried breaks and horizontal rules for this? Or creating a new paragraph?

instead of a text field, you may be better served with rich text via portabletext or markdown. Both work very well in the studio.

I haven’t tried this myself, but it seems promising as well: https://thewebdev.info/2021/09/21/how-to-display-line-breaks-from-saved-text-area-in-a-react-component

I tried to wrap my mind around getting the Portable Text field stuff.. spent a few hours trying.. Then I just gave up.. seems very overly complicated IMHO (I’ve been doing software engineering for 15+ years, so I don’t think I’m speaking from position of ignorance here).
In comparison to other CMS PaaS, just required way too much effort to make it worth it to me…

For Example.. Contentful.. you tell it, “I want a ‘Rich text’ field here” and it gives the user a CMS user a RT interface.. But then on the other side of their API, you just get markdown (which is really simple to render out)…

I tried to wrap my mind around getting the Portable Text field stuff.. spent a few hours trying.. Then I just gave up.. seems very overly complicated IMHO (I’ve been doing software engineering for 15+ years, so I don’t think I’m speaking from position of ignorance here).
In comparison to other CMS PaaS, just required way too much effort to make it worth it to me…

For Example.. Contentful.. you tell it, “I want a ‘Rich text’ field here” and it gives the user a CMS user a RT interface.. But then on the other side of their API, you just get markdown (which is really simple to render out)…

In the end I just used CSS to deal w/ the line-breaks since there’s no real requirement in feature I’m working on that needs RT, just needed to render the linebreaks properly: https://sanity-io-land.slack.com/archives/C01T1B5GVEG/p1647651918772749

The portabletext element is just a big json object with customizable definitions for each block and style. It also has interpreters built in for pasting from other rich text sources (pdf, word/gdocs, web sites, etc). Contentful has a very similar object behind the scenes as well in their rich text, as does notion and most others. Where it has an advantage in the studio from my experience is building custom nested components directly from other documents and content in your project…or create your own methods for nesting media or iframes or whatever else you want right from the ui. This makes media interactions and queries much easier within the sanity studio.
You can also fine tune the available markup more easily than others I’ve tried for not-as-technical publishers to use. Markdown is more readable and easier to just export to a single sheet of text. Text fields are just a single block that’s going to be treated the unless you’re writing your own element tags directly into it and then interpreting them later.

You can also create your own custom input element completely to nest and render how you want in the studio if you have the experience doing so, fork and tweak one of the official plugins, or whatever you want.

it is also possible to interpret portable text as markdown as well once imported

Yeah.. I have no doubt that’s it’s prolly a far more powerful data format.. I just found that it took too much to get it up and going, and like I said, didn’t really need it.. so instead I solved what I did need w/ 4 lines of CSS 😉

Yeah.. I have no doubt that’s it’s prolly a far more powerful data format.. I just found that it took too much to get it up and going, and like I said, didn’t really need it.. so instead I solved what I did need w/ 4 lines of CSS 😉

No worries. I use the heck out of markdown for personal projects myself, but if I’m building a platform for others to use I’m going to try to automate it with a nice rich text input that I can tweak, and for this portabletext does a really nice job without extra tooling if I’m already using sanity as a content source.

I’ve passed your feedback on and really appreciate it. Have fun and tinker with all of it as much or as little as you’d like. ^_^

I’ve passed your feedback on and really appreciate it. Have fun and tinker with all of it as much or as little as you’d like. ^_^

Thanks for that Julia!

Thanks for the feedback, and if you don’t mind , I have a couple of questions:• Where was the friction specifically?
◦ Setting up the editor in the studio? Rendering it in the frontend? Both?
• What did you do to try to figure it out? Did you find any of the docs?

I found the docs.. I tried to implement in the studio as described and I ran into a hangup w/ the RT editor behaving erratically to inputs.

I found the docs.. I tried to implement in the studio as described and I ran into a hangup w/ the RT editor behaving erratically to inputs.