@seafile/sdoc-editor 0.1.30 → 0.1.32

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/dialogs/image-previewer.js

@@ -5,6 +5,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import Lightbox from '@seafile/react-image-lightbox';
+import { getImageURL } from '../helpers';
 import '@seafile/react-image-lightbox/style.css';
 var ImagePreviewer = /*#__PURE__*/function (_React$Component) {
   _inherits(ImagePreviewer, _React$Component);
@@ -19,7 +20,8 @@ var ImagePreviewer = /*#__PURE__*/function (_React$Component) {
       while (nodes && nodeIndex <= nodes.length - 1) {
         var currentNode = nodes[nodeIndex];
         if (currentNode.type === 'image') {
-          currentNode.data.src && list.push(currentNode.data.src);
+          var url = getImageURL(currentNode.data.src);
+          url && list.push(url);
         } else {
           list.push.apply(list, _toConsumableArray(_this.getImageNodes(currentNode.children)));
         }

package/dist/basic-sdk/extension/plugins/image/helpers.js

@@ -1,8 +1,10 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import urlJoin from 'url-join';
 import { Editor, Range, Transforms } from '@seafile/slate';
 import { BLOCKQUOTE, CODE_BLOCK, IMAGE, ORDERED_LIST, UNORDERED_LIST } from '../../constants';
 import { generateEmptyElement, getNodeType } from '../../core';
+import context from '../../../../context';
 export var isInsertImageMenuDisabled = function isInsertImageMenuDisabled(editor) {
   var selection = editor.selection;
   if (selection === null) return true;
@@ -51,4 +53,10 @@ export var updateImage = function updateImage(editor, data) {
     at: editor.selection,
     voids: true
   });
+};
+export var getImageURL = function getImageURL(url) {
+  if (url && url.startsWith('http')) return url;
+  var serviceUrl = context.getSetting('serviceUrl');
+  var assetsUrl = context.getSetting('assetsUrl');
+  return urlJoin(serviceUrl, assetsUrl, url);
 };

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

@@ -7,10 +7,8 @@ import { useSelected } from '@seafile/slate-react';
 import React from 'react';
 import classNames from 'classnames';
 import { withTranslation } from 'react-i18next';
-import urlJoin from 'url-join';
-import { updateImage } from './helpers';
+import { getImageURL, 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);
@@ -89,13 +87,6 @@ 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,
@@ -116,7 +107,7 @@ var Image = /*#__PURE__*/function (_React$Component) {
       }, attributes), /*#__PURE__*/React.createElement("img", {
         className: imageClassName,
         ref: this.setImageRef,
-        src: this.getImageURL(data.src),
+        src: getImageURL(data.src),
         style: imageStyle,
         draggable: false,
         alt: ""
@@ -135,7 +126,7 @@ var Image = /*#__PURE__*/function (_React$Component) {
         className: "image-size",
         contentEditable: false
       }, /*#__PURE__*/React.createElement("span", null, t('width'), ':', parseInt(this.state.width || this.image.clientWidth)), /*#__PURE__*/React.createElement("span", null, "\xA0\xA0"), /*#__PURE__*/React.createElement("span", null, t('height'), ':', this.image.clientHeight)), children), isShowImagePreview && /*#__PURE__*/React.createElement(ImagePreviewer, {
-        imageUrl: data.src,
+        imageUrl: getImageURL(data.src),
         editor: this.props.editor,
         toggleImagePreviewer: this.setFullScreen
       }));

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/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.30",
+  "version": "0.1.32",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",
@@ -18,7 +18,7 @@
     "reactstrap": "8.9.0",
     "slugid": "3.2.0",
     "socket.io-client": "4.6.1",
-    "url-join": "5.0.0",
+    "url-join": "4.0.1",
     "url-parse": "1.5.10",
     "uuid": "9.0.0"
   },