update rich editor

frontend/src/view-file-cdoc.js

@@ -6,44 +6,45 @@ 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 { RichEditor } from '@seafile/seafile-editor';
+import CDOCTypeChooser from '@seafile/seafile-editor/dist/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  { EditorUtilities } from '@seafile/seafile-editor/dist/editorUtilities';
+import { EditorUtilities } from '@seafile/seafile-editor/dist/editorUtilities';
 import toaster from './components/toast';
+import { RichEditorUtils } from '@seafile/seafile-editor/dist/rich-editor-utils';
+
 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;
 
 const { repoID, repoName, filePath, fileName, username, contactEmail } = window.app.pageOptions;
-const { siteRoot, seafileCollabServer, serviceURL} = window.app.config;
+const { siteRoot, seafileCollabServer, serviceURL } = window.app.config;
 const { name } = window.app.userInfo;
 
-let dirPath = '/'; 
+let dirPath = '/';
 const editorUtilities = new EditorUtilities(seafileAPI, repoID, fileName, dirPath, name, filePath, serviceURL, username, contactEmail, repoName);
 const userInfo = window.app.userInfo;
 class CDOCEditor extends React.Component {
 
   constructor(props) {
     super(props);
-    this.collabServer = seafileCollabServer ? seafileCollabServer : null
+    this.collabServer = seafileCollabServer ? seafileCollabServer : null;
+    this.richEditorUtils = new RichEditorUtils(editorUtilities, this)
     this.state = {
       value: Value.create({}),
       collabUsers: userInfo ?
-      [{user: userInfo, is_editing: false}] : [],
+        [{ user: userInfo, is_editing: false }] : [],
       fileInfo: {
         repoID: repoID,
         name: fileName,
@@ -55,7 +56,7 @@ class CDOCEditor extends React.Component {
       isSaving: false,
       contentChanged: false,
       showShareLinkDialog: false,
-      isShowHistory: false,      
+      isShowHistory: false,
     }
 
     if (this.state.collabServer) {
@@ -67,12 +68,6 @@ class CDOCEditor extends React.Component {
         this.socket_id = socket.id;
       });
     }
-  }  
-
-  resetContentChange = () => {
-    this.setState({
-      contentChanged: false
-    })
   }
 
   componentDidMount() {
@@ -80,10 +75,10 @@ class CDOCEditor extends React.Component {
       const { repoID, path } = this.state.fileInfo;
       this.socket.emit('presence', {
         request: 'join_room',
-        doc_id: CryptoJS.MD5(repoID+path).toString(),
+        doc_id: CryptoJS.MD5(repoID + path).toString(),
         user: userInfo
       });
-  
+
       this.socket.emit('repo_update', {
         request: 'watch_update',
         repo_id: editorUtilities.repoID,
@@ -96,9 +91,9 @@ class CDOCEditor extends React.Component {
     }
   }
 
-  receiveUpdateData (data) {
+  receiveUpdateData(data) {
     let currentTime = new Date();
-    if ((parseFloat(currentTime - this.lastModifyTime)/1000) <= 5) {
+    if ((parseFloat(currentTime - this.lastModifyTime) / 1000) <= 5) {
       return;
     }
     editorUtilities.fileMetaData().then((res) => {
@@ -108,13 +103,13 @@ class CDOCEditor extends React.Component {
             {gettext('This file has been updated.')}
             <a href='' >{' '}{gettext('Refresh')}</a>
           </span>,
-        {id: 'repo_updated', duration: 3600});
+          { id: 'repo_updated', duration: 3600 });
       }
     });
   }
 
   receivePresenceData(data) {
-    switch(data.response) {
+    switch (data.response) {
       case 'user_join':
         toaster.notify(`user ${data.user.name} joined`, {
           duration: 3
@@ -135,7 +130,7 @@ class CDOCEditor extends React.Component {
             }
           }
         }
-        this.setState({collabUsers: Object.values(data.users)});
+        this.setState({ collabUsers: Object.values(data.users) });
         return;
       case 'user_editing':
         toaster.danger(`user ${data.user.name} is editing this file!`, {
@@ -153,13 +148,13 @@ class CDOCEditor extends React.Component {
     if (starrd) {
       editorUtilities.unStarItem().then((response) => {
         this.setState({
-          fileInfo: Object.assign({}, this.state.fileInfo, {starred: !starrd})
+          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})
+          fileInfo: Object.assign({}, this.state.fileInfo, { starred: !starrd })
         });
       });
     }
@@ -168,7 +163,7 @@ class CDOCEditor extends React.Component {
   toggleHistory = () => {
     window.location.href = siteRoot + 'repo/file_revisions/' + repoID + '/?p=' + Utils.encodePath(filePath);
   }
-  
+
   backToParentDirectory = () => {
     window.location.href = editorUtilities.getParentDectionaryUrl();
   }
@@ -184,8 +179,7 @@ class CDOCEditor extends React.Component {
   }
 
   openDialogs = (option) => {
-    switch(option)
-    {
+    switch (option) {
       case 'help':
         window.richEditor.showHelpDialog();
         break;
@@ -206,52 +200,11 @@ class CDOCEditor extends React.Component {
     }
   }
 
-  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();
+    this.richEditorUtils.initialContent();
     editorUtilities.getFileInfo().then((response) => {
       this.setState({
-        fileInfo:Object.assign({}, this.state.fileInfo, {
+        fileInfo: Object.assign({}, this.state.fileInfo, {
           mtime: response.data.mtime,
           size: response.data.size,
           name: response.data.name,
@@ -264,91 +217,8 @@ class CDOCEditor extends React.Component {
     });
   }
 
-  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(
+    return (
       <React.Fragment>
         <CDOCTopbar
           fileInfo={this.state.fileInfo}
@@ -358,18 +228,18 @@ class CDOCEditor extends React.Component {
           backToParentDirectory={this.backToParentDirectory}
           toggleShareLinkDialog={this.toggleShareLinkDialog}
           openDialogs={this.openDialogs}
-          showFileHistory={this.state.isShowHistory ? false : true }
+          showFileHistory={this.state.isShowHistory ? false : true}
           toggleHistory={this.toggleHistory}
           saving={this.state.isSaving}
-          onSave={this.onSave}
+          onSave={this.richEditorUtils.onSave}
           contentChanged={this.state.contentChanged}
         />
         <RichEditor
-          onSave = {this.onSave}
-          resetContentChange = {this.resetContentChange}
-          value = {this.state.value}
-          onChange = {this.onChange}
-          editorUtilities = {editorUtilities}
+          onSave={this.richEditorUtils.onSave}
+          resetContentChange={this.richEditorUtils.resetContentChange}
+          value={this.state.value}
+          onChange={this.richEditorUtils.onChange}
+          editorUtilities={editorUtilities}
         />
         {this.state.showShareLinkDialog &&
           <ModalPortal>
@@ -388,19 +258,19 @@ class CDOCEditor extends React.Component {
           this.state.isShowTypeChooser &&
           <CDOCTypeChooser
             showTypeChooser={this.state.isShowTypeChooser}
-            setDocument = {this.setDocument}
+            setDocument={this.richEditorUtils.setDocument}
           />
         }
-      </React.Fragment> 
+      </React.Fragment>
     )
   }
 }
 
- const TranslatedCDOCEditor = translate('translations')(CDOCEditor)
+const TranslatedCDOCEditor = translate('translations')(CDOCEditor)
 
-ReactDOM.render (
-  <I18nextProvider i18n={ i18n } initialLanguage={ lang } >
-     <TranslatedCDOCEditor/>
+ReactDOM.render(
+  <I18nextProvider i18n={i18n} initialLanguage={lang} >
+    <TranslatedCDOCEditor />
   </I18nextProvider>
   ,
   document.getElementById('wrapper')