add rich editor top bar

frontend/src/components/toolbar/cdoc-editor-topbar.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+import { IconButton, ButtonGroup, CollabUsersButton } from '@seafile/seafile-editor/dist/components/topbarcomponent/editorToolBar';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Tooltip } from 'reactstrap';
+import FileInfo from '@seafile/seafile-editor/dist/components/topbarcomponent/file-info';
+
+
+class MoreMenu extends React.PureComponent {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      tooltipOpen: false,
+      dropdownOpen:false
+    };
+  }
+
+  tooltipToggle = () => {
+    this.setState({ tooltipOpen: !this.state.tooltipOpen });
+  }
+
+  dropdownToggle = () => {
+    this.setState({ dropdownOpen:!this.state.dropdownOpen });
+  }
+
+  render() {
+    return (
+      <Dropdown isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle} direction="down" className="mx-lg-1">
+        <DropdownToggle id="moreButton">
+          <i className="fa fa-ellipsis-v"/>
+          <Tooltip toggle={this.tooltipToggle} delay={{show: 0, hide: 0}} target="moreButton" placement='bottom' isOpen={this.state.tooltipOpen}>{gettext('More')}
+          </Tooltip>
+        </DropdownToggle>
+        <DropdownMenu className="drop-list" right={true}>
+          <DropdownItem onMouseDown={this.props.openDialogs.bind(this, 'help')}>{gettext('Help')}</DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    );
+  }
+}
+
+
+class CDOCTopbar extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let { contentChanged, saving } = this.props;
+      return (
+        <div className="sf-md-viewer-topbar">
+          <div className="sf-md-viewer-topbar-first d-flex justify-content-between">
+            <FileInfo
+              toggleStar={this.props.toggleStar}
+              editorUtilities={this.props.editorUtilities}
+              fileInfo={this.props.fileInfo}
+              showDraftSaved={this.props.showDraftSaved}
+            />
+            <div className="topbar-btn-container">
+              {this.props.collabUsers.length > 0 && <CollabUsersButton className={'collab-users-dropdown'}
+                users={this.props.collabUsers} id={'usersButton'} />}
+              <ButtonGroup>
+                <IconButton id={'shareBtn'} text={gettext('Share')} icon={'fa fa-share-alt'}
+                  onMouseDown={this.props.toggleShareLinkDialog}/>
+                <IconButton text={gettext('Back to parent directory')} id={'parentDirectory'}
+                  icon={'fa fa-folder-open'} onMouseDown={this.props.backToParentDirectory}/>
+                {
+                  this.props.showFileHistory && <IconButton id={'historyButton'}
+                    text={gettext('File History')} onMouseDown={this.props.toggleHistory} icon={'fa fa-history'}/>
+                }
+                { saving ?
+                  <button type={'button'} className={'btn btn-icon btn-secondary btn-active'}>
+                    <i className={'fa fa-spin fa-spinner'}/></button>
+                  :
+                  <IconButton text={gettext('Save')} id={'saveButton'} icon={'fa fa-save'}  disabled={!contentChanged} 
+                    onMouseDown={this.props.onSave} isActive={contentChanged}/>
+                }
+              </ButtonGroup>
+              <MoreMenu
+                openDialogs={this.props.openDialogs}
+              />
+            </div>
+          </div>
+        </div>
+      );
+    }
+}
+
+export default CDOCTopbar;

frontend/src/view-file-cdoc.js

@@ -5,14 +5,25 @@ import i18n from './i18n';
 import { seafileAPI } from './utils/seafile-api';
 import io from 'socket.io-client';
 import { gettext } from './utils/constants';
+import ModalPortal from './components/modal-portal';
+import { RichEditor } from './src/editor/editor';
+import CDOCTypeChooser from './src/components/codc-type-chooser';
+import { Value } from 'slate';
+import CDOCTopbar from './components/toolbar/cdoc-editor-topbar';
+import ShareDialog from './components/dialog/share-dialog';
+import { Utils } from './utils/utils';
+import { translate } from 'react-i18next';
 
-import { RichEditor } from '@seafile/seafile-editor';
 import  { EditorUtilities } from '@seafile/seafile-editor/dist/editorUtilities';
 import toaster from './components/toast';
+import './css/markdown-viewer/markdown-editor.css';
 import './assets/css/fa-solid.css';
 import './assets/css/fa-regular.css';
 import './assets/css/fontawesome.css';
 import './index.css';
+const JSZip = require('jszip');
+const request = require('request');
+
 const CryptoJS = require('crypto-js');
 
 const lang = window.app.config.lang;
@@ -30,6 +41,7 @@ class CDOCEditor extends React.Component {
     super(props);
     this.collabServer = seafileCollabServer ? seafileCollabServer : null
     this.state = {
+      value: Value.create({}),
       collabUsers: userInfo ?
       [{user: userInfo, is_editing: false}] : [],
       fileInfo: {
@@ -39,6 +51,11 @@ class CDOCEditor extends React.Component {
         lastModifier: '',
         id: '',
       },
+      isShowTypeChooser: false,
+      isSaving: false,
+      contentChanged: false,
+      showShareLinkDialog: false,
+      isShowHistory: false,      
     }
 
     if (this.state.collabServer) {
@@ -52,23 +69,13 @@ class CDOCEditor extends React.Component {
     }
   }  
 
-  componentDidMount() {
+  resetContentChange = () => {
-    editorUtilities.getFileInfo(repoID, filePath).then((res) => {
+    this.setState({
-      let { mtime, size, starred, permission, last_modifier_name, id } = res.data;
+      contentChanged: false
-      let lastModifier = last_modifier_name;
-      this.setState((prevState, props) => ({
-        fileInfo: {
-          ...prevState.fileInfo,
-          mtime,
-          size,
-          starred,
-          permission,
-          lastModifier,
-          id
-        }
-      }));
     })
+  }
 
+  componentDidMount() {
     if (userInfo && this.socket) {
       const { repoID, path } = this.state.fileInfo;
       this.socket.emit('presence', {
@@ -141,20 +148,260 @@ class CDOCEditor extends React.Component {
     }
   }
 
+  toggleStar = () => {
+    let starrd = this.state.fileInfo.starred;
+    if (starrd) {
+      editorUtilities.unStarItem().then((response) => {
+        this.setState({
+          fileInfo: Object.assign({}, this.state.fileInfo, {starred: !starrd})
+        });
+      });
+    } else if (!starrd) {
+      editorUtilities.starItem().then((response) => {
+        this.setState({
+          fileInfo: Object.assign({}, this.state.fileInfo, {starred: !starrd})
+        });
+      });
+    }
+  }
+
+  toggleHistory = () => {
+    window.location.href = siteRoot + 'repo/file_revisions/' + repoID + '/?p=' + Utils.encodePath(filePath);
+  }
+  
+  backToParentDirectory = () => {
+    window.location.href = editorUtilities.getParentDectionaryUrl();
+  }
+
+  toggleShareLinkDialog = () => {
+    this.openDialogs('share_link');
+  }
+
+  toggleCancel = () => {
+    this.setState({
+      showShareLinkDialog: false,
+    });
+  }
+
+  openDialogs = (option) => {
+    switch(option)
+    {
+      case 'help':
+        window.richEditor.showHelpDialog();
+        break;
+      case 'share_link':
+        this.setState({
+          showMarkdownEditorDialog: true,
+          showShareLinkDialog: true,
+        });
+        break;
+      case 'insert_file':
+        this.setState({
+          showMarkdownEditorDialog: true,
+          showInsertFileDialog: true,
+        });
+        break;
+      default:
+        return;
+    }
+  }
+
+  initialContent(){
+    const that = this;
+    editorUtilities.getFileDownloadLink().then((res) => {
+      request({ method : 'GET', url : res.data, encoding: null}, function (error, response, body) {
+        if (error || response.statusCode !== 200) {
+          console.log(error);
+          return;
+        }
+        if (body.length === 0 ) {
+          that.setState({
+            isShowTypeChooser: true,
+          });
+          return;
+        }
+        JSZip.loadAsync(body).then((zip) => {
+          if (zip.file('content.json')) {
+            zip.file('content.json').async('string').then((res) => {
+              const value = { object: 'value', document: JSON.parse(res) };
+              that.setState({
+                value: Value.create(value),
+              });
+            }, (err) => {
+              console.log(err);
+            });
+          }
+          if (zip.file('info.json')) {
+            zip.file('info.json').async('string').then((res) => {
+              that.setState({
+                zipVersion: JSON.parse(res).version,
+              });
+              this.documentType = JSON.parse(res).type;
+            }, (err) => {
+              console.log(err);
+            });
+          }
+          // const assets = zip.folder('assets/'); // get images in the future
+        });
+      });
+    });
+  }
+
+  componentWillMount() {
+    this.initialContent();
+    editorUtilities.getFileInfo().then((response) => {
+      this.setState({
+        fileInfo:Object.assign({}, this.state.fileInfo, {
+          mtime: response.data.mtime,
+          size: response.data.size,
+          name: response.data.name,
+          starred: response.data.starred,
+          lastModifier: response.data.last_modifier_name,
+          permission: response.data.permission,
+          id: response.data.id,
+        })
+      });
+    });
+  }
+
+  onChange = (editor) => {
+    const ops = editor.operations
+    .filter(o => o.type !== 'set_selection' && o.type !== 'set_value');
+    if (ops.size !== 0) {
+      this.setState({
+        contentChanged: true,
+        value: editor.value
+      })
+    }
+  }
+
+  onSave = (editor) => {
+    const info = { 'version': 1, type: this.documentType };
+    let zip = new JSZip();
+    this.setState({
+      isSaving: true
+    });
+    zip.file('info.json', JSON.stringify(info));
+    zip.file('content.json', JSON.stringify(this.state.value.document));
+    zip.folder('assets');
+    zip.generateAsync({ type: 'blob' }).then((blob) => {
+      editorUtilities.saveContent(blob).then(() =>{
+        this.setState({
+          isSaving: false,
+          contentChanged: false
+        });
+        toaster.success(this.props.t('file_saved'), {
+          duration: 2,
+        });
+        editorUtilities.getFileInfo().then((res) => {
+          this.setFileInfoMtime(res.data);
+        });
+      }, (err) => {
+        this.setState({
+          isSaving: false
+        });
+      });
+    }, function (err) {
+      this.setState({
+        isSaving: false
+      });
+      console.log(err);
+    });
+  }
+
+  setFileInfoMtime = (fileInfo) => {
+    this.setState({
+      fileInfo: Object.assign({}, this.state.fileInfo, { mtime: fileInfo.mtime, id: fileInfo.id, lastModifier: fileInfo.last_modifier_name })
+    });
+  };
+
+  setDocument = (type, value) => {
+    this.setState({
+      value: value,
+    });
+    this.documentType = type;
+    // save the document type
+    {
+      const info = { 'version': 1, type: type};
+      let zip = new JSZip();
+      zip.file('info.json', JSON.stringify(info));
+      zip.file('content.json', JSON.stringify(value.document));
+      zip.folder('assets');
+      zip.generateAsync({ type: 'blob' }).then((blob) => {
+        editorUtilities.saveContent(blob).then(() =>{
+          editorUtilities.getFileInfo().then((res) => {
+            this.setFileInfoMtime(res.data);
+          });
+        }, (err) => {
+        });
+      }, function (err) {
+        console.log(err);
+      });
+    }
+    this.toggleTypeChooser();
+  }
+
+  toggleTypeChooser = () => {
+    this.setState({
+      isShowTypeChooser: !this.state.isShowTypeChooser
+    });
+  }
+
   render() {
     return(
-      <I18nextProvider i18n={ i18n } initialLanguage={ lang } >
+      <React.Fragment>
-        <RichEditor
+        <CDOCTopbar
+          fileInfo={this.state.fileInfo}
           collabUsers={this.state.collabUsers}
+          toggleStar={this.toggleStar}
+          editorUtilities={editorUtilities}
+          backToParentDirectory={this.backToParentDirectory}
+          toggleShareLinkDialog={this.toggleShareLinkDialog}
+          openDialogs={this.openDialogs}
+          showFileHistory={this.state.isShowHistory ? false : true }
+          toggleHistory={this.toggleHistory}
+          saving={this.state.isSaving}
+          onSave={this.onSave}
+          contentChanged={this.state.contentChanged}
+        />
+        <RichEditor
+          onSave = {this.onSave}
+          resetContentChange = {this.resetContentChange}
+          value = {this.state.value}
+          onChange = {this.onChange}
           editorUtilities = {editorUtilities}
         />
-      </I18nextProvider>
+        {this.state.showShareLinkDialog &&
+          <ModalPortal>
+            <ShareDialog
+              itemType="file"
+              itemName={this.state.fileInfo.name}
+              itemPath={filePath}
+              repoID={repoID}
+              toggleDialog={this.toggleCancel}
+              isGroupOwnedRepo={false}
+              repoEncrypted={false}
+            />
+          </ModalPortal>
+        }
+        {
+          this.state.isShowTypeChooser &&
+          <CDOCTypeChooser
+            showTypeChooser={this.state.isShowTypeChooser}
+            setDocument = {this.setDocument}
+          />
+        }
+      </React.Fragment> 
     )
   }
 }
 
+ const TranslatedCDOCEditor = translate('translations')(CDOCEditor)
 
 ReactDOM.render (
-  <CDOCEditor/>,
+  <I18nextProvider i18n={ i18n } initialLanguage={ lang } >
+     <TranslatedCDOCEditor/>
+  </I18nextProvider>
+  ,
   document.getElementById('wrapper')
 );