Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: render empty paragraph as br elements #25

Merged
merged 1 commit into from
Mar 5, 2024
Merged

Conversation

simotae14
Copy link
Contributor

What does it do?

It catches all the empty paragraphs and renders them as br elements

Why is it needed?

With the previous implementation every time we had a new line was rendered as an empty paragraph

How to test it?

In a frontend app, use the renderer (link it via yarn), and pass a content like this for example
[ { type: 'paragraph', children: [{ type: 'text', text: 'First paragraph' }], }, // empty paragraph { type: 'paragraph', children: [{ type: 'text', text: '' }], }, { type: 'paragraph', children: [{ type: 'text', text: 'Second paragraph' }], }, ]

Related issue(s)/PR(s)

This PR solve this issue #12

@simotae14 simotae14 added the pr: fix Bug fix label Mar 5, 2024
@simotae14 simotae14 requested a review from remidej March 5, 2024 09:21
@simotae14 simotae14 self-assigned this Mar 5, 2024
Copy link
Contributor

@remidej remidej left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good! I don't think we need to worry about non-paragraph empty blocks.

@simotae14 simotae14 merged commit 7d722a2 into main Mar 5, 2024
2 checks passed
@simotae14 simotae14 deleted the fix/empty-paragraphs branch March 5, 2024 10:12
reslear added a commit to reslear/vue-strapi-blocks-renderer that referenced this pull request Apr 2, 2024
@sefrijn
Copy link

sefrijn commented May 14, 2024

I'm trying to use blocks-react-renderer in React Native. I can create React Native versions of everything through specifying custom blocks and how to render them, but not this line-break (<br />), which is an html tag React Native doesn't understand. I would propose to make it customisable like blocks paragraph, heading, code, image, etc.

For now I used patch-package to disable returning a
tag, and in my React Native code I'm using the following implementation:

<BlocksRenderer
 content={content}
 blocks={{
        paragraph: ({ children }) => {
          if (Array.isArray(children) && children[0].props.text === "")
            return <Text> </Text>; // or any other custom element to use for a line break
          return (
            <Text>{children}</Text>
          );
        }
        // Other blocks here
}} />

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pr: fix Bug fix
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants