✨ Create "callout" custom block

[virgile-dev]

Feature Request

Is your feature request related to a problem or unsupported use case? Please describe.
Analivia requested to have alert blocks like we have in the pad

Describe the solution you'd like
Created an issue on BlocNote but it seems we can create our own :
TypeCellOS/BlockNote#1121 (comment)

[virgile-dev]

@arnaud-robin careful I think you guys both work on this. I see no PR associated. Can you sync who finishes that ?

[virgile-dev]

@rl-83 as we discussed I'd like to have a real callout block instead of an alert one.
The idea is to let the user chose and emoji and a background color.
Could you propose a design for this ?

[rl-83]

Figure 1

Here is a first sober proposal (Figure 1).
Before I design a custom component for the emoji picker, @YousefED, have you already planned to do it on your side?

Figure 2

I also want to take this opportunity to propose a revamp of the highlights with rounded corners (Figure 2).

Figma for reference

[YousefED]

@rl-83 we currently use this in other places of BlockNote: https://learn.missiveapp.com/open/emoji-mart. It works well. It's not very well maintained though, so I'd be open to switching to a different library if there is one - but I would not build / design this from scratch personally

[rl-83]

Great, I find that sufficient for now.
@YousefED, is it easy to customize it to resemble the docs interface? I'm mainly thinking of minor changes to the colors and the border radius.
@virgile-dev any thoughts?

[YousefED]

Great, I find that sufficient for now. @YousefED, is it easy to customize it to resemble the docs interface? I'm mainly thinking of minor changes to the colors and the border radius. @virgile-dev any thoughts?

haven't tried but should be possible; https://learn.missiveapp.com/open/emoji-mart/example-custom-styles.html

[virgile-dev]

@rl-83 I'm good with your highlight proposal.