From e7f15b30da06afe45f93002640dc54214aa0333b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E5=9B=BD=E7=92=87?=
 <37972689+YangGuoXuan-0503@users.noreply.github.com>
Date: Fri, 25 Oct 2024 15:52:36 +0800
Subject: [PATCH] fix: file view longtext editor icon (#6942)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 杨国璇 <ygx@Hello-word.local>
---
 .../src/components/file-view/file-view.js     | 105 ++++++++++--------
 seahub/templates/base_for_react.html          |   1 +
 2 files changed, 57 insertions(+), 49 deletions(-)

diff --git a/frontend/src/components/file-view/file-view.js b/frontend/src/components/file-view/file-view.js
index ab171d0837..568e4b1947 100644
--- a/frontend/src/components/file-view/file-view.js
+++ b/frontend/src/components/file-view/file-view.js
@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import PropTypes from 'prop-types';
 import watermark from 'watermark-dom';
+import { I18nextProvider } from 'react-i18next';
+import i18n from '../../_i18n/i18n-sdoc-editor';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, siteName } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
@@ -11,6 +13,7 @@ import FileToolbar from './file-toolbar';
 import OnlyofficeFileToolbar from './onlyoffice-file-toolbar';
 import EmbeddedFileDetails from '../dirent-detail/embedded-file-details';
 import { CollaboratorsProvider, EnableMetadataProvider } from '../../metadata';
+import Loading from '../loading';
 
 import '../../css/file-view.css';
 
@@ -110,55 +113,59 @@ class FileView extends React.Component {
     const { isOnlyofficeFile = false } = this.props;
     const { isDetailsPanelOpen, isHeaderShown } = this.state;
     return (
-      <div className="h-100 d-flex flex-column">
-        <div className={`file-view-header d-flex justify-content-between align-items-center d-print-none ${isOnlyofficeFile ? (isHeaderShown ? 'onlyoffice-file-view-header-shown' : 'onlyoffice-file-view-header-hidden') : ''}`}>
-          <FileInfo
-            isStarred={this.state.isStarred}
-            isLocked={this.state.isLocked}
-            toggleStar={this.toggleStar}
-            isOnlyofficeFile={isOnlyofficeFile}
-          />
-          {isOnlyofficeFile ?
-            <OnlyofficeFileToolbar
-              toggleDetailsPanel={this.toggleDetailsPanel}
-              toggleHeader={this.toggleHeader}
-            /> :
-            <FileToolbar
-              isLocked={this.state.isLocked}
-              lockedByMe={this.state.lockedByMe}
-              onSave={this.props.onSave}
-              isSaving={this.props.isSaving}
-              needSave={this.props.needSave}
-              toggleLockFile={this.toggleLockFile}
-              toggleDetailsPanel={this.toggleDetailsPanel}
-            />
-          }
-        </div>
-        <div className={`file-view-body flex-auto d-flex o-hidden ${(isOnlyofficeFile && !isHeaderShown) ? 'position-relative' : ''}`}>
-          {(isOnlyofficeFile && !isHeaderShown) &&
-            <IconButton
-              id="unfold-onlyoffice-file-view-header"
-              icon='double-arrow-down'
-              text={gettext('Unfold')}
-              onClick={this.toggleHeader}
-            />
-          }
-          {this.props.content}
-          {isDetailsPanelOpen && (
-            <EnableMetadataProvider repoID={repoID} >
-              <CollaboratorsProvider repoID={repoID}>
-                <EmbeddedFileDetails
-                  repoID={repoID}
-                  path={filePath}
-                  dirent={{ 'name': fileName, type: 'file' }}
-                  repoInfo={{ permission: filePerm }}
-                  onClose={this.toggleDetailsPanel}
+      <I18nextProvider i18n={ i18n }>
+        <Suspense fallback={<Loading />}>
+          <div className="h-100 d-flex flex-column">
+            <div className={`file-view-header d-flex justify-content-between align-items-center d-print-none ${isOnlyofficeFile ? (isHeaderShown ? 'onlyoffice-file-view-header-shown' : 'onlyoffice-file-view-header-hidden') : ''}`}>
+              <FileInfo
+                isStarred={this.state.isStarred}
+                isLocked={this.state.isLocked}
+                toggleStar={this.toggleStar}
+                isOnlyofficeFile={isOnlyofficeFile}
+              />
+              {isOnlyofficeFile ?
+                <OnlyofficeFileToolbar
+                  toggleDetailsPanel={this.toggleDetailsPanel}
+                  toggleHeader={this.toggleHeader}
+                /> :
+                <FileToolbar
+                  isLocked={this.state.isLocked}
+                  lockedByMe={this.state.lockedByMe}
+                  onSave={this.props.onSave}
+                  isSaving={this.props.isSaving}
+                  needSave={this.props.needSave}
+                  toggleLockFile={this.toggleLockFile}
+                  toggleDetailsPanel={this.toggleDetailsPanel}
                 />
-              </CollaboratorsProvider>
-            </EnableMetadataProvider>
-          )}
-        </div>
-      </div>
+              }
+            </div>
+            <div className={`file-view-body flex-auto d-flex o-hidden ${(isOnlyofficeFile && !isHeaderShown) ? 'position-relative' : ''}`}>
+              {(isOnlyofficeFile && !isHeaderShown) &&
+                <IconButton
+                  id="unfold-onlyoffice-file-view-header"
+                  icon='double-arrow-down'
+                  text={gettext('Unfold')}
+                  onClick={this.toggleHeader}
+                />
+              }
+              {this.props.content}
+              {isDetailsPanelOpen && (
+                <EnableMetadataProvider repoID={repoID} >
+                  <CollaboratorsProvider repoID={repoID}>
+                    <EmbeddedFileDetails
+                      repoID={repoID}
+                      path={filePath}
+                      dirent={{ 'name': fileName, type: 'file' }}
+                      repoInfo={{ permission: filePerm }}
+                      onClose={this.toggleDetailsPanel}
+                    />
+                  </CollaboratorsProvider>
+                </EnableMetadataProvider>
+              )}
+            </div>
+          </div>
+        </Suspense>
+      </I18nextProvider>
     );
   }
 }
diff --git a/seahub/templates/base_for_react.html b/seahub/templates/base_for_react.html
index d504265e41..97daea4bdc 100644
--- a/seahub/templates/base_for_react.html
+++ b/seahub/templates/base_for_react.html
@@ -22,6 +22,7 @@
 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/sf_font3/iconfont.css" />
 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/seafile-ui.css" />
 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/seahub_react.css?t=1398068110" />
+<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}seafile-editor/seafile-editor-font.css" />
 {% block extra_style %}{% endblock %}
 {% if branding_css != '' %}<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}{{ branding_css }}" />{% endif %}
 {% if enable_branding_css %}<link rel="stylesheet" type="text/css" href="{% url 'custom_css' %}" />{% endif %}