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
Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

✨ Add a custom callout block to the editor #892

wants to merge 8 commits into from

Conversation

ZouicheOmar
Copy link

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
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 added 6 commits May 1, 2025 11:42
@ZouicheOmar
➕(frontend) add emoji-mart packages
7bb488f 
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.
@ZouicheOmar
✨(frontend) add emoji picker component
2e72cdd 
Add a custom emoji picker component to use in the editor
@ZouicheOmar
✨(frontend) add custom callout block to editor
996fde4 
Add a custom block to the editor, the callout block.
@ZouicheOmar
✨(frontend) adapt export to callout block
f85f9da 
Adapt modal export to include PDF and Docx export
for the callout block.
@ZouicheOmar
🌐(i18n) add translations for the callout block
327970a 
Add translation for the callout component to be shown
in the suggestion menu and slash menu. Add missing
"Beautify" AI action in French.
@ZouicheOmar
💄(frontend) fix callout block styling
1bc17a2 
Fix editor's callout block border corner, paddings and margins to
match design docs, apply sam fix on paragraph and heading blocks to
keep a visual consistency when highlighted.
@ZouicheOmar ZouicheOmar force-pushed the feature/doc-callout-block branch from e7dd4fa to 1bc17a2 Compare May 1, 2025 11:39
virgile-dev
virgile-dev 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
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 added 2 commits May 3, 2025 21:42
@ZouicheOmar
🚨(frontend) fix lint issues on callout component
88c77d8 
Refactor and add typing to callout block to fix lint issues.
@ZouicheOmar
💄(frontend) set yellow background color to callout block
0a3f580 
Set the default background color to yellow on the callout block.
@ZouicheOmar ZouicheOmar force-pushed the feature/doc-callout-block branch from 75adfd5 to 0a3f580 Compare May 3, 2025 19:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@virgile-dev virgile-dev virgile-dev requested changes

@AntoLC AntoLC Awaiting requested review from AntoLC

Requested changes must be addressed to merge this pull request.

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.
4 participants
@ZouicheOmar @rl-83 @virgile-dev @lunika