Handling newline characters (\n) about sanity HOT 5 CLOSED

Thanks for looking into it!
Yes, I came to the same conclusion. When trying to add my code to SanityContent, the approach didn't feel right.

At first I thought that SanityContent stripped the newline characters, but actually they're still in the HTML. Using white-space: pre-line is easy and works as expected.

from sanity.

Yes, I would 👍

from sanity.

I am using this module for the first time and was confused about the new line handling. Thank god I found this issue here 😅

I'm not sure there is an easy fix within SanityContent, as it would require turning text into HTML

So far, I have used https://github.com/rdunk/sanity-blocks-vue-component, which produces a <br>, and this is actually what I also expect when portable text gets transformed into HTML. Because of that, the CSS workaround doesn't feel quite right to me.

@danielroe would you consider to add <br> for new lines?

from sanity.

@mornir So having taken a look at this, I'm not sure there is an easy fix within SanityContent as it would require turning text into HTML, which I think is somewhat against the grain of the Portable Text concept. I think the best solution is white-space: pre-line as you've suggested.

What do you think?

Sample paragraph with newlines:

const children = [
  {
    "_key": "82dc1243fc1c",
    "_type": "span",
    "marks": [],
    "text": "d\n\n\nd"
  }
]

from sanity.

@danielroe is this still on the radar? Perhaps I’m doing something wrong but \ns don’t seem to be spitting out <br />s by default. (Thanks!)

from sanity.