➕(app-impress) add @blocknote/mantine

The new version of blocknote dissociates
the ux from the @blocknote/react package.
It is now in a separate package @blocknote/mantine.
We add this package to the impress app.
We adapt the toolbar to fit the new package.

src/frontend/apps/impress/package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@blocknote/core": "0.13.2",
+    "@blocknote/mantine": "0.13.2",
     "@blocknote/react": "0.13.2",
     "@openfun/cunningham-react": "2.9.0",
     "@tanstack/react-query": "5.36.0",

src/frontend/apps/impress/src/features/pads/pad/components/BlockNoteEditor.tsx

@@ -1,5 +1,5 @@
 import { BlockNoteEditor as BlockNoteEditorCore } from '@blocknote/core';
-import { BlockNoteView } from '@blocknote/react';
+import { BlockNoteView } from '@blocknote/mantine';
 import '@blocknote/react/style.css';
 import React, { useEffect, useMemo } from 'react';
 import { WebrtcProvider } from 'y-webrtc';

src/frontend/apps/impress/src/features/pads/pad/components/BlockNoteToolbar.tsx

@@ -1,3 +1,4 @@
+import '@blocknote/mantine/style.css';
 import {
   BasicTextStyleButton,
   BlockTypeSelect,
@@ -9,11 +10,10 @@ import {
   NestBlockButton,
   ReplaceImageButton,
   TextAlignButton,
-  ToolbarButton,
   UnnestBlockButton,
   useBlockNoteEditor,
+  useComponentsContext,
 } from '@blocknote/react';
-import '@blocknote/react/style.css';
 import { forEach, isArray } from 'lodash';
 import React from 'react';
 
@@ -95,6 +95,7 @@ const recursiveContent = (content: Block[], base: string = '') => {
  */
 export function MarkdownButton() {
   const editor = useBlockNoteEditor();
+  const Components = useComponentsContext();
 
   const handleConvertMarkdown = () => {
     const blocks = editor.getSelection()?.blocks;
@@ -118,12 +119,16 @@ export function MarkdownButton() {
     });
   };
 
+  if (!Components) {
+    return null;
+  }
+
   return (
-    <ToolbarButton
+    <Components.FormattingToolbar.Button
       mainTooltip="Convert Markdown"
       onClick={handleConvertMarkdown}
     >
       M
-    </ToolbarButton>
+    </Components.FormattingToolbar.Button>
   );
 }