diff --git a/CHANGELOG.md b/CHANGELOG.md index 4eac5adc..9f2d9921 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ and this project adheres to ## Added - 📝Contributing.md #352 +- 🌐(frontend) add localization to editor #268 ## Fixed diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts index 0d7c2de6..1d13eb8f 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts +++ b/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, diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx index 64e103de..2ef15e5a 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx +++ b/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 = ({ )} { const blocks = editor.getSelection()?.blocks; @@ -75,7 +77,7 @@ export function MarkdownButton() { return ( M