blocks-react-renderer icon indicating copy to clipboard operation
blocks-react-renderer copied to clipboard

[bug]: Empty text field converts to <br />

Open monolithed opened this issue 1 year ago • 4 comments

What version of @strapi/blocks-react-renderer are you using?

lst

What's Wrong?

When the field content is empty, Strapi returns an empty string; however, blocks-react-renderer converts it into a <br>, which breaks the layout.

To Reproduce

I see that this was done intentionally, but I don't understand why.

https://github.com/strapi/blocks-react-renderer/blob/032e256085e0e243f7935b90de23ba4c9aaa20d7/src/Block.tsx#L68

[
    {
        "type": "paragraph",
        "children": [
            {
                "text": "",
                "bold": false
            }
        ]
    }
]

Expected Behaviour

No br added

There's a similar discussion https://forum.strapi.io/t/richtext-field-returns-br-tag-when-cleared/39507

monolithed avatar Nov 29 '24 12:11 monolithed

Any updates?

mad-zephyr avatar Jan 09 '25 21:01 mad-zephyr

Here's a workaround:

const trimBlocksRendererChild = (input: BlocksContent): BlocksContent => {
    return input.filter(({children}) => {
        return children.some((child) => {
            const {text} = child as TextInlineNode;

            return text?.trim() !== '';
        });
    });
};
+ const content = trimBlocksRendererChild(children);

+ <BlocksRenderer content={content} ...

monolithed avatar Jan 18 '25 21:01 monolithed

@monolithed I think it would be great to allow customizing the rendering of breaklines <br /> just like blocks and modifiers.

ncdai avatar Feb 06 '25 15:02 ncdai

Damn it, this has been open for a year and it still hasn't been fixed.

edu-amr avatar Oct 31 '25 15:10 edu-amr