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.

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

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

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.
Add a custom emoji picker component to use in the editor
Add a custom block to the editor, the callout block.
Adapt modal export to include PDF and Docx export
for the callout block.
Add translation for the callout component to be shown
in the suggestion menu and slash menu. Add missing
"Beautify" AI action in French.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant