Doceditor: fix i18n instance

2024-02-22 14:14:56 +03:00 · 2024-02-22 14:14:56 +03:00 · 69f2903a4f
commit 69f2903a4f
parent ba36156387
6 changed files with 94 additions and 93 deletions
--- a/packages/doceditor/src/components/Root.tsx
+++ b/packages/doceditor/src/components/Root.tsx
@ -100,86 +100,84 @@ const Root = ({
  } = useSelectFileDialog({ instanceId: instanceId ?? "" });

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

--- a/packages/doceditor/src/components/SelectFileDialog.tsx
+++ b/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
--- a/packages/doceditor/src/components/SelectFolderDialog.tsx
+++ b/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 = {
--- a/packages/doceditor/src/hooks/useI18N.ts
+++ b/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",
-      settings.culture,
+      user?.cultureName ?? "en",
+      settings?.culture ?? "en",
    );

-    setI18N(instance);
+    if (instance) setI18N(instance);
  }, [settings?.culture, user?.cultureName]);

  return { i18n };
--- a/packages/doceditor/src/types/index.ts
+++ b/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;
 }

--- a/packages/doceditor/src/utils/i18n.ts
+++ b/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;
 };