@seafile/sdoc-editor 0.1.27 → 0.1.28-beta

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

@@ -0,0 +1,7 @@
+.sdoc-diff-added {
+  background-color: #e6ffed;
+}
+
+.sdoc-diff-removed {
+  background-color: #ffeef0;
+}

package/dist/basic-sdk/assets/css/layout.css

@@ -1,8 +1,3 @@
-.dlThau {
-  margin: 0;
-  padding-inline-start: 24px;
-}
-
 .sdoc-editor-container {
   flex: 1;
   display: flex;

package/dist/basic-sdk/assets/css/sdoc-editor-plugins.css

@@ -8,3 +8,64 @@
   margin: 0;
   padding-inline-start: 24px;
 }
+
+/* image */
+.sdoc-editor-container .article .sdoc-image {
+  position: relative;
+  display: inline-block;
+  margin: 0 3px;
+}
+
+.sdoc-editor-container .article .image-selected {
+  box-shadow: 0 0 0 2px #007bff;
+}
+
+.sdoc-editor-container .article .image-resizer {
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  right: -5px;
+  bottom: -5px;
+  background-color: #007bff;
+  border: 1px solid #fff;
+  cursor: se-resize;
+}
+
+.sdoc-editor-container .article .image-full-screen {
+  position: absolute;
+  height: 26px;
+  display: inline-block;
+  width: 26px;
+  top: 0;
+  right: -32px;
+  text-align: center;
+  line-height: 20px;
+  padding: 2px;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  background-color: #fff;
+  user-select: none!important;
+  z-index: 1000;
+}
+
+.sdoc-editor-container .article .image-full-screen:hover {
+  display: block;
+  background-color: #efefef;
+}
+
+.sdoc-editor-container .article .image-size {
+  display: inline-block;
+  padding: 5px;
+  height: 22px;
+  position: absolute;
+  bottom: -25px;
+  left: 100%;
+  transform: translateX(5px);
+  border-radius: 3px;
+  line-height: 12px;
+  color: #fff;
+  background-color: #4c4c4c;
+  font-size: 12px;
+}
+

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';
@@ -60,7 +33,11 @@ export var MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, _defineProperty(_MENUS_CO
   id: "sdoc_".concat(LINK),
   iconClass: 'iconfont icon-link',
   text: 'insert_link'
-}), _defineProperty(_MENUS_CONFIG_MAP, TEXTSTYLE, [{
+}), _defineProperty(_MENUS_CONFIG_MAP, IMAGE, {
+  id: "sdoc_".concat(IMAGE),
+  iconClass: 'iconfont icon-image',
+  text: 'insert_image'
+}), _defineProperty(_MENUS_CONFIG_MAP, TEXT_STYLE, [{
   id: ITALIC,
   iconClass: 'iconfont icon-italic',
   text: 'italic',
@@ -81,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/header/menu/index.js

@@ -6,6 +6,7 @@ import React from 'react';
 import { withTranslation } from 'react-i18next';
 import { getHeaderType, isMenuDisabled, setHeaderType } from '../helpers';
 import { HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, HEADER_TITLE_MAP, PARAGRAPH } from '../../../constants';
+import './style.css';
 var HeaderMenu = /*#__PURE__*/function (_React$Component) {
   _inherits(HeaderMenu, _React$Component);
   var _super = _createSuper(HeaderMenu);

package/dist/basic-sdk/extension/plugins/image/dialogs/image-previewer.js

@@ -0,0 +1,95 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+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 from 'react';
+import Lightbox from '@seafile/react-image-lightbox';
+import '@seafile/react-image-lightbox/style.css';
+var ImagePreviewer = /*#__PURE__*/function (_React$Component) {
+  _inherits(ImagePreviewer, _React$Component);
+  var _super = _createSuper(ImagePreviewer);
+  function ImagePreviewer(props) {
+    var _this;
+    _classCallCheck(this, ImagePreviewer);
+    _this = _super.call(this, props);
+    _this.getImageNodes = function (nodes) {
+      var nodeIndex = 0;
+      var list = [];
+      while (nodes && nodeIndex <= nodes.length - 1) {
+        var currentNode = nodes[nodeIndex];
+        if (currentNode.type === 'image') {
+          currentNode.data.src && list.push(currentNode.data.src);
+        } else {
+          list.push.apply(list, _toConsumableArray(_this.getImageNodes(currentNode.children)));
+        }
+        nodeIndex++;
+      }
+      return list;
+    };
+    _this.moveToPrevImage = function () {
+      _this.setState(function (prevState) {
+        return {
+          imageIndex: (prevState.imageIndex + _this.images.length - 1) % _this.images.length
+        };
+      });
+    };
+    _this.moveToNextImage = function () {
+      _this.setState(function (prevState) {
+        return {
+          imageIndex: (prevState.imageIndex + 1) % _this.images.length
+        };
+      });
+    };
+    var editor = props.editor,
+      imageUrl = props.imageUrl;
+    _this.images = _this.getImageNodes(editor.children);
+    _this.state = {
+      imageIndex: _this.images.findIndex(function (item) {
+        return item === imageUrl;
+      })
+    };
+    return _this;
+  }
+  _createClass(ImagePreviewer, [{
+    key: "render",
+    value: function render() {
+      var imageIndex = this.state.imageIndex;
+      var imageItemsLength = this.images.length;
+      var mainSrc = this.images[imageIndex] || '';
+      var imageTitle = '';
+      try {
+        imageTitle = mainSrc ? decodeURI(mainSrc.slice(mainSrc.lastIndexOf('/') + 1)) : '';
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.log(error);
+      }
+      var imageTitleEl = /*#__PURE__*/React.createElement("span", {
+        className: "d-flex"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "text-truncate"
+      }, imageTitle), /*#__PURE__*/React.createElement("span", {
+        className: "flex-shrink-0"
+      }, "(", imageIndex + 1, "/", this.images.length, ")"));
+      return /*#__PURE__*/React.createElement(Lightbox, {
+        wrapperClassName: "sf-editor-image-previewer",
+        imageTitle: imageTitleEl,
+        mainSrc: mainSrc,
+        toolbarButtons: [],
+        nextSrc: this.images[(imageIndex + 1) % imageItemsLength],
+        prevSrc: this.images[(imageIndex + imageItemsLength - 1) % imageItemsLength],
+        onCloseRequest: this.props.toggleImagePreviewer,
+        onMovePrevRequest: this.moveToPrevImage,
+        onMoveNextRequest: this.moveToNextImage,
+        imagePadding: 70,
+        reactModalStyle: {
+          overlay: {
+            zIndex: 1071
+          }
+        }
+      });
+    }
+  }]);
+  return ImagePreviewer;
+}(React.Component);
+export default ImagePreviewer;

package/dist/basic-sdk/extension/plugins/image/dialogs/insert-web-image-dialog.js

@@ -0,0 +1,69 @@
+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 { withTranslation } from 'react-i18next';
+import { Modal, ModalHeader, ModalBody, ModalFooter, FormGroup, Label, Input, Button } from 'reactstrap';
+var InsertWebImageDialog = /*#__PURE__*/function (_Component) {
+  _inherits(InsertWebImageDialog, _Component);
+  var _super = _createSuper(InsertWebImageDialog);
+  function InsertWebImageDialog(props) {
+    var _this;
+    _classCallCheck(this, InsertWebImageDialog);
+    _this = _super.call(this, props);
+    _this.onValueChanged = function (event) {
+      var value = event.target.value;
+      _this.setState({
+        url: value
+      });
+    };
+    _this.onKeyDown = function (event) {
+      if (event.keyCode === 13) {
+        _this.handleSubmit();
+        return;
+      }
+    };
+    _this.handleSubmit = function () {
+      var url = _this.state.url;
+      if (!url) return;
+      _this.props.onInsertImage(url);
+    };
+    _this.onDialogToggle = function () {
+      _this.props.onDialogToggle();
+    };
+    _this.state = {
+      url: ''
+    };
+    return _this;
+  }
+  _createClass(InsertWebImageDialog, [{
+    key: "render",
+    value: function render() {
+      var t = this.props.t;
+      var url = this.state.url;
+      return /*#__PURE__*/React.createElement(Modal, {
+        isOpen: true,
+        toggle: this.onDialogToggle,
+        autoFocus: false
+      }, /*#__PURE__*/React.createElement(ModalHeader, null, t('insert_image')), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, {
+        for: "insert_image"
+      }, t('image_address')), /*#__PURE__*/React.createElement(Input, {
+        id: "insert_image",
+        autoFocus: true,
+        value: url,
+        onChange: this.onValueChanged,
+        onKeyDown: this.onKeyDown
+      }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+        color: "secondary",
+        onClick: this.onDialogToggle
+      }, t('cancel')), /*#__PURE__*/React.createElement(Button, {
+        color: "primary",
+        disabled: url.length === 0,
+        onClick: this.handleSubmit
+      }, t('submit'))));
+    }
+  }]);
+  return InsertWebImageDialog;
+}(Component);
+export default withTranslation('sdoc-editor')(InsertWebImageDialog);

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

@@ -0,0 +1,54 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { Editor, Range, Transforms } from '@seafile/slate';
+import { BLOCKQUOTE, CODE_BLOCK, IMAGE, ORDERED_LIST, UNORDERED_LIST } from '../../constants';
+import { generateEmptyElement, getNodeType } from '../../core';
+export var isInsertImageMenuDisabled = function isInsertImageMenuDisabled(editor) {
+  var selection = editor.selection;
+  if (selection === null) return true;
+  if (!Range.isCollapsed(selection)) return true;
+  var _Editor$nodes = Editor.nodes(editor, {
+      match: function match(n) {
+        var type = getNodeType(n);
+        if (type === CODE_BLOCK) return true;
+        if (type === ORDERED_LIST) return true;
+        if (type === UNORDERED_LIST) return true;
+        if (type.startsWith('header')) return true;
+        if (type === BLOCKQUOTE) return true;
+        if (Editor.isVoid(editor, n)) return true;
+        return false;
+      },
+      universal: true
+    }),
+    _Editor$nodes2 = _slicedToArray(_Editor$nodes, 1),
+    match = _Editor$nodes2[0];
+  if (match) return true;
+  return false;
+};
+export var generateImageNode = function generateImageNode(src) {
+  var element = generateEmptyElement(IMAGE);
+  return _objectSpread(_objectSpread({}, element), {}, {
+    data: {
+      src: src
+    }
+  });
+};
+export var insertImage = function insertImage(editor, src, selection) {
+  if (!src) return;
+  if (isInsertImageMenuDisabled(editor)) return;
+  var imageNode = generateImageNode(src);
+  Transforms.insertNodes(editor, imageNode, {
+    at: selection
+  });
+};
+export var updateImage = function updateImage(editor, data) {
+  Transforms.setNodes(editor, {
+    data: data
+  }, {
+    match: function match(n) {
+      return getNodeType(n) === IMAGE;
+    },
+    at: editor.selection,
+    voids: true
+  });
+};

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

@@ -0,0 +1,14 @@
+import { IMAGE } from '../../constants';
+import ImageMenu from './menu';
+import Image from './model';
+import withImage from './plugin';
+import renderImage from './render-elem';
+var ImagePlugin = {
+  type: IMAGE,
+  nodeType: 'element',
+  model: Image,
+  editorMenus: [ImageMenu],
+  editorPlugin: withImage,
+  renderElements: [renderImage]
+};
+export default ImagePlugin;

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

@@ -0,0 +1,150 @@
+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, { Fragment } from 'react';
+import { withTranslation } from 'react-i18next';
+import { insertImage, isInsertImageMenuDisabled } from '../helpers';
+import context from '../../../../../context';
+import { IMAGE, MENUS_CONFIG_MAP } from '../../../constants';
+import { MenuItem } from '../../../menu';
+import InsertWebImageDialog from '../dialogs/insert-web-image-dialog';
+import './style.css';
+var ImageMenu = /*#__PURE__*/function (_React$Component) {
+  _inherits(ImageMenu, _React$Component);
+  var _super = _createSuper(ImageMenu);
+  function ImageMenu(props) {
+    var _this;
+    _classCallCheck(this, ImageMenu);
+    _this = _super.call(this, props);
+    _this.registerEventHandler = function () {
+      document.addEventListener('mousedown', _this.onHideImageMenu);
+    };
+    _this.unregisterEventHandler = function () {
+      document.removeEventListener('mousedown', _this.onHideImageMenu);
+    };
+    _this.onHideImageMenu = function () {
+      _this.setState({
+        isShowImagePopover: false
+      }, function () {
+        _this.unregisterEventHandler();
+      });
+    };
+    _this.isActive = function () {
+      return false;
+    };
+    _this.isDisabled = function () {
+      var editor = _this.props.editor;
+      return isInsertImageMenuDisabled(editor);
+    };
+    _this.onToggleClick = function (event) {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+      var isShowImagePopover = !_this.state.isShowImagePopover;
+      if (isShowImagePopover) {
+        _this.setState({
+          isShowImagePopover: isShowImagePopover
+        }, function () {
+          _this.registerEventHandler();
+        });
+      } else {
+        _this.setState({
+          isShowImagePopover: isShowImagePopover
+        }, function () {
+          _this.unregisterEventHandler();
+        });
+      }
+    };
+    _this.onInsertWebImageToggle = function () {
+      var editor = _this.props.editor;
+      _this.selection = editor.selection;
+      _this.setState({
+        isShowInsertImageDialog: true,
+        isShowImagePopover: false
+      }, function () {
+        _this.unregisterEventHandler();
+      });
+    };
+    _this.onInsertLocalImageToggle = function () {
+      var editor = _this.props.editor;
+      _this.selection = editor.selection;
+      _this.input.click();
+      _this.setState({
+        isShowImagePopover: false
+      }, function () {
+        _this.unregisterEventHandler();
+      });
+    };
+    _this.onInsertImage = function (url) {
+      var editor = _this.props.editor;
+      insertImage(editor, url, _this.selection);
+      _this.onCloseInsertDialog();
+    };
+    _this.onCloseInsertDialog = function () {
+      _this.setState({
+        isShowInsertImageDialog: false
+      });
+    };
+    _this.onFileChanged = function (event) {
+      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) {
+      _this.input = ref;
+    };
+    _this.state = {
+      isShowImagePopover: false,
+      isShowInsertImageDialog: false
+    };
+    return _this;
+  }
+  _createClass(ImageMenu, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        isRichEditor = _this$props.isRichEditor,
+        className = _this$props.className,
+        t = _this$props.t;
+      var _this$state = this.state,
+        isShowImagePopover = _this$state.isShowImagePopover,
+        isShowInsertImageDialog = _this$state.isShowInsertImageDialog;
+      var menuConfig = MENUS_CONFIG_MAP[IMAGE];
+      var props = _objectSpread(_objectSpread({
+        isRichEditor: isRichEditor,
+        className: className
+      }, menuConfig), {}, {
+        disabled: this.isDisabled(),
+        isActive: this.isActive(),
+        onMouseDown: this.onToggleClick
+      });
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "image-menu"
+      }, /*#__PURE__*/React.createElement("input", {
+        ref: this.setInputRef,
+        type: "file",
+        accept: "image/*",
+        className: "locale-image-uploader",
+        onChange: this.onFileChanged
+      }), /*#__PURE__*/React.createElement(MenuItem, props), isShowImagePopover && /*#__PURE__*/React.createElement("div", {
+        className: "image-popover"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "image-menu-item",
+        onMouseDown: this.onInsertWebImageToggle
+      }, t('insert_network_image')), /*#__PURE__*/React.createElement("div", {
+        className: "image-menu-item",
+        onMouseDown: this.onInsertLocalImageToggle
+      }, t('upload_local_image')))), isShowInsertImageDialog && /*#__PURE__*/React.createElement(InsertWebImageDialog, {
+        onInsertImage: this.onInsertImage,
+        onDialogToggle: this.onCloseInsertDialog
+      }));
+    }
+  }]);
+  return ImageMenu;
+}(React.Component);
+export default withTranslation('sdoc-editor')(ImageMenu);

package/dist/basic-sdk/extension/plugins/image/menu/style.css

@@ -0,0 +1,43 @@
+.image-menu {
+  position: relative;
+}
+
+.image-menu .image-popover {
+  position: absolute;
+  top: 36px;
+  left: 0px;
+  padding: 8px 0;
+  background-color: #fff;
+  border: 1px solid #e5e6e8;
+  border-radius: 2px;
+  box-shadow: 0 0 10px #ccc;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  z-index: 10;
+  white-space:nowrap;
+}
+
+.image-menu .image-popover .image-menu-item {
+  cursor: pointer;
+  height: 30px;
+  padding: 4px 24px;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  font-size: 0.9375rem;
+}
+
+.image-menu .image-popover .image-menu-item:hover {
+  background-color: rgb(245, 245, 245);
+}
+
+.image-menu .locale-image-uploader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  font-size: 0;
+}

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

@@ -0,0 +1,14 @@
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import { IMAGE } from '../../constants';
+var Image = /*#__PURE__*/_createClass(function Image(options) {
+  _classCallCheck(this, Image);
+  this.type = options.type || IMAGE;
+  this.data = options.data || {
+    src: ''
+  };
+  this.children = options.children || [{
+    text: ''
+  }];
+});
+export default Image;

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

@@ -0,0 +1,37 @@
+import context from '../../../../context';
+import { insertImage } from './helpers';
+var withImage = function withImage(editor) {
+  var isInline = editor.isInline,
+    isVoid = editor.isVoid,
+    insertData = editor.insertData;
+  var newEditor = editor;
+
+  // rewrite isInline
+  newEditor.isInline = function (elem) {
+    var type = elem.type;
+    if (type === 'image') {
+      return true;
+    }
+    return isInline(elem);
+  };
+
+  // rewrite isVoid
+  newEditor.isVoid = function (elem) {
+    var type = elem.type;
+    if (type === 'image') {
+      return true;
+    }
+    return isVoid(elem);
+  };
+  newEditor.insertData = function (data) {
+    if (data.types && data.types.includes('Files') && data.files[0].type.includes('image')) {
+      context.uploadLocalImage(data.files[0]).then(function (fileUrl) {
+        insertImage(newEditor, fileUrl, editor.selection);
+      });
+      return;
+    }
+    insertData(data);
+  };
+  return newEditor;
+};
+export default withImage;

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,134 @@
+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;
+  }
+  diffDocument.push(_objectSpread(_objectSpread({}, oldElement), {}, {
+    diff_type: DIFF_TYPE.DELETE
+  }));
+  diffDocument.push(_objectSpread(_objectSpread({}, element), {}, {
+    diff_type: DIFF_TYPE.ADD
+  }));
+  return;
+  var currentElementId = element.id,
+    currentElementType = element.type,
+    currentElementChildren = element.children;
+  var oldElementId = oldElement.id,
+    oldElementType = oldElement.type,
+    oldElementChildren = oldElement.children;
+  if (currentElementType !== oldElementType) {
+    diffDocument.push(_objectSpread(_objectSpread({}, oldElement), {}, {
+      diff_type: DIFF_TYPE.DELETE
+    }));
+    diffDocument.push(_objectSpread(_objectSpread({}, element), {}, {
+      diff_type: DIFF_TYPE.ADD
+    }));
+    return;
+  }
+
+  // if (shallowEqual(oldElement, element)) {
+  //   diffDocument.push({ ...element, diff_type: DIFF_TYPE.COMMON });
+  // } else {
+  //   // 深度比较: 需要修改编辑器，暂时不做
+  //   diffDocument.push({ ...oldElement, diff_type: DIFF_TYPE.DELETE });
+  //   diffDocument.push({ ...element, diff_type: DIFF_TYPE.ADD });
+  // }
+
+  switch (currentElementType) {
+    //
+    case ELEMENT_TYPE.BLOCKQUOTE:
+      {
+        //
+        break;
+      }
+    default:
+      {
+        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,76 @@
+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(props, _this.editor));
+      }
+      if (diff_type === DIFF_TYPE.DELETE) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "sdoc-diff-removed"
+        }, renderElement(props, _this.editor));
+      }
+      if (diff_type === DIFF_TYPE.MODIFY) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "sdoc-diff-modify"
+        }, renderElement(props, _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;

package/dist/utils/index.js

@@ -18,4 +18,8 @@ export var generateDefaultDocContent = function generateDefaultDocContent() {
     }]
   };
   return defaultValue;
+};
+export var getImageFileNameWithTimestamp = function getImageFileNameWithTimestamp() {
+  var d = Date.now();
+  return 'image-' + d.toString() + '.png';
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.1.27",
+  "version": "0.1.28beta",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",

package/dist/config.js

@@ -1,16 +0,0 @@
-var serverConfig = {
-  //serviceUrl: "http://127.0.0.1:8000",
-  serviceUrl: "http://192.168.1.100:8000",
-  username: "lj@11.com",
-  password: "11",
-  repoID: "79d1fa93-4b5f-4d6c-8fb5-ad3958e1fa47",
-  userInfo: {
-    username: 'lj@11.com',
-    name: 'lj-',
-    contact_email: 'lj@11.com'
-  },
-  filePath: '/xxx.md',
-  fileName: 'xxx.md',
-  dirPath: '/'
-};
-export { serverConfig };