Doceditor: fix i18n instance

packages/doceditor/src/components/Root.tsx

@@ -100,86 +100,84 @@ const Root = ({
   } = useSelectFileDialog({ instanceId: instanceId ?? "" });
 
   return (
-    <I18nextProvider i18n={i18n}>
+    // <I18nextProvider i18n={i18n}>
-      <ThemeProvider theme={theme} currentColorScheme={currentColorTheme}>
+    <ThemeProvider theme={theme} currentColorScheme={currentColorTheme}>
-        <ErrorBoundary
+      <ErrorBoundary
-          user={user ?? ({} as TUser)}
+        user={user ?? ({} as TUser)}
-          version={pkgFile.version}
+        version={pkgFile.version}
-          firebaseHelper={firebaseHelper}
+        firebaseHelper={firebaseHelper}
-          currentDeviceType={currentDeviceType}
+        currentDeviceType={currentDeviceType}
-          whiteLabelLogoUrls={logoUrls}
+        whiteLabelLogoUrls={logoUrls}
-          isNextJS
+        isNextJS
-          theme={theme}
+        theme={theme}
-          i18n={i18n}
+        i18n={i18n}
-          onError={onError}
+        onError={onError}
-        >
+      >
-          {isShowDeepLink ? (
+        {isShowDeepLink ? (
-            <DeepLink
+          <DeepLink
-              fileInfo={fileInfo}
+            fileInfo={fileInfo}
-              logoUrls={logoUrls}
+            logoUrls={logoUrls}
-              userEmail={user?.email}
+            userEmail={user?.email}
-              theme={theme}
+            theme={theme}
-              currentDeviceType={currentDeviceType}
+            currentDeviceType={currentDeviceType}
-              deepLinkConfig={settings?.deepLink}
+            deepLinkConfig={settings?.deepLink}
-              setIsShowDeepLink={setIsShowDeepLink}
+            setIsShowDeepLink={setIsShowDeepLink}
-            />
+          />
-          ) : error && error.message !== "unauthorized" ? (
+        ) : error && error.message !== "unauthorized" ? (
-            <ErrorContainer
+          <ErrorContainer
-              headerText={t?.("Common:Error")}
+            headerText={t?.("Common:Error")}
-              customizedBodyText={getErrorMessage()}
+            customizedBodyText={getErrorMessage()}
-              isEditor
+            isEditor
-            />
+          />
-          ) : (
+        ) : (
-            <>
+          <>
-              {config && user && documentserverUrl && fileInfo && (
+            {config && user && documentserverUrl && fileInfo && (
-                <Editor
+              <Editor
-                  config={config}
+                config={config}
-                  user={user}
+                user={user}
-                  view={IS_VIEW}
+                view={IS_VIEW}
-                  successAuth={successAuth}
+                successAuth={successAuth}
-                  doc={doc}
+                doc={doc}
-                  t={t}
+                t={t}
-                  documentserverUrl={documentserverUrl}
+                documentserverUrl={documentserverUrl}
-                  fileInfo={fileInfo}
+                fileInfo={fileInfo}
-                  onSDKRequestSaveAs={onSDKRequestSaveAs}
+                onSDKRequestSaveAs={onSDKRequestSaveAs}
-                  onSDKRequestInsertImage={onSDKRequestInsertImage}
+                onSDKRequestInsertImage={onSDKRequestInsertImage}
-                  onSDKRequestReferenceSource={onSDKRequestReferenceSource}
+                onSDKRequestReferenceSource={onSDKRequestReferenceSource}
-                  onSDKRequestSelectDocument={onSDKRequestSelectDocument}
+                onSDKRequestSelectDocument={onSDKRequestSelectDocument}
-                  onSDKRequestSelectSpreadsheet={onSDKRequestSelectSpreadsheet}
+                onSDKRequestSelectSpreadsheet={onSDKRequestSelectSpreadsheet}
-                />
+              />
-              )}
+            )}
-              <Toast />
+            <Toast />
-              {isVisibleSelectFolderDialog && !!socketHelper && (
+            {isVisibleSelectFolderDialog && !!socketHelper && (
-                <SelectFolderDialog
+              <SelectFolderDialog
-                  socketHelper={socketHelper}
+                socketHelper={socketHelper}
-                  isVisible={isVisibleSelectFolderDialog}
+                isVisible={isVisibleSelectFolderDialog}
-                  onSubmit={onSubmitSelectFolderDialog}
+                onSubmit={onSubmitSelectFolderDialog}
-                  onClose={onCloseSelectFolderDialog}
+                onClose={onCloseSelectFolderDialog}
-                  titleSelectorFolder={titleSelectorFolderDialog}
+                titleSelectorFolder={titleSelectorFolderDialog}
-                  fileInfo={fileInfo ?? ({} as TFile)}
+                fileInfo={fileInfo ?? ({} as TFile)}
-                  getIsDisabled={getIsDisabledSelectFolderDialog}
+                getIsDisabled={getIsDisabledSelectFolderDialog}
-                  t={t}
+                i18n={i18n}
-                  i18n={i18n}
+              />
-                />
+            )}
-              )}
+            {selectFileDialogVisible && !!socketHelper && (
-              {selectFileDialogVisible && !!socketHelper && (
+              <SelectFileDialog
-                <SelectFileDialog
+                socketHelper={socketHelper}
-                  socketHelper={socketHelper}
+                isVisible={selectFileDialogVisible}
-                  isVisible={selectFileDialogVisible}
+                onSubmit={onSubmitSelectFileDialog}
-                  onSubmit={onSubmitSelectFileDialog}
+                onClose={onCloseSelectFileDialog}
-                  onClose={onCloseSelectFileDialog}
+                getIsDisabled={getIsDisabledSelectFileDialog}
-                  getIsDisabled={getIsDisabledSelectFileDialog}
+                fileTypeDetection={selectFileDialogFileTypeDetection}
-                  fileTypeDetection={selectFileDialogFileTypeDetection}
+                fileInfo={fileInfo ?? ({} as TFile)}
-                  fileInfo={fileInfo ?? ({} as TFile)}
+                i18n={i18n}
-                  t={t}
+              />
-                  i18n={i18n}
+            )}
-                />
+          </>
-              )}
+        )}
-            </>
+      </ErrorBoundary>
-          )}
+    </ThemeProvider>
-        </ErrorBoundary>
+    // </I18nextProvider>
-      </ThemeProvider>
-    </I18nextProvider>
   );
 };
 

packages/doceditor/src/components/SelectFileDialog.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 
 import FilesSelectorWrapper from "@docspace/shared/selectors/Files/FilesSelector.wrapper";
 
@@ -14,9 +15,11 @@ const SelectFileDialog = ({
   onClose,
   onSubmit,
   fileInfo,
-  t,
+
   i18n,
 }: SelectFileDialogProps) => {
+  const { t } = useTranslation();
+
   const sessionPath = sessionStorage.getItem("filesSelectorPath");
 
   const headerLabel = fileTypeDetection.filterParam

packages/doceditor/src/components/SelectFolderDialog.tsx

@@ -17,9 +17,10 @@ const SelectFolderDialog = ({
   titleSelectorFolder,
   fileInfo,
   getIsDisabled,
-  t,
+
   i18n,
 }: SelectFolderDialogProps) => {
+  const { t } = useTranslation();
   const sessionPath = sessionStorage.getItem("filesSelectorPath");
 
   const cancelButtonProps: TSelectorCancelButton = {

packages/doceditor/src/hooks/useI18N.ts

@@ -21,16 +21,16 @@ const useI18N = ({ settings, user }: UseI18NProps) => {
   }, [settings?.timezone]);
 
   React.useEffect(() => {
-    if (isInit.current || !user?.cultureName || !settings?.culture) return;
+    if (isInit.current || (!user?.cultureName && !settings?.culture)) return;
 
     isInit.current = true;
 
     const instance = getI18NInstance(
-      user.cultureName || "en",
+      user?.cultureName ?? "en",
-      settings.culture,
+      settings?.culture ?? "en",
     );
 
-    setI18N(instance);
+    if (instance) setI18N(instance);
   }, [settings?.culture, user?.cultureName]);
 
   return { i18n };

packages/doceditor/src/types/index.ts

@@ -238,7 +238,7 @@ export interface SelectFolderDialogProps {
     selectedFileInfo: TSelectedFileInfo,
   ) => Promise<void>;
   fileInfo: TFile;
-  t: TTranslation | null;
+
   i18n: i18n;
 }
 
@@ -274,7 +274,7 @@ export interface SelectFileDialogProps {
     selectedFileInfo: TSelectedFileInfo,
   ) => Promise<void>;
   fileInfo: TFile;
-  t: TTranslation | null;
+
   i18n: i18n;
 }
 

packages/doceditor/src/utils/i18n.ts

@@ -8,13 +8,13 @@ import { getLtrLanguageForEditor } from "@docspace/shared/utils/common";
 import { translations } from "./autoGeneratedTranslations";
 
 export const getI18NInstance = (lng: string, portalLng: string) => {
-  const newInstance = i18n.createInstance();
+  if (typeof window === "undefined") return;
 
   const currentLng = getLtrLanguageForEditor(lng, portalLng, true);
 
   // const cultures = config.web.cultures.split(",");
 
-  newInstance.use(initReactI18next).init({
+  i18n.use(initReactI18next).init({
     lng: currentLng,
     fallbackLng: "en",
     load: "currentOnly",
@@ -35,14 +35,13 @@ export const getI18NInstance = (lng: string, portalLng: string) => {
     react: {
       useSuspense: false,
     },
-    resources: {},
   });
 
   Array.from(translations).forEach(([lng, nsList]) => {
     Array.from(nsList).forEach(([ns, obj]) => {
-      newInstance.addResourceBundle(lng, ns, obj, true, true);
+      i18n.addResourceBundle(lng, ns, obj, true, true);
     });
   });
 
-  return newInstance;
+  return i18n;
 };