👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Retaining Line Breaks During Rendering with React

17 replies
Last updated: Mar 19, 2022
For example.. I have a
Text
field in Sanity on a document.. someone puts something like:
line one

line two
line three
That’s gonna come back as something like:

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

line oneline twoline three
Trying to figure out how to render these things so the new lines are retained during rendering..
Mar 19, 2022, 1:02 AM
have you tried breaks and horizontal rules for this? Or creating a new paragraph?
Mar 19, 2022, 1:08 AM
instead of a text field, you may be better served with rich text via portabletext or markdown. Both work very well in the studio.
Mar 19, 2022, 1:11 AM
Mar 19, 2022, 1:12 AM
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)…
Mar 19, 2022, 1:16 AM
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)…
Mar 19, 2022, 1:16 AM
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
Mar 19, 2022, 1:17 AM
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.
Mar 19, 2022, 1:30 AM
it is also possible to interpret portable text as markdown as well once imported
Mar 19, 2022, 1:36 AM
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 😉
Mar 19, 2022, 1:38 AM
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 😉
Mar 19, 2022, 1:38 AM
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.
Mar 19, 2022, 1:40 AM
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. ^_^
Mar 19, 2022, 1:42 AM
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. ^_^
Mar 19, 2022, 1:42 AM
Thanks for that Julia!
Mar 19, 2022, 1:42 AM
Thanks for the feedback, and if you don’t mind
user Y
, 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?
Mar 19, 2022, 1:45 AM
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.
Mar 19, 2022, 2:27 AM
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.
Mar 19, 2022, 2:27 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?