Skip to content

✨ Add a custom callout block to the editor #892

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 4 commits into from
May 12, 2025
Merged

✨ Add a custom callout block to the editor #892

merged 4 commits into from
May 12, 2025

Conversation

ZouicheOmar
Copy link
Contributor

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

callout_pdf_docx

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

@lunika lunika requested review from AntoLC and virgile-dev April 28, 2025 10:04
@lunika lunika assigned lunika and unassigned lunika Apr 28, 2025
@rl-83
Copy link
Collaborator

rl-83 commented Apr 29, 2025 •
edited
Loading

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).

CleanShot 2025-04-29 at 15 12 19@2x

@rl-83 rl-83 added the designed A UX/UI design has been proposed label Apr 29, 2025
@ZouicheOmar
Copy link
Contributor Author

Hey thanks for your feedback

Made some changes on the callout.
docs_screenshot_003
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

@ZouicheOmar ZouicheOmar force-pushed the feature/doc-callout-block branch from e7dd4fa to 1bc17a2 Compare May 1, 2025 11:39
virgile-dev
virgile-dev previously requested changes May 2, 2025
View reviewed changes
Copy link
Collaborator

@virgile-dev virgile-dev left a comment

Choose a reason for hiding this comment

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

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
Copy link
Collaborator

@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
Copy link
Contributor Author

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.

@ZouicheOmar ZouicheOmar force-pushed the feature/doc-callout-block branch from 75adfd5 to 0a3f580 Compare May 3, 2025 19:50
AntoLC
AntoLC reviewed May 5, 2025
View reviewed changes
AntoLC
AntoLC reviewed May 5, 2025
View reviewed changes
Copy link
Collaborator

@AntoLC AntoLC left a comment

Choose a reason for hiding this comment

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

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 ZouicheOmar force-pushed the feature/doc-callout-block branch from 0a3f580 to 216e79f Compare May 6, 2025 16:18
@ZouicheOmar
Copy link
Contributor Author

@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 AntoLC force-pushed the feature/doc-callout-block branch 3 times, most recently from b96b524 to 5b0d282 Compare May 12, 2025 07:26
@ZouicheOmar @AntoLC
➕(frontend) add emoji-mart packages
23aa497 
We need functionalities and data to implement a custom emoji picker
component, as blocknote's emojipicker component triggers and uses cases
are limited.
add to package.json the following packages:
- "emoji-mart": provides functions and components for
displaying, searching and selecting emojis.
- @emoji-mart-data: offers pre-configured sets of emojis.
- @emoji-mart/react: React Picker component
@ZouicheOmar @AntoLC
✨(frontend) add emoji picker component
02478ac 
Add a custom emoji picker component to use in the editor
@ZouicheOmar @AntoLC
✨(frontend) add custom callout block to editor
a070f56 
Add a custom block to the editor, the callout block.
@ZouicheOmar @AntoLC
✨(frontend) adapt export to callout block
bd79f84 
Adapt modal export to include PDF and Docx export
for the callout block.
@AntoLC AntoLC force-pushed the feature/doc-callout-block branch from 5b0d282 to bd79f84 Compare May 12, 2025 07:30
@AntoLC AntoLC self-requested a review May 12, 2025 08:16
AntoLC
AntoLC approved these changes May 12, 2025
View reviewed changes
Copy link
Collaborator

@AntoLC AntoLC left a comment

Choose a reason for hiding this comment

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

Thank you a lot for your contribution ! 🎉

@AntoLC AntoLC merged commit bd79f84 into suitenumerique:main May 12, 2025
18 of 19 checks passed
@ZouicheOmar ZouicheOmar deleted the feature/doc-callout-block branch May 12, 2025 10:05
@AntoLC AntoLC mentioned this pull request May 22, 2025
Merged
@virgile-dev
Copy link
Collaborator

virgile-dev commented Jun 11, 2025 •
edited
Loading

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

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

@ZouicheOmar
Copy link
Contributor Author

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 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@AntoLC AntoLC AntoLC approved these changes

@virgile-dev virgile-dev virgile-dev left review comments

Assignees
No one assigned
Labels
designed A UX/UI design has been proposed frontend
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@ZouicheOmar @rl-83 @virgile-dev @AntoLC @lunika