add custom block to convertBlockHandlers

The path lead to a 404

Signed-off-by: virgile-dev <virgile.deville@beta.gouv.fr>

README.md

@@ -57,7 +57,7 @@ Available methods: Helm chart, Nix package
 
 In the works: Docker Compose, YunoHost
 
-⚠️ For some advanced features (ex: Export as PDF) Docs relies on XL packages from BlockNote. These are licenced under AGPL-3.0 and are not MIT compatible. You can perfectly use Docs without these packages by setting the environment variable `PUBLISH_AS_MIT` to true. That way you'll build an image of the application without the features that are not MIT compatible. Read the [environment variables documentation](/docs/docs/env.md) for more information.
+⚠️ For some advanced features (ex: Export as PDF) Docs relies on XL packages from BlockNote. These are licenced under AGPL-3.0 and are not MIT compatible. You can perfectly use Docs without these packages by setting the environment variable `PUBLISH_AS_MIT` to true. That way you'll build an image of the application without the features that are not MIT compatible. Read the [environment variables documentation](/docs/env.md) for more information.
 
 ## Getting started 🔧
 

src/backend/pyproject.toml

@@ -26,9 +26,9 @@ readme = "README.md"
 requires-python = ">=3.12"
 dependencies = [
     "beautifulsoup4==4.13.4",
-    "boto3==1.38.18",
+    "boto3==1.38.27",
     "Brotli==1.1.0",
-    "celery[redis]==5.5.2",
+    "celery[redis]==5.5.3",
     "django-configurations==2.5.1",
     "django-cors-headers==4.7.0",
     "django-countries==7.6.1",
@@ -46,19 +46,19 @@ dependencies = [
     "easy_thumbnails==2.10",
     "factory_boy==3.3.3",
     "gunicorn==23.0.0",
-    "jsonschema==4.23.0",
+    "jsonschema==4.24.0",
     "lxml==5.4.0",
     "markdown==3.8",
     "mozilla-django-oidc==4.0.1",
     "nested-multipart-parser==1.5.0",
-    "openai==1.79.0",
+    "openai==1.82.1",
     "psycopg[binary]==3.2.9",
-    "pycrdt==0.12.19", 
+    "pycrdt==0.12.20", 
     "PyJWT==2.10.1",
     "python-magic==0.4.27",
     "redis<6.0.0",
     "requests==2.32.3",
-    "sentry-sdk==2.28.0",
+    "sentry-sdk==2.29.1",
     "whitenoise==6.9.0",
 ]
 
@@ -72,10 +72,10 @@ dependencies = [
 dev = [
     "django-extensions==4.1",
     "django-test-migrations==1.5.0",
-    "drf-spectacular-sidecar==2025.5.1",
-    "freezegun==1.5.1",
+    "drf-spectacular-sidecar==2025.6.1",
+    "freezegun==1.5.2",
     "ipdb==0.13.13",
-    "ipython==9.2.0",
+    "ipython==9.3.0",
     "pyfakefs==5.8.0",
     "pylint-django==2.6.1",
     "pylint==3.3.7",
@@ -83,10 +83,10 @@ dev = [
     "pytest-django==4.11.1",
     "pytest==8.3.5",
     "pytest-icdiff==0.9",
-    "pytest-xdist==3.6.1",
+    "pytest-xdist==3.7.0",
     "responses==0.25.7",
-    "ruff==0.11.10",
-    "types-requests==2.32.0.20250515",
+    "ruff==0.11.12",
+    "types-requests==2.32.0.20250602",
 ]
 
 [tool.setuptools]

src/frontend/apps/impress/package.json

@@ -16,56 +16,56 @@
   },
   "dependencies": {
     "@ag-media/react-pdf-table": "2.0.3",
-    "@blocknote/code-block": "0.30.1",
-    "@blocknote/core": "0.30.1",
-    "@blocknote/mantine": "0.30.1",
-    "@blocknote/react": "0.30.1",
-    "@blocknote/xl-docx-exporter": "0.30.1",
-    "@blocknote/xl-pdf-exporter": "0.30.1",
+    "@blocknote/code-block": "0.31.1",
+    "@blocknote/core": "0.31.1",
+    "@blocknote/mantine": "0.31.1",
+    "@blocknote/react": "0.31.1",
+    "@blocknote/xl-docx-exporter": "0.31.1",
+    "@blocknote/xl-pdf-exporter": "0.31.1",
     "@emoji-mart/data": "1.2.1",
     "@emoji-mart/react": "1.1.1",
     "@fontsource/material-icons": "5.2.5",
     "@gouvfr-lasuite/integration": "1.0.3",
-    "@gouvfr-lasuite/ui-kit": "0.6.0",
+    "@gouvfr-lasuite/ui-kit": "0.7.0",
     "@hocuspocus/provider": "2.15.2",
     "@openfun/cunningham-react": "3.1.0",
     "@react-pdf/renderer": "4.3.0",
-    "@sentry/nextjs": "9.19.0",
-    "@tanstack/react-query": "5.76.1",
+    "@sentry/nextjs": "9.22.0",
+    "@tanstack/react-query": "5.77.1",
     "canvg": "4.0.3",
     "clsx": "2.1.1",
     "cmdk": "1.1.1",
     "crisp-sdk-web": "1.0.25",
     "docx": "9.5.0",
     "emoji-mart": "5.6.0",
-    "i18next": "25.1.3",
+    "i18next": "25.2.1",
     "i18next-browser-languagedetector": "8.1.0",
     "idb": "8.0.3",
     "lodash": "4.17.21",
     "luxon": "3.6.1",
     "next": "15.3.2",
-    "posthog-js": "1.242.2",
+    "posthog-js": "1.246.0",
     "react": "*",
-    "react-aria-components": "1.8.0",
+    "react-aria-components": "1.9.0",
     "react-dom": "*",
-    "react-i18next": "15.5.1",
+    "react-i18next": "15.5.2",
     "react-intersection-observer": "9.16.0",
     "react-select": "5.10.1",
     "styled-components": "6.1.18",
     "use-debounce": "10.0.4",
     "y-protocols": "1.0.6",
     "yjs": "*",
-    "zustand": "5.0.4"
+    "zustand": "5.0.5"
   },
   "devDependencies": {
     "@svgr/webpack": "8.1.0",
-    "@tanstack/react-query-devtools": "5.76.1",
+    "@tanstack/react-query-devtools": "5.77.1",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@types/jest": "29.5.14",
-    "@types/lodash": "4.17.16",
+    "@types/lodash": "4.17.17",
     "@types/luxon": "3.6.2",
     "@types/node": "*",
     "@types/react": "*",
@@ -82,7 +82,7 @@
     "stylelint-config-standard": "38.0.0",
     "stylelint-prettier": "5.0.3",
     "typescript": "*",
-    "webpack": "5.99.8",
+    "webpack": "5.99.9",
     "workbox-webpack-plugin": "7.1.0"
   }
 }

src/frontend/package.json

@@ -28,8 +28,8 @@
     "server:test": "yarn COLLABORATION_SERVER run test"
   },
   "resolutions": {
-    "@types/node": "22.15.19",
-    "@types/react": "19.1.4",
+    "@types/node": "22.15.21",
+    "@types/react": "19.1.5",
     "@types/react-dom": "19.1.5",
     "@typescript-eslint/eslint-plugin": "8.32.1",
     "@typescript-eslint/parser": "8.32.1",

src/frontend/servers/y-provider/package.json

@@ -16,10 +16,10 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@blocknote/server-util": "0.30.1",
+    "@blocknote/server-util": "0.31.1",
     "@hocuspocus/server": "2.15.2",
-    "@sentry/node": "9.19.0",
-    "@sentry/profiling-node": "9.19.0",
+    "@sentry/node": "9.22.0",
+    "@sentry/profiling-node": "9.22.0",
     "axios": "1.9.0",
     "cors": "2.8.5",
     "express": "5.1.0",

src/frontend/servers/y-provider/src/handlers/convertBlocksHandler.ts

@@ -0,0 +1,72 @@
+import {
+  BlockNoteSchema,
+  PartialBlock,
+  defaultBlockSpecs,
+} from '@blocknote/core';
+import { ServerBlockNoteEditor } from '@blocknote/server-util';
+import { Request, Response } from 'express';
+import * as Y from 'yjs';
+
+import { logger, toBase64 } from '@/utils';
+
+import { CalloutBlock, DividerBlock } from './custom-blocks';
+
+const blockNoteSchema = BlockNoteSchema.create({
+  blockSpecs: {
+    ...defaultBlockSpecs,
+    callout: CalloutBlock,
+    divider: DividerBlock,
+  },
+});
+
+type DocsBlockSchema = typeof blockNoteSchema.blockSchema;
+type DocsInlineContentSchema = typeof blockNoteSchema.inlineContentSchema;
+type DocsStyleSchema = typeof blockNoteSchema.styleSchema;
+
+interface ConversionRequest {
+  blocks: PartialBlock<DocsBlockSchema>[];
+}
+
+interface ConversionResponse {
+  content: string;
+}
+
+interface ErrorResponse {
+  error: string;
+}
+
+export const convertBlocksHandler = (
+  req: Request<
+    object,
+    ConversionResponse | ErrorResponse,
+    ConversionRequest,
+    object
+  >,
+  res: Response<ConversionResponse | ErrorResponse>,
+) => {
+  const blocks = req.body?.blocks;
+  if (!blocks) {
+    res.status(400).json({ error: 'Invalid request: missing content' });
+    return;
+  }
+
+  try {
+    // Create a server editor with custom block schema
+    const editor = ServerBlockNoteEditor.create<
+      DocsBlockSchema,
+      DocsInlineContentSchema,
+      DocsStyleSchema
+    >({
+      schema: blockNoteSchema,
+    });
+
+    // Create a Yjs Document from blocks, and encode it as a base64 string
+    const yDocument = editor.blocksToYDoc(blocks, 'document-store');
+    const content = toBase64(Y.encodeStateAsUpdate(yDocument));
+
+    res.status(200).json({ content });
+  } catch (e) {
+    logger('conversion failed:', e);
+    res.status(500).json({ error: String(e) });
+  }
+};

src/frontend/servers/y-provider/src/handlers/custom-blocks/CalloutBlock.tsx

@@ -0,0 +1,166 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { defaultProps, insertOrUpdateBlock } from '@blocknote/core';
+import { BlockTypeSelectItem, createReactBlockSpec } from '@blocknote/react';
+import { TFunction } from 'i18next';
+import React, { useEffect, useState } from 'react';
+import { css } from 'styled-components';
+
+import { Box, BoxButton, Icon } from '@/components';
+
+import { DocsBlockNoteEditor } from '../../types';
+import { EmojiPicker } from '../EmojiPicker';
+
+const calloutCustom = [
+  {
+    name: 'Callout',
+    id: 'callout',
+    emojis: [
+      'bulb',
+      'point_right',
+      'point_up',
+      'ok_hand',
+      'key',
+      'construction',
+      'warning',
+      'fire',
+      'pushpin',
+      'scissors',
+      'question',
+      'no_entry',
+      'no_entry_sign',
+      'alarm_clock',
+      'phone',
+      'rotating_light',
+      'recycle',
+      'white_check_mark',
+      'lock',
+      'paperclip',
+      'book',
+      'speaking_head_in_silhouette',
+      'arrow_right',
+      'loudspeaker',
+      'hammer_and_wrench',
+      'gear',
+    ],
+  },
+];
+
+const calloutCategories = [
+  'callout',
+  'people',
+  'nature',
+  'foods',
+  'activity',
+  'places',
+  'flags',
+  'objects',
+  'symbols',
+];
+
+export const CalloutBlock = createReactBlockSpec(
+  {
+    type: 'callout',
+    propSchema: {
+      textAlignment: defaultProps.textAlignment,
+      backgroundColor: defaultProps.backgroundColor,
+      emoji: { default: '💡' },
+    },
+    content: 'inline',
+  },
+  {
+    render: ({ block, editor, contentRef }) => {
+      const [openEmojiPicker, setOpenEmojiPicker] = useState(false);
+
+      const toggleEmojiPicker = (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setOpenEmojiPicker(!openEmojiPicker);
+      };
+
+      const onClickOutside = () => setOpenEmojiPicker(false);
+
+      const onEmojiSelect = ({ native }: { native: string }) => {
+        editor.updateBlock(block, { props: { emoji: native } });
+        setOpenEmojiPicker(false);
+      };
+
+      // Temporary: sets a yellow background color to a callout block when added by
+      // the user, while keeping the colors menu on the drag handler usable for
+      // this custom block.
+      useEffect(() => {
+        if (
+          !block.content.length &&
+          block.props.backgroundColor === 'default'
+        ) {
+          editor.updateBlock(block, { props: { backgroundColor: 'yellow' } });
+        }
+      }, [block, editor]);
+
+      return (
+        <Box
+          $padding="1rem"
+          $gap="0.625rem"
+          style={{
+            flexGrow: 1,
+            flexDirection: 'row',
+          }}
+        >
+          <BoxButton
+            contentEditable={false}
+            onClick={toggleEmojiPicker}
+            $css={css`
+              font-size: 1.125rem;
+              &:hover {
+                background-color: rgba(0, 0, 0, 0.1);
+              }
+            `}
+            $align="center"
+            $height="28px"
+            $width="28px"
+            $radius="4px"
+          >
+            {block.props.emoji}
+          </BoxButton>
+
+          {openEmojiPicker && (
+            <EmojiPicker
+              categories={calloutCategories}
+              custom={calloutCustom}
+              onClickOutside={onClickOutside}
+              onEmojiSelect={onEmojiSelect}
+            />
+          )}
+          <Box as="p" className="inline-content" ref={contentRef} />
+        </Box>
+      );
+    },
+  },
+);
+
+export const getCalloutReactSlashMenuItems = (
+  editor: DocsBlockNoteEditor,
+  t: TFunction<'translation', undefined>,
+  group: string,
+) => [
+  {
+    title: t('Callout'),
+    onItemClick: () => {
+      insertOrUpdateBlock(editor, {
+        type: 'callout',
+      });
+    },
+    aliases: ['callout', 'encadré', 'hervorhebung', 'benadrukken'],
+    group,
+    icon: <Icon iconName="lightbulb" $size="18px" />,
+    subtext: t('Add a callout block'),
+  },
+];
+
+export const getCalloutFormattingToolbarItems = (
+  t: TFunction<'translation', undefined>,
+): BlockTypeSelectItem => ({
+  name: t('Callout'),
+  type: 'callout',
+  icon: () => <Icon iconName="lightbulb" $size="16px" />,
+  isSelected: (block) => block.type === 'callout',
+});

src/frontend/servers/y-provider/src/handlers/custom-blocks/DividerBlock.tsx

@@ -0,0 +1,51 @@
+import { insertOrUpdateBlock } from '@blocknote/core';
+import { createReactBlockSpec } from '@blocknote/react';
+import { TFunction } from 'i18next';
+
+import { Box, Icon } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+
+import { DocsBlockNoteEditor } from '../../types';
+
+export const DividerBlock = createReactBlockSpec(
+  {
+    type: 'divider',
+    propSchema: {},
+    content: 'none',
+  },
+  {
+    render: () => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const { colorsTokens } = useCunninghamTheme();
+
+      return (
+        <Box
+          as="hr"
+          $width="100%"
+          $background={colorsTokens['greyscale-300']}
+          $margin="1rem 0"
+          $css={`border: 1px solid ${colorsTokens['greyscale-300']};`}
+        />
+      );
+    },
+  },
+);
+
+export const getDividerReactSlashMenuItems = (
+  editor: DocsBlockNoteEditor,
+  t: TFunction<'translation', undefined>,
+  group: string,
+) => [
+  {
+    title: t('Divider'),
+    onItemClick: () => {
+      insertOrUpdateBlock(editor, {
+        type: 'divider',
+      });
+    },
+    aliases: ['divider', 'hr', 'horizontal rule', 'line', 'separator'],
+    group,
+    icon: <Icon iconName="remove" $size="18px" />,
+    subtext: t('Add a horizontal line'),
+  },
+];

src/frontend/servers/y-provider/src/handlers/custom-blocks/index.ts

@@ -0,0 +1,2 @@
+export * from './CalloutBlock';
+export * from './DividerBlock';