[feat]: Support for Interpreting \n as Line Breaks

[ringm]

A clear and concise description of what the feature is

It would be incredibly helpful if blocks-react-renderer could support interpreting \n characters as line breaks in text strings.

Why should this feature be included?

This feature is essential for rendering multiline text more intuitively, especially when dealing with user-generated content or preformatted text blocks. This lack of line break support necessitates additional string manipulation and mapping in the component code, which complicates the rendering process and adds extra overhead.

Please provide an example for how this would work

Currently, when a text string containing \n characters is rendered, the \n characters are not converted into HTML line breaks (
). For example, a text string like "This is a heading and \n\n I want this to be on a new line" is rendered as a single continuous line rather than as:

This is a heading and
I want this to be on a new line

Handling line breaks natively in blocks-react-renderer aligns with common text rendering practices and enhances the library's usability in more diverse text formatting scenarios.

Thank you for considering this feature request.

[larswittenberg]

Is there any news about this bug?

Strapi 4.25.1
Next. js 14.2.4
@strapi/blocks-react-renderer 1.0.1

My data

was rendered as
<p>Line 1 at this parapraph Next Line after line-break</p>

[monolithed]

const replaceNewlines = (line: string) => {
    const text = line.split(/\r?\n|\r/g);

    return (
        <>
            {
                text.map((part, index) => (
                    <React.Fragment key={index}>
                        {index > 0 && <br/>} {part}
                    </React.Fragment>
                ))
            }
        </>
    );
};

import {type TextInlineNode} from '@strapi/blocks-react-renderer/dist/Text';

type Child = React.ReactElement<TextInlineNode>;

...
...

<BlocksRenderer content={children}
                blocks={{
                    paragraph: ({children}) => {
                        return React.Children.map(children, (node) => {
                            if (React.isValidElement(node)) {
                                const {props: {text}, ...rest} = node as Child;

                                if (typeof text !== 'string') {
                                    return node;
                                }

                                /** @fix https://github.com/strapi/blocks-react-renderer/pull/42/files  */
                                return {
                                    ...rest,
                                    props: {
                                        ... node.props,
                                        text: replaceNewlines(text)
                                    }
                                };
                            }

                            return node;
                        })
                    }
                }}
/>