From 3746fedfb42ba4f95f39b3b4faf3614d8e91a4a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E9=A1=BA=E5=BC=BA?= <978987373@qq.com>
Date: Fri, 12 May 2023 14:12:28 +0800
Subject: [PATCH] optimize code (#5467)

* optimize code

* optimize code

* optimize code
---
 .../pages/sdoc-editor/external-operations.js  | 52 +++++++++++++++++++
 frontend/src/pages/sdoc-editor/index.js       | 15 ++++++
 frontend/src/view-file-sdoc.js                |  4 +-
 3 files changed, 69 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/pages/sdoc-editor/external-operations.js
 create mode 100644 frontend/src/pages/sdoc-editor/index.js

diff --git a/frontend/src/pages/sdoc-editor/external-operations.js b/frontend/src/pages/sdoc-editor/external-operations.js
new file mode 100644
index 0000000000..4a7d6770f1
--- /dev/null
+++ b/frontend/src/pages/sdoc-editor/external-operations.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { EventBus, EXTERNAL_EVENT } from '@seafile/sdoc-editor';
+import InternalLinkDialog from '../../components/dialog/internal-link-dialog';
+
+const propTypes = {
+  repoID: PropTypes.string.isRequired,
+  docPath: PropTypes.string.isRequired,
+};
+
+class ExternalOperations extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isShowInternalLinkDialog: false,
+    };
+  }
+
+  componentDidMount() {
+    const eventBus = EventBus.getInstance();
+    this.unsubscribeInternalLinkEvent = eventBus.subscribe(EXTERNAL_EVENT.INTERNAL_LINK_CLICK, this.onInternalLinkToggle);
+  }
+
+  componentWillUnmount() {
+    this.unsubscribeInternalLinkEvent();
+  }
+
+  onInternalLinkToggle = () => {
+    this.setState({isShowInternalLinkDialog: !this.state.isShowInternalLinkDialog});
+  }
+
+  render() {
+    const { repoID, docPath } = this.props;
+    const { isShowInternalLinkDialog } = this.state;
+    return (
+      <>
+        {isShowInternalLinkDialog && (
+          <InternalLinkDialog
+            repoID={repoID}
+            path={docPath}
+            onInternalLinkDialogToggle={this.onInternalLinkToggle}
+          />
+        )}
+      </>
+    );
+  }
+}
+
+ExternalOperations.propTypes = propTypes;
+
+export default ExternalOperations;
diff --git a/frontend/src/pages/sdoc-editor/index.js b/frontend/src/pages/sdoc-editor/index.js
new file mode 100644
index 0000000000..d2ef2e2157
--- /dev/null
+++ b/frontend/src/pages/sdoc-editor/index.js
@@ -0,0 +1,15 @@
+import React, { Fragment } from 'react';
+import { SimpleEditor } from '@seafile/sdoc-editor';
+import ExternalOperations from './external-operations';
+
+export default class SdocEditor extends React.Component {
+  render() {
+    const { repoID, docPath } = window.seafile;
+    return (
+      <Fragment>
+        <SimpleEditor />
+        <ExternalOperations repoID={repoID} docPath={docPath} />
+      </Fragment>
+    );
+  }
+}
diff --git a/frontend/src/view-file-sdoc.js b/frontend/src/view-file-sdoc.js
index 3a2d02703c..dc96b236d7 100644
--- a/frontend/src/view-file-sdoc.js
+++ b/frontend/src/view-file-sdoc.js
@@ -1,10 +1,10 @@
 import React, { Suspense } from 'react';
 import ReactDom from 'react-dom';
-import { SimpleEditor } from '@seafile/sdoc-editor';
 import { I18nextProvider } from 'react-i18next';
 import i18n from './_i18n/i18n-sdoc-editor';
 import { Utils } from './utils/utils';
 import Loading from './components/loading';
+import SdocEditor from './pages/sdoc-editor';
 
 const { serviceURL, avatarURL, siteRoot } = window.app.config;
 const { username, name } = window.app.userInfo;
@@ -34,7 +34,7 @@ window.seafile = {
 ReactDom.render(
   <I18nextProvider i18n={ i18n } >
     <Suspense fallback={<Loading />}>
-      <SimpleEditor />
+      <SdocEditor />
     </Suspense>
   </I18nextProvider>,
   document.getElementById('wrapper')