@seafile/sdoc-editor 0.1.29 → 0.1.31

package/dist/api/seafile-api.js

@@ -0,0 +1,31 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import axios from 'axios';
+var SeafileAPI = /*#__PURE__*/function () {
+  function SeafileAPI(server, token) {
+    _classCallCheck(this, SeafileAPI);
+    this.req = axios.create({
+      baseURL: server,
+      headers: {
+        Authorization: 'Token ' + token
+      }
+    });
+  }
+  _createClass(SeafileAPI, [{
+    key: "uploadSdocImage",
+    value: function uploadSdocImage(docUuid, file) {
+      var url = '/api/v2.1/seadoc/upload-image/' + docUuid + '/';
+      var form = new FormData();
+      form.append('file', file);
+      return this.req.post(url, form);
+    }
+  }, {
+    key: "getSdocDownloadImageUrl",
+    value: function getSdocDownloadImageUrl(docUuid, imageName) {
+      var url = '/api/v2.1/seadoc/download-image/' + docUuid + '/' + encodeURIComponent(imageName);
+      return this.req.get(url);
+    }
+  }]);
+  return SeafileAPI;
+}();
+export default SeafileAPI;

package/dist/assets/css/diff-viewer.css

@@ -0,0 +1,19 @@
+.sdoc-diff {
+  padding: 0 5px;
+  margin: 0 -5px;
+  overflow: hidden;
+}
+
+.sdoc-diff-added {
+  background-color: #e6ffed;
+}
+
+.sdoc-diff-removed {
+  background-color: #ffeef0;
+}
+
+.sdoc-diff-modify {
+  padding-left: 2px;
+  margin-left: -5px;
+  border-left: 3px solid #f9c513;
+}

package/dist/basic-sdk/extension/constants/element-type.js

@@ -0,0 +1,29 @@
+export var BLOCKQUOTE = 'blockquote';
+export var BOLD = 'bold';
+export var ITALIC = 'italic';
+export var HEADER = 'header';
+export var HEADER1 = 'header1';
+export var HEADER2 = 'header2';
+export var HEADER3 = 'header3';
+export var HEADER4 = 'header4';
+export var HEADER5 = 'header5';
+export var HEADER6 = 'header6';
+export var ORDERED_LIST = 'ordered_list';
+export var UNORDERED_LIST = 'unordered_list'; // unordered_list can not work
+export var LIST_ITEM = 'list-item';
+export var LIST_LIC = 'list-lic'; // placeholder
+export var CHECK_LIST = 'check-list';
+export var CHECK_LIST_ITEM = 'check-list-item';
+export var PARAGRAPH = 'paragraph';
+export var LINK = 'link';
+export var HTML = 'html';
+export var CODE_BLOCK = 'code-block';
+export var CODE_LINE = 'code-line';
+export var IMAGE = 'image';
+export var TABLE = 'table';
+export var TABLE_CELL = 'table-cell';
+export var TABLE_ROW = 'table-row';
+export var FORMULA = 'formula';
+export var COLUMN = 'column';
+export var TEXT_STYLE = 'text-style';
+export var BOLD_ITALIC = 'bold-italic';

package/dist/basic-sdk/extension/constants/index.js

@@ -1,35 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _MENUS_CONFIG_MAP, _HEADER_TITLE_MAP;
 // extension plugin
-export var BLOCKQUOTE = 'blockquote';
-export var BOLD = 'bold';
-export var ITALIC = 'italic';
-export var HEADER = 'header';
-export var HEADER1 = 'header1';
-export var HEADER2 = 'header2';
-export var HEADER3 = 'header3';
-export var HEADER4 = 'header4';
-export var HEADER5 = 'header5';
-export var HEADER6 = 'header6';
-export var ORDERED_LIST = 'ordered_list';
-export var UNORDERED_LIST = 'unordered_list'; // unordered_list can not work
-export var LIST_ITEM = 'list-item';
-export var LIST_LIC = 'list-lic'; // placeholder
-export var CHECK_LIST = 'check-list';
-export var CHECK_LIST_ITEM = 'check-list-item';
-export var PARAGRAPH = 'paragraph';
-export var LINK = 'link';
-export var HTML = 'html';
-export var CODE_BLOCK = 'code-block';
-export var CODE_LINE = 'code-line';
-export var IMAGE = 'image';
-export var TABLE = 'table';
-export var TABLE_CELL = 'table-cell';
-export var TABLE_ROW = 'table-row';
-export var FORMULA = 'formula';
-export var COLUMN = 'column';
-export var TEXTSTYLE = 'text-style';
-export var BOLD_ITALIC = 'bold-italic';
+import * as ELEMENT_TYPE from './element-type';
+import { BLOCKQUOTE, BOLD, ITALIC, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, PARAGRAPH, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, BOLD_ITALIC } from './element-type';
 
 // history
 export var UNDO = 'undo';
@@ -64,7 +37,7 @@ export var MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, _defineProperty(_MENUS_CO
   id: "sdoc_".concat(IMAGE),
   iconClass: 'iconfont icon-image',
   text: 'insert_image'
-}), _defineProperty(_MENUS_CONFIG_MAP, TEXTSTYLE, [{
+}), _defineProperty(_MENUS_CONFIG_MAP, TEXT_STYLE, [{
   id: ITALIC,
   iconClass: 'iconfont icon-italic',
   text: 'italic',
@@ -85,4 +58,11 @@ export var MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, _defineProperty(_MENUS_CO
   text: 'redo',
   type: 'redo'
 }), _MENUS_CONFIG_MAP);
-export var HEADER_TITLE_MAP = (_HEADER_TITLE_MAP = {}, _defineProperty(_HEADER_TITLE_MAP, HEADER1, 'header_one'), _defineProperty(_HEADER_TITLE_MAP, HEADER2, 'header_two'), _defineProperty(_HEADER_TITLE_MAP, HEADER3, 'header_three'), _defineProperty(_HEADER_TITLE_MAP, HEADER4, 'header_four'), _defineProperty(_HEADER_TITLE_MAP, HEADER5, 'header_five'), _defineProperty(_HEADER_TITLE_MAP, HEADER6, 'header_six'), _defineProperty(_HEADER_TITLE_MAP, PARAGRAPH, 'paragraph'), _HEADER_TITLE_MAP);
+export var HEADER_TITLE_MAP = (_HEADER_TITLE_MAP = {}, _defineProperty(_HEADER_TITLE_MAP, HEADER1, 'header_one'), _defineProperty(_HEADER_TITLE_MAP, HEADER2, 'header_two'), _defineProperty(_HEADER_TITLE_MAP, HEADER3, 'header_three'), _defineProperty(_HEADER_TITLE_MAP, HEADER4, 'header_four'), _defineProperty(_HEADER_TITLE_MAP, HEADER5, 'header_five'), _defineProperty(_HEADER_TITLE_MAP, HEADER6, 'header_six'), _defineProperty(_HEADER_TITLE_MAP, PARAGRAPH, 'paragraph'), _HEADER_TITLE_MAP);
+export var DIFF_TYPE = {
+  ADD: 'add',
+  DELETE: 'delete',
+  MODIFY: 'modify',
+  COMMON: 'common'
+};
+export { BLOCKQUOTE, BOLD, ITALIC, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, PARAGRAPH, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, BOLD_ITALIC, ELEMENT_TYPE };

package/dist/basic-sdk/extension/plugins/image/menu/index.js

@@ -90,9 +90,7 @@ var ImageMenu = /*#__PURE__*/function (_React$Component) {
       var editor = _this.props.editor;
       var file = event.target.files[0];
       context.uploadLocalImage(file).then(function (fileUrl) {
-        console.log(fileUrl);
         insertImage(editor, fileUrl, _this.selection);
-        console.log(editor.children);
       });
     };
     _this.setInputRef = function (ref) {

package/dist/basic-sdk/extension/plugins/image/render-elem.js

@@ -5,10 +5,12 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import { useSelected } from '@seafile/slate-react';
 import React from 'react';
-import { updateImage } from './helpers';
 import classNames from 'classnames';
 import { withTranslation } from 'react-i18next';
+import urlJoin from 'url-join';
+import { updateImage } from './helpers';
 import ImagePreviewer from './dialogs/image-previewer';
+import context from '../../../../context';
 var Image = /*#__PURE__*/function (_React$Component) {
   _inherits(Image, _React$Component);
   var _super = _createSuper(Image);
@@ -87,6 +89,13 @@ var Image = /*#__PURE__*/function (_React$Component) {
     return _this;
   }
   _createClass(Image, [{
+    key: "getImageURL",
+    value: function getImageURL(url) {
+      var serviceUrl = context.getSetting('serviceUrl');
+      var assetsUrl = context.getSetting('assetsUrl');
+      return urlJoin(serviceUrl, assetsUrl, url);
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
@@ -107,7 +116,7 @@ var Image = /*#__PURE__*/function (_React$Component) {
       }, attributes), /*#__PURE__*/React.createElement("img", {
         className: imageClassName,
         ref: this.setImageRef,
-        src: data.src,
+        src: this.getImageURL(data.src),
         style: imageStyle,
         draggable: false,
         alt: ""

package/dist/basic-sdk/extension/plugins/text-style/menu/index.js

@@ -4,7 +4,7 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
-import { TEXTSTYLE, MENUS_CONFIG_MAP } from '../../../constants';
+import { TEXT_STYLE, MENUS_CONFIG_MAP } from '../../../constants';
 import { focusEditor } from '../../../core';
 import { MenuItem } from '../../../menu';
 import { getValue, isMenuDisabled, addMark, removeMark } from '../helpers';
@@ -68,7 +68,7 @@ var TextStyleMenuList = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var textStyleMenuList = this.getTextStyleMenuList();
       return /*#__PURE__*/React.createElement(React.Fragment, null, textStyleMenuList.map(function (menuItem, index) {
-        var menuItemConfig = MENUS_CONFIG_MAP[TEXTSTYLE][index];
+        var menuItemConfig = MENUS_CONFIG_MAP[TEXT_STYLE][index];
         var menuItemProps = _objectSpread(_objectSpread({}, menuItem), menuItemConfig);
         return /*#__PURE__*/React.createElement(MenuItem, Object.assign({
           key: index

package/dist/basic-sdk/utils/diff.js

@@ -0,0 +1,191 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { DIFF_TYPE, ELEMENT_TYPE } from '../../basic-sdk/extension/constants';
+import ObjectUtils from './object-utils';
+var getElementIndexInDiffDocument = function getElementIndexInDiffDocument(diffValue, element) {
+  return diffValue.findIndex(function (item) {
+    return item.id === element.id;
+  });
+};
+var getNearestElementIndex = function getNearestElementIndex(diff, oldDocument, elementId) {
+  var diffValue = diff.value;
+  var elementInDiffDocumentIdx = getElementIndexInDiffDocument(diffValue, elementId);
+  if (elementInDiffDocumentIdx > -1) return elementInDiffDocumentIdx + 1;
+  var oldElementCount = oldDocument.length;
+  var elementInOldDocumentIndex = oldDocument.findIndex(function (item) {
+    return item.id === elementId;
+  });
+  var leftIndex = elementInOldDocumentIndex - 1;
+  leftIndex = leftIndex === -1 ? 0 : leftIndex;
+  var rightIndex = elementInOldDocumentIndex + 1;
+  rightIndex = rightIndex === oldElementCount - 1 ? oldElementCount - 1 : rightIndex;
+  while (elementInDiffDocumentIdx === -1 && leftIndex > -2 && rightIndex < oldElementCount + 1) {
+    if (leftIndex > -1) {
+      var oldLeftElement = oldDocument[leftIndex];
+      elementInDiffDocumentIdx = getElementIndexInDiffDocument(diffValue, oldLeftElement);
+      if (elementInDiffDocumentIdx > -1) {
+        return elementInDiffDocumentIdx + 1;
+      }
+    }
+    if (rightIndex < oldElementCount) {
+      var oldLastElement = oldDocument[rightIndex];
+      elementInDiffDocumentIdx = getElementIndexInDiffDocument(diffValue, oldLastElement);
+      if (elementInDiffDocumentIdx > -1) {
+        return elementInDiffDocumentIdx;
+      }
+    }
+    leftIndex--;
+    rightIndex++;
+    if (leftIndex === -2 && rightIndex < oldElementCount) {
+      leftIndex = -1;
+    }
+    if (rightIndex === oldElementCount && leftIndex > -1) {
+      rightIndex = oldElementCount;
+    }
+  }
+  return diffValue.length - 1;
+};
+var updateDiffValue = function updateDiffValue(diff, element, oldElement) {
+  if (!diff || !element || !oldElement) return;
+  if (ObjectUtils.isSameObject(element, oldElement)) {
+    diff.value.push(_objectSpread(_objectSpread({}, element), {}, {
+      diff_type: DIFF_TYPE.COMMON
+    }));
+    return;
+  }
+  var currentElementType = element.type;
+  var oldElementType = oldElement.type;
+  if (currentElementType !== oldElementType) {
+    diff.changes.push(oldElement.id);
+    diff.value.push(_objectSpread(_objectSpread({}, oldElement), {}, {
+      diff_type: DIFF_TYPE.DELETE
+    }));
+    diff.value.push(_objectSpread(_objectSpread({}, element), {}, {
+      diff_type: DIFF_TYPE.ADD
+    }));
+    return;
+  }
+  switch (currentElementType) {
+    case ELEMENT_TYPE.PARAGRAPH:
+    case ELEMENT_TYPE.HEADER1:
+    case ELEMENT_TYPE.HEADER2:
+    case ELEMENT_TYPE.HEADER3:
+    case ELEMENT_TYPE.HEADER4:
+    case ELEMENT_TYPE.HEADER5:
+    case ELEMENT_TYPE.HEADER6:
+    case ELEMENT_TYPE.BLOCKQUOTE:
+    case ELEMENT_TYPE.LINK:
+    case ELEMENT_TYPE.CHECK_LIST_ITEM:
+    case ELEMENT_TYPE.CODE_BLOCK:
+    case ELEMENT_TYPE.IMAGE:
+      {
+        diff.changes.push(oldElement.id);
+        diff.value.push(_objectSpread(_objectSpread({}, oldElement), {}, {
+          diff_type: DIFF_TYPE.DELETE
+        }));
+        diff.value.push(_objectSpread(_objectSpread({}, element), {}, {
+          diff_type: DIFF_TYPE.ADD
+        }));
+        break;
+      }
+    case ELEMENT_TYPE.ORDERED_LIST:
+    case ELEMENT_TYPE.UNORDERED_LIST:
+    case ELEMENT_TYPE.LIST_ITEM:
+    case ELEMENT_TYPE.LIST_LIC:
+      {
+        var _diff$changes;
+        var _getElementDiffValue = getElementDiffValue(element.children, oldElement.children),
+          diffValue = _getElementDiffValue.value,
+          diffChanges = _getElementDiffValue.changes;
+        (_diff$changes = diff.changes).push.apply(_diff$changes, _toConsumableArray(diffChanges));
+        diff.value.push(_objectSpread(_objectSpread({}, element), {}, {
+          children: diffValue,
+          diff_type: DIFF_TYPE.MODIFY
+        }));
+        break;
+      }
+    default:
+      {
+        diff.changes.push(oldElement.id);
+        diff.value.push(_objectSpread(_objectSpread({}, oldElement), {}, {
+          diff_type: DIFF_TYPE.DELETE
+        }));
+        diff.value.push(_objectSpread(_objectSpread({}, element), {}, {
+          diff_type: DIFF_TYPE.ADD
+        }));
+        break;
+      }
+  }
+};
+
+/**
+ * params:
+    * currentValue: current version document content
+    * oldValue: last version document content
+ * return { value: [], change: [] }
+*/
+var getElementDiffValue = function getElementDiffValue(currentContent, oldContent) {
+  // init
+  var diff = {
+    value: [],
+    changes: []
+  };
+  var currentContentMap = {};
+  var oldContentMap = {};
+  currentContent.forEach(function (element) {
+    currentContentMap[element.id] = element;
+  });
+  oldContent.forEach(function (element) {
+    oldContentMap[element.id] = element;
+  });
+
+  // generator diff elements
+  for (var i = 0; i < currentContent.length; i++) {
+    var element = currentContent[i];
+    var isAdded = !oldContentMap[element.id]; // added
+    if (isAdded) {
+      diff.changes.push(element.id);
+      diff.value.push(_objectSpread(_objectSpread({}, element), {}, {
+        diff_type: DIFF_TYPE.ADD
+      }));
+      continue;
+    }
+    updateDiffValue(diff, element, oldContentMap[element.id]);
+  }
+  oldContent.forEach(function (oldElement) {
+    var oldElementId = oldElement.id;
+    if (!currentContentMap[oldElementId]) {
+      // deleted
+      diff.changes.push(oldElementId);
+      var elementIndex = getNearestElementIndex(diff, oldContent, oldElementId);
+      diff.value.splice(elementIndex, 0, _objectSpread(_objectSpread({}, oldElement), {}, {
+        diff_type: DIFF_TYPE.DELETE
+      }));
+    }
+  });
+  return diff;
+};
+
+/**
+ * params:
+    * currentValue: current version document
+    * oldValue: last version document
+ * return { value: [], change: [] }
+*/
+export var getDiff = function getDiff() {
+  var currentValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+    children: []
+  };
+  var oldValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    children: []
+  };
+  var currentVersion = currentValue.version,
+    currentContent = currentValue.children;
+  var oldVersion = oldValue.version,
+    oldContent = oldValue.children;
+  if (currentVersion === oldVersion) return {
+    value: currentContent,
+    changes: []
+  };
+  return getElementDiffValue(currentContent, oldContent);
+};

package/dist/basic-sdk/utils/object-utils.js

@@ -0,0 +1,57 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+var ObjectUtils = /*#__PURE__*/function () {
+  function ObjectUtils() {
+    _classCallCheck(this, ObjectUtils);
+  }
+  _createClass(ObjectUtils, null, [{
+    key: "getDataType",
+    value: function getDataType(data) {
+      var type = typeof data;
+      if (type !== 'object') {
+        return type;
+      }
+      return Object.prototype.toString.call(data).replace(/^\[object (\S+)\]$/, '$1');
+    }
+  }, {
+    key: "iterable",
+    value: function iterable(data) {
+      return ['Object', 'Array'].includes(this.getDataType(data));
+    }
+  }, {
+    key: "isObjectChanged",
+    value: function isObjectChanged(source, comparison, notIncludeKeys) {
+      var _this = this;
+      if (!this.iterable(source)) {
+        throw new Error("source should be a Object or Array , but got ".concat(this.getDataType(source)));
+      }
+      if (this.getDataType(source) !== this.getDataType(comparison)) {
+        return true;
+      }
+      var sourceKeys = Object.keys(source);
+      var comparisonKeys = Object.keys(_objectSpread(_objectSpread({}, source), comparison)).filter(function (key) {
+        return !notIncludeKeys.includes(key);
+      });
+      if (sourceKeys.length !== comparisonKeys.length) {
+        return true;
+      }
+      return comparisonKeys.some(function (key) {
+        if (_this.iterable(source[key])) {
+          return _this.isObjectChanged(source[key], comparison[key], notIncludeKeys);
+        } else {
+          return source[key] !== comparison[key];
+        }
+      });
+    }
+  }, {
+    key: "isSameObject",
+    value: function isSameObject(source, comparison) {
+      var notIncludeKeys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+      if (!source || !comparison) return false;
+      return !this.isObjectChanged(source, comparison, notIncludeKeys);
+    }
+  }]);
+  return ObjectUtils;
+}();
+export default ObjectUtils;

package/dist/context.js

@@ -1,38 +1,20 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import cookie from 'react-cookies';
-import { SeafileAPI } from 'seafile-js';
 import Url from 'url-parse';
 import SDocServerApi from './api/sdoc-server-api';
-import { getDirPath, getImageFileNameWithTimestamp } from './utils';
+import SeafileAPI from './api/seafile-api';
 var Context = /*#__PURE__*/function () {
   function Context() {
     var _this = this;
     _classCallCheck(this, Context);
     this.initSettings = function () {
       _this.settings = window.seafile ? window.seafile : window.seafileConfig;
-      var isOpenSocket = _this.getSetting('isOpenSocket');
-      if (isOpenSocket) {
-        _this.sdocServerApi = new SDocServerApi(_this.settings);
-      }
     };
     this.uploadLocalImage = function (imageFile) {
-      var repoID = _this.getSetting('repoID');
       var docUuid = _this.getSetting('docUuid');
-      var relativePath = "images/sdoc/".concat(docUuid);
-      return _this.api.getFileServerUploadLink(repoID, '/').then(function (res) {
-        var uploadLink = res.data + '?ret-json=1';
-        var name = getImageFileNameWithTimestamp();
-        var newFile = new File([imageFile], name, {
-          type: imageFile.type
-        });
-        var formData = new FormData();
-        formData.append('parent_dir', '/');
-        formData.append('relative_path', relativePath);
-        formData.append('file', newFile);
-        return _this.api.uploadImage(uploadLink, formData);
-      }).then(function (res) {
-        return _this._getImageURL(res.data[0].name);
+      return _this.api.uploadSdocImage(docUuid, imageFile).then(function (res) {
+        var relative_path = res.data.relative_path;
+        return relative_path;
       });
     };
     this.settings = null;
@@ -44,27 +26,10 @@ var Context = /*#__PURE__*/function () {
     key: "initApi",
     value: function initApi() {
       this.initSettings(); // lazy init context class
-      var seafileAPI = new SeafileAPI();
-      if (this.getSetting('isDevelopment')) {
-        var server = this.getSetting('serviceUrl');
-        var username = this.getSetting('username');
-        var password = this.getSetting('password');
-        seafileAPI.init({
-          server: server,
-          username: username,
-          password: password
-        });
-        this.api = seafileAPI;
-        return seafileAPI.login();
-      } else {
-        var siteRoot = this.getSetting('siteRoot');
-        var xcsrfHeaders = cookie.load('dtable_csrftoken');
-        seafileAPI.initForSeahubUsage({
-          siteRoot: siteRoot,
-          xcsrfHeaders: xcsrfHeaders
-        });
-        this.api = seafileAPI;
-      }
+      var server = this.getSetting('serviceUrl');
+      var token = this.getSetting('accessToken');
+      this.api = new SeafileAPI(server, token);
+      this.sdocServerApi = new SDocServerApi(this.settings);
     }
   }, {
     key: "getSettings",
@@ -109,71 +74,13 @@ var Context = /*#__PURE__*/function () {
   }, {
     key: "getFileContent",
     value: function getFileContent() {
-      var isOpenSocket = this.getSetting('isOpenSocket');
-      if (isOpenSocket) {
-        return this.getFileContent1();
-      }
-
-      // visit by shared link
-      var rawPath = this.getSetting('rawPath');
-      if (rawPath) {
-        return this.api.getFileContent(rawPath);
-      }
-      return this.getFileContent2();
+      return this.sdocServerApi.getDocContent();
     }
   }, {
     key: "saveContent",
     value: function saveContent(content) {
-      var isOpenSocket = this.getSetting('isOpenSocket');
-      if (isOpenSocket) {
-        return this.saveContent1(content);
-      }
-      return this.saveContent2(content);
-    }
-  }, {
-    key: "getFileContent1",
-    value: function getFileContent1() {
-      return this.sdocServerApi.getDocContent();
-    }
-  }, {
-    key: "saveContent1",
-    value: function saveContent1(content) {
       return this.sdocServerApi.saveDocContent(content);
     }
-  }, {
-    key: "getFileContent2",
-    value: function getFileContent2() {
-      var _this2 = this;
-      var repoID = this.getSetting('repoID');
-      var docPath = this.getSetting('docPath');
-      return this.api.getFileDownloadLink(repoID, docPath).then(function (res) {
-        var downloadLink = res.data;
-        return _this2.api.getFileContent(downloadLink);
-      });
-    }
-  }, {
-    key: "saveContent2",
-    value: function saveContent2(content) {
-      var _this3 = this;
-      var settings = this.getSettings();
-      var repoID = settings.repoID,
-        docPath = settings.docPath,
-        docName = settings.docName;
-      var dirPath = getDirPath(docPath);
-      return this.api.getUpdateLink(repoID, dirPath).then(function (res) {
-        var uploadLink = res.data;
-        return _this3.api.updateFile(uploadLink, docPath, docName, content);
-      });
-    }
-  }, {
-    key: "_getImageURL",
-    value: function _getImageURL(fileName) {
-      var repoID = this.getSetting('repoID');
-      var serviceUrl = this.getSetting('serviceUrl');
-      var docUuid = this.getSetting('docUuid');
-      var url = serviceUrl + '/lib/' + repoID + '/file/images/sdoc/' + docUuid + '/' + fileName + '?raw=1';
-      return url;
-    }
   }, {
     key: "getCollaborators",
     value: function getCollaborators() {

package/dist/pages/diff-viewer/diff-viewer.js

@@ -0,0 +1,118 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import { Editable, Slate } from '@seafile/slate-react';
+import editor, { renderLeaf, renderElement } from '../../basic-sdk/extension';
+import withNodeId from '../../basic-sdk/node-id';
+import { getDiff } from '../../basic-sdk/utils/diff';
+import { DIFF_TYPE, ELEMENT_TYPE } from '../../basic-sdk/extension/constants';
+import '../../assets/css/diff-viewer.css';
+var DiffViewer = /*#__PURE__*/function (_Component) {
+  _inherits(DiffViewer, _Component);
+  var _super = _createSuper(DiffViewer);
+  function DiffViewer(_props) {
+    var _this;
+    _classCallCheck(this, DiffViewer);
+    _this = _super.call(this, _props);
+    _this.renderLeaf = function (props) {
+      return renderLeaf(props, _this.editor);
+    };
+    _this.renderElement = function (props) {
+      var element = props.element;
+      var diff_type = element.diff_type,
+        type = element.type;
+      if (diff_type === DIFF_TYPE.ADD) {
+        if (type === ELEMENT_TYPE.LIST_ITEM) {
+          return renderElement(_objectSpread(_objectSpread({}, props), {}, {
+            attributes: _objectSpread(_objectSpread({}, props.attributes), {}, {
+              className: 'sdoc-diff-added'
+            })
+          }), _this.editor);
+        }
+        return /*#__PURE__*/React.createElement("div", {
+          className: "sdoc-diff sdoc-diff-added"
+        }, renderElement(_objectSpread(_objectSpread({}, props), {}, {
+          attributes: _objectSpread(_objectSpread({}, props.attributes), {}, {
+            className: 'sdoc-diff-added'
+          })
+        }), _this.editor));
+      }
+      if (diff_type === DIFF_TYPE.DELETE) {
+        if (type === ELEMENT_TYPE.LIST_ITEM) {
+          return renderElement(_objectSpread(_objectSpread({}, props), {}, {
+            attributes: _objectSpread(_objectSpread({}, props.attributes), {}, {
+              className: 'sdoc-diff-removed'
+            })
+          }), _this.editor);
+        }
+        return /*#__PURE__*/React.createElement("div", {
+          className: "sdoc-diff sdoc-diff-removed"
+        }, renderElement(_objectSpread(_objectSpread({}, props), {}, {
+          attributes: _objectSpread(_objectSpread({}, props.attributes), {}, {
+            className: 'sdoc-diff-removed'
+          })
+        }), _this.editor));
+      }
+      if (diff_type === DIFF_TYPE.MODIFY) {
+        if (type === ELEMENT_TYPE.ORDERED_LIST || type === ELEMENT_TYPE.UNORDERED_LIST) {
+          return renderElement(_objectSpread(_objectSpread({}, props), {}, {
+            attributes: _objectSpread(_objectSpread({}, props.attributes), {}, {
+              className: 'sdoc-diff-modify'
+            })
+          }), _this.editor);
+        }
+        return /*#__PURE__*/React.createElement("div", {
+          className: "sdoc-diff-modify"
+        }, renderElement(_objectSpread(_objectSpread({}, props), {}, {
+          attributes: _objectSpread(_objectSpread({}, props.attributes), {}, {
+            className: 'sdoc-diff-modify'
+          })
+        }), _this.editor));
+      }
+      return renderElement(props, _this.editor);
+    };
+    var currentContent = _props.currentContent,
+      lastContent = _props.lastContent;
+    _this.diff = currentContent ? getDiff(currentContent, lastContent) : {
+      value: [],
+      changes: []
+    };
+    _this.editor = withNodeId(editor);
+    return _this;
+  }
+  _createClass(DiffViewer, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.didMountCallback && this.props.didMountCallback(this.diff);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-editor-container"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-editor-content"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "flex-fill o-auto"
+      }, /*#__PURE__*/React.createElement(Slate, {
+        editor: this.editor,
+        value: this.diff.value,
+        onChange: function onChange() {}
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "article mx-auto"
+      }, /*#__PURE__*/React.createElement(Editable, {
+        readOnly: true,
+        placeholder: "",
+        renderElement: this.renderElement,
+        renderLeaf: this.renderLeaf,
+        onDOMBeforeInput: function onDOMBeforeInput() {},
+        onKeyDown: function onKeyDown() {}
+      }))))));
+    }
+  }]);
+  return DiffViewer;
+}(Component);
+export default DiffViewer;

package/dist/pages/diff-viewer/history-version-viewer.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SDocViewer } from '../../basic-sdk';
+import { generateDefaultDocContent } from '../../utils';
+function HistoryVersionViewer(props) {
+  var document = props.document;
+  return /*#__PURE__*/React.createElement(SDocViewer, {
+    document: document || generateDefaultDocContent()
+  });
+}
+export default HistoryVersionViewer;

package/dist/pages/diff-viewer/index.js

@@ -0,0 +1,31 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import HistoryVersionViewer from './history-version-viewer';
+import DiffViewer from './diff-viewer';
+var Index = /*#__PURE__*/function (_Component) {
+  _inherits(Index, _Component);
+  var _super = _createSuper(Index);
+  function Index() {
+    _classCallCheck(this, Index);
+    return _super.apply(this, arguments);
+  }
+  _createClass(Index, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        currentContent = _this$props.currentContent,
+        lastContent = _this$props.lastContent;
+      if (!lastContent) {
+        return /*#__PURE__*/React.createElement(HistoryVersionViewer, {
+          document: currentContent
+        });
+      }
+      return /*#__PURE__*/React.createElement(DiffViewer, this.props);
+    }
+  }]);
+  return Index;
+}(Component);
+export default Index;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",
@@ -18,6 +18,7 @@
     "reactstrap": "8.9.0",
     "slugid": "3.2.0",
     "socket.io-client": "4.6.1",
+    "url-join": "4.0.1",
     "url-parse": "1.5.10",
     "uuid": "9.0.0"
   },