I'm developing a react application and I'm using firebase to store my data. I'm having issues with newlines. When I submit a blog post with multiple paragraphs to firebase, it stores the string with hidden newlines. I say hidden because you can't see them just by looking at them in the firebase console, but I know that firebase does store them. The problem is that I'm not sure how to display the text as multiple paragraphs when it's read back to the application. The newlines are still there but html doesn't render newlines as paragraph breaks.
Here's an example:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh tellus molestie nunc non blandit massa enim nec. Viverra nam libero justo laoreet sit. Laoreet id donec ultrices tincidunt. Tortor consequat id porta nibh venenatis cras sed felis. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Imperdiet dui accumsan sit amet. Scelerisque fermentum dui faucibus in ornare quam. Proin sagittis nisl rhoncus mattis rhoncus. Dolor sit amet consectetur adipiscing elit pellentesque. Orci ac auctor augue mauris augue. Id aliquet risus feugiat in. Sed id semper risus in hendrerit gravida. Euismod elementum nisi quis eleifend quam adipiscing vitae. Lorem donec massa sapien faucibus et. Mi sit amet mauris commodo. Porta nibh venenatis cras sed. Nisl purus in mollis nunc sed id. Pulvinar sapien et ligula ullamcorper malesuada proin. Sollicitudin aliquam ultrices sagittis orci. At tempor commodo ullamcorper a lacus. Tincidunt dui ut ornare lectus sit amet est placerat in. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc. Molestie at elementum eu facilisis sed odio morbi quis commodo. Eu mi bibendum neque egestas congue quisque egestas diam in. Sed velit dignissim sodales ut eu sem. Risus ultricies tristique nulla aliquet enim tortor at. Vel orci porta non pulvinar neque laoreet suspendisse. Nunc faucibus a pellentesque sit amet porttitor eget dolor.
This is supposed to be two paragraphs.
I tried doing a find/replace on all newline instance replacing them with < br / > like this:
const regex = new RegExp('\\n', 'g');
p.body = p.body.replace(regex, '<br/>');
The result:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh tellus molestie nunc non blandit massa enim nec. Viverra nam libero justo laoreet sit. Laoreet id donec ultrices tincidunt. Tortor consequat id porta nibh venenatis cras sed felis. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Imperdiet dui accumsan sit amet. Scelerisque fermentum dui faucibus in ornare quam. Proin sagittis nisl rhoncus mattis rhoncus. Dolor sit amet consectetur adipiscing elit pellentesque. Orci ac auctor augue mauris augue. Id aliquet risus feugiat in. Sed id semper risus in hendrerit gravida. Euismod elementum nisi quis eleifend quam adipiscing vitae. Lorem donec massa sapien faucibus et. Mi sit amet mauris commodo. Porta nibh venenatis cras sed. Nisl purus in mollis nunc sed id. Pulvinar sapien et ligula ullamcorper malesuada proin.< br />< br />Sollicitudin aliquam ultrices sagittis orci. At tempor commodo ullamcorper a lacus. Tincidunt dui ut ornare lectus sit amet est placerat in. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc. Molestie at elementum eu facilisis sed odio morbi quis commodo. Eu mi bibendum neque egestas congue quisque egestas diam in. Sed velit dignissim sodales ut eu sem. Risus ultricies tristique nulla aliquet enim tortor at. Vel orci porta non pulvinar neque laoreet suspendisse. Nunc faucibus a pellentesque sit amet porttitor eget dolor.
Can you see the two < br/ > between proin and Sollicitudin?
Obviously it's rendering the text as-is.
Is there any kind of character I can replace \n with in the text that will force html to split the string at that spot into a new paragraph? Thanks.
formData.append('body', this.postBodyRef.current.value)
Then this is sent to the backend and stored in firebase like this:firestore.collection('blogposts').add(post)
. I did try this: formData.append('body', ` ${this.postBodyRef.current.value} `) but that didn't help. – gib65