@seafile/sdoc-editor 0.1.27 → 0.1.28-beta1

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

@@ -0,0 +1,146 @@
+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 { useSelected } from '@seafile/slate-react';
+import React from 'react';
+import { updateImage } from './helpers';
+import classNames from 'classnames';
+import { withTranslation } from 'react-i18next';
+import ImagePreviewer from './dialogs/image-previewer';
+var Image = /*#__PURE__*/function (_React$Component) {
+  _inherits(Image, _React$Component);
+  var _super = _createSuper(Image);
+  function Image(props) {
+    var _this;
+    _classCallCheck(this, Image);
+    _this = _super.call(this, props);
+    _this.registerEvent = function () {
+      document.addEventListener('mousemove', _this.onMouseMove);
+      document.addEventListener('mouseup', _this.onResizeEnd);
+    };
+    _this.unregisterEvent = function () {
+      document.removeEventListener('mousemove', _this.onMouseMove);
+      document.removeEventListener('mouseup', _this.onResizeEnd);
+    };
+    _this.onResizeStart = function (event) {
+      event.preventDefault();
+      // event.stopPropagation();
+      _this.setState({
+        isResizing: true
+      }, function () {
+        _this.registerEvent();
+      });
+    };
+    _this.onMouseMove = function (event) {
+      event.preventDefault();
+      event.stopPropagation();
+      var changeX = event.clientX - _this.resizer.getBoundingClientRect().left - 5;
+      var imageWidth = _this.image.width + changeX;
+      if (imageWidth < 20) return;
+      _this.setState({
+        width: imageWidth
+      });
+    };
+    _this.onResizeEnd = function (event) {
+      event.preventDefault();
+      event.stopPropagation();
+      _this.unregisterEvent();
+      var width = _this.state.width;
+      var _this$props = _this.props,
+        editor = _this$props.editor,
+        element = _this$props.element;
+      var newData = _objectSpread(_objectSpread({}, element.data), {}, {
+        width: width
+      });
+      updateImage(editor, newData);
+      _this.setState({
+        isResizing: false
+      });
+    };
+    _this.getImageStyle = function () {
+      var element = _this.props.element;
+      var width = _this.state.width;
+      var imageWidth = element.data.width || '';
+      if (width) imageWidth = width;
+      return {
+        width: imageWidth
+      };
+    };
+    _this.setFullScreen = function () {
+      _this.setState({
+        isShowImagePreview: !_this.state.isShowImagePreview
+      });
+    };
+    _this.setImageRef = function (ref) {
+      _this.image = ref;
+    };
+    _this.setResizerRef = function (ref) {
+      _this.resizer = ref;
+    };
+    _this.state = {
+      width: null,
+      isResizing: false,
+      isShowImagePreview: false
+    };
+    return _this;
+  }
+  _createClass(Image, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        className = _this$props2.className,
+        attributes = _this$props2.attributes,
+        element = _this$props2.element,
+        children = _this$props2.children,
+        isSelected = _this$props2.isSelected,
+        t = _this$props2.t;
+      var _this$state = this.state,
+        isResizing = _this$state.isResizing,
+        isShowImagePreview = _this$state.isShowImagePreview;
+      var data = element.data;
+      var imageClassName = isSelected ? 'image-selected' : '';
+      var imageStyle = this.getImageStyle();
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", Object.assign({
+        className: classNames('sdoc-image', className)
+      }, attributes), /*#__PURE__*/React.createElement("img", {
+        className: imageClassName,
+        ref: this.setImageRef,
+        src: data.src,
+        style: imageStyle,
+        draggable: false,
+        alt: ""
+      }), isSelected && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        className: "image-resizer",
+        ref: this.setResizerRef,
+        onMouseDown: this.onResizeStart
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "image-full-screen",
+        contentEditable: false,
+        onClick: this.setFullScreen
+      }, /*#__PURE__*/React.createElement("i", {
+        className: 'iconfont icon-fullscreen',
+        title: t('Full_screen')
+      }))), isResizing && /*#__PURE__*/React.createElement("span", {
+        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,
+        editor: this.props.editor,
+        toggleImagePreviewer: this.setFullScreen
+      }));
+    }
+  }]);
+  return Image;
+}(React.Component);
+var SdocImage = withTranslation('sdoc-editor')(Image);
+function renderImage(props, editor) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var isSelected = useSelected();
+  return /*#__PURE__*/React.createElement(SdocImage, Object.assign({}, props, {
+    editor: editor,
+    isSelected: isSelected
+  }));
+}
+export default renderImage;

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

@@ -6,6 +6,7 @@ import ListPlugin from './list';
 import CheckListPlugin from './check-list';
 import TextPlugin from './text-style';
 import CodeBlockPlugin from './code-block';
-var Plugins = [MarkDownPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, TextPlugin, CodeBlockPlugin];
+import ImagePlugin from './image';
+var Plugins = [MarkDownPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, TextPlugin, CodeBlockPlugin, ImagePlugin];
 export default Plugins;
-export { MarkDownPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, TextPlugin, CodeBlockPlugin };
+export { MarkDownPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, TextPlugin, CodeBlockPlugin, ImagePlugin };

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/extension/render/render-element.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React from 'react';
-import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, LIST_LIC, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK } from '../constants';
-import { BlockquotePlugin, LinkPlugin, CheckListPlugin, HeaderPlugin, ListPlugin, CodeBlockPlugin } from '../plugins';
+import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, LIST_LIC, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, IMAGE } from '../constants';
+import { BlockquotePlugin, LinkPlugin, CheckListPlugin, HeaderPlugin, ListPlugin, CodeBlockPlugin, ImagePlugin } from '../plugins';
 var renderElement = function renderElement(props, editor) {
   var attributes = props.attributes,
     children = props.children,
@@ -67,6 +67,12 @@ var renderElement = function renderElement(props, editor) {
           renderCodeBlock = _CodeBlockPlugin$rend[0];
         return renderCodeBlock(props, editor);
       }
+    case IMAGE:
+      {
+        var _ImagePlugin$renderEl = _slicedToArray(ImagePlugin.renderElements, 1),
+          renderImage = _ImagePlugin$renderEl[0];
+        return renderImage(props, editor);
+      }
     default:
       {
         return /*#__PURE__*/React.createElement("p", Object.assign({

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

@@ -3,17 +3,17 @@ 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 { ORDERED_LIST, UNORDERED_LIST } from '../constants';
+import { MenuGroup } from '../menu';
 import QuoteMenu from '../plugins/blockquote/menu';
 import LinkMenu from '../plugins/link/menu';
 import ListMenu from '../plugins/list/menu';
-import { ORDERED_LIST, UNORDERED_LIST } from '../constants';
+import ImageMenu from '../plugins/image/menu';
 import HeaderMenu from '../plugins/header/menu';
 import CheckListMenu from '../plugins/check-list/menu';
-import { MenuGroup } from '../menu';
 import TextStyleMenuList from '../plugins/text-style/menu';
 import CodeBlockMenu from '../plugins/code-block/menu';
 import HistoryMenu from './redo-undo';
-import '../../assets/css/sdoc-editor-toolbar.css';
 var Toolbar = /*#__PURE__*/function (_React$Component) {
   _inherits(Toolbar, _React$Component);
   var _super = _createSuper(Toolbar);
@@ -46,6 +46,8 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         editor: this.props.editor
       })), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(CodeBlockMenu, {
         editor: this.props.editor
+      })), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(ImageMenu, {
+        editor: this.props.editor
       })));
     }
   }]);

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

@@ -0,0 +1,210 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+// import shallowEqual from 'shallowequal';
+import { DIFF_TYPE, ELEMENT_TYPE } from '../../basic-sdk/extension/constants';
+import ObjectUtils from './object-utils';
+var getElementIndexInDiffDocument = function getElementIndexInDiffDocument(diffDocument, element) {
+  return diffDocument.findIndex(function (item) {
+    return item.id === element.id;
+  });
+};
+var getNearestElementIndex = function getNearestElementIndex(diffDocument, oldDocument, elementId) {
+  var elementInDiffDocument = getElementIndexInDiffDocument(diffDocument, elementId);
+  if (elementInDiffDocument > -1) {
+    return elementInDiffDocument;
+  }
+  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 (elementInDiffDocument === -1 && leftIndex > -1 && rightIndex < oldElementCount) {
+    var oldLeftElement = oldDocument[leftIndex];
+    elementInDiffDocument = getElementIndexInDiffDocument(diffDocument, oldLeftElement);
+    if (elementInDiffDocument > -1) {
+      break;
+    }
+    var oldLastElement = oldDocument[rightIndex];
+    elementInDiffDocument = getElementIndexInDiffDocument(diffDocument, oldLastElement);
+    if (elementInDiffDocument > -1) {
+      break;
+    }
+    leftIndex--;
+    rightIndex++;
+  }
+  if (elementInDiffDocument === -1) return diffDocument.length - 1;
+  return elementInDiffDocument;
+};
+var updateDiffDocument = function updateDiffDocument(diffDocument, element, oldElement) {
+  if (!diffDocument || !element || !oldElement) return;
+  if (ObjectUtils.isSameObject(element, oldElement)) {
+    diffDocument.push(_objectSpread(_objectSpread({}, oldElement), {}, {
+      diff_type: DIFF_TYPE.COMMON
+    }));
+    return;
+  }
+  var currentElementType = element.type;
+  var oldElementType = oldElement.type;
+  if (currentElementType !== oldElementType) {
+    diffDocument.push(_objectSpread(_objectSpread({}, oldElement), {}, {
+      diff_type: DIFF_TYPE.DELETE
+    }));
+    diffDocument.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:
+      {
+        diffDocument.push(_objectSpread(_objectSpread({}, oldElement), {}, {
+          diff_type: DIFF_TYPE.DELETE
+        }));
+        diffDocument.push(_objectSpread(_objectSpread({}, element), {}, {
+          diff_type: DIFF_TYPE.ADD
+        }));
+        break;
+      }
+    case ELEMENT_TYPE.LINK:
+      {
+        diffDocument.push(_objectSpread(_objectSpread({}, oldElement), {}, {
+          diff_type: DIFF_TYPE.DELETE
+        }));
+        diffDocument.push(_objectSpread(_objectSpread({}, element), {}, {
+          diff_type: DIFF_TYPE.ADD
+        }));
+        break;
+      }
+    case ELEMENT_TYPE.BLOCKQUOTE:
+      {
+        diffDocument.push(_objectSpread(_objectSpread({}, oldElement), {}, {
+          diff_type: DIFF_TYPE.DELETE
+        }));
+        diffDocument.push(_objectSpread(_objectSpread({}, element), {}, {
+          diff_type: DIFF_TYPE.ADD
+        }));
+        break;
+      }
+    case ELEMENT_TYPE.ORDERED_LIST:
+    case ELEMENT_TYPE.UNORDERED_LIST:
+      {
+        var orderDiff = getDiffValue(element, oldElement);
+        diffDocument.push(_objectSpread(_objectSpread({}, element), {}, {
+          children: orderDiff,
+          diff_type: DIFF_TYPE.MODIFY
+        }));
+        break;
+      }
+    case ELEMENT_TYPE.LIST_ITEM:
+      {
+        diffDocument.push(_objectSpread(_objectSpread({}, oldElement), {}, {
+          diff_type: DIFF_TYPE.DELETE
+        }));
+        diffDocument.push(_objectSpread(_objectSpread({}, element), {}, {
+          diff_type: DIFF_TYPE.ADD
+        }));
+        break;
+      }
+    case ELEMENT_TYPE.LIST_LIC:
+      {
+        diffDocument.push(_objectSpread(_objectSpread({}, oldElement), {}, {
+          diff_type: DIFF_TYPE.DELETE
+        }));
+        diffDocument.push(_objectSpread(_objectSpread({}, element), {}, {
+          diff_type: DIFF_TYPE.ADD
+        }));
+        break;
+      }
+    case ELEMENT_TYPE.CHECK_LIST_ITEM:
+      {
+        diffDocument.push(_objectSpread(_objectSpread({}, oldElement), {}, {
+          diff_type: DIFF_TYPE.DELETE
+        }));
+        diffDocument.push(_objectSpread(_objectSpread({}, element), {}, {
+          diff_type: DIFF_TYPE.ADD
+        }));
+        break;
+      }
+    case ELEMENT_TYPE.CODE_BLOCK:
+      {
+        diffDocument.push(_objectSpread(_objectSpread({}, oldElement), {}, {
+          diff_type: DIFF_TYPE.DELETE
+        }));
+        diffDocument.push(_objectSpread(_objectSpread({}, element), {}, {
+          diff_type: DIFF_TYPE.ADD
+        }));
+        break;
+      }
+    case ELEMENT_TYPE.IMAGE:
+      {
+        diffDocument.push(_objectSpread(_objectSpread({}, oldElement), {}, {
+          diff_type: DIFF_TYPE.DELETE
+        }));
+        diffDocument.push(_objectSpread(_objectSpread({}, element), {}, {
+          diff_type: DIFF_TYPE.ADD
+        }));
+        break;
+      }
+    default:
+      {
+        diffDocument.push(_objectSpread(_objectSpread({}, oldElement), {}, {
+          diff_type: DIFF_TYPE.DELETE
+        }));
+        diffDocument.push(_objectSpread(_objectSpread({}, element), {}, {
+          diff_type: DIFF_TYPE.ADD
+        }));
+        break;
+      }
+  }
+};
+export var getDiffValue = function getDiffValue(currentValue, oldValue) {
+  var currentVersion = currentValue.version,
+    currentChildren = currentValue.children;
+  var oldVersion = oldValue.version,
+    oldChildren = oldValue.children;
+  if (currentVersion === oldVersion) return currentChildren;
+  var diffDocument = [];
+  console.log('currentChildren: ', currentChildren);
+  console.log('oldChildren: ', oldChildren);
+
+  // init
+  var currentChildrenMap = {};
+  var oldChildrenMap = {};
+  currentChildren.forEach(function (element) {
+    currentChildrenMap[element.id] = element;
+  });
+  oldChildren.forEach(function (element) {
+    oldChildrenMap[element.id] = element;
+  });
+
+  // generator diff elements
+  for (var i = 0; i < currentChildren.length; i++) {
+    var element = currentChildren[i];
+    var isAdded = !oldChildrenMap[element.id]; // 增加的
+    if (isAdded) {
+      diffDocument.push(_objectSpread(_objectSpread({}, element), {}, {
+        diff_type: DIFF_TYPE.ADD
+      }));
+      continue;
+    }
+    updateDiffDocument(diffDocument, element, oldChildrenMap[element.id]);
+  }
+  oldChildren.forEach(function (oldElement) {
+    if (!currentChildrenMap[oldElement.id]) {
+      // 删除的
+      var elementIndex = getNearestElementIndex(diffDocument, oldChildren, oldElement.id);
+      diffDocument.splice(elementIndex, 0, _objectSpread(_objectSpread({}, oldElement), {}, {
+        diff_type: DIFF_TYPE.DELETE
+      }));
+    }
+  });
+  return diffDocument;
+};

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

@@ -0,0 +1,54 @@
+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) {
+      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));
+      if (sourceKeys.length !== comparisonKeys.length) {
+        return true;
+      }
+      return comparisonKeys.some(function (key) {
+        if (_this.iterable(source[key])) {
+          return _this.isObjectChanged(source[key], comparison[key]);
+        } else {
+          return source[key] !== comparison[key];
+        }
+      });
+    }
+  }, {
+    key: "isSameObject",
+    value: function isSameObject(source, comparison) {
+      if (!source || !comparison) return false;
+      return !this.isObjectChanged(source, comparison);
+    }
+  }]);
+  return ObjectUtils;
+}();
+export default ObjectUtils;

package/dist/context.js

@@ -4,7 +4,7 @@ import cookie from 'react-cookies';
 import { SeafileAPI } from 'seafile-js';
 import Url from 'url-parse';
 import SDocServerApi from './api/sdoc-server-api';
-import { getDirPath } from './utils';
+import { getDirPath, getImageFileNameWithTimestamp } from './utils';
 var Context = /*#__PURE__*/function () {
   function Context() {
     var _this = this;
@@ -16,6 +16,25 @@ var Context = /*#__PURE__*/function () {
         _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);
+      });
+    };
     this.settings = null;
     this.sdocServerApi = null;
     this.api = null;
@@ -146,6 +165,15 @@ var Context = /*#__PURE__*/function () {
         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,89 @@
+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 { getDiffValue } from '../../basic-sdk/utils/diff';
+import { DIFF_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;
+      if (diff_type === DIFF_TYPE.ADD) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "sdoc-diff-added"
+        }, renderElement(_objectSpread(_objectSpread({}, props), {}, {
+          attributes: _objectSpread(_objectSpread({}, props.attributes), {}, {
+            className: 'sdoc-diff-added'
+          })
+        }), _this.editor));
+      }
+      if (diff_type === DIFF_TYPE.DELETE) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "sdoc-diff-removed"
+        }, renderElement(_objectSpread(_objectSpread({}, props), {}, {
+          attributes: _objectSpread(_objectSpread({}, props.attributes), {}, {
+            className: 'sdoc-diff-removed'
+          })
+        }), _this.editor));
+      }
+      if (diff_type === DIFF_TYPE.MODIFY) {
+        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);
+    };
+    _this.editor = withNodeId(editor);
+    return _this;
+  }
+  _createClass(DiffViewer, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        currentContent = _this$props.currentContent,
+        lastContent = _this$props.lastContent;
+      var value = getDiffValue(currentContent, lastContent);
+      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: 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,32 @@
+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 (!currentContent) return null;
+      if (!lastContent) {
+        return /*#__PURE__*/React.createElement(HistoryVersionViewer, {
+          document: currentContent
+        });
+      }
+      return /*#__PURE__*/React.createElement(DiffViewer, this.props);
+    }
+  }]);
+  return Index;
+}(Component);
+export default Index;