I am trying to render \n into <br /> and \n\n into different paragraphs but I can't figure it out.
NOTE: I know about the "double space" at the end of the text, but that sounds complicated to my editors... is there a way to have the single \n?
Posting this solution here in case it's helpful. I'm using Markdown text as an extension of normal text, so many of my users won't be expecting to add two spaces to get a return.
Instead, I wrote a wrapper component that automatically converts when rendering, by replacing instances of \n with two spaces and a \n:
import React from 'react';
import ReactMarkdown from 'react-markdown';
export default const Markdown = ({ children, ...props }) => (
<ReactMarkdown {...props}>
{typeof children === 'string' ? children.replace(/\n/g, ' \n') : children}
</ReactMarkdown>
);
This works when I pass it text to render, and my users don't need to know the Markdown specifics:
<Markdown>{notes}</Markdown>
The current behavior is to the CommonMark spec, and will remain as is.
However it can be customized using a remark plugin https://github.com/remarkjs/remark-breaks
Or if that doesn't meet your needs you can make a custom plugin to exactly meet your needs, learn more here: https://unifiedjs.com/learn/