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;
@@ -153,7 +156,7 @@ class Wiki extends Component {
 
     if (isDir === 'False') {
       // this.showFile(initialPath);
-      this.setState({path: initialPath});
+      this.setState({ path: initialPath });
       return;
     }
 
@@ -171,9 +174,9 @@ class Wiki extends Component {
     }
 
     if (isDir === 'None') {
-      this.setState({pathExist: false});
+      this.setState({ pathExist: false });
       let fileUrl = siteRoot + this.handlePath() + wikiId + Utils.encodePath(initialPath);
-      window.history.pushState({url: fileUrl, path: initialPath}, initialPath, fileUrl);
+      window.history.pushState({ url: fileUrl, path: initialPath }, initialPath, fileUrl);
     }
   };
 
@@ -191,7 +194,7 @@ class Wiki extends Component {
         });
       });
     }).catch(() => {
-      this.setState({isLoadFailed: true});
+      this.setState({ isLoadFailed: true });
     });
   };
 
@@ -201,7 +204,7 @@ class Wiki extends Component {
 
     // update location url
     let fileUrl = siteRoot + this.handlePath() + wikiId + Utils.encodePath(dirPath);
-    window.history.pushState({url: fileUrl, path: dirPath}, dirPath, fileUrl);
+    window.history.pushState({ url: fileUrl, path: dirPath }, dirPath, fileUrl);
   };
 
   showFile = (filePath) => {
@@ -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);
@@ -229,14 +234,14 @@ class Wiki extends Component {
     const hash = window.location.hash;
     let fileUrl = `${siteRoot}${this.handlePath()}${wikiId}${Utils.encodePath(filePath)}${hash}`;
     if (filePath === '/home.md') {
-      window.history.replaceState({url: fileUrl, path: filePath}, filePath, fileUrl);
+      window.history.replaceState({ url: fileUrl, path: filePath }, filePath, fileUrl);
     } else {
-      window.history.pushState({url: fileUrl, path: filePath}, filePath, fileUrl);
+      window.history.pushState({ url: fileUrl, path: filePath }, filePath, fileUrl);
     }
   };
 
   loadDirentList = (dirPath) => {
-    this.setState({isDataLoading: true});
+    this.setState({ isDataLoading: true });
     wikiAPI.listWiki2Dir(wikiId, dirPath).then(res => {
       let direntList = res.data.dirent_list.map(item => {
         let dirent = new Dirent(item);
@@ -259,7 +264,7 @@ class Wiki extends Component {
         isDataLoading: false,
       });
     }).catch(() => {
-      this.setState({isLoadFailed: true});
+      this.setState({ isLoadFailed: true });
     });
   };
 
@@ -279,7 +284,7 @@ class Wiki extends Component {
     } else {
       let parentNode = tree.getNodeByPath(node.parentNode.path);
       parentNode.isExpanded = true;
-      this.setState({treeData: tree, currentNode: node}); //tree
+      this.setState({ treeData: tree, currentNode: node }); //tree
     }
   };
 
@@ -312,12 +317,12 @@ class Wiki extends Component {
         treeData: tree
       });
     }).catch(() => {
-      this.setState({isLoadFailed: true});
+      this.setState({ isLoadFailed: true });
     });
   };
 
   removePythonWrapper = () => {
-    if (this.pythonWrapper)  {
+    if (this.pythonWrapper) {
       document.body.removeChild(this.pythonWrapper);
       this.pythonWrapper = null;
     }
@@ -391,7 +396,7 @@ class Wiki extends Component {
       let tree = this.state.treeData.clone();
       let node = tree.getNodeByPath(item.path);
       treeHelper.expandNode(node);
-      this.setState({treeData: tree});
+      this.setState({ treeData: tree });
     } else {
       this.loadNodeAndParentsByPath(path);
     }
@@ -411,14 +416,14 @@ class Wiki extends Component {
   };
 
   onMenuClick = () => {
-    this.setState({closeSideBar: !this.state.closeSideBar});
+    this.setState({ closeSideBar: !this.state.closeSideBar });
   };
 
   onMainNavBarClick = (nodePath) => {
     let tree = this.state.treeData.clone();
     let node = tree.getNodeByPath(nodePath);
     tree.expandNode(node);
-    this.setState({treeData: tree, currentNode: node});
+    this.setState({ treeData: tree, currentNode: node });
     this.showDir(node.path);
   };
 
@@ -431,7 +436,7 @@ class Wiki extends Component {
       if (Utils.isMarkdownFile(direntPath)) {
         this.showFile(direntPath);
       } else {
-        const w=window.open('about:blank');
+        const w = window.open('about:blank');
         const url = siteRoot + 'd/' + sharedToken + '/files/?p=' + Utils.encodePath(direntPath);
         w.location.href = url;
       }
@@ -439,12 +444,12 @@ class Wiki extends Component {
   };
 
   onCloseSide = () => {
-    this.setState({closeSideBar: !this.state.closeSideBar});
+    this.setState({ closeSideBar: !this.state.closeSideBar });
   };
 
   onNodeClick = (node) => {
     if (!this.state.pathExist) {
-      this.setState({pathExist: true});
+      this.setState({ pathExist: true });
     }
 
     if (node.object.isDir()) {
@@ -454,23 +459,23 @@ class Wiki extends Component {
         wikiAPI.listWiki2Dir(wikiId, node.path).then(res => {
           this.addResponseListToNode(res.data.dirent_list, node);
           tree.collapseNode(node);
-          this.setState({treeData: tree});
+          this.setState({ treeData: tree });
         });
       }
       if (node.path === this.state.path) {
         if (node.isExpanded) {
           let tree = treeHelper.collapseNode(this.state.treeData, node);
-          this.setState({treeData: tree});
+          this.setState({ treeData: tree });
         } else {
           let tree = this.state.treeData.clone();
           node = tree.getNodeByPath(node.path);
           tree.expandNode(node);
-          this.setState({treeData: tree});
+          this.setState({ treeData: tree });
         }
       }
     }
 
-    if (node.path === this.state.path ) {
+    if (node.path === this.state.path) {
       return;
     }
 
@@ -492,7 +497,7 @@ class Wiki extends Component {
 
   onNodeCollapse = (node) => {
     let tree = treeHelper.collapseNode(this.state.treeData, node);
-    this.setState({treeData: tree});
+    this.setState({ treeData: tree });
   };
 
   onNodeExpanded = (node) => {
@@ -501,11 +506,11 @@ class Wiki extends Component {
     if (!node.isLoaded) {
       wikiAPI.listWiki2Dir(wikiId, node.path).then(res => {
         this.addResponseListToNode(res.data.dirent_list, node);
-        this.setState({treeData: tree});
+        this.setState({ treeData: tree });
       });
     } else {
       tree.expandNode(node);
-      this.setState({treeData: tree});
+      this.setState({ treeData: tree });
     }
   };
 
@@ -525,7 +530,7 @@ class Wiki extends Component {
     direntList = Utils.sortDirents(direntList, 'name', 'asc');
 
     let nodeList = direntList.map(object => {
-      return new TreeNode({object});
+      return new TreeNode({ object });
     });
     node.addChildren(nodeList);
   };
@@ -539,7 +544,7 @@ class Wiki extends Component {
     direntList = Utils.sortDirents(direntList, 'name', 'asc');
 
     let nodeList = direntList.map(object => {
-      return new TreeNode({object});
+      return new TreeNode({ object });
     });
     node.addChildren(nodeList);
   };
@@ -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,19 +84,42 @@ 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 wiki-main-panel" style={{ flex: isEditWiki ? '1 0 76%' : '1 0 80%' }}>
         <div className="main-panel-hide hide">{this.props.content}</div>
         <div className={`main-panel-north panel-top ${this.props.permission === 'rw' ? 'border-left-show' : ''}`}>
           {!username &&
             <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}
+                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

@@ -53,7 +53,7 @@ class SidePanel extends Component {
   renderIndexView = () => {
     return (
       <div className="wiki-pages-container">
-        <div style={{marginTop: '2px'}}></div>
+        <div style={{ marginTop: '2px' }}></div>
         <IndexMdViewer
           indexContent={this.props.indexContent}
           onLinkClick={this.props.onLinkClick}
@@ -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);
   };
 
@@ -392,12 +392,12 @@ class SidePanel extends Component {
 
   render() {
     return (
-      <div className={`side-panel wiki-side-panel ${this.props.closeSideBar ? '': 'left-zero'}`}>
+      <div className={`side-panel wiki-side-panel ${this.props.closeSideBar ? '' : 'left-zero'}`}>
         <div className="side-panel-top panel-top">
           <h4 className="ml-0 mb-0 text-truncate" title={repoName}>{repoName}</h4>
         </div>
         <div id="side-nav" className="wiki-side-nav" role="navigation">
-          {this.renderContent() }
+          {this.renderContent()}
         </div>
       </div>
     );

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,
       });
@@ -135,7 +136,7 @@ class AddNewPageDialog extends React.Component {
         <ModalFooter>
           <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
           {this.state.isLoading ?
-            <Button color="primary" disabled><Loading/></Button> :
+            <Button color="primary" disabled><Loading /></Button> :
             <Button color="primary" onClick={this.onSubmit}>{gettext('Submit')}</Button>
           }
         </ModalFooter>

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

@@ -45,7 +45,7 @@
 .wiki-pages-container .tree-view {
   margin-left: -10px;
   margin-top: 14px;
-  padding-left:0;
+  padding-left: 0;
 }
 
 img[src=""] {
@@ -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;
@@ -116,7 +121,7 @@ img[src=""] {
 }
 
 .wiki-page-container .outline-h2.active,
-.wiki-page-container .outline-h3.active { 
+.wiki-page-container .outline-h3.active {
   color: #eb8205;
 }
 
@@ -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%;
+}