feat: wiki editor

frontend/src/pages/wiki2/index.js

@@ -46,6 +46,9 @@ class Wiki extends Component {
       currentPageId: '',
       config: new WikiConfig({}),
       repoId: '',
+      can_edit_file: false,
+      seadoc_access_token: '',
+      docUuid: '',
     };
 
     window.onpopstate = this.onpopstate;
@@ -220,6 +223,8 @@ class Wiki extends Component {
         permission: data.permission,
         lastModified: moment.unix(data.last_modified).fromNow(),
         latestContributor: data.latest_contributor,
+        can_edit_file: data.can_edit_file,
+        seadoc_access_token: data.seadoc_access_token,
       });
     }).catch(error => {
       let errorMsg = Utils.getErrorMsg(error);
@@ -598,7 +603,7 @@ class Wiki extends Component {
           setCurrentPage={this.setCurrentPage}
           currentPageId={this.state.currentPageId}
         />
-        <MainPanel
+        {<MainPanel
           path={this.state.path}
           pathExist={this.state.pathExist}
           isViewFile={this.state.isViewFile}
@@ -611,7 +616,9 @@ class Wiki extends Component {
           onMenuClick={this.onMenuClick}
           onSearchedClick={this.onSearchedClick}
           onMainNavBarClick={this.onMainNavBarClick}
-        />
+          can_edit_file={this.state.can_edit_file}
+          seadoc_access_token={this.state.seadoc_access_token}
+        />}
         <MediaQuery query="(max-width: 767.8px)">
           <Modal isOpen={!this.state.closeSideBar} toggle={this.onCloseSide} contentClassName="d-none"></Modal>
         </MediaQuery>

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

@@ -1,5 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { WikiViewer } from '@seafile/sdoc-editor';
 import { gettext, repoID, siteRoot, username, isEditWiki } from '../../utils/constants';
 import SeafileMarkdownViewer from '../../components/seafile-markdown-viewer';
 import Loading from '../../components/loading';
@@ -22,10 +23,20 @@ const propTypes = {
   onSearchedClick: PropTypes.func.isRequired,
   onMainNavBarClick: PropTypes.func.isRequired,
   onLinkClick: PropTypes.func.isRequired,
+  can_edit_file: PropTypes.bool,
+  seadoc_access_token: PropTypes.string,
 };
 
 class MainPanel extends Component {
 
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      docUuid: '',
+    };
+  }
+
   onMenuClick = () => {
     this.props.onMenuClick();
   };
@@ -73,11 +84,29 @@ class MainPanel extends Component {
     return pathElem;
   };
 
+  static getDerivedStateFromProps(props, state) {
+    const { can_edit_file, seadoc_access_token } = props;
+    const config = window.app.config;
+    const pageOptions = window.app.pageOptions;
+    const { assetsUrl, seadocServerUrl: sdocServer, } = window.wiki.config;
+    window.seafile = {
+      ...window.seafile, // need docUuid
+      ...config,
+      ...pageOptions,
+      sdocServer,
+      assetsUrl,
+      can_edit_file,
+      accessToken: seadoc_access_token,
+      serviceUrl: config.serviceURL,
+    };
+    return { ...props, docUuid: window.seafile.docUuid };
+  }
 
   render() {
-    // let { onSearchedClick } = this.props;
     const errMessage = (<div className="message err-tip">{gettext('Folder does not exist.')}</div>);
     const isViewingFile = this.props.pathExist && !this.props.isDataLoading && this.props.isViewFile;
+    const { content } = this.props;
+    const editorContent = content && JSON.parse(content);
     return (
       <div className="main-panel wiki-main-panel" style={{ flex: isEditWiki ? '1 0 76%' : '1 0 80%' }}>
         <div className="main-panel-hide hide">{this.props.content}</div>
@@ -86,6 +115,11 @@ class MainPanel extends Component {
             <Fragment>
               <div className="cur-view-toolbar">
                 <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title="Side Nav Menu" onClick={this.onMenuClick}></span>
+                {this.props.permission == 'rw' && (
+                  Utils.isDesktop() ?
+                    <button className="btn btn-secondary operation-item" title={gettext('Edit')} onClick={this.onEditClick}>{gettext('Edit')}</button> :
+                    <span className="fa fa-pencil-alt mobile-toolbar-icon" title={gettext('Edit')} onClick={this.onEditClick} style={{ 'fontSize': '1.1rem' }}></span>
+                )}
               </div>
               <div className="common-toolbar">
                 {/* {isPro && (
@@ -98,11 +132,6 @@ class MainPanel extends Component {
             <Fragment>
               <div className="cur-view-toolbar">
                 <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title="Side Nav Menu" onClick={this.onMenuClick}></span>
-                {this.props.permission == 'rw' && (
-                  Utils.isDesktop() ?
-                    <button className="btn btn-secondary operation-item" title={gettext('Edit')} onClick={this.onEditClick}>{gettext('Edit')}</button> :
-                    <span className="fa fa-pencil-alt mobile-toolbar-icon" title={gettext('Edit')} onClick={this.onEditClick} style={{'fontSize': '1.1rem'}}></span>
-                )}
               </div>
               <div className="common-toolbar">
                 {/* {isPro && (
@@ -123,23 +152,19 @@ class MainPanel extends Component {
                 isWiki={true}
                 path={this.props.path}
                 repoID={repoID}
-                markdownContent={this.props.content}
+                markdownContent={content}
                 isFileLoading={this.props.isDataLoading}
                 lastModified={this.props.lastModified}
                 latestContributor={this.props.latestContributor}
                 onLinkClick={this.props.onLinkClick}
               />
             )}
-            {isViewingFile && Utils.isSdocFile(this.props.path) && (
+            {this.props.seadoc_access_token && this.state.docUuid && isViewingFile && Utils.isSdocFile(this.props.path) && (
-              <SdocWikiPageViewer
+              <WikiViewer
-                isWiki={true}
+                document={editorContent}
-                path={this.props.path}
+                showOutline={false}
-                repoID={repoID}
+                showToolbar={false}
-                markdownContent={this.props.content}
+                docUuid={this.state.docUuid}
-                isFileLoading={this.props.isDataLoading}
-                lastModified = {this.props.lastModified}
-                latestContributor={this.props.latestContributor}
-                onLinkClick={this.props.onLinkClick}
               />
             )}
           </div>

frontend/src/pages/wiki2/models/page.js

@@ -3,5 +3,7 @@ export default class Page {
     this.id = object.id;
     this.name = object.name;
     this.path = object.path;
+    this.icon = object.icon;
+    this.docUuid = object.docUuid;
   }
 }

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

@@ -115,11 +115,11 @@ class SidePanel extends Component {
     }
   };
 
-  onAddNewPage = async ({name, icon, path, successCallback, errorCallback}) => {
+  onAddNewPage = async ({ name, icon, path, docUuid,successCallback, errorCallback }) => {
     const { config } = this.props;
     const navigation = config.navigation;
     const pageId = generateUniqueId(navigation);
-    const newPage = new Page({ id: pageId, name, icon, path});
+    const newPage = new Page({ id: pageId, name, icon, path,docUuid });
     this.addPage(newPage, successCallback, errorCallback);
   };
 

frontend/src/pages/wiki2/view-structure/add-new-page-dialog.js

@@ -95,11 +95,12 @@ class AddNewPageDialog extends React.Component {
 
   createFile = (pageName, filePath) => {
     seafileAPI.createFile(repoID, filePath).then(res => {
-      const { obj_name, parent_dir } = res.data;
+      const { obj_name, parent_dir,doc_uuid } = res.data;
       this.props.onAddNewPage({
         name: pageName,
         icon: '',
         path: parent_dir === '/' ? `/${obj_name}` : `${parent_dir}/${obj_name}`,
+        docUuid:doc_uuid,
         successCallback: this.onSuccess,
         errorCallback: this.onError,
       });

frontend/src/pages/wiki2/view-structure/views/view-item.js

@@ -193,6 +193,10 @@ class ViewItem extends Component {
     }
   };
 
+  setDocUuid = (docUuid) => {
+    window.seafile['docUuid'] = docUuid;
+  };
+
   render() {
     const {
       connectDragSource, connectDragPreview, connectDropTarget, isOver, canDrop, isDragging,
@@ -200,7 +204,7 @@ class ViewItem extends Component {
     } = this.props;
     const { isShowViewEditor, viewName, viewIcon, isSelected } = this.state;
     const isOverView = isOver && canDrop;
-
+    if (isSelected) this.setDocUuid(view.docUuid);
     const isSpecialInstance = false;
 
     let viewCanDropTop;

frontend/src/pages/wiki2/wiki.css

@@ -86,6 +86,10 @@ img[src=""] {
   overflow-y: auto;
 }
 
+.main-panel-center .cur-view-content {
+  padding: 0;
+}
+
 .cur-view-content .wiki-page-content {
   width: calc(100% - 200px);
   padding-right: 30px;
@@ -96,6 +100,7 @@ img[src=""] {
     padding: 0 14px;
     padding-top: 30px;
   }
+
   .cur-view-content .wiki-page-content {
     width: 100%;
     padding-right: 0;
@@ -141,3 +146,124 @@ img[src=""] {
     padding: 0 !important;
   }
 }
+
+/* wiki editor */
+.sdoc-editor-container {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+  /* background-color: hotpink; */
+}
+
+.sdoc-wiki-scroll-container {
+  display: flex;
+  overflow: auto;
+}
+
+.sdoc-wiki-scroll-container .sdoc-article-container {
+  padding-left: 10px;
+  width: 100%;
+}
+
+.sdoc-wiki-scroll-container .sdoc-article-container .article .sdoc-header-2 {
+  border-bottom: 1px solid #ccc;
+}
+
+.sdoc-wiki-outline-container {
+  height: 80%;
+  overflow-y: auto;
+  padding-right: 1rem;
+  position: fixed;
+  right: 0;
+  top: 97px;
+  width: 300px;
+}
+
+.wiki-editor {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.wiki-editor .wiki-editor-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 20px;
+  height: 56px;
+  border-bottom: 1px solid #e5e5e5;
+  background-color: #fff;
+  z-index: 1000;
+}
+
+.wiki-editor .wiki-editor-header .doc-ops {
+  display: flex;
+}
+
+.wiki-editor .wiki-viewer-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.wiki-editor .wiki-viewer-container .side-file-bar {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 280px;
+  border-right: 1px solid #e5e5e5;
+}
+
+.wiki-editor .wiki-viewer-container .side-file-bar {
+  padding: 20px;
+}
+
+.wiki-editor .wiki-viewer-container .side-file-bar .wiki-go-lib {}
+
+.wiki-editor .wiki-viewer-container .side-file-bar .file-list .file-item {
+  padding: 20px;
+}
+
+.wiki-editor .wiki-viewer-container .side-file-bar .file-list .file-item.active {
+  background-color: #e5e5e5;
+  font-weight: bold;
+}
+
+.wiki-editor .sdoc-wiki-outline-container {
+  width: 280px;
+}
+
+/* wiki editor style */
+.sdoc-editor-container .article :first-child {
+  margin-top: 0;
+}
+
+.sdoc-editor-container .article {
+  flex: 1;
+  min-height: 800px;
+  padding: 40px 40px 40px 40px;
+}
+
+.sdoc-editor-container .article>div {
+  caret-color: blue;
+}
+
+.sdoc-editor-container .article .sdoc-drag-cover::before {
+  content: ' ';
+  width: 59px;
+  display: inline-block;
+  position: absolute;
+  left: -60px;
+}
+
+.sdoc-editor-container .article .sdoc-draging {
+  border-bottom: 2px solid rgba(35, 131, 226);
+}
+
+.sdoc-editor-container {
+  display: flex;
+  /* position: absolute; */
+  min-width: 1100px;
+  width: 100%;
+}