feat: seperate document and title components

frontend/src/pages/wiki2/index.js

@@ -5,7 +5,7 @@ import { Modal } from 'reactstrap';
 import { Utils } from '../../utils/utils';
 import wikiAPI from '../../utils/wiki-api';
 import SDocServerApi from '../../utils/sdoc-server-api';
-import { wikiId, siteRoot, lang, isWiki2, seadocServerUrl } from '../../utils/constants';
+import { wikiId, siteRoot, lang, isWiki2, seadocServerUrl, gettext } from '../../utils/constants';
 import WikiConfig from './models/wiki-config';
 import toaster from '../../components/toast';
 import SidePanel from './side-panel';
@@ -172,6 +172,19 @@ class Wiki extends Component {
     });
   };
 
+  onUpdatePage = (pageId, newPage) => {
+    if (newPage.name === '') {
+      toaster.danger(gettext('Page name cannot be empty'));
+      return;
+    }
+    const { config } = this.state
+    let pages = config.pages;
+    let currentPage = pages.find(page => page.id === pageId);
+    Object.assign(currentPage, newPage);
+    config.pages = pages;
+    this.saveWikiConfig(config);
+  };
+
   render() {
     return (
       <div id="main" className="wiki-main">
@@ -183,6 +196,7 @@ class Wiki extends Component {
           saveWikiConfig={this.saveWikiConfig}
           setCurrentPage={this.setCurrentPage}
           currentPageId={this.state.currentPageId}
+          onUpdatePage={this.onUpdatePage}
         />
         <MainPanel
           path={this.state.path}
@@ -195,6 +209,7 @@ class Wiki extends Component {
           permission={this.state.permission}
           seadoc_access_token={this.state.seadoc_access_token}
           assets_url={this.state.assets_url}
+          onUpdatePage={this.onUpdatePage}
         />
         <MediaQuery query="(max-width: 767.8px)">
           <Modal isOpen={!this.state.closeSideBar} toggle={this.onCloseSide} contentClassName="d-none"></Modal>

frontend/src/pages/wiki2/main-panel.js

@@ -1,11 +1,13 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { SdocWikiViewer } from '@seafile/sdoc-editor';
+import { Input } from 'reactstrap';
 import { gettext, username } from '../../utils/constants';
 import Loading from '../../components/loading';
 import { Utils } from '../../utils/utils';
 import Account from '../../components/common/account';
 import WikiTopNav from './top-nav';
+import { getCurrentPageConfig } from './utils';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -18,6 +20,7 @@ const propTypes = {
   assets_url: PropTypes.string,
   config: PropTypes.object,
   currentPageId: PropTypes.string,
+  onUpdatePage: PropTypes.func,
 };
 
 class MainPanel extends Component {
@@ -26,36 +29,51 @@ class MainPanel extends Component {
     super(props);
     this.state = {
       docUuid: '',
+      currentPageConfig: {},
     };
   }
 
   static getDerivedStateFromProps(props, state) {
-    const { seadoc_access_token } = props;
-    const config = window.app.config;
+    const { seadoc_access_token, currentPageId, config } = props;
+    const appConfig = window.app.config;
     const pageOptions = window.app.pageOptions;
     const { assetsUrl, seadocServerUrl: sdocServer, } = window.wiki.config;
     window.seafile = {
       ...window.seafile, // need docUuid
-      ...config,
+      ...appConfig,
       ...pageOptions,
       sdocServer,
       assetsUrl: assetsUrl || props.assets_url,
       accessToken: seadoc_access_token,
-      serviceUrl: config.serviceURL,
-      assets_url: config.assetsUrl,
+      serviceUrl: appConfig.serviceURL,
+      assets_url: appConfig.assetsUrl,
     };
-    return { ...props, docUuid: window.seafile.docUuid };
+    const currentPageConfig = getCurrentPageConfig(config.pages, currentPageId)
+    return { ...props, docUuid: window.seafile.docUuid, currentPageConfig };
+  }
+
+  handleRenameDocument = (e) => {
+    const newName = e.target.value.trim()
+    const { currentPageConfig } = this.state
+    const { id, name, icon } = currentPageConfig
+    if (newName === name) return;
+    const pageConfig = { name: newName, icon }
+    this.props.onUpdatePage(id, pageConfig)
+    // Reset title if name is empty
+    if (!newName) e.target.value = name;
   }
 
   render() {
-    const { permission, pathExist, isDataLoading, isViewFile } = this.props;
+    const { permission, pathExist, isDataLoading, isViewFile, config } = this.props;
+    const { currentPageConfig } = this.state
     const isViewingFile = pathExist && !isDataLoading && isViewFile;
     const isReadOnly = !(permission === 'rw');
+
     return (
       <div className="wiki2-main-panel">
         <div className='wiki2-main-panel-north'>
           <WikiTopNav
-            config={this.props.config}
+            config={config}
             currentPageId={this.props.currentPageId}
           />
           {username &&
@@ -69,13 +87,14 @@ class MainPanel extends Component {
             }
             {this.props.pathExist && this.props.isDataLoading && <Loading />}
             {isViewingFile && Utils.isSdocFile(this.props.path) && (
+              <div>
                 <SdocWikiViewer
                   document={this.props.editorContent}
-                showOutline={false}
-                showToolbar={false}
                   docUuid={this.state.docUuid}
                   isWikiReadOnly={isReadOnly}
+                  topSlot={<Input className='sf-wiki-title' bsSize="lg" onBlur={this.handleRenameDocument} defaultValue={currentPageConfig.name} />}
                 />
+              </div>
             )}
           </div>
         </div>

frontend/src/pages/wiki2/side-panel.js

@@ -28,6 +28,7 @@ const propTypes = {
   saveWikiConfig: PropTypes.func.isRequired,
   setCurrentPage: PropTypes.func.isRequired,
   currentPageId: PropTypes.string,
+  onUpdatePage: PropTypes.func.isRequired,
 };
 
 class SidePanel extends Component {
@@ -101,19 +102,6 @@ class SidePanel extends Component {
     this.props.saveWikiConfig(config, onSuccess, errorCallback);
   };
 
-  onUpdatePage = (pageId, newPage) => {
-    if (newPage.name === '') {
-      toaster.danger(gettext('Page name cannot be empty'));
-      return;
-    }
-    const { config } = this.props;
-    let pages = config.pages;
-    let currentPage = pages.find(page => page.id === pageId);
-    Object.assign(currentPage, newPage);
-    config.pages = pages;
-    this.props.saveWikiConfig(config);
-  };
-
   movePage = ({ moved_view_id, target_view_id, source_view_folder_id, target_view_folder_id, move_position }) => {
     let config = deepCopy(this.props.config);
     let { navigation } = config;
@@ -286,7 +274,7 @@ class SidePanel extends Component {
   };
 
   renderFolderView = () => {
-    const { config } = this.props;
+    const { config, onUpdatePage } = this.props;
     const { pages, navigation } = config;
     return (
       <div className="wiki2-pages-container">
@@ -296,7 +284,7 @@ class SidePanel extends Component {
           views={pages}
           onToggleAddView={this.openAddPageDialog}
           onDeleteView={this.confirmDeletePage}
-          onUpdatePage={this.onUpdatePage}
+          onUpdatePage={onUpdatePage}
           onSelectView={this.props.setCurrentPage}
           onMoveView={this.movePage}
           movePageOut={this.movePageOut}

frontend/src/pages/wiki2/utils/index.js

@@ -43,4 +43,8 @@ const getIconURL = (repoId, fileName) => {
   return serviceURL + '/lib/' + repoId + '/file/_Internal/Wiki/Icon/' + fileName + '?raw=1';
 };
 
-export { generatorBase64Code, generateUniqueId, isObjectNotEmpty, getIconURL };
+const getCurrentPageConfig = (pages,pageId) => {
+  return pages.filter(page => page.id === pageId)[0]
+}
+
+export { generatorBase64Code, generateUniqueId, isObjectNotEmpty, getIconURL,getCurrentPageConfig };

frontend/src/pages/wiki2/wiki.css

@@ -61,6 +61,13 @@ img[src=""] {
   }
 }
 
+.main-panel-center .cur-view-content .sf-wiki-title {
+  border: none;
+  padding: 0 50px;
+  padding-left: 142px;
+  font-weight: bold;
+  font-size: 26pt;
+}
 
 /* reset article h1 */
 .wiki2-main-panel .article h1 {
@@ -219,11 +226,15 @@ img[src=""] {
   width: 100%;
 }
 
+.sdoc-editor-container .sdoc-editor-content {
+  flex-direction: column;
+}
+
 .sdoc-editor-container .sdoc-editor-content .article {
+  padding: 15px 142px 0px 142px;
   width: 100%;
   box-shadow: none;
   border: none;
-  padding: 52px 142px 0;
 }
 
 .sdoc-editor-container .sdoc-editor-content .sdoc-side-toolbar-container {