\n to br

[MarijnFK]

trafficstars

In the strapi-blocks it is possible to input a shift-enter, which results in a \n I see there is a
option for empty paragraphs, maybe it's possible to replace line-breaks inside the 'text' property to <br> aswell? This way we can place <br> inside a <p> tag

[niklasfjeldberg]

I am not sure I understand what you want. Could you give me two code examples? One for before (the current output) and one for the output you want, both in HTML. Also what will the benefit of this be?

To make things simple I am mostly trying the match the official React plugin from Strapi.

[MarijnFK]

In the output below, there is a \n in the text-property, inside a paragraph. The \n is not replaced by a
. This results in different display from the strapi-editor and the html generated from the blocks-renderer.

[
  {
    "type": "paragraph",
    "children": [
      {
        "type": "text",
        "text": "It would be nice to have this \n render to a <br>"
      }
    ]
  }
]

[reslear]

hi @MarijnFK so i found https://github.com/strapi/blocks-react-renderer/pull/42, we'll do it when it hits release.

[MarijnFK]

@reslear awesome, thanks for the reply

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

[MarijnFK]

@monolithed thanks for the workaround. Unfortunatly it is a React-example, this is a vue-package. Maybe you can update it to match the vue-syntax?

[monolithed]

@MarijnFK my bad, I don't use Strapi with Vue, but the replaceNewlines function will be the same in both cases.