✨ Add a custom callout block to the editor #892

ZouicheOmar · 2025-04-18T16:35:43Z

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 · 2025-04-29T13:15:30Z

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 · 2025-04-30T13:58:40Z

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

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.

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.

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 · 2025-05-02T14:47:11Z

@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 · 2025-05-03T12:04:03Z

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.

Refactor and add typing to callout block to fix lint issues.

Set the default background color to yellow on the callout block.

AntoLC · 2025-05-05T11:57:53Z

src/frontend/package.json

@@ -38,5 +38,6 @@
    "react-dom": "19.1.0",
    "typescript": "5.8.3",
    "yjs": "13.6.26"
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"


We will not use this part for the moment.

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.

AntoLC · 2025-05-05T11:58:54Z

src/frontend/apps/impress/package.json

@@ -22,6 +22,7 @@
    "@blocknote/react": "0.29.1",
    "@blocknote/xl-docx-exporter": "0.29.1",
    "@blocknote/xl-pdf-exporter": "0.29.1",
+    "@emoji-mart/data": "^1.2.1",


Better to pin the dependency, we are using renovate to bump them.

Suggested change

"@emoji-mart/data": "^1.2.1",

"@emoji-mart/data": "1.2.1",

AntoLC · 2025-05-05T12:16:11Z

...frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx

+  ReactCustomBlockRenderProps,
+  createReactBlockSpec,
+  useBlockNoteEditor,
+  useEditorSelectionChange,


You don't seem to use it.

AntoLC · 2025-05-05T12:16:14Z

...frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx

+  CustomBlockConfig,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+  PartialBlock,


You don't seem to use it.

AntoLC · 2025-05-05T12:17:10Z

...frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx

+  // this custom block.
+  useEffect(() => {
+    if (!block.content.length && block.props.backgroundColor === 'default') {
+      console.log('in if statement');


Suggested change

console.log('in if statement');

AntoLC · 2025-05-05T12:37:15Z

...frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx

+} satisfies CustomBlockConfig;
+
+const useCalloutBlock = () => {
+  const editor = useBlockNoteEditor();


Suggested change

const editor = useBlockNoteEditor();

const editor = useBlockNoteEditor<

DocsBlockSchema,

DocsInlineContentSchema,

DocsStyleSchema

>();

By typing the editor, you will not have to cast to "any" inside updateBlock.

lunika requested review from AntoLC and virgile-dev April 28, 2025 10:04

lunika assigned lunika and unassigned lunika Apr 28, 2025

lunika added the frontend label Apr 28, 2025

rl-83 added the designed A UX/UI design has been proposed label Apr 29, 2025

ZouicheOmar added 6 commits May 1, 2025 11:42

✨(frontend) add emoji picker component

2e72cdd

Add a custom emoji picker component to use in the editor

✨(frontend) add custom callout block to editor

996fde4

Add a custom block to the editor, the callout block.

✨(frontend) adapt export to callout block

f85f9da

Adapt modal export to include PDF and Docx export for the callout block.

🌐(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.

💄(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 force-pushed the feature/doc-callout-block branch from e7dd4fa to 1bc17a2 Compare May 1, 2025 11:39

virgile-dev requested changes May 2, 2025

View reviewed changes

ZouicheOmar added 2 commits May 3, 2025 21:42

🚨(frontend) fix lint issues on callout component

88c77d8

Refactor and add typing to callout block to fix lint issues.

💄(frontend) set yellow background color to callout block

0a3f580

Set the default background color to yellow on the callout block.

ZouicheOmar force-pushed the feature/doc-callout-block branch from 75adfd5 to 0a3f580 Compare May 3, 2025 19:50

AntoLC reviewed May 5, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

✨ Add a custom callout block to the editor #892

✨ Add a custom callout block to the editor #892

ZouicheOmar commented Apr 18, 2025

rl-83 commented Apr 29, 2025 •

edited

Loading

ZouicheOmar commented Apr 30, 2025

virgile-dev left a comment

virgile-dev commented May 2, 2025

ZouicheOmar commented May 3, 2025

AntoLC May 5, 2025

AntoLC left a comment

AntoLC May 5, 2025

AntoLC May 5, 2025

AntoLC May 5, 2025

AntoLC May 5, 2025

AntoLC May 5, 2025

-  const editor = useBlockNoteEditor();
+    const editor = useBlockNoteEditor<
+      DocsBlockSchema,
+      DocsInlineContentSchema,
+      DocsStyleSchema
+    >();

✨ Add a custom callout block to the editor #892

Are you sure you want to change the base?

✨ Add a custom callout block to the editor #892

Conversation

ZouicheOmar commented Apr 18, 2025

Purpose

Proposal

Demo

PDF and Docx Exports

rl-83 commented Apr 29, 2025 • edited Loading

ZouicheOmar commented Apr 30, 2025

virgile-dev left a comment

Choose a reason for hiding this comment

virgile-dev commented May 2, 2025

ZouicheOmar commented May 3, 2025

Demo

AntoLC May 5, 2025

Choose a reason for hiding this comment

AntoLC left a comment

Choose a reason for hiding this comment

AntoLC May 5, 2025

Choose a reason for hiding this comment

AntoLC May 5, 2025

Choose a reason for hiding this comment

AntoLC May 5, 2025

Choose a reason for hiding this comment

AntoLC May 5, 2025

Choose a reason for hiding this comment

AntoLC May 5, 2025

Choose a reason for hiding this comment

rl-83 commented Apr 29, 2025 •

edited

Loading