update seafile-editor&seafile-cdoc translate (#4040)

frontend/src/i18n.js

@@ -1,12 +1,16 @@
 import i18n from 'i18next';
-import XHR from 'i18next-xhr-backend';
-import { mediaUrl } from './utils/constants';
+import Backend from 'i18next-xhr-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+import { mediaUrl, lang } from './utils/constants';
 
 i18n
-  .use(XHR)
+  .use(Backend)
+  .use(LanguageDetector)
+  .use(initReactI18next)
   .init({
+    lng: lang,
     fallbackLng: 'en',
-
     ns: ['translations'],
     defaultNS: 'translations',
 

frontend/src/index.js

@@ -9,10 +9,8 @@ import './assets/css/fa-regular.css';
 import './assets/css/fontawesome.css';
 import './index.css';
 
-let lang = window.app.pageOptions.lang;
-
 ReactDOM.render(
-  <I18nextProvider i18n={ i18n } initialLanguage={ lang } >
+  <I18nextProvider i18n={ i18n } >
     <MarkdownEditor />
   </I18nextProvider>,
   document.getElementById('root')

frontend/src/view-file-cdoc.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Suspense} from 'react';
 import ReactDOM from 'react-dom';
 import { I18nextProvider } from 'react-i18next';
 import i18n from './i18n';
@@ -12,7 +12,8 @@ import { Value } from 'slate';
 import CDOCTopbar from './components/toolbar/cdoc-editor-topbar';
 import ShareDialog from './components/dialog/share-dialog';
 import { Utils } from './utils/utils';
-import { translate } from 'react-i18next';
+import Loading from './components/loading';
+import { withTranslation } from 'react-i18next';
 
 import { EditorUtilities } from '@seafile/seafile-editor/dist/editorUtilities';
 import toaster from './components/toast';
@@ -26,8 +27,6 @@ import './index.css';
 
 const CryptoJS = require('crypto-js');
 
-const lang = window.app.config.lang;
-
 const { repoID, repoName, filePath, fileName, username, contactEmail } = window.app.pageOptions;
 const { siteRoot, seafileCollabServer, serviceURL } = window.app.config;
 const { name } = window.app.userInfo;
@@ -266,11 +265,13 @@ class CDOCEditor extends React.Component {
   }
 }
 
-const TranslatedCDOCEditor = translate('translations')(CDOCEditor);
+const TranslatedCDOCEditor = withTranslation('translations')(CDOCEditor);
 
 ReactDOM.render(
-  <I18nextProvider i18n={i18n} initialLanguage={lang} >
-    <TranslatedCDOCEditor />
+  <I18nextProvider i18n={i18n} >
+    <Suspense fallback={<Loading />}>
+      <TranslatedCDOCEditor />
+    </Suspense>
   </I18nextProvider>
   ,
   document.getElementById('wrapper')