Skip to content

Commit 7fc59ed

Browse files
🌐(frontend) add localization to editor
Currently, when you change language the editor does not change. So we add this functionality
1 parent 6012085 commit 7fc59ed

File tree

4 files changed

+52
-12
lines changed

4 files changed

+52
-12
lines changed

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ and this project adheres to
1212
## Added
1313

1414
- 📝Contributing.md #352
15+
- 🌐(frontend) add localization to editor #268
1516

1617
## Fixed
1718

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,41 @@ test.beforeEach(async ({ page }) => {
99
});
1010

1111
test.describe('Doc Editor', () => {
12+
test('it check translations of the slash menu when changing language', async ({
13+
page,
14+
browserName,
15+
}) => {
16+
await createDoc(page, 'doc-toolbar', browserName, 1);
17+
18+
const header = page.locator('header').first();
19+
const editor = page.locator('.ProseMirror');
20+
// Trigger slash menu to show english menu
21+
await editor.click();
22+
await editor.fill('/');
23+
await expect(page.getByText('Headings', { exact: true })).toBeVisible();
24+
await header.click();
25+
await expect(page.getByText('Headings', { exact: true })).toBeHidden();
26+
27+
// Reset menu
28+
await editor.click();
29+
await editor.fill('');
30+
31+
// Change language to French
32+
await header.click();
33+
await header.getByRole('combobox').getByText('English').click();
34+
await header.getByRole('option', { name: 'Français' }).click();
35+
await expect(
36+
header.getByRole('combobox').getByText('Français'),
37+
).toBeVisible();
38+
39+
// Trigger slash menu to show french menu
40+
await editor.click();
41+
await editor.fill('/');
42+
await expect(page.getByText('Titres', { exact: true })).toBeVisible();
43+
await header.click();
44+
await expect(page.getByText('Titres', { exact: true })).toBeHidden();
45+
});
46+
1247
test('it checks default toolbar buttons are displayed', async ({
1348
page,
1449
browserName,

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

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import { BlockNoteEditor as BlockNoteEditorCore } from '@blocknote/core';
1+
import { locales } from '@blocknote/core';
22
import '@blocknote/core/fonts/inter.css';
33
import { BlockNoteView } from '@blocknote/mantine';
44
import '@blocknote/mantine/style.css';
5+
import { useCreateBlockNote } from '@blocknote/react';
56
import { HocuspocusProvider } from '@hocuspocus/provider';
6-
import React, { useCallback, useEffect, useMemo } from 'react';
7+
import React, { useCallback, useEffect } from 'react';
8+
import { useTranslation } from 'react-i18next';
79

810
import { Box, TextErrors } from '@/components';
911
import { mediaUrl } from '@/core';
@@ -113,6 +115,8 @@ export const BlockNoteContent = ({
113115
error: errorAttachment,
114116
} = useCreateDocAttachment();
115117
const { setHeadings, resetHeadings } = useHeadingStore();
118+
const { i18n } = useTranslation();
119+
const lang = i18n.language;
116120

117121
const uploadFile = useCallback(
118122
async (file: File) => {
@@ -129,12 +133,8 @@ export const BlockNoteContent = ({
129133
[createDocAttachment, doc.id],
130134
);
131135

132-
const editor = useMemo(() => {
133-
if (storedEditor) {
134-
return storedEditor;
135-
}
136-
137-
return BlockNoteEditorCore.create({
136+
const editor = useCreateBlockNote(
137+
{
138138
collaboration: {
139139
provider,
140140
fragment: provider.document.getXmlFragment('document-store'),
@@ -143,9 +143,11 @@ export const BlockNoteContent = ({
143143
color: randomColor(),
144144
},
145145
},
146+
dictionary: locales[lang as keyof typeof locales],
146147
uploadFile,
147-
});
148-
}, [provider, storedEditor, uploadFile, userData?.email]);
148+
},
149+
[provider, uploadFile, userData?.email, lang],
150+
);
149151

150152
useEffect(() => {
151153
setStore(storeId, { editor });
@@ -176,7 +178,7 @@ export const BlockNoteContent = ({
176178
)}
177179

178180
<BlockNoteView
179-
editor={editor}
181+
editor={storedEditor ?? editor}
180182
formattingToolbar={false}
181183
editable={!readOnly}
182184
theme="light"

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
} from '@blocknote/react';
77
import { forEach, isArray } from 'lodash';
88
import React, { useMemo } from 'react';
9+
import { useTranslation } from 'react-i18next';
910

1011
type Block = {
1112
type: string;
@@ -42,6 +43,7 @@ export function MarkdownButton() {
4243
const editor = useBlockNoteEditor();
4344
const Components = useComponentsContext();
4445
const selectedBlocks = useSelectedBlocks(editor);
46+
const { t } = useTranslation();
4547

4648
const handleConvertMarkdown = () => {
4749
const blocks = editor.getSelection()?.blocks;
@@ -75,7 +77,7 @@ export function MarkdownButton() {
7577

7678
return (
7779
<Components.FormattingToolbar.Button
78-
mainTooltip="Convert Markdown"
80+
mainTooltip={t('Convert Markdown')}
7981
onClick={handleConvertMarkdown}
8082
>
8183
M

0 commit comments

Comments
 (0)