Cannot have \n in custom block content.

[colinstantos]

Describe the bug
{
type: 'alert',
content: 'This is an \n example \n alert!!',
}

the above content is in a single line instead of 3.

To Reproduce
https://stackblitz.com/edit/github-qx9fhr?file=App.tsx

[YousefED]

/bounty 10

[algora-pbc]

💎 $10 bounty • BlockNote

Steps to solve:

1. Start working: Comment /attempt #742 with your implementation plan
2. Submit work: Create a pull request including /claim #742 in the PR body to claim the bounty
3. Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts

Thank you for contributing to TypeCellOS/BlockNote!

Add a bounty • Share on socials

Attempt	Started (GMT+0)	Solution
🟢 @Bhavyajain21	Jun 1, 2024, 6:23:06 AM	WIP

[jkcs]

Hello @YousefED , Could you please describe your expected solution more specifically? In fact, it can be addressed simply by changing it to

     {
        type: "alert",
        content: [
          {
            type: "text",
            styles: {},
            text: "This is an \n example \n alert!!",
          },
        ],
      },

Here are a few possible solutions:

• Best option, Have users use it as is, and when a line break is needed, they can directly pass raw JSON without modifying any code.

• Implement it within the Alert component by extending the createReactBlockSpec method, allowing it to convert content into the aforementioned format.

• Add an identifier in useCreateBlockNote for transforming initialContent.

[jkcs]

By the way, if the <Alert /> needs to display the line breaks correctly, you'll need to change height: 48px; to min-height: 48px;

[Bhavyajain21]

Hey @YousefED , I'd like to give this a try. Can you please assign this issue under my name?

/attempt

Algora profile	Completed bounties	Tech	Active attempts	Options
@Bhavyajain21	10 bounties from 3 projects	TypeScript, Rust, JavaScript & more		Cancel attempt