🔖(minor) release 3.1.0

Added:
- 🚩(backend) add feature flag for the footer
- 🔧(backend) add view to manage footer json
- ✨(frontend) add custom css style
- 🚩(frontend) conditionally render AI button only
  when feature is enabled

Changed:
- 🚨(frontend) block button when creating doc

Fixed:
- 🐛(back) validate document content in serializer
- 🐛(frontend) fix selection click
  past end of content

.github/workflows/dependencies.yml

@@ -34,7 +34,7 @@ jobs:
           node-version: ${{ inputs.node_version }}
       - name: Install dependencies
         if: steps.front-node_modules.outputs.cache-hit != 'true'
-        run: cd src/frontend/ && AUTO_INSTALL_EXTRA_DEPS=true yarn install --frozen-lockfile
+        run: cd src/frontend/ && yarn install --frozen-lockfile
       - name: Cache install frontend
         if: steps.front-node_modules.outputs.cache-hit != 'true'
         uses: actions/cache@v4

CHANGELOG.md

@@ -8,10 +8,14 @@ and this project adheres to
 
 ## [Unreleased]
 
+## [3.1.0] - 2025-04-07
+
 ## Added
 
 - 🚩(backend) add feature flag for the footer #841
 - 🔧(backend) add view to manage footer json #841
+- ✨(frontend) add custom css style #771
+- 🚩(frontend) conditionally render AI button only when feature is enabled #814
 
 ## Changed
 
@@ -20,13 +24,13 @@ and this project adheres to
 ## Fixed
 
 - 🐛(back) validate document content in serializer #822
+- 🐛(frontend) fix selection click past end of content #840
 
 ## [3.0.0] - 2025-03-28
 
 ## Added
 
 - 📄(legal) Require contributors to sign a DCO #779
-- ✨(frontend) add custom css style #771
 
 ## Changed
 
@@ -35,7 +39,6 @@ and this project adheres to
 
 ## Fixed
 
-- 🐛(frontend) conditionally render AI button only when feature is enabled #814
 - 🐛(backend) compute ancestor_links in get_abilities if needed #725
 - 🔒️(back) restrict access to document accesses #801
 
@@ -521,7 +524,8 @@ and this project adheres to
 - ✨(frontend) Coming Soon page (#67)
 - 🚀 Impress, project to manage your documents easily and collaboratively.
 
-[unreleased]: https://github.com/numerique-gouv/impress/compare/v3.0.0...main
+[unreleased]: https://github.com/numerique-gouv/impress/compare/v3.1.0...main
+[v3.1.0]: https://github.com/numerique-gouv/impress/releases/v3.1.0
 [v3.0.0]: https://github.com/numerique-gouv/impress/releases/v3.0.0
 [v2.6.0]: https://github.com/numerique-gouv/impress/releases/v2.6.0
 [v2.5.0]: https://github.com/numerique-gouv/impress/releases/v2.5.0

docker-compose.yml

@@ -158,7 +158,6 @@ services:
         Y_PROVIDER_URL: "ws://localhost:4444"
         MEDIA_URL: "http://localhost:8083"
         SW_DEACTIVATED: "true"
-        AUTO_INSTALL_EXTRA_DEPS: "true"
     image: impress:frontend-development
     ports:
       - "3000:3000"

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "impress"
-version = "3.0.0"
+version = "3.1.0"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
     "Development Status :: 5 - Production/Stable",

src/frontend/Dockerfile

@@ -1,16 +1,13 @@
 FROM node:20-alpine AS frontend-deps
 
-ARG AUTO_INSTALL_EXTRA_DEPS=false
-
 WORKDIR /home/frontend/
 
 COPY ./src/frontend/package.json ./package.json
-COPY ./src/frontend/bin/conditional-install.js ./bin/conditional-install.js
 COPY ./src/frontend/yarn.lock ./yarn.lock
 COPY ./src/frontend/apps/impress/package.json ./apps/impress/package.json
 COPY ./src/frontend/packages/eslint-config-impress/package.json ./packages/eslint-config-impress/package.json
 
-RUN AUTO_INSTALL_EXTRA_DEPS=${AUTO_INSTALL_EXTRA_DEPS} yarn install --frozen-lockfile
+RUN yarn install --frozen-lockfile
 
 COPY .dockerignore ./.dockerignore
 COPY ./src/frontend/.prettierrc.js ./.prettierrc.js

src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts

@@ -134,7 +134,7 @@ test.describe('Config', () => {
     await createDoc(page, 'doc-ai-feature', browserName, 1);
 
     await page.locator('.bn-block-outer').last().fill('Anything');
-    await page.getByText('Anything').dblclick();
+    await page.getByText('Anything').selectText();
     expect(
       await page.locator('button[data-test="convertMarkdown"]').count(),
     ).toBe(1);

src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts

@@ -25,7 +25,11 @@ test.describe('Doc Editor', () => {
     await editor.click();
     await editor.fill('test content');
 
-    await editor.getByText('test content').dblclick();
+    await editor
+      .getByText('test content', {
+        exact: true,
+      })
+      .selectText();
 
     const toolbar = page.locator('.bn-formatting-toolbar');
     await expect(toolbar.locator('button[data-test="bold"]')).toBeVisible();
@@ -126,7 +130,7 @@ test.describe('Doc Editor', () => {
 
     await expect(editor.getByText('[test markdown]')).toBeVisible();
 
-    await editor.getByText('[test markdown]').dblclick();
+    await editor.getByText('[test markdown]').selectText();
     await page.locator('button[data-test="convertMarkdown"]').click();
 
     await expect(editor.getByText('[test markdown]')).toBeHidden();
@@ -219,11 +223,8 @@ test.describe('Doc Editor', () => {
     await editor.fill('Hello World Doc persisted 2');
     await expect(editor.getByText('Hello World Doc persisted 2')).toBeVisible();
 
-    await page.goto('/');
-
-    await goToGridDoc(page, {
-      title: doc,
-    });
+    const urlDoc = page.url();
+    await page.goto(urlDoc);
 
     await expect(editor.getByText('Hello World Doc persisted 2')).toBeVisible();
   });
@@ -297,7 +298,7 @@ test.describe('Doc Editor', () => {
     await page.locator('.bn-block-outer').last().fill('Hello World');
 
     const editor = page.locator('.ProseMirror');
-    await editor.getByText('Hello').dblclick();
+    await editor.getByText('Hello').selectText();
 
     await page.getByRole('button', { name: 'AI' }).click();
 
@@ -380,7 +381,7 @@ test.describe('Doc Editor', () => {
       await page.locator('.bn-block-outer').last().fill('Hello World');
 
       const editor = page.locator('.ProseMirror');
-      await editor.getByText('Hello').dblclick();
+      await editor.getByText('Hello').selectText();
 
       /* eslint-disable playwright/no-conditional-expect */
       /* eslint-disable playwright/no-conditional-in-test */

src/frontend/apps/e2e/__tests__/app-impress/doc-search.spec.ts

@@ -86,7 +86,7 @@ test.describe('Document search', () => {
     const editor = page.locator('.ProseMirror');
     await editor.click();
     await editor.fill('Hello world');
-    await editor.getByText('Hello world').dblclick();
+    await editor.getByText('Hello world').selectText();
 
     await page.keyboard.press('Control+k');
     await expect(page.getByRole('textbox', { name: 'Edit URL' })).toBeVisible();

src/frontend/apps/e2e/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-e2e",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "private": true,
   "scripts": {
     "lint": "eslint . --ext .ts",

src/frontend/apps/impress/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-impress",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -19,6 +19,8 @@
     "@blocknote/core": "0.23.2-hotfix.0",
     "@blocknote/mantine": "0.23.2-hotfix.0",
     "@blocknote/react": "0.23.2-hotfix.0",
+    "@blocknote/xl-docx-exporter": "0.23.2-hotfix.0",
+    "@blocknote/xl-pdf-exporter": "0.23.2-hotfix.0",
     "@fontsource/material-icons": "5.2.5",
     "@gouvfr-lasuite/integration": "1.0.2",
     "@gouvfr-lasuite/ui-kit": "0.1.3",
@@ -28,6 +30,7 @@
     "@sentry/nextjs": "9.3.0",
     "@tanstack/react-query": "5.67.1",
     "canvg": "4.0.3",
+    "clsx": "2.1.1",
     "cmdk": "1.0.4",
     "crisp-sdk-web": "1.0.25",
     "docx": "9.1.1",
@@ -77,9 +80,5 @@
     "typescript": "*",
     "webpack": "5.98.0",
     "workbox-webpack-plugin": "7.1.0"
-  },
-  "extraDependencies": {
-    "@blocknote/xl-docx-exporter": "0.23.2-hotfix.0",
-    "@blocknote/xl-pdf-exporter": "0.23.2-hotfix.0"
   }
 }

src/frontend/apps/impress/src/components/Box.tsx

@@ -24,6 +24,7 @@ export interface BoxProps {
   $hasTransition?: boolean | 'slow';
   $height?: CSSProperties['height'];
   $justify?: CSSProperties['justifyContent'];
+  $opacity?: CSSProperties['opacity'];
   $overflow?: CSSProperties['overflow'];
   $margin?: MarginPadding;
   $maxHeight?: CSSProperties['maxHeight'];
@@ -65,6 +66,7 @@ export const Box = styled('div')<BoxProps>`
   ${({ $minHeight }) => $minHeight && `min-height: ${$minHeight};`}
   ${({ $maxWidth }) => $maxWidth && `max-width: ${$maxWidth};`}
   ${({ $minWidth }) => $minWidth && `min-width: ${$minWidth};`}
+  ${({ $opacity }) => $opacity && `opacity: ${$opacity};`}
   ${({ $overflow }) => $overflow && `overflow: ${$overflow};`}
   ${({ $padding }) => $padding && stylesPadding($padding)}
   ${({ $position }) => $position && `position: ${$position};`}

src/frontend/apps/impress/src/components/Icon.tsx

@@ -1,42 +1,24 @@
+import clsx from 'clsx';
 import { css } from 'styled-components';
 
 import { Text, TextType } from '@/components';
-import { useCunninghamTheme } from '@/cunningham';
 
 type IconProps = TextType & {
   iconName: string;
+  variant?: 'filled' | 'outlined';
 };
-export const Icon = ({ iconName, ...textProps }: IconProps) => {
-  return (
-    <Text $isMaterialIcon {...textProps}>
-      {iconName}
-    </Text>
-  );
-};
-
-interface IconBGProps extends TextType {
-  iconName: string;
-}
-
-export const IconBG = ({ iconName, ...textProps }: IconBGProps) => {
-  const { colorsTokens } = useCunninghamTheme();
-
+export const Icon = ({
+  iconName,
+  variant = 'outlined',
+  ...textProps
+}: IconProps) => {
   return (
     <Text
-      $isMaterialIcon
-      $size="36px"
-      $theme="primary"
-      $variation="600"
-      $background={colorsTokens()['primary-bg']}
-      $css={`
-        border: 1px solid ${colorsTokens()['primary-200']}; 
-        user-select: none;
-      `}
-      $radius="12px"
-      $padding="4px"
-      $margin="auto"
       {...textProps}
-      className={`--docs--icon-bg ${textProps.className || ''}`}
+      className={clsx('--docs--icon-bg', textProps.className, {
+        'material-icons-filled': variant === 'filled',
+        'material-icons': variant === 'outlined',
+      })}
     >
       {iconName}
     </Text>
@@ -49,15 +31,13 @@ type IconOptionsProps = TextType & {
 
 export const IconOptions = ({ isHorizontal, ...props }: IconOptionsProps) => {
   return (
-    <Text
+    <Icon
       {...props}
-      $isMaterialIcon
+      iconName={isHorizontal ? 'more_horiz' : 'more_vert'}
       $css={css`
         user-select: none;
         ${props.$css}
       `}
-    >
-      {isHorizontal ? 'more_horiz' : 'more_vert'}
-    </Text>
+    />
   );
 };

src/frontend/apps/impress/src/components/Text.tsx

@@ -11,7 +11,6 @@ type TextSizes = keyof typeof sizes;
 export interface TextProps extends BoxProps {
   as?: 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   $elipsis?: boolean;
-  $isMaterialIcon?: boolean;
   $weight?: CSSProperties['fontWeight'];
   $textAlign?: CSSProperties['textAlign'];
   $size?: TextSizes | (string & {});
@@ -57,14 +56,14 @@ export const TextStyled = styled(Box)<TextProps>`
 `;
 
 const Text = forwardRef<HTMLElement, ComponentPropsWithRef<typeof TextStyled>>(
-  ({ className, $isMaterialIcon, ...props }, ref) => {
+  ({ className, ...props }, ref) => {
     return (
       <TextStyled
         ref={ref}
         as="span"
         $theme="greyscale"
         $variation="text"
-        className={`${className || ''}${$isMaterialIcon ? ' material-icons' : ''}`}
+        className={className}
         {...props}
       />
     );

src/frontend/apps/impress/src/cunningham/cunningham-style.css

@@ -1,3 +1,6 @@
+@import url('@gouvfr-lasuite/ui-kit/style');
+@import url('./cunningham-tokens.css');
+
 :root {
   /**
   * Input
@@ -33,3 +36,10 @@
     --c--components--button--border-radius
   );
 }
+
+/**
+ * Tooltip
+*/
+.c__tooltip {
+  padding: 4px 6px;
+}

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/AIButton.tsx

@@ -14,7 +14,7 @@ import { PropsWithChildren, ReactNode, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { isAPIError } from '@/api';
-import { Box, Text } from '@/components';
+import { Box, Icon } from '@/components';
 import { useDocOptions, useDocStore } from '@/docs/doc-management/';
 
 import {
@@ -108,11 +108,7 @@ export function AIGroupButton() {
           data-test="ai-actions"
           label="AI"
           mainTooltip={t('AI Actions')}
-          icon={
-            <Text $isMaterialIcon $size="l">
-              auto_awesome
-            </Text>
-          }
+          icon={<Icon iconName="auto_awesome" $size="l" />}
         />
       </Components.Generic.Menu.Trigger>
       <Components.Generic.Menu.Dropdown
@@ -124,66 +120,42 @@ export function AIGroupButton() {
             <AIMenuItemTransform
               action="prompt"
               docId={currentDoc.id}
-              icon={
-                <Text $isMaterialIcon $size="s">
-                  text_fields
-                </Text>
-              }
+              icon={<Icon iconName="text_fields" $size="s" />}
             >
               {t('Use as prompt')}
             </AIMenuItemTransform>
             <AIMenuItemTransform
               action="rephrase"
               docId={currentDoc.id}
-              icon={
-                <Text $isMaterialIcon $size="s">
-                  refresh
-                </Text>
-              }
+              icon={<Icon iconName="refresh" $size="s" />}
             >
               {t('Rephrase')}
             </AIMenuItemTransform>
             <AIMenuItemTransform
               action="summarize"
               docId={currentDoc.id}
-              icon={
-                <Text $isMaterialIcon $size="s">
-                  summarize
-                </Text>
-              }
+              icon={<Icon iconName="summarize" $size="s" />}
             >
               {t('Summarize')}
             </AIMenuItemTransform>
             <AIMenuItemTransform
               action="correct"
               docId={currentDoc.id}
-              icon={
-                <Text $isMaterialIcon $size="s">
-                  check
-                </Text>
-              }
+              icon={<Icon iconName="check" $size="s" />}
             >
               {t('Correct')}
             </AIMenuItemTransform>
             <AIMenuItemTransform
               action="beautify"
               docId={currentDoc.id}
-              icon={
-                <Text $isMaterialIcon $size="s">
-                  draw
-                </Text>
-              }
+              icon={<Icon iconName="draw" $size="s" />}
             >
               {t('Beautify')}
             </AIMenuItemTransform>
             <AIMenuItemTransform
               action="emojify"
               docId={currentDoc.id}
-              icon={
-                <Text $isMaterialIcon $size="s">
-                  emoji_emotions
-                </Text>
-              }
+              icon={<Icon iconName="emoji_emotions" $size="s" />}
             >
               {t('Emojify')}
             </AIMenuItemTransform>
@@ -197,9 +169,7 @@ export function AIGroupButton() {
                 subTrigger={true}
               >
                 <Box $direction="row" $gap="0.6rem">
-                  <Text $isMaterialIcon $size="s">
-                    translate
-                  </Text>
+                  <Icon iconName="translate" $size="s" />
                   {t('Language')}
                 </Box>
               </Components.Generic.Menu.Item>

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/ModalConfirmDownloadUnsafe.tsx

@@ -1,7 +1,7 @@
 import { Button, Modal, ModalSize } from '@openfun/cunningham-react';
 import { useTranslation } from 'react-i18next';
 
-import { Box, Text } from '@/components';
+import { Box, Icon, Text } from '@/components';
 
 interface ModalConfirmDownloadUnsafeProps {
   onClose: () => void;
@@ -52,9 +52,7 @@ export const ModalConfirmDownloadUnsafe = ({
           $variation="1000"
           $direction="row"
         >
-          <Text $isMaterialIcon $theme="warning">
-            warning
-          </Text>
+          <Icon iconName="warning" $theme="warning" />
           {t('Warning')}
         </Text>
       }

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

@@ -2,7 +2,7 @@ import { insertOrUpdateBlock } from '@blocknote/core';
 import { createReactBlockSpec } from '@blocknote/react';
 import { TFunction } from 'i18next';
 
-import { Box, Text } from '@/components';
+import { Box, Icon } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 
 import { DocsBlockNoteEditor } from '../../types';
@@ -45,11 +45,7 @@ export const getDividerReactSlashMenuItems = (
     },
     aliases: ['divider', 'hr', 'horizontal rule', 'line', 'separator'],
     group,
-    icon: (
-      <Text $isMaterialIcon $size="18px">
-        remove
-      </Text>
-    ),
+    icon: <Icon iconName="remove" $size="18px" />,
     subtext: t('Add a horizontal line'),
   },
 ];

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

@@ -1,9 +1,8 @@
 import { defaultProps, insertOrUpdateBlock } from '@blocknote/core';
 import { BlockTypeSelectItem, createReactBlockSpec } from '@blocknote/react';
 import { TFunction } from 'i18next';
-import React from 'react';
 
-import { Box, Text } from '@/components';
+import { Box, Icon } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 
 import { DocsBlockNoteEditor } from '../../types';
@@ -54,11 +53,7 @@ export const getQuoteReactSlashMenuItems = (
     },
     aliases: ['quote', 'blockquote', 'citation'],
     group,
-    icon: (
-      <Text $isMaterialIcon $size="18px">
-        format_quote
-      </Text>
-    ),
+    icon: <Icon iconName="format_quote" $size="18px" />,
     subtext: t('Add a quote block'),
   },
 ];
@@ -68,10 +63,6 @@ export const getQuoteFormattingToolbarItems = (
 ): BlockTypeSelectItem => ({
   name: t('Quote'),
   type: 'quote',
-  icon: () => (
-    <Text $isMaterialIcon $size="16px">
-      format_quote
-    </Text>
-  ),
+  icon: () => <Icon iconName="format_quote" $size="16px" />,
   isSelected: (block) => block.type === 'quote',
 });

src/frontend/apps/impress/src/features/docs/doc-editor/hook/useSaveDoc.tsx

@@ -43,20 +43,22 @@ const useSaveDoc = (docId: string, yDoc: Y.Doc, canSave: boolean) => {
 
   const saveDoc = useCallback(() => {
     if (!canSave || !isLocalChange) {
-      return;
+      return false;
     }
 
     updateDoc({
       id: docId,
       content: toBase64(Y.encodeStateAsUpdate(yDoc)),
     });
+
+    return true;
   }, [canSave, yDoc, docId, isLocalChange, updateDoc]);
 
   const router = useRouter();
 
   useEffect(() => {
     const onSave = (e?: Event) => {
-      saveDoc();
+      const isSaving = saveDoc();
 
       /**
        * Firefox does not trigger the request everytime the user leaves the page.
@@ -65,7 +67,12 @@ const useSaveDoc = (docId: string, yDoc: Y.Doc, canSave: boolean) => {
        * if he wants to leave the page, by adding the popup, we let the time to the
        * request to be sent, and intercepted by the service worker (for the offline part).
        */
-      if (typeof e !== 'undefined' && e.preventDefault && isFirefox()) {
+      if (
+        isSaving &&
+        typeof e !== 'undefined' &&
+        e.preventDefault &&
+        isFirefox()
+      ) {
         e.preventDefault();
       }
     };

src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx

@@ -105,6 +105,12 @@ export const cssEditor = (readonly: boolean) => css`
     padding: 2px;
     border-radius: 4px;
   }
+  & .bn-inline-content {
+    width: 100%;
+  }
+  .bn-block-content[data-content-type='checkListItem'] > div {
+    width: 100%;
+  }
 
   @media screen and (width <= 768px) {
     & .bn-editor {

src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionList.tsx

@@ -3,7 +3,14 @@ import { DateTime } from 'luxon';
 import { useTranslation } from 'react-i18next';
 
 import { APIError } from '@/api';
-import { Box, BoxButton, InfiniteScroll, Text, TextErrors } from '@/components';
+import {
+  Box,
+  BoxButton,
+  Icon,
+  InfiniteScroll,
+  Text,
+  TextErrors,
+} from '@/components';
 import { Doc } from '@/docs/doc-management';
 import { useDate } from '@/hook';
 
@@ -68,9 +75,7 @@ const VersionListState = ({
             causes={error.cause}
             icon={
               error.status === 502 ? (
-                <Text $isMaterialIcon $theme="danger">
-                  wifi_off
-                </Text>
+                <Icon iconName="wifi_off" $theme="danger" />
               ) : undefined
             }
           />

src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx

@@ -76,11 +76,7 @@ export default function HomeBanner() {
           ) : (
             <Button
               onClick={() => gotoLogin()}
-              icon={
-                <Text $isMaterialIcon $color="white">
-                  bolt
-                </Text>
-              }
+              icon={<Icon iconName="bolt" $color="white" />}
             >
               {t('Start Writing')}
             </Button>

src/frontend/apps/impress/src/features/home/components/HomeContent.tsx

@@ -2,7 +2,7 @@ import { Button } from '@openfun/cunningham-react';
 import { Trans, useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
-import { Box, Text } from '@/components';
+import { Box, Icon, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { Footer } from '@/features/footer';
 import { LeftPanel } from '@/features/left-panel';
@@ -155,11 +155,7 @@ export function HomeContent() {
                       $margin={{ top: 'small' }}
                     >
                       <Button
-                        icon={
-                          <Text $isMaterialIcon $color="white">
-                            chat
-                          </Text>
-                        }
+                        icon={<Icon iconName="chat" $color="white" />}
                         href="https://matrix.to/#/#docs-official:matrix.org"
                         target="_blank"
                       >

src/frontend/apps/impress/src/features/language/LanguagePicker.tsx

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
-import { DropdownMenu, Text } from '@/components/';
+import { DropdownMenu, Icon, Text } from '@/components/';
 import { useConfig } from '@/core';
 
 import { useLanguageSynchronizer } from './hooks/useLanguageSynchronizer';
@@ -72,9 +72,7 @@ export const LanguagePicker = () => {
         $gap="0.5rem"
         className="--docs--language-picker-text"
       >
-        <Text $isMaterialIcon $color="inherit" $size="xl">
-          translate
-        </Text>
+        <Icon iconName="translate" $color="inherit" $size="xl" />
         {currentLanguageLabel}
       </Text>
     </DropdownMenu>

src/frontend/apps/impress/src/pages/403.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 import img403 from '@/assets/icons/icon-403.png';
-import { Box, StyledLink, Text } from '@/components';
+import { Box, Icon, StyledLink, Text } from '@/components';
 import { PageLayout } from '@/layouts';
 import { NextPageWithLayout } from '@/types/next';
 
@@ -38,13 +38,7 @@ const Page: NextPageWithLayout = () => {
         </Text>
 
         <StyledLink href="/">
-          <StyledButton
-            icon={
-              <Text $isMaterialIcon $color="white">
-                house
-              </Text>
-            }
-          >
+          <StyledButton icon={<Icon iconName="house" $color="white" />}>
             {t('Home')}
           </StyledButton>
         </StyledLink>

src/frontend/apps/impress/src/pages/404.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 import Icon404 from '@/assets/icons/icon-404.svg';
-import { Box, StyledLink, Text } from '@/components';
+import { Box, Icon, StyledLink, Text } from '@/components';
 import { PageLayout } from '@/layouts';
 import { NextPageWithLayout } from '@/types/next';
 
@@ -33,13 +33,7 @@ const Page: NextPageWithLayout = () => {
 
       <Box $margin={{ top: 'large' }}>
         <StyledLink href="/">
-          <StyledButton
-            icon={
-              <Text $isMaterialIcon $color="white">
-                house
-              </Text>
-            }
-          >
+          <StyledButton icon={<Icon iconName="house" $color="white" />}>
             {t('Home')}
           </StyledButton>
         </StyledLink>

src/frontend/apps/impress/src/pages/_app.tsx

@@ -1,6 +1,5 @@
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
-import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { AppProvider } from '@/core/';
@@ -19,14 +18,6 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
   const getLayout = Component.getLayout ?? ((page) => page);
   const { t } = useTranslation();
 
-  useEffect(() => {
-    console.log(
-      `%c
-                                                                                                                                                \r\n \u2588\u2588\u2557    \u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557      \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2557   \u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557    \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557     \u2588\u2588\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557    \u2588\u2588\u2557    \u2588\u2588\u2557    \u2588\u2588\u2557 \r\n \u2588\u2588\u2551    \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2551     \u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D    \u255A\u2550\u2550\u2588\u2588\u2554\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557    \u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D    \u2588\u2588\u2551    \u2588\u2588\u2551    \u2588\u2588\u2551 \r\n \u2588\u2588\u2551 \u2588\u2557 \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2551     \u2588\u2588\u2551     \u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2554\u2588\u2588\u2588\u2588\u2554\u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2557         \u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551    \u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2551     \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557    \u2588\u2588\u2551    \u2588\u2588\u2551    \u2588\u2588\u2551 \r\n \u2588\u2588\u2551\u2588\u2588\u2588\u2557\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u255D  \u2588\u2588\u2551     \u2588\u2588\u2551     \u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2551\u255A\u2588\u2588\u2554\u255D\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u255D         \u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551    \u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2551     \u255A\u2550\u2550\u2550\u2550\u2588\u2588\u2551    \u255A\u2550\u255D    \u255A\u2550\u255D    \u255A\u2550\u255D \r\n \u255A\u2588\u2588\u2588\u2554\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2551 \u255A\u2550\u255D \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557       \u2588\u2588\u2551   \u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D    \u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551    \u2588\u2588\u2557    \u2588\u2588\u2557    \u2588\u2588\u2557 \r\n  \u255A\u2550\u2550\u255D\u255A\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u255D     \u255A\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D       \u255A\u2550\u255D    \u255A\u2550\u2550\u2550\u2550\u2550\u255D     \u255A\u2550\u2550\u2550\u2550\u2550\u255D  \u255A\u2550\u2550\u2550\u2550\u2550\u255D  \u255A\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D    \u255A\u2550\u255D    \u255A\u2550\u255D    \u255A\u2550\u255D \r\n                                                                                                                                                \r`,
-      'font-size: 11px;line-height:15px;background-image: linear-gradient(#000091, #005f91);color: transparent;background-clip: text;',
-    );
-  }, []);
-
   return (
     <>
       <Head>
@@ -38,6 +29,19 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
           )}
         />
         <link rel="icon" href="/favicon.ico" sizes="any" />
+        <link rel="icon" href="/favicon.png" type="image/png" />
+        <link
+          rel="icon"
+          href="/favicon.png"
+          type="image/png"
+          media="(prefers-color-scheme: light)"
+        />
+        <link
+          rel="icon"
+          href="/favicon-dark.png"
+          type="image/png"
+          media="(prefers-color-scheme: dark)"
+        />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
       <AppProvider>{getLayout(<Component {...pageProps} />)}</AppProvider>

src/frontend/apps/impress/src/pages/docs/[id]/index.tsx

@@ -5,7 +5,7 @@ import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Box, Text, TextErrors } from '@/components';
+import { Box, Icon, TextErrors } from '@/components';
 import { DocEditor } from '@/docs/doc-editor';
 import {
   Doc,
@@ -126,9 +126,7 @@ const DocPage = ({ id }: DocProps) => {
           causes={error.cause}
           icon={
             error.status === 502 ? (
-              <Text $isMaterialIcon $theme="danger">
-                wifi_off
-              </Text>
+              <Icon iconName="wifi_off" $theme="danger" />
             ) : undefined
           }
         />

src/frontend/apps/impress/src/pages/globals.css

@@ -1,6 +1,4 @@
-@import url('@gouvfr-lasuite/ui-kit/style');
-@import url('../cunningham/cunningham-tokens.css');
-@import url('../cunningham/cunningham-custom-tokens.css');
+@import url('../cunningham/cunningham-style.css');
 @import url('@fontsource/material-icons');
 
 body {

src/frontend/apps/impress/src/pages/offline/index.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 import Icon404 from '@/assets/icons/icon-404.svg';
-import { Box, StyledLink, Text } from '@/components';
+import { Box, Icon, StyledLink, Text } from '@/components';
 import { MainLayout } from '@/layouts';
 import { NextPageWithLayout } from '@/types/next';
 
@@ -31,13 +31,7 @@ const Page: NextPageWithLayout = () => {
 
       <Box $margin={{ top: 'large' }}>
         <StyledLink href="/">
-          <StyledButton
-            icon={
-              <Text $isMaterialIcon $color="white">
-                house
-              </Text>
-            }
-          >
+          <StyledButton icon={<Icon iconName="house" $color="white" />}>
             {t('Home')}
           </StyledButton>
         </StyledLink>

src/frontend/bin/conditional-install.js

@@ -1,139 +0,0 @@
-#!/usr/bin/env node
-
-const fs = require('fs');
-const path = require('path');
-const { execSync } = require('child_process');
-const readline = require('readline');
-
-// Check if AUTO_INSTALL_EXTRA_DEPS is explicitly set to false
-if (process.env.AUTO_INSTALL_EXTRA_DEPS === 'false') {
-  console.log('AUTO_INSTALL_EXTRA_DEPS is set to false, skipping script execution');
-  process.exit(0);
-}
-
-// Get the workspace root directory
-const workspaceRoot = process.cwd();
-
-// Check if AUTO_INSTALL_EXTRA_DEPS environment variable is set to bypass prompts
-const autoMode = process.env.AUTO_INSTALL_EXTRA_DEPS === 'true';
-
-// Create readline interface for user prompts
-const rl = readline.createInterface({
-  input: process.stdin,
-  output: process.stdout
-});
-
-// Function to prompt user for confirmation
-function promptUser(question) {
-  return new Promise((resolve) => {
-    rl.question(question, (answer) => {
-      resolve(answer.toLowerCase().startsWith('y'));
-    });
-  });
-}
-
-// Function to find all package.json files in the apps directory
-function findPackageJsonFiles(directory) {
-  const appsDir = path.join(workspaceRoot, directory);
-  
-  // Check if the directory exists
-  if (!fs.existsSync(appsDir)) {
-    console.log(`Directory ${directory} does not exist, skipping...`);
-    return [];
-  }
-  
-  const packageJsonFiles = [];
-  
-  // Read all items in the directory
-  const items = fs.readdirSync(appsDir);
-  
-  for (const item of items) {
-    const itemPath = path.join(appsDir, item);
-    const stat = fs.statSync(itemPath);
-    
-    if (stat.isDirectory()) {
-      // Check if this directory has a package.json
-      const packageJsonPath = path.join(itemPath, 'package.json');
-      if (fs.existsSync(packageJsonPath)) {
-        packageJsonFiles.push(packageJsonPath);
-        // Skip searching in subdirectories once a package.json is found
-        continue;
-      }
-      
-      // Only search subdirectories if no package.json was found in this directory
-      packageJsonFiles.push(...findPackageJsonFiles(path.join(directory, item)));
-    }
-  }
-  
-  return packageJsonFiles;
-}
-
-// Find all package.json files in the apps directory
-const packageJsonFiles = findPackageJsonFiles('apps');
-
-if (packageJsonFiles.length === 0) {
-  console.log('No package.json files found in the apps directory');
-  process.exit(0);
-}
-
-console.log(`Found ${packageJsonFiles.length} package.json files in the apps directory`);
-
-// Process each package.json file
-async function processPackageJsonFiles() {
-  for (const packageJsonPath of packageJsonFiles) {
-    try {
-      const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
-      
-      // Check if extraDependencies exists
-      if (packageJson.extraDependencies && Object.keys(packageJson.extraDependencies).length > 0) {
-        console.log(`Found extraDependencies in ${packageJsonPath}, installing...`);
-        
-        // Process each dependency individually
-        for (const [pkg, version] of Object.entries(packageJson.extraDependencies)) {
-          const dependencyToInstall = `${pkg}@${version}`;
-          
-          // Prompt user if not in auto mode
-          let shouldInstall = autoMode;
-          if (!autoMode) {
-            shouldInstall = await promptUser(`
-Do you want to install ${dependencyToInstall}? (y/n): 
-Note that these packages are dual-licensed by Blocknotejs 
-under AGPL-3.0 or a proprietary license. If you choose 
-to install them, please ensure you fulfill your licensing 
-obligations with respect to BlockNoteJS
-`);
-          }
-          
-          if (shouldInstall) {
-            // Install the dependency using npm install
-            try {
-              console.log(`Installing: ${dependencyToInstall}`);
-              execSync(`npm install --no-save --ignore-scripts --no-audit ${dependencyToInstall}`, { stdio: 'inherit' });
-              console.log(`Extra dependency ${dependencyToInstall} installed successfully`);
-            } catch (error) {
-              console.error(`Failed to install extra dependency ${dependencyToInstall}:`, error.message);
-              // Continue with other dependencies even if one fails
-            }
-          } else {
-            console.log(`Skipping installation of ${dependencyToInstall}`);
-          }
-        }
-      } else {
-        console.log(`No extraDependencies found in ${packageJsonPath}, skipping installation`);
-      }
-    } catch (error) {
-      console.error(`Error reading or parsing ${packageJsonPath}:`, error.message);
-      // Continue with other package.json files even if one fails
-    }
-  }
-  
-  console.log('Finished processing all package.json files');
-  rl.close();
-}
-
-// Run the async function
-processPackageJsonFiles().catch(error => {
-  console.error('An error occurred:', error);
-  rl.close();
-  process.exit(1);
-});

src/frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "impress",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "private": true,
   "workspaces": {
     "packages": [
@@ -25,8 +25,7 @@
     "i18n:deploy": "yarn I18N run format-deploy && yarn APP_IMPRESS prettier",
     "i18n:test": "yarn I18N run test",
     "test": "yarn server:test && yarn app:test",
-    "server:test": "yarn COLLABORATION_SERVER run test",
-    "postinstall": "node ./bin/conditional-install.js"
+    "server:test": "yarn COLLABORATION_SERVER run test"
   },
   "resolutions": {
     "@types/node": "22.13.9",

src/frontend/packages/eslint-config-impress/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-impress",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "license": "MIT",
   "scripts": {
     "lint": "eslint --ext .js ."

src/frontend/packages/i18n/package.json

@@ -1,6 +1,6 @@
 {
   "name": "packages-i18n",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "private": true,
   "scripts": {
     "extract-translation": "yarn extract-translation:impress",

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

@@ -1,6 +1,6 @@
 {
   "name": "server-y-provider",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Y.js provider for docs",
   "repository": "https://github.com/numerique-gouv/impress",
   "license": "MIT",

src/helm/helmfile.yaml

@@ -1,7 +1,7 @@
 environments:
   dev:
     values:
-      - version: 3.0.0
+      - version: 3.1.0
 ---
 repositories:
 - name: bitnami

src/helm/impress/Chart.yaml

@@ -1,5 +1,5 @@
 apiVersion: v2
 type: application
 name: docs
-version: 3.0.0
+version: 3.1.0
 appVersion: latest

src/mail/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mail_mjml",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "An util to generate html and text django's templates from mjml templates",
   "type": "module",
   "dependencies": {