fix: handle line breaks

[r-o-b-o-t-o]

What does it do?

Transforms \n, \r\n and \r into <br /> tags in <Text />

Why is it needed?

Fixes #37

How to test it?

• Create rich text blocks with line returns in them (⇧+⏎ in the rich text editor)
• Render them with <BlocksRenderer />
• Make sure the newline characters are replaced by <br /> tags

[leelawtondesign]

This worked perfectly for me, thanks!

[antoine-roux]

It would be nice to merge :)

[pbozyk]

we need this in production pack! that would be nice.

[r-o-b-o-t-o]

In the meantime, my fork is available on npm: @roboto_/strapi-blocks-react

[remidej]

Looks good, could you just add a unit test too?

And sorry I wasn't aware of this PR, it's been a while so if you don't want to get back to it we can make another PR internally

[monolithed]

@remidej

Looks good, could you just add a unit test too?

And sorry I wasn't aware of this PR, it's been a while so if you don't want to get back to it we can make another PR internally

Please roll out your own PR if it's ready. It’s kinda hard to work without line breaks 😞

[monolithed]

Here's a tmp workaround:

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>
                ))
            }
        </>
    );
};

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

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

                                return child;
                            })
                        )
                    }
/>