🌐(frontend) add localization to editor

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to
 - ✨Add link public/authenticated/restricted access with read/editor roles #234
 - ✨(frontend) add copy link button #235
 - 🛂(frontend) access public docs without being logged #235
+- 🌐(frontend) add localization to editor #268
 
 ## Changed
 

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

@@ -1,4 +1,7 @@
-import { BlockNoteEditor as BlockNoteEditorCore } from '@blocknote/core';
+import {
+  BlockNoteEditor as BlockNoteEditorCore,
+  locales,
+} from '@blocknote/core';
 import '@blocknote/core/fonts/inter.css';
 import { BlockNoteView } from '@blocknote/mantine';
 import '@blocknote/mantine/style.css';
@@ -18,6 +21,8 @@ import { randomColor } from '../utils';
 
 import { BlockNoteToolbar } from './BlockNoteToolbar';
 
+import { useTranslation } from 'react-i18next';
+
 const cssEditor = `
   &, & > .bn-container, & .ProseMirror {
     height:100%
@@ -94,6 +99,19 @@ export const BlockNoteContent = ({
     [createDocAttachment, doc.id],
   );
 
+  const { t, i18n } = useTranslation();
+  const lang = i18n.language;
+
+  const resetStore = () => {
+    setStore(storeId, { editor: undefined });
+  };
+
+  // Invalidate the stored editor when the language changes
+  useEffect(() => {
+    resetStore();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lang]);
+
   const editor = useMemo(() => {
     if (storedEditor) {
       return storedEditor;
@@ -108,9 +126,10 @@ export const BlockNoteContent = ({
           color: randomColor(),
         },
       },
+      dictionary: locales[lang as keyof typeof locales],
       uploadFile,
     });
-  }, [provider, storedEditor, uploadFile, userData?.email]);
+  }, [provider, storedEditor, uploadFile, userData?.email, lang]);
 
   useEffect(() => {
     setStore(storeId, { editor });

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

@@ -15,6 +15,7 @@ import {
 } from '@blocknote/react';
 import { forEach, isArray } from 'lodash';
 import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 export const BlockNoteToolbar = () => {
   return (
@@ -93,6 +94,7 @@ export function MarkdownButton() {
   const editor = useBlockNoteEditor();
   const Components = useComponentsContext();
   const selectedBlocks = useSelectedBlocks(editor);
+  const { t } = useTranslation();
 
   const handleConvertMarkdown = () => {
     const blocks = editor.getSelection()?.blocks;
@@ -126,7 +128,7 @@ export function MarkdownButton() {
 
   return (
     <Components.FormattingToolbar.Button
-      mainTooltip="Convert Markdown"
+      mainTooltip={t('Convert Markdown')}
       onClick={handleConvertMarkdown}
     >
       M

src/frontend/apps/impress/src/i18n/translations.json

@@ -125,7 +125,7 @@
       "Validate the modification": "Valider les modifications",
       "Version restored successfully": "Version restaurée avec succès",
       "We didn't find a mail matching, try to be more accurate": "Nous n'avons pas trouvé de correspondance par mail, essayez d'être plus précis",
-      "We simply comply with the law, which states that certain audience measurement tools, properly configured to respect privacy, are exempt from prior authorization.": "Nous nous conformons simplement à la loi, qui stipule que certains outils de mesure d’audience, correctement configurés pour respecter la vie privée, sont exemptés de toute autorisation préalable.",
+      "We simply comply with the law, which states that certain audience measurement tools, properly configured to respect privacy, are exempt from prior authorization.": "Nous nous conformons simplement à la loi, qui stipule que certains outils de mesure d'audience, correctement configurés pour respecter la vie privée, sont exemptés de toute autorisation préalable.",
       "We try to respond within 2 working days.": "Nous essayons de répondre dans les 2 jours ouvrables.",
       "You are the sole owner of this group, make another member the group owner before you can change your own role or be removed from your document.": "Vous êtes le seul propriétaire de ce groupe, faites d'un autre membre le propriétaire du groupe, avant de pouvoir modifier votre propre rôle ou vous supprimer du document.",
       "You can oppose the tracking of your browsing on this website.": "Vous pouvez vous opposer au suivi de votre navigation sur ce site.",
@@ -140,7 +140,8 @@
       "accessibility-dinum-services": "<strong>DINUM</strong> s'engage à rendre accessibles ses services numériques, conformément à l'article 47 de la loi n° 2005-102 du 11 février 2005.",
       "accessibility-form-defenseurdesdroits": "Écrire un message au<1>Défenseur des droits</1>",
       "accessibility-not-audit": "<strong>docs.numerique.gouv.fr</strong> n'est pas en conformité avec le RGAA 4.1. Le site n'a <strong>pas encore été audité.</strong>",
-      "you have reported to the website manager a lack of accessibility that prevents you from accessing content or one of the services of the portal and you have not received a satisfactory response.": "vous avez signalé au responsable du site internet un défaut d'accessibilité qui vous empêche d'accéder à un contenu ou à un des services du portail et vous n'avez pas obtenu de réponse satisfaisante."
+      "you have reported to the website manager a lack of accessibility that prevents you from accessing content or one of the services of the portal and you have not received a satisfactory response.": "vous avez signalé au responsable du site internet un défaut d'accessibilité qui vous empêche d'accéder à un contenu ou à un des services du portail et vous n'avez pas obtenu de réponse satisfaisante.",
+      "Convert Markdown": "Convertir Markdown"
     }
   }
 }