✨ Add a custom callout block to the editor

[ZouicheOmar]

Purpose

This PR addresses issue #305. Add a new custom block to the editor, the callout block.

Proposal

• Introduced a custom emoji picker component, using the emoji-mart library, which is already used by blocknote. That's to have custom triggers and use of the component.
• Introduced a callout component in the editor that uses the custom emoji picker.
• Updated BlockNoteEditor to include this new block.
• Updated BlockNoteSuggestionMenu and BlockNoteToolbar to include easy insertion of the callout block.
• Adapted ModalExport to include both PDF and Docx exports for the document containing the new block.
• Updated translations to include the name and the sentences displayed in the slash menus for the callout.

Demo

callout.webm

PDF and Docx Exports

Would love any feedback if this needs improvements, corrections or any changes.

[rl-83]

Great job!

Just small UI considerations here.
I had suggested these specific spacings and a 4px rounding (xxxs) on the callout (see it on Figma here + Issue 305).

[ZouicheOmar]

Hey thanks for your feedback

Made some changes on the callout.

To keep block highlighting consistent, I added paddings and margins on the heading and paragraph blocks, also following the figma file. Can revert this one back if needed.

And the emoji's background color transition on hover
docs_emoji_hover.webm

[virgile-dev]

Hey @ZouicheOmar this looks awesome ! Thanks a lot for your contribution.
Just one feedback, one thing I noticed in your screen capture is that by default the call out block has a white background.
How about we give it yellow background by default that people can change if they want to.

[virgile-dev]

@ZouicheOmar
I hope you're planning to come to the Hack Days, so we can build more stuff on Docs !
https://hackdays.numerique.gouv.fr/

[ZouicheOmar]

Now the default bg for a callout is yellow.

Demo

callout_default_bg.webm

Solution is not quite elegant, would be cleaner with a custom side menu, or a change on blocknotejs. Will keep an eye on it.

@virgile-dev I am definitely coming to the hack days ! Just waiting for my invite to be checked and I'll be all set.

[AntoLC]

Thank you a lot for the contribution.

I can see you still have some linting issues.
I use the extension https://marketplace.visualstudio.com/items/?itemName=dbaeumer.vscode-eslint to get informations about them.

Your last 3 commits seems more fixing your previous commits, consider using the fixup commits instead of a new ones.

We are adding tests using Playwright, do you know it ?
If yes maybe you can add test here: https://github.com/suitenumerique/docs/blob/main/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts

Otherwise, no problem, I will add tests after your changes.

[ZouicheOmar]

@AntoLC Thank you very much for your suggestions !

I applied fixes according to your comments, plus other minor ones.
On doc-editor.spec.ts, I added tests covering rendering with defaults (yellow background and "💡') their updates according to user changes, along with the emoji picker.

[AntoLC]

Thank you a lot for your contribution ! 🎉

Reviewed

[virgile-dev]

@ZouicheOmar we noticed with @rl-83 3 little things that need fixing

• the emoji is not centered with the back ground
  
• the padding is not the same up and down
  
• when make ◀️ your cursor gets above the callout box haha
  Capture vidéo du 11-06-2025 19:02:56.webm

Do you think you could make a PR to fix it?
Thanks a ton !

[ZouicheOmar]

Hey @virgile-dev, sorry for such a late response
Okey I can defo work on this !
What would be the desired behavior on pressing the left arrow key ?

[virgile-dev]

@ZouicheOmar
It should go straight to the block that's above.
Is that clear ?
Thanks !

[ZouicheOmar]

Alright should be okey now

current

Screencast.from.2025-07-10.16-41-14.mp4

When looking for the left arrow behavior, found that the cursor not only goes above the callout box,
but also between callout boxes (if contiguous), and even under ahaha.
It can get triggered by all the arrow keys.

I don't know if you found the same @virgile-dev, or even other unexpected behavior ?

btw happens on the example blocknote custom block too.

from the blocknote docs

Screencast.from.2025-07-10.16-18-52.mp4

[virgile-dev]

@ZouicheOmar no didn't notice! Good catch!
If it's happening on BlockNote as well we should send them a fix so everyone benefit from it.
Do you feel up to it?
Hey @YousefED are you aware of this weird arrow behaviour?

[YousefED]

This is what's called the "gapcursor" in prosemirror: https://github.com/ProseMirror/prosemirror-gapcursor

it allows you to insert content between two blocks. I think it's quite useful, of course we can consider disabling it or making it toggleable

[ZouicheOmar]

Right, by just disabling the "gapCursor" extension on the editor, cursor positions works fine. Which is 1 LOC instead of my PR's ~370 😭 ...
Which is a valid solution as there are no blocks that use the GapCursor extension.
@YousefED by toggleable do you mean on a single block type or on the editor instance ?

[virgile-dev]

Thanks @ZouicheOmar
Really nice you could do the fix !
Sorry about these 370 LOC 😢