🐛(frontend) add fallback for unsupported blocknote languages

We had a bug when user selected a language that is
not supported by BlockNote editor, the app
would crash.
If the language is not supported by BlockNote,
we now fallback Blocknote editor to English.

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to
 ### Fixed
 
 - ✅(e2e) fix e2e test for other browsers #1799
+- 🐛(frontend) add fallback for unsupported Blocknote languages #1810
 
 ### Changed
 

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

@@ -1,6 +1,11 @@
 import { expect, test } from '@playwright/test';
 
-import { TestLanguage, createDoc, waitForLanguageSwitch } from './utils-common';
+import {
+  TestLanguage,
+  createDoc,
+  overrideConfig,
+  waitForLanguageSwitch,
+} from './utils-common';
 import { openSuggestionMenu } from './utils-editor';
 
 test.describe('Language', () => {
@@ -107,6 +112,15 @@ test.describe('Language', () => {
     page,
     browserName,
   }) => {
+    await overrideConfig(page, {
+      LANGUAGES: [
+        ['en-us', 'English'],
+        ['fr-fr', 'Français'],
+        ['sv-se', 'Svenska'],
+      ],
+      LANGUAGE_CODE: 'en-us',
+    });
+
     await createDoc(page, 'doc-toolbar', browserName, 1);
 
     const { editor, suggestionMenu } = await openSuggestionMenu({ page });
@@ -126,5 +140,14 @@ test.describe('Language', () => {
     await expect(
       suggestionMenu.getByText('Titres', { exact: true }),
     ).toBeVisible();
+
+    /**
+     * Swedish is not yet supported in the BlockNote locales, so it should fallback to English
+     */
+    await waitForLanguageSwitch(page, TestLanguage.Swedish);
+    await openSuggestionMenu({ page });
+    await expect(
+      suggestionMenu.getByText('Headings', { exact: true }),
+    ).toBeVisible();
   });
 });

src/frontend/apps/e2e/__tests__/app-impress/utils-common.ts

@@ -330,6 +330,10 @@ export const TestLanguage = {
     label: 'Deutsch',
     expectedLocale: ['de-de'],
   },
+  Swedish: {
+    label: 'Svenska',
+    expectedLocale: ['sv-se'],
+  },
 } as const;
 
 type TestLanguageKey = keyof typeof TestLanguage;

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

@@ -93,7 +93,10 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
 
   useSaveDoc(doc.id, provider.document, isConnectedToCollabServer);
   const { i18n } = useTranslation();
-  const lang = i18n.resolvedLanguage;
+  let lang = i18n.resolvedLanguage;
+  if (!lang || !(lang in locales)) {
+    lang = 'en';
+  }
 
   const { uploadFile, errorAttachment } = useUploadFile(doc.id);