update rich editor

frontend/package-lock.json

@@ -158,9 +158,9 @@
       "integrity": "sha512-YsAX+gnnf1ytv7asZgJP7T56DALQniKtRVtlz0f11PljLV19I1Av+Oz3QcYaRiKhCCB+EMnVKI9Yc14sYKp6lA=="
     },
     "@seafile/seafile-editor": {
-      "version": "0.2.14",
+      "version": "0.2.18",
-      "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-0.2.14.tgz",
+      "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-0.2.18.tgz",
-      "integrity": "sha512-i+dZEbW4ncsbj4On9if4V6K77claiXG2XaE4FIPLYffppx3RbKFpTYLkNSXqYYCSGz1htJ88jxuFOgwmao+MRg==",
+      "integrity": "sha512-b6VmsJN3OOM6icCic+zjnNsGILO2cC3cQOBAuonqaF522XlMAkl1bww2ShMXtn85ugGfLnnhvh/B3UT60jhL1w==",
       "requires": {
         "@seafile/slate-react": "^0.1.8",
         "autoprefixer": "7.1.6",
@@ -237,9 +237,9 @@
           "integrity": "sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA=="
         },
         "react-select": {
-          "version": "2.4.2",
+          "version": "2.4.3",
-          "resolved": "https://registry.npmjs.org/react-select/-/react-select-2.4.2.tgz",
+          "resolved": "https://registry.npmjs.org/react-select/-/react-select-2.4.3.tgz",
-          "integrity": "sha512-5xFOQ6JJktkY5NTaHrc6x9mKwIjhNIiBkGic1j71uyY+ulFpRFra6f4WKLd9fuCylk4WjLpO5zDhdF4CAcwFzA==",
+          "integrity": "sha512-cmxNaiHpviRYkojeW9rGEUJ4jpX7QTmPe2wcscwA4d1lStzw/cJtr4ft5H2O/YhfpkrcwaLghu3XmEYdXhBo8Q==",
           "requires": {
             "classnames": "^2.2.5",
             "emotion": "^9.1.2",
@@ -338,9 +338,9 @@
       }
     },
     "@types/node": {
-      "version": "11.13.4",
+      "version": "11.13.5",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-11.13.4.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-11.13.5.tgz",
-      "integrity": "sha512-+rabAZZ3Yn7tF/XPGHupKIL5EcAbrLxnTr/hgQICxbeuAfWtT0UZSfULE+ndusckBItcv4o6ZeOJplQikVcLvQ=="
+      "integrity": "sha512-/OMMBnjVtDuwX1tg2pkYVSqRIDSmNTnvVvmvP/2xiMAAWf4a5+JozrApCrO4WCAILmXVxfNoQ3E+0HJbNpFVGg=="
     },
     "@videojs/http-streaming": {
       "version": "1.5.1",
@@ -765,7 +765,7 @@
     },
     "axios": {
       "version": "0.18.0",
-      "resolved": "http://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
       "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
       "requires": {
         "follow-redirects": "^1.3.0",
@@ -3858,12 +3858,9 @@
       }
     },
     "comma-separated-tokens": {
-      "version": "1.0.5",
+      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.6.tgz",
-      "integrity": "sha512-Cg90/fcK93n0ecgYTAz1jaA3zvnQ0ExlmKY1rdbyHqAx6BHxwoJc+J7HDu0iuQ7ixEs1qaa+WyQ6oeuBpYP1iA==",
+      "integrity": "sha512-f20oA7jsrrmERTS70r3tmRSxR8IJV2MTN7qe6hzgX+3ARfXrdMJFvGWvWQK0xpcBurg9j9eO2MiqzZ8Y+/UPCA=="
-      "requires": {
-        "trim": "0.0.1"
-      }
     },
     "commander": {
       "version": "2.14.1",
@@ -6799,7 +6796,7 @@
     },
     "git-up": {
       "version": "1.2.1",
-      "resolved": "http://registry.npmjs.org/git-up/-/git-up-1.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/git-up/-/git-up-1.2.1.tgz",
       "integrity": "sha1-JkSAoAax2EJhrB/gmjpRacV+oZ0=",
       "requires": {
         "is-ssh": "^1.0.0",
@@ -6808,7 +6805,7 @@
     },
     "git-url-parse": {
       "version": "5.0.1",
-      "resolved": "http://registry.npmjs.org/git-url-parse/-/git-url-parse-5.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/git-url-parse/-/git-url-parse-5.0.1.tgz",
       "integrity": "sha1-/j15xnRq4FBIz6UIyB553du6OEM=",
       "requires": {
         "git-up": "^1.0.0"
@@ -9769,7 +9766,7 @@
     },
     "node-status-codes": {
       "version": "1.0.0",
-      "resolved": "http://registry.npmjs.org/node-status-codes/-/node-status-codes-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/node-status-codes/-/node-status-codes-1.0.0.tgz",
       "integrity": "sha1-WuVUHQJGRdMqWPzdyc7s6nrjrC8="
     },
     "noop6": {
@@ -10140,7 +10137,7 @@
     },
     "package.json": {
       "version": "2.0.1",
-      "resolved": "http://registry.npmjs.org/package.json/-/package.json-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/package.json/-/package.json-2.0.1.tgz",
       "integrity": "sha1-+IYFnSpJ7QduZIg2ldc7K0bSHW0=",
       "requires": {
         "git-package-json": "^1.4.0",
@@ -10150,7 +10147,7 @@
       "dependencies": {
         "got": {
           "version": "5.7.1",
-          "resolved": "http://registry.npmjs.org/got/-/got-5.7.1.tgz",
+          "resolved": "https://registry.npmjs.org/got/-/got-5.7.1.tgz",
           "integrity": "sha1-X4FjWmHkplifGAVp6k44FoClHzU=",
           "requires": {
             "create-error-class": "^3.0.1",
@@ -10172,7 +10169,7 @@
         },
         "package-json": {
           "version": "2.4.0",
-          "resolved": "http://registry.npmjs.org/package-json/-/package-json-2.4.0.tgz",
+          "resolved": "https://registry.npmjs.org/package-json/-/package-json-2.4.0.tgz",
           "integrity": "sha1-DRW9Z9HLvduyyiIv8u24a8sxqLs=",
           "requires": {
             "got": "^5.0.0",
@@ -13855,12 +13852,9 @@
       }
     },
     "space-separated-tokens": {
-      "version": "1.1.2",
+      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.3.tgz",
-      "integrity": "sha512-G3jprCEw+xFEs0ORweLmblJ3XLymGGr6hxZYTYZjIlvDti9vOBUjRQa1Rzjt012aRrocKstHwdNi+F7HguPsEA==",
+      "integrity": "sha512-/M5RAdBuQlSDPNfA5ube+fkHbHyY08pMuADLmsAQURzo56w90r681oiOoz3o3ZQyWdSeNucpTFjL+Ggd5qui3w=="
-      "requires": {
-        "trim": "0.0.1"
-      }
     },
     "spdx-correct": {
       "version": "1.0.2",
@@ -15312,13 +15306,13 @@
       "dependencies": {
         "ansi-regex": {
           "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz",
+          "resolved": "http://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz",
           "integrity": "sha1-QchHGUZGN15qGl0Qw8oFTvn8mA0=",
           "dev": true
         },
         "strip-ansi": {
           "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-2.0.1.tgz",
+          "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-2.0.1.tgz",
           "integrity": "sha1-32LBqpTtLxFOHQ8h/R1QSCt5pg4=",
           "dev": true,
           "requires": {

frontend/package.json

@@ -7,7 +7,7 @@
     "@seafile/react-data-grid": "^6.0.1",
     "@seafile/react-data-grid-addons": "^6.0.1",
     "@seafile/resumablejs": "^1.1.9",
-    "@seafile/seafile-editor": "^0.2.14",
+    "@seafile/seafile-editor": "^0.2.18",
     "MD5": "^1.3.0",
     "autoprefixer": "7.1.6",
     "classnames": "^2.2.6",

frontend/src/view-file-cdoc.js

@@ -6,8 +6,8 @@ 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 { RichEditor } from '@seafile/seafile-editor';
-import CDOCTypeChooser from './src/components/codc-type-chooser';
+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';
@@ -16,20 +16,20 @@ import { translate } from 'react-i18next';
 
 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 = '/';
@@ -39,11 +39,12 @@ 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,
@@ -69,18 +70,12 @@ class CDOCEditor extends React.Component {
     }
   }
 
-  resetContentChange = () => {
-    this.setState({
-      contentChanged: false
-    })
-  }
-
   componentDidMount() {
     if (userInfo && this.socket) {
       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
       });
 
@@ -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 })
         });
       });
     }
@@ -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}
+          onSave={this.richEditorUtils.onSave}
-          resetContentChange = {this.resetContentChange}
+          resetContentChange={this.richEditorUtils.resetContentChange}
-          value = {this.state.value}
+          value={this.state.value}
-          onChange = {this.onChange}
+          onChange={this.richEditorUtils.onChange}
-          editorUtilities = {editorUtilities}
+          editorUtilities={editorUtilities}
         />
         {this.state.showShareLinkDialog &&
           <ModalPortal>
@@ -388,7 +258,7 @@ class CDOCEditor extends React.Component {
           this.state.isShowTypeChooser &&
           <CDOCTypeChooser
             showTypeChooser={this.state.isShowTypeChooser}
-            setDocument = {this.setDocument}
+            setDocument={this.richEditorUtils.setDocument}
           />
         }
       </React.Fragment>
@@ -396,11 +266,11 @@ class CDOCEditor extends React.Component {
   }
 }
 
- const TranslatedCDOCEditor = translate('translations')(CDOCEditor)
+const TranslatedCDOCEditor = translate('translations')(CDOCEditor)
 
-ReactDOM.render (
+ReactDOM.render(
-  <I18nextProvider i18n={ i18n } initialLanguage={ lang } >
+  <I18nextProvider i18n={i18n} initialLanguage={lang} >
-     <TranslatedCDOCEditor/>
+    <TranslatedCDOCEditor />
   </I18nextProvider>
   ,
   document.getElementById('wrapper')