Skip to content

Commit

Permalink
fix: render with a br empty paragraphs
Browse files Browse the repository at this point in the history
  • Loading branch information
simotae14 committed Mar 5, 2024
1 parent 740bcbb commit 6c3e6e3
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 0 deletions.
10 changes: 10 additions & 0 deletions src/Block.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,16 @@ const Block = ({ content }: BlockProps) => {
return <BlockComponent {...props} />;
}

// Handle empty paragraphs separately as they should render a <br> tag
if (
type === 'paragraph' &&
childrenNodes.length === 1 &&
childrenNodes[0].type === 'text' &&
childrenNodes[0].text === ''
) {
return <br />;
}

const augmentedProps = augmentProps(content);

return (
Expand Down
27 changes: 27 additions & 0 deletions tests/BlocksRenderer.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,33 @@ describe('BlocksRenderer', () => {
expect(paragraph).toHaveTextContent('A paragraph with bold');
});

it('renders a br when there is an empty paragraph', () => {
render(
<BlocksRenderer
content={[
{
type: 'paragraph',
children: [{ type: 'text', text: 'First paragraph' }],
},
// empty paragraph
{
type: 'paragraph',
children: [{ type: 'text', text: '' }],
},
{
type: 'paragraph',
children: [{ type: 'text', text: 'Second paragraph' }],
},
]}
/>
);

// eslint-disable-next-line testing-library/no-node-access
const brElement = screen.getByText('First paragraph').nextElementSibling;
expect(brElement).toBeInTheDocument();
expect(brElement?.tagName).toBe('BR');
});

it('renders quotes', () => {
render(
<BlocksRenderer
Expand Down

0 comments on commit 6c3e6e3

Please sign in to comment.