🌐(frontend) add localization to editor

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to
 ## Added
 
 - 📝Contributing.md #352
+- 🌐(frontend) add localization to editor #268
 
 ## Fixed
 

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

@@ -9,6 +9,41 @@ test.beforeEach(async ({ page }) => {
 });
 
 test.describe('Doc Editor', () => {
+  test('it check translations of the slash menu when changing language', async ({
+    page,
+    browserName,
+  }) => {
+    await createDoc(page, 'doc-toolbar', browserName, 1);
+
+    const header = page.locator('header').first();
+    const editor = page.locator('.ProseMirror');
+    // Trigger slash menu to show english menu
+    await editor.click();
+    await editor.fill('/');
+    await expect(page.getByText('Headings', { exact: true })).toBeVisible();
+    await header.click();
+    await expect(page.getByText('Headings', { exact: true })).toBeHidden();
+
+    // Reset menu
+    await editor.click();
+    await editor.fill('');
+
+    // Change language to French
+    await header.click();
+    await header.getByRole('combobox').getByText('English').click();
+    await header.getByRole('option', { name: 'Français' }).click();
+    await expect(
+      header.getByRole('combobox').getByText('Français'),
+    ).toBeVisible();
+
+    // Trigger slash menu to show french menu
+    await editor.click();
+    await editor.fill('/');
+    await expect(page.getByText('Titres', { exact: true })).toBeVisible();
+    await header.click();
+    await expect(page.getByText('Titres', { exact: true })).toBeHidden();
+  });
+
   test('it checks default toolbar buttons are displayed', async ({
     page,
     browserName,

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

@@ -1,9 +1,11 @@
-import { BlockNoteEditor as BlockNoteEditorCore } from '@blocknote/core';
+import { locales } from '@blocknote/core';
 import '@blocknote/core/fonts/inter.css';
 import { BlockNoteView } from '@blocknote/mantine';
 import '@blocknote/mantine/style.css';
+import { useCreateBlockNote } from '@blocknote/react';
 import { HocuspocusProvider } from '@hocuspocus/provider';
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { Box, TextErrors } from '@/components';
 import { mediaUrl } from '@/core';
@@ -113,6 +115,8 @@ export const BlockNoteContent = ({
     error: errorAttachment,
   } = useCreateDocAttachment();
   const { setHeadings, resetHeadings } = useHeadingStore();
+  const { i18n } = useTranslation();
+  const lang = i18n.language;
 
   const uploadFile = useCallback(
     async (file: File) => {
@@ -129,12 +133,8 @@ export const BlockNoteContent = ({
     [createDocAttachment, doc.id],
   );
 
-  const editor = useMemo(() => {
-    if (storedEditor) {
-      return storedEditor;
-    }
-
-    return BlockNoteEditorCore.create({
+  const editor = useCreateBlockNote(
+    {
       collaboration: {
         provider,
         fragment: provider.document.getXmlFragment('document-store'),
@@ -143,9 +143,11 @@ export const BlockNoteContent = ({
           color: randomColor(),
         },
       },
+      dictionary: locales[lang as keyof typeof locales],
       uploadFile,
-    });
-  }, [provider, storedEditor, uploadFile, userData?.email]);
+    },
+    [provider, uploadFile, userData?.email, lang],
+  );
 
   useEffect(() => {
     setStore(storeId, { editor });
@@ -176,7 +178,7 @@ export const BlockNoteContent = ({
       )}
 
       <BlockNoteView
-        editor={editor}
+        editor={storedEditor ?? editor}
         formattingToolbar={false}
         editable={!readOnly}
         theme="light"

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

@@ -6,6 +6,7 @@ import {
 } from '@blocknote/react';
 import { forEach, isArray } from 'lodash';
 import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 type Block = {
   type: string;
@@ -42,6 +43,7 @@ export function MarkdownButton() {
   const editor = useBlockNoteEditor();
   const Components = useComponentsContext();
   const selectedBlocks = useSelectedBlocks(editor);
+  const { t } = useTranslation();
 
   const handleConvertMarkdown = () => {
     const blocks = editor.getSelection()?.blocks;
@@ -75,7 +77,7 @@ export function MarkdownButton() {
 
   return (
     <Components.FormattingToolbar.Button
-      mainTooltip="Convert Markdown"
+      mainTooltip={t('Convert Markdown')}
       onClick={handleConvertMarkdown}
     >
       M