@seafile/sdoc-editor 0.1.170 → 0.1.172-beta

package/dist/basic-sdk/{highlight-decorate → decorate/highlight-decorate}/index.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { Element } from '@seafile/slate';
-import { CODE_LINE } from '../extension/constants';
+import { CODE_LINE } from '../../extension/constants';
+import { SetNodeToDecorations } from './setNodeToDecorations';
 export var highlightDecorate = function highlightDecorate(editor) {
   return function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
@@ -14,4 +15,5 @@ export var highlightDecorate = function highlightDecorate(editor) {
     }
     return ranges;
   };
-};
+};
+export { SetNodeToDecorations };

package/dist/basic-sdk/{highlight-decorate → decorate/highlight-decorate}/setNodeToDecorations.js

@@ -4,9 +4,9 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import { Node, Element, Editor } from '@seafile/slate';
 import { useSlateStatic } from '@seafile/slate-react';
-import Prism, { normalizeTokens, normalizeTokensByLanguageType } from '../extension/plugins/code-block/prismjs';
-import { CODE_BLOCK } from '../extension/constants';
-import { getValidLang } from '../extension/plugins/code-block/helpers';
+import Prism, { normalizeTokens, normalizeTokensByLanguageType } from '../../extension/plugins/code-block/prismjs';
+import { CODE_BLOCK } from '../../extension/constants';
+import { getValidLang } from '../../extension/plugins/code-block/helpers';
 var mergeMaps = function mergeMaps() {
   var map = new Map();
   for (var _len = arguments.length, maps = new Array(_len), _key = 0; _key < _len; _key++) {

package/dist/basic-sdk/{decorates → decorate}/index.js

@@ -1,7 +1,8 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import { commentDecorate } from '../comment/comment-decorate';
-import { highlightDecorate } from '../highlight-decorate';
+import { highlightDecorate, SetNodeToDecorations } from './highlight-decorate';
 import useSelectionUpdate from '../hooks/use-selection-update';
+import RebaseDecorate from './rebase-decorate';
 var pluginDecorates = [highlightDecorate, commentDecorate];
 export var usePipDecorate = function usePipDecorate(editor) {
   useSelectionUpdate();
@@ -18,4 +19,5 @@ export var usePipDecorate = function usePipDecorate(editor) {
     });
     return ranges;
   };
-};
+};
+export { SetNodeToDecorations, RebaseDecorate };

package/dist/basic-sdk/decorate/rebase-decorate/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import RebaseModifyDeleteDecorate from './rebase-modify-delete-decorate';
+import RebaseModifyModifyDecorate from './rebase-modify-modify-decorate';
+import RebaseDeleteModifyDecorate from './rebase-delete-modify-decorate';
+import { REBASE_MARK_KEY, REBASE_TYPE } from '../../constants';
+import './index.css';
+var RebaseDecorate = function RebaseDecorate(_ref) {
+  var element = _ref.element,
+    children = _ref.children;
+  var rebaseType = element[REBASE_MARK_KEY.REBASE_TYPE];
+  if (!rebaseType) return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  if (rebaseType === REBASE_TYPE.MODIFY_DELETE) {
+    return /*#__PURE__*/React.createElement(RebaseModifyDeleteDecorate, {
+      element: element
+    }, children);
+  }
+  if (rebaseType === REBASE_TYPE.DELETE_MODIFY) {
+    return /*#__PURE__*/React.createElement(RebaseDeleteModifyDecorate, {
+      element: element
+    }, children);
+  }
+  if (rebaseType === REBASE_TYPE.MODIFY_MODIFY) {
+    return /*#__PURE__*/React.createElement(RebaseModifyModifyDecorate, {
+      element: element
+    }, children);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+export default RebaseDecorate;

package/dist/basic-sdk/decorate/rebase-decorate/rebase-delete-modify-decorate.js

@@ -0,0 +1,64 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Transforms } from '@seafile/slate';
+import { useSlateStatic } from '@seafile/slate-react';
+import { ELEMENT_TYPE } from '../../extension/constants';
+import { REBASE_MARKS } from '../../constants';
+import { findPath, deleteNodeMark, updateRebaseParentNodeByPath } from '../../extension/core';
+var RebaseDeleteModifyDecorate = function RebaseDeleteModifyDecorate(_ref) {
+  var element = _ref.element,
+    children = _ref.children;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var editor = useSlateStatic();
+  var deleteElement = useCallback(function () {
+    var path = findPath(editor, element);
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+    if (element.type === ELEMENT_TYPE.LIST_ITEM) {
+      updateRebaseParentNodeByPath(editor, path);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, element]);
+  var deleteMark = useCallback(function () {
+    var path = findPath(editor, element);
+    deleteNodeMark(editor, path, element, REBASE_MARKS);
+    if (element.type === ELEMENT_TYPE.LIST_ITEM) {
+      updateRebaseParentNodeByPath(editor, path);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, element]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "w-100 d-flex sdoc-rebase-btn-group",
+    contentEditable: false
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-rebase-btn",
+    onClick: deleteElement
+  }, t('Keep_other_modification')), /*#__PURE__*/React.createElement("div", {
+    className: "mr-2 ml-2"
+  }, '|'), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-rebase-btn",
+    onClick: deleteMark
+  }, t('Keep_my_modification')), /*#__PURE__*/React.createElement("div", {
+    className: "mr-2 ml-2"
+  }, '|'), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-rebase-btn",
+    onClick: deleteMark
+  }, t('Keep_both_modification'))), /*#__PURE__*/React.createElement("div", {
+    className: "w-100 sdoc-rebase-current-changes-start",
+    contentEditable: false
+  }, '<<<<<<<'), /*#__PURE__*/React.createElement("div", {
+    className: "w-100",
+    contentEditable: false
+  }, '======='), /*#__PURE__*/React.createElement("div", {
+    className: "w-100 sdoc-rebase-incoming-changes",
+    contentEditable: false
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: "w-100 sdoc-rebase-incoming-changes-end",
+    contentEditable: false
+  }, '>>>>>>>'));
+};
+export default RebaseDeleteModifyDecorate;

package/dist/basic-sdk/decorate/rebase-decorate/rebase-modify-delete-decorate.js

@@ -0,0 +1,64 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Transforms } from '@seafile/slate';
+import { useSlateStatic } from '@seafile/slate-react';
+import { ELEMENT_TYPE } from '../../extension/constants';
+import { REBASE_MARKS } from '../../constants';
+import { findPath, deleteNodeMark, updateRebaseParentNodeByPath } from '../../extension/core';
+var RebaseModifyDeleteDecorate = function RebaseModifyDeleteDecorate(_ref) {
+  var element = _ref.element,
+    children = _ref.children;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var editor = useSlateStatic();
+  var deleteElement = useCallback(function () {
+    var path = findPath(editor, element);
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+    if (element.type === ELEMENT_TYPE.LIST_ITEM) {
+      updateRebaseParentNodeByPath(editor, path);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, element]);
+  var deleteMark = useCallback(function () {
+    var path = findPath(editor, element);
+    deleteNodeMark(editor, path, element, REBASE_MARKS);
+    if (element.type === ELEMENT_TYPE.LIST_ITEM) {
+      updateRebaseParentNodeByPath(editor, path);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, element]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "w-100 d-flex sdoc-rebase-btn-group",
+    contentEditable: false
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-rebase-btn",
+    onClick: deleteMark
+  }, t('Keep_other_modification')), /*#__PURE__*/React.createElement("div", {
+    className: "mr-2 ml-2"
+  }, '|'), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-rebase-btn",
+    onClick: deleteElement
+  }, t('Keep_my_modification')), /*#__PURE__*/React.createElement("div", {
+    className: "mr-2 ml-2"
+  }, '|'), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-rebase-btn",
+    onClick: deleteMark
+  }, t('Keep_both_modification'))), /*#__PURE__*/React.createElement("div", {
+    className: "w-100 sdoc-rebase-current-changes-start",
+    contentEditable: false
+  }, '<<<<<<<'), /*#__PURE__*/React.createElement("div", {
+    className: "w-100 sdoc-rebase-incoming-changes",
+    contentEditable: false
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: "w-100",
+    contentEditable: false
+  }, '======='), /*#__PURE__*/React.createElement("div", {
+    className: "w-100 sdoc-rebase-incoming-changes-end",
+    contentEditable: false
+  }, '>>>>>>>'));
+};
+export default RebaseModifyDeleteDecorate;

package/dist/basic-sdk/decorate/rebase-decorate/rebase-modify-modify-decorate.js

@@ -0,0 +1,97 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import deepCopy from 'deep-copy';
+import { Transforms } from '@seafile/slate';
+import { useSlateStatic } from '@seafile/slate-react';
+import { ELEMENT_TYPE } from '../../extension/constants';
+import { REBASE_MARKS, REBASE_MARK_KEY, REBASE_ORIGIN } from '../../constants';
+import { findPath, getNode, deleteNodeMark, updateRebaseParentNodeByPath } from '../../extension/core';
+var RebaseModifyModifyDecorate = function RebaseModifyModifyDecorate(_ref) {
+  var element = _ref.element,
+    children = _ref.children;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var editor = useSlateStatic();
+  var useMasterChanges = useCallback(function () {
+    var path = findPath(editor, element);
+    deleteNodeMark(editor, path, element[REBASE_MARK_KEY.OLD_ELEMENT], REBASE_MARKS);
+    var nextElementPath = _toConsumableArray(path);
+    nextElementPath[path.length - 1] = path[path.length - 1] + 1;
+    Transforms.removeNodes(editor, {
+      at: nextElementPath
+    });
+    if (element.type === ELEMENT_TYPE.LIST_ITEM) {
+      updateRebaseParentNodeByPath(editor, path);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, element]);
+  var useCurrentChanges = useCallback(function () {
+    var path = findPath(editor, element);
+    var currentElementPath = _toConsumableArray(path);
+    currentElementPath[path.length - 1] = path[path.length - 1] + 1;
+    var currentElement = getNode(editor, currentElementPath);
+    var newCurrentElement = deepCopy(currentElement);
+    deleteNodeMark(editor, currentElementPath, newCurrentElement, REBASE_MARKS);
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+    if (element.type === ELEMENT_TYPE.LIST_ITEM) {
+      updateRebaseParentNodeByPath(editor, path);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, element]);
+  var useBothChanges = useCallback(function () {
+    // delete element marks
+    var path = findPath(editor, element);
+    deleteNodeMark(editor, path, element, REBASE_MARKS);
+
+    // delete next element marks
+    var nextElementPath = [].concat(_toConsumableArray(path.slice(0, -1)), [path[path.length - 1] + 1]);
+    var nextElement = getNode(editor, nextElementPath);
+    deleteNodeMark(editor, nextElementPath, nextElement, REBASE_MARKS);
+    if (element.type === ELEMENT_TYPE.LIST_ITEM) {
+      updateRebaseParentNodeByPath(editor, path);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, element]);
+  if (element[REBASE_MARK_KEY.ORIGIN] === REBASE_ORIGIN.OTHER) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "w-100 d-flex sdoc-rebase-btn-group",
+      contentEditable: false
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "sdoc-rebase-btn",
+      onClick: useMasterChanges
+    }, t('Keep_other_modification')), /*#__PURE__*/React.createElement("div", {
+      className: "mr-2 ml-2"
+    }, '|'), /*#__PURE__*/React.createElement("div", {
+      className: "sdoc-rebase-btn",
+      onClick: useCurrentChanges
+    }, t('Keep_my_modification')), /*#__PURE__*/React.createElement("div", {
+      className: "mr-2 ml-2"
+    }, '|'), /*#__PURE__*/React.createElement("div", {
+      className: "sdoc-rebase-btn",
+      onClick: useBothChanges
+    }, t('Keep_both_modification'))), /*#__PURE__*/React.createElement("div", {
+      className: "w-100 sdoc-rebase-current-changes-start",
+      contentEditable: false
+    }, '<<<<<<<'), /*#__PURE__*/React.createElement("div", {
+      className: "w-100 sdoc-rebase-current-changes",
+      contentEditable: false
+    }, children));
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "w-100",
+    contentEditable: false
+  }, '======='), /*#__PURE__*/React.createElement("div", {
+    className: "w-100 sdoc-rebase-incoming-changes",
+    contentEditable: false
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: "w-100 sdoc-rebase-incoming-changes-end",
+    contentEditable: false
+  }, '>>>>>>>'));
+};
+export default RebaseModifyModifyDecorate;

package/dist/basic-sdk/editor/editable-article.js

@@ -5,10 +5,9 @@ import { getAboveBlockNode, getNextNode, getPrevNode, isSelectionAtBlockEnd, isS
 import EventProxy from '../utils/event-handler';
 import { useCursors } from '../cursor/use-cursors';
 import { INTERNAL_EVENT } from '../constants';
-import { SetNodeToDecorations } from '../highlight-decorate/setNodeToDecorations';
 import CommentContextProvider from '../comment/comment-context-provider';
 import CommentWrapper from '../comment';
-import { usePipDecorate } from '../decorates';
+import { usePipDecorate, SetNodeToDecorations } from '../decorate';
 import { getCursorPosition, getDomHeight, getDomMarginTop } from '../utils/dom-utils';
 import EventBus from '../utils/event-bus';
 import { ArticleContainer } from '../layout';

package/dist/basic-sdk/editor/sdoc-editor.js

@@ -1,16 +1,53 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useEffect } from 'react';
+import React, { useEffect, useState, useImperativeHandle, forwardRef, useMemo } from 'react';
 import { Editor } from '@seafile/slate';
+import deepCopy from 'deep-copy';
+import context from '../../context';
+import CommonLoading from '../../components/common-loading';
+import { PAGE_EDIT_AREA_WIDTH } from '../constants';
+import { createDefaultEditor } from '../extension';
+import withNodeId from '../node-id';
+import { withSocketIO } from '../socket';
 import { focusEditor } from '../extension/core';
-import { EditorContainer, EditorContent } from '../layout';
 import InsertElementDialog from '../extension/commons/insert-element-dialog';
+import { EditorContainer, EditorContent } from '../layout';
 import EditableArticle from './editable-article';
 import { ColorProvider } from '../hooks/use-color-context';
 import { HeaderToolbar } from '../extension';
-var SdocEditor = function SdocEditor(_ref) {
-  var editor = _ref.editor,
-    slateValue = _ref.slateValue,
-    updateSlateValue = _ref.updateSlateValue;
+var SdocEditor = forwardRef(function (_ref, ref) {
+  var document = _ref.document,
+    isReloading = _ref.isReloading;
+  var editor = useMemo(function () {
+    var defaultEditor = createDefaultEditor();
+    var editorConfig = context.getEditorConfig();
+    var newEditor = withNodeId(withSocketIO(defaultEditor, {
+      document: document,
+      config: editorConfig
+    }));
+    var cursors = document.cursors;
+    newEditor.cursors = cursors || {};
+    newEditor.width = PAGE_EDIT_AREA_WIDTH; // default width
+    return newEditor;
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var _useState = useState(document.children),
+    _useState2 = _slicedToArray(_useState, 2),
+    slateValue = _useState2[0],
+    _setSlateValue = _useState2[1];
+
+  // useMount: init socket connection
+  useEffect(function () {
+    editor.openConnection();
+    return function () {
+      editor.closeConnection();
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   // useMount: focus editor
   useEffect(function () {
     var timer = setTimeout(function () {
@@ -34,6 +71,33 @@ var SdocEditor = function SdocEditor(_ref) {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+
+  // The parent component can call the method of this component through ref
+  useImperativeHandle(ref, function () {
+    return {
+      setSlateValue: function setSlateValue(document) {
+        // Force update of editor's child elements
+        editor.children = document.children;
+        _setSlateValue(_toConsumableArray(document.children));
+      },
+      updateDocumentVersion: function updateDocumentVersion(document) {
+        editor.updateDocumentVersion(document);
+      },
+      // get value
+      getSlateValue: function getSlateValue() {
+        return deepCopy(_objectSpread(_objectSpread({}, document), {}, {
+          children: slateValue
+        }));
+      }
+
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
+  }, [document, editor, slateValue]);
+  if (isReloading) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "h-100 w-100 d-flex align-items-center justify-content-center"
+    }, /*#__PURE__*/React.createElement(CommonLoading, null));
+  }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorContainer, {
     editor: editor
   }, /*#__PURE__*/React.createElement(ColorProvider, null, /*#__PURE__*/React.createElement(HeaderToolbar, {
@@ -44,9 +108,9 @@ var SdocEditor = function SdocEditor(_ref) {
   }, /*#__PURE__*/React.createElement(EditableArticle, {
     editor: editor,
     slateValue: slateValue,
-    updateSlateValue: updateSlateValue
+    updateSlateValue: _setSlateValue
   })))), /*#__PURE__*/React.createElement(InsertElementDialog, {
     editor: editor
   }));
-};
+});
 export default SdocEditor;

package/dist/basic-sdk/extension/core/transforms/index.js

@@ -1,4 +1,5 @@
 export * from './move-children';
 export * from './remove-node-children';
 export * from './focus-editor';
-export * from './replace-node-children';
+export * from './replace-node';
+export * from './update-parent-node.js';

package/dist/basic-sdk/extension/core/transforms/update-parent-node.js

@@ -0,0 +1,25 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { REBASE_MARK_KEY } from '../../../constants';
+import { getNode } from '../queries';
+import { replaceNode } from './replace-node';
+export var updateRebaseParentNodeByPath = function updateRebaseParentNodeByPath(editor, path) {
+  var parentPath = path.slice(0, -1);
+  var parentNode = getNode(editor, parentPath);
+  if (parentNode.children.filter(function (item) {
+    return item[REBASE_MARK_KEY.REBASE_TYPE];
+  }).length !== 0) return;
+  var newParentElement = _objectSpread({}, parentNode);
+  newParentElement[REBASE_MARK_KEY.REBASE_TYPE] && delete newParentElement[REBASE_MARK_KEY.REBASE_TYPE];
+  newParentElement[REBASE_MARK_KEY.OLD_ELEMENT] && delete newParentElement[REBASE_MARK_KEY.OLD_ELEMENT];
+  newParentElement[REBASE_MARK_KEY.ORIGIN] && delete newParentElement[REBASE_MARK_KEY.ORIGIN];
+  newParentElement['children'] = newParentElement['children'].map(function (item) {
+    item[REBASE_MARK_KEY.REBASE_TYPE] && delete item[REBASE_MARK_KEY.REBASE_TYPE];
+    item[REBASE_MARK_KEY.OLD_ELEMENT] && delete item[REBASE_MARK_KEY.OLD_ELEMENT];
+    item[REBASE_MARK_KEY.ORIGIN] && delete item[REBASE_MARK_KEY.ORIGIN];
+    return item;
+  });
+  replaceNode(editor, {
+    at: parentPath,
+    nodes: newParentElement
+  });
+};

package/dist/basic-sdk/extension/render/custom-render-element.js

@@ -0,0 +1,148 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useCallback } from 'react';
+import { useSlateStatic } from '@seafile/slate-react';
+import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, LIST_LIC, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, CODE_LINE, IMAGE, ELEMENT_TYPE, SDOC_LINK, FILE_LINK, TITLE, SUBTITLE } from '../constants';
+import { BlockquotePlugin, LinkPlugin, CheckListPlugin, HeaderPlugin, ListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin } from '../plugins';
+import EventBus from '../../utils/event-bus';
+import { INTERNAL_EVENT } from '../../constants';
+var CustomRenderElement = function CustomRenderElement(props) {
+  var editor = useSlateStatic();
+  var element = props.element,
+    attributes = props.attributes;
+  var onMouseEnter = useCallback(function (event) {
+    event.stopPropagation();
+    var eventBus = EventBus.getInstance();
+    eventBus.dispatch(INTERNAL_EVENT.ON_MOUSE_ENTER_BLOCK, event);
+  }, []);
+  switch (element.type) {
+    case PARAGRAPH:
+      {
+        attributes['onMouseEnter'] = onMouseEnter;
+        var _ParagraphPlugin$rend = _slicedToArray(ParagraphPlugin.renderElements, 1),
+          renderParagraph = _ParagraphPlugin$rend[0];
+        return renderParagraph(props);
+      }
+    case TITLE:
+      {
+        var _HeaderPlugin$renderE = _slicedToArray(HeaderPlugin.renderElements, 1),
+          renderTitle = _HeaderPlugin$renderE[0];
+        return renderTitle(props, editor);
+      }
+    case SUBTITLE:
+      {
+        attributes['onMouseEnter'] = onMouseEnter;
+        var _HeaderPlugin$renderE2 = _slicedToArray(HeaderPlugin.renderElements, 2),
+          renderSubtitle = _HeaderPlugin$renderE2[1];
+        return renderSubtitle(props, editor);
+      }
+    case HEADER1:
+    case HEADER2:
+    case HEADER3:
+    case HEADER4:
+    case HEADER5:
+    case HEADER6:
+      {
+        attributes['onMouseEnter'] = onMouseEnter;
+        var _HeaderPlugin$renderE3 = _slicedToArray(HeaderPlugin.renderElements, 3),
+          renderHeader = _HeaderPlugin$renderE3[2];
+        return renderHeader(props, editor);
+      }
+    case LINK:
+      {
+        var _LinkPlugin$renderEle = _slicedToArray(LinkPlugin.renderElements, 1),
+          renderLink = _LinkPlugin$renderEle[0];
+        return renderLink(props, editor);
+      }
+    case BLOCKQUOTE:
+      {
+        attributes['onMouseEnter'] = onMouseEnter;
+        var _BlockquotePlugin$ren = _slicedToArray(BlockquotePlugin.renderElements, 1),
+          renderBlockquote = _BlockquotePlugin$ren[0];
+        return renderBlockquote(props, editor);
+      }
+    case ORDERED_LIST:
+    case UNORDERED_LIST:
+      {
+        var _ListPlugin$renderEle = _slicedToArray(ListPlugin.renderElements, 1),
+          renderList = _ListPlugin$renderEle[0];
+        return renderList(props, editor);
+      }
+    case LIST_ITEM:
+      {
+        attributes['onMouseEnter'] = onMouseEnter;
+        var _ListPlugin$renderEle2 = _slicedToArray(ListPlugin.renderElements, 2),
+          renderListItem = _ListPlugin$renderEle2[1];
+        return renderListItem(props, editor);
+      }
+    case LIST_LIC:
+      {
+        var _ListPlugin$renderEle3 = _slicedToArray(ListPlugin.renderElements, 3),
+          renderListLic = _ListPlugin$renderEle3[2];
+        return renderListLic(props, editor);
+      }
+    case CHECK_LIST_ITEM:
+      {
+        attributes['onMouseEnter'] = onMouseEnter;
+        var _CheckListPlugin$rend = _slicedToArray(CheckListPlugin.renderElements, 1),
+          renderCheckListItem = _CheckListPlugin$rend[0];
+        return renderCheckListItem(props, editor);
+      }
+    case CODE_BLOCK:
+      {
+        attributes['onMouseEnter'] = onMouseEnter;
+        var _CodeBlockPlugin$rend = _slicedToArray(CodeBlockPlugin.renderElements, 1),
+          renderCodeBlock = _CodeBlockPlugin$rend[0];
+        return renderCodeBlock(props, editor);
+      }
+    case CODE_LINE:
+      {
+        var _CodeBlockPlugin$rend2 = _slicedToArray(CodeBlockPlugin.renderElements, 2),
+          renderCodeLine = _CodeBlockPlugin$rend2[1];
+        return renderCodeLine(props, editor);
+      }
+    case IMAGE:
+      {
+        var _ImagePlugin$renderEl = _slicedToArray(ImagePlugin.renderElements, 1),
+          renderImage = _ImagePlugin$renderEl[0];
+        return renderImage(props, editor);
+      }
+    case ELEMENT_TYPE.TABLE:
+      {
+        attributes['onMouseEnter'] = onMouseEnter;
+        var _TablePlugin$renderEl = _slicedToArray(TablePlugin.renderElements, 1),
+          renderTable = _TablePlugin$renderEl[0];
+        return renderTable(props, editor);
+      }
+    case ELEMENT_TYPE.TABLE_ROW:
+      {
+        var _TablePlugin$renderEl2 = _slicedToArray(TablePlugin.renderElements, 2),
+          renderTableRow = _TablePlugin$renderEl2[1];
+        return renderTableRow(props, editor);
+      }
+    case ELEMENT_TYPE.TABLE_CELL:
+      {
+        var _TablePlugin$renderEl3 = _slicedToArray(TablePlugin.renderElements, 3),
+          renderTableCell = _TablePlugin$renderEl3[2];
+        return renderTableCell(props, editor);
+      }
+    case SDOC_LINK:
+      {
+        var _SdocLinkPlugin$rende = _slicedToArray(SdocLinkPlugin.renderElements, 1),
+          renderSdocLink = _SdocLinkPlugin$rende[0];
+        return renderSdocLink(props, editor);
+      }
+    case FILE_LINK:
+      {
+        var _FileLinkPlugin$rende = _slicedToArray(FileLinkPlugin.renderElements, 1),
+          renderFileLink = _FileLinkPlugin$rende[0];
+        return renderFileLink(props, editor);
+      }
+    default:
+      {
+        var _ParagraphPlugin$rend2 = _slicedToArray(ParagraphPlugin.renderElements, 1),
+          _renderParagraph = _ParagraphPlugin$rend2[0];
+        return _renderParagraph(props);
+      }
+  }
+};
+export default CustomRenderElement;

package/dist/basic-sdk/extension/render/render-element.js

@@ -1,372 +1,16 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useCallback } from 'react';
-import { useSlateStatic } from '@seafile/slate-react';
-import { Transforms } from '@seafile/slate';
-import deepCopy from 'deep-copy';
-import { useTranslation } from 'react-i18next';
-import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, LIST_LIC, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, CODE_LINE, IMAGE, ELEMENT_TYPE, SDOC_LINK, FILE_LINK, TITLE, SUBTITLE } from '../constants';
-import { BlockquotePlugin, LinkPlugin, CheckListPlugin, HeaderPlugin, ListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin } from '../plugins';
-import EventBus from '../../utils/event-bus';
-import { INTERNAL_EVENT, REBASE_TYPE, REBASE_MARKS, REBASE_MARK_KEY, REBASE_ORIGIN } from '../../constants';
-import { findPath, getNode, replaceNode, deleteNodeMark } from '../../extension/core';
-var CustomElement = function CustomElement(props) {
-  var editor = useSlateStatic();
-  var element = props.element,
-    attributes = props.attributes;
-  var onMouseEnter = useCallback(function (event) {
-    event.stopPropagation();
-    var eventBus = EventBus.getInstance();
-    eventBus.dispatch(INTERNAL_EVENT.ON_MOUSE_ENTER_BLOCK, event);
-  }, []);
-  switch (element.type) {
-    case PARAGRAPH:
-      {
-        attributes['onMouseEnter'] = onMouseEnter;
-        var _ParagraphPlugin$rend = _slicedToArray(ParagraphPlugin.renderElements, 1),
-          renderParagraph = _ParagraphPlugin$rend[0];
-        return renderParagraph(props);
-      }
-    case TITLE:
-      {
-        var _HeaderPlugin$renderE = _slicedToArray(HeaderPlugin.renderElements, 1),
-          renderTitle = _HeaderPlugin$renderE[0];
-        return renderTitle(props, editor);
-      }
-    case SUBTITLE:
-      {
-        attributes['onMouseEnter'] = onMouseEnter;
-        var _HeaderPlugin$renderE2 = _slicedToArray(HeaderPlugin.renderElements, 2),
-          renderSubtitle = _HeaderPlugin$renderE2[1];
-        return renderSubtitle(props, editor);
-      }
-    case HEADER1:
-    case HEADER2:
-    case HEADER3:
-    case HEADER4:
-    case HEADER5:
-    case HEADER6:
-      {
-        attributes['onMouseEnter'] = onMouseEnter;
-        var _HeaderPlugin$renderE3 = _slicedToArray(HeaderPlugin.renderElements, 3),
-          renderHeader = _HeaderPlugin$renderE3[2];
-        return renderHeader(props, editor);
-      }
-    case LINK:
-      {
-        var _LinkPlugin$renderEle = _slicedToArray(LinkPlugin.renderElements, 1),
-          renderLink = _LinkPlugin$renderEle[0];
-        return renderLink(props, editor);
-      }
-    case BLOCKQUOTE:
-      {
-        attributes['onMouseEnter'] = onMouseEnter;
-        var _BlockquotePlugin$ren = _slicedToArray(BlockquotePlugin.renderElements, 1),
-          renderBlockquote = _BlockquotePlugin$ren[0];
-        return renderBlockquote(props, editor);
-      }
-    case ORDERED_LIST:
-    case UNORDERED_LIST:
-      {
-        var _ListPlugin$renderEle = _slicedToArray(ListPlugin.renderElements, 1),
-          renderList = _ListPlugin$renderEle[0];
-        return renderList(props, editor);
-      }
-    case LIST_ITEM:
-      {
-        attributes['onMouseEnter'] = onMouseEnter;
-        var _ListPlugin$renderEle2 = _slicedToArray(ListPlugin.renderElements, 2),
-          renderListItem = _ListPlugin$renderEle2[1];
-        return renderListItem(props, editor);
-      }
-    case LIST_LIC:
-      {
-        var _ListPlugin$renderEle3 = _slicedToArray(ListPlugin.renderElements, 3),
-          renderListLic = _ListPlugin$renderEle3[2];
-        return renderListLic(props, editor);
-      }
-    case CHECK_LIST_ITEM:
-      {
-        attributes['onMouseEnter'] = onMouseEnter;
-        var _CheckListPlugin$rend = _slicedToArray(CheckListPlugin.renderElements, 1),
-          renderCheckListItem = _CheckListPlugin$rend[0];
-        return renderCheckListItem(props, editor);
-      }
-    case CODE_BLOCK:
-      {
-        attributes['onMouseEnter'] = onMouseEnter;
-        var _CodeBlockPlugin$rend = _slicedToArray(CodeBlockPlugin.renderElements, 1),
-          renderCodeBlock = _CodeBlockPlugin$rend[0];
-        return renderCodeBlock(props, editor);
-      }
-    case CODE_LINE:
-      {
-        var _CodeBlockPlugin$rend2 = _slicedToArray(CodeBlockPlugin.renderElements, 2),
-          renderCodeLine = _CodeBlockPlugin$rend2[1];
-        return renderCodeLine(props, editor);
-      }
-    case IMAGE:
-      {
-        var _ImagePlugin$renderEl = _slicedToArray(ImagePlugin.renderElements, 1),
-          renderImage = _ImagePlugin$renderEl[0];
-        return renderImage(props, editor);
-      }
-    case ELEMENT_TYPE.TABLE:
-      {
-        attributes['onMouseEnter'] = onMouseEnter;
-        var _TablePlugin$renderEl = _slicedToArray(TablePlugin.renderElements, 1),
-          renderTable = _TablePlugin$renderEl[0];
-        return renderTable(props, editor);
-      }
-    case ELEMENT_TYPE.TABLE_ROW:
-      {
-        var _TablePlugin$renderEl2 = _slicedToArray(TablePlugin.renderElements, 2),
-          renderTableRow = _TablePlugin$renderEl2[1];
-        return renderTableRow(props, editor);
-      }
-    case ELEMENT_TYPE.TABLE_CELL:
-      {
-        var _TablePlugin$renderEl3 = _slicedToArray(TablePlugin.renderElements, 3),
-          renderTableCell = _TablePlugin$renderEl3[2];
-        return renderTableCell(props, editor);
-      }
-    case SDOC_LINK:
-      {
-        var _SdocLinkPlugin$rende = _slicedToArray(SdocLinkPlugin.renderElements, 1),
-          renderSdocLink = _SdocLinkPlugin$rende[0];
-        return renderSdocLink(props, editor);
-      }
-    case FILE_LINK:
-      {
-        var _FileLinkPlugin$rende = _slicedToArray(FileLinkPlugin.renderElements, 1),
-          renderFileLink = _FileLinkPlugin$rende[0];
-        return renderFileLink(props, editor);
-      }
-    default:
-      {
-        var _ParagraphPlugin$rend2 = _slicedToArray(ParagraphPlugin.renderElements, 1),
-          _renderParagraph = _ParagraphPlugin$rend2[0];
-        return _renderParagraph(props);
-      }
-  }
-};
+import React from 'react';
+import { REBASE_MARK_KEY } from '../../constants';
+import { RebaseDecorate } from '../../decorate';
+import CustomRenderElement from './custom-render-element';
 var RenderElement = function RenderElement(props) {
-  var editor = useSlateStatic();
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var updateParentNodeByPath = useCallback(function (path) {
-    var parentPath = path.slice(0, -1);
-    var parentNode = getNode(editor, parentPath);
-    if (parentNode.children.filter(function (item) {
-      return item[REBASE_MARK_KEY.REBASE_TYPE];
-    }).length === 0) {
-      var newParentElement = _objectSpread({}, parentNode);
-      newParentElement[REBASE_MARK_KEY.REBASE_TYPE] && delete newParentElement[REBASE_MARK_KEY.REBASE_TYPE];
-      newParentElement[REBASE_MARK_KEY.OLD_ELEMENT] && delete newParentElement[REBASE_MARK_KEY.OLD_ELEMENT];
-      newParentElement[REBASE_MARK_KEY.ORIGIN] && delete newParentElement[REBASE_MARK_KEY.ORIGIN];
-      newParentElement['children'] = newParentElement['children'].map(function (item) {
-        item[REBASE_MARK_KEY.REBASE_TYPE] && delete item[REBASE_MARK_KEY.REBASE_TYPE];
-        item[REBASE_MARK_KEY.OLD_ELEMENT] && delete item[REBASE_MARK_KEY.OLD_ELEMENT];
-        item[REBASE_MARK_KEY.ORIGIN] && delete item[REBASE_MARK_KEY.ORIGIN];
-        return item;
-      });
-      replaceNode(editor, {
-        at: parentPath,
-        nodes: newParentElement
-      });
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editor]);
-  var deleteElement = useCallback(function (element) {
-    var path = findPath(editor, element);
-    Transforms.removeNodes(editor, {
-      at: path
-    });
-    if (element.type === ELEMENT_TYPE.LIST_ITEM) {
-      updateParentNodeByPath(path);
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editor]);
-  var deleteMark = useCallback(function (element) {
-    var path = findPath(editor, element);
-    deleteNodeMark(editor, path, element, REBASE_MARKS);
-    if (element.type === ELEMENT_TYPE.LIST_ITEM) {
-      updateParentNodeByPath(path);
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editor]);
-  var useMasterChanges = useCallback(function (element) {
-    var path = findPath(editor, element);
-    deleteNodeMark(editor, path, element[REBASE_MARK_KEY.OLD_ELEMENT], REBASE_MARKS);
-    var nextElementPath = _toConsumableArray(path);
-    nextElementPath[path.length - 1] = path[path.length - 1] + 1;
-    Transforms.removeNodes(editor, {
-      at: nextElementPath
-    });
-    if (element.type === ELEMENT_TYPE.LIST_ITEM) {
-      updateParentNodeByPath(path);
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editor]);
-  var useCurrentChanges = useCallback(function (element) {
-    var path = findPath(editor, element);
-    var currentElementPath = _toConsumableArray(path);
-    currentElementPath[path.length - 1] = path[path.length - 1] + 1;
-    var currentElement = getNode(editor, currentElementPath);
-    var newCurrentElement = deepCopy(currentElement);
-    deleteNodeMark(editor, currentElementPath, newCurrentElement, REBASE_MARKS);
-    Transforms.removeNodes(editor, {
-      at: path
-    });
-    if (element.type === ELEMENT_TYPE.LIST_ITEM) {
-      updateParentNodeByPath(path);
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editor]);
-  var useBothChanges = useCallback(function (element) {
-    // delete element marks
-    var path = findPath(editor, element);
-    deleteNodeMark(editor, path, element, REBASE_MARKS);
-
-    // delete next element marks
-    var nextElementPath = [].concat(_toConsumableArray(path.slice(0, -1)), [path[path.length - 1] + 1]);
-    var nextElement = getNode(editor, nextElementPath);
-    deleteNodeMark(editor, nextElementPath, nextElement, REBASE_MARKS);
-    if (element.type === ELEMENT_TYPE.LIST_ITEM) {
-      updateParentNodeByPath(path);
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editor]);
   var element = props.element;
   var rebaseType = element[REBASE_MARK_KEY.REBASE_TYPE];
-  if (!rebaseType) {
-    return /*#__PURE__*/React.createElement(CustomElement, props);
-  }
-  if (rebaseType === REBASE_TYPE.MODIFY_DELETE) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: "w-100 d-flex sdoc-rebase-btn-group",
-      contentEditable: false
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "sdoc-rebase-btn",
-      onClick: function onClick() {
-        return deleteMark(element);
-      }
-    }, t('Keep_other_modification')), /*#__PURE__*/React.createElement("div", {
-      className: "mr-2 ml-2"
-    }, '|'), /*#__PURE__*/React.createElement("div", {
-      className: "sdoc-rebase-btn",
-      onClick: function onClick() {
-        return deleteElement(element);
-      }
-    }, t('Keep_my_modification')), /*#__PURE__*/React.createElement("div", {
-      className: "mr-2 ml-2"
-    }, '|'), /*#__PURE__*/React.createElement("div", {
-      className: "sdoc-rebase-btn",
-      onClick: function onClick() {
-        return deleteMark(element);
-      }
-    }, t('Keep_both_modification'))), /*#__PURE__*/React.createElement("div", {
-      className: "w-100 sdoc-rebase-current-changes-start",
-      contentEditable: false
-    }, '<<<<<<<'), /*#__PURE__*/React.createElement("div", {
-      className: "w-100 sdoc-rebase-incoming-changes",
-      contentEditable: false
-    }, /*#__PURE__*/React.createElement(CustomElement, props)), /*#__PURE__*/React.createElement("div", {
-      className: "w-100",
-      contentEditable: false
-    }, '======='), /*#__PURE__*/React.createElement("div", {
-      className: "w-100 sdoc-rebase-incoming-changes-end",
-      contentEditable: false
-    }, '>>>>>>>'));
-  }
-  if (rebaseType === REBASE_TYPE.DELETE_MODIFY) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: "w-100 d-flex sdoc-rebase-btn-group",
-      contentEditable: false
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "sdoc-rebase-btn",
-      onClick: function onClick() {
-        return deleteElement(element);
-      }
-    }, t('Keep_other_modification')), /*#__PURE__*/React.createElement("div", {
-      className: "mr-2 ml-2"
-    }, '|'), /*#__PURE__*/React.createElement("div", {
-      className: "sdoc-rebase-btn",
-      onClick: function onClick() {
-        return deleteMark(element);
-      }
-    }, t('Keep_my_modification')), /*#__PURE__*/React.createElement("div", {
-      className: "mr-2 ml-2"
-    }, '|'), /*#__PURE__*/React.createElement("div", {
-      className: "sdoc-rebase-btn",
-      onClick: function onClick() {
-        return deleteMark(element);
-      }
-    }, t('Keep_both_modification'))), /*#__PURE__*/React.createElement("div", {
-      className: "w-100 sdoc-rebase-current-changes-start",
-      contentEditable: false
-    }, '<<<<<<<'), /*#__PURE__*/React.createElement("div", {
-      className: "w-100",
-      contentEditable: false
-    }, '======='), /*#__PURE__*/React.createElement("div", {
-      className: "w-100 sdoc-rebase-incoming-changes",
-      contentEditable: false
-    }, /*#__PURE__*/React.createElement(CustomElement, props)), /*#__PURE__*/React.createElement("div", {
-      className: "w-100 sdoc-rebase-incoming-changes-end",
-      contentEditable: false
-    }, '>>>>>>>'));
-  }
-  if (rebaseType === REBASE_TYPE.MODIFY_MODIFY) {
-    if (element[REBASE_MARK_KEY.ORIGIN] === REBASE_ORIGIN.OTHER) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: "w-100 d-flex sdoc-rebase-btn-group",
-        contentEditable: false
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-rebase-btn",
-        onClick: function onClick() {
-          return useMasterChanges(element);
-        }
-      }, t('Keep_other_modification')), /*#__PURE__*/React.createElement("div", {
-        className: "mr-2 ml-2"
-      }, '|'), /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-rebase-btn",
-        onClick: function onClick() {
-          return useCurrentChanges(element);
-        }
-      }, t('Keep_my_modification')), /*#__PURE__*/React.createElement("div", {
-        className: "mr-2 ml-2"
-      }, '|'), /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-rebase-btn",
-        onClick: function onClick() {
-          return useBothChanges(element);
-        }
-      }, t('Keep_both_modification'))), /*#__PURE__*/React.createElement("div", {
-        className: "w-100 sdoc-rebase-current-changes-start",
-        contentEditable: false
-      }, '<<<<<<<'), /*#__PURE__*/React.createElement("div", {
-        className: "w-100 sdoc-rebase-current-changes",
-        contentEditable: false
-      }, /*#__PURE__*/React.createElement(CustomElement, props)));
-    }
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: "w-100",
-      contentEditable: false
-    }, '======='), /*#__PURE__*/React.createElement("div", {
-      className: "w-100 sdoc-rebase-incoming-changes",
-      contentEditable: false
-    }, /*#__PURE__*/React.createElement(CustomElement, props)), /*#__PURE__*/React.createElement("div", {
-      className: "w-100 sdoc-rebase-incoming-changes-end",
-      contentEditable: false
-    }, '>>>>>>>'));
+  if (rebaseType) {
+    return /*#__PURE__*/React.createElement(RebaseDecorate, {
+      element: element
+    }, /*#__PURE__*/React.createElement(CustomRenderElement, props));
   }
-  return /*#__PURE__*/React.createElement(CustomElement, props);
+  return /*#__PURE__*/React.createElement(CustomRenderElement, props);
 
   // const { element } = props;
   // const editor = useSlateStatic();

package/dist/basic-sdk/index.js

@@ -1,4 +1,4 @@
-import SDocEditor from './editor';
+import SDocEditor from './editor/sdoc-editor';
 import { DiffViewer, SDocViewer } from './views';
 import SDocOutline from './outline';
 import EventBus from './utils/event-bus';

package/dist/basic-sdk/socket/socket-manager.js

@@ -50,7 +50,11 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, _do
   };
   this.onReceiveLocalOperations = function (operations) {
     _this.pendingOperationList.push(operations);
-    if (_this.pendingOperationList.length > 5) {
+    var lastOpBeginTime = new Date().getTime();
+    _this.pendingOperationBeginTimeList.push(lastOpBeginTime);
+    var firstOpBeginTime = _this.pendingOperationBeginTimeList[0];
+    var isExceedExecuteTime = (lastOpBeginTime - firstOpBeginTime) / 1000 > 30 ? true : false;
+    if (isExceedExecuteTime || _this.pendingOperationList.length > 50) {
       _this.dispatchConnectState('pending_operations_exceed_limit');
     }
     _this.sendOperations();
@@ -83,6 +87,7 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, _do
       _this.dispatchConnectState('saved', lastSavedAt);
 
       // send next operations
+      _this.pendingOperationBeginTimeList.shift(); // remove current operation's begin time
       _this._sendingOperations = null;
       _this.sendNextOperations();
       return;
@@ -317,6 +322,7 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, _do
   this.document = _document;
   this.socketClient = new SocketClient(config);
   this.pendingOperationList = []; // Two-dimensional arrays： [operations, operations, ...]
+  this.pendingOperationBeginTimeList = [];
   this.remoteOperationsList = []; // Same with pending operations
   this.revertOperationList = [];
   this.eventBus = EventBus.getInstance();

package/dist/basic-sdk/views/readonly-article.js

@@ -1,9 +1,8 @@
 import React, { Fragment } from 'react';
 import { Editable, Slate } from '@seafile/slate-react';
 import { ArticleContainer } from '../layout';
-import { SetNodeToDecorations } from '../highlight-decorate/setNodeToDecorations';
 import { renderElement, renderLeaf } from '../extension';
-import { usePipDecorate } from '../decorates';
+import { usePipDecorate, SetNodeToDecorations } from '../decorate';
 export default function ReadOnlyArticle(_ref) {
   var editor = _ref.editor,
     slateValue = _ref.slateValue;

package/package.json

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

package/dist/basic-sdk/editor/index.js

@@ -1,84 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useMemo, useEffect, useState, useCallback, useImperativeHandle, forwardRef } from 'react';
-import deepCopy from 'deep-copy';
-import context from '../../context';
-import CommonLoading from '../../components/common-loading';
-import { PAGE_EDIT_AREA_WIDTH } from '../constants';
-import { createDefaultEditor } from '../extension';
-import withNodeId from '../node-id';
-import { withSocketIO } from '../socket';
-import SDocEditor from './sdoc-editor';
-import './index.css';
-var Editor = forwardRef(function (_ref, ref) {
-  var document = _ref.document,
-    _ref$isReloading = _ref.isReloading,
-    isReloading = _ref$isReloading === void 0 ? false : _ref$isReloading;
-  var editor = useMemo(function () {
-    var defaultEditor = createDefaultEditor();
-    var editorConfig = context.getEditorConfig();
-    var newEditor = withNodeId(withSocketIO(defaultEditor, {
-      document: document,
-      config: editorConfig
-    }));
-    var cursors = document.cursors;
-    newEditor.cursors = cursors || {};
-    newEditor.width = PAGE_EDIT_AREA_WIDTH; // default width
-    return newEditor;
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  var _useState = useState(document.children),
-    _useState2 = _slicedToArray(_useState, 2),
-    slateValue = _useState2[0],
-    _setSlateValue = _useState2[1];
-
-  // useMount: init socket connection
-  useEffect(function () {
-    editor.openConnection();
-    return function () {
-      editor.closeConnection();
-    };
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  var updateSlateValue = useCallback(function (value) {
-    _setSlateValue(value);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // The parent component can call the method of this component through ref
-  useImperativeHandle(ref, function () {
-    return {
-      setSlateValue: function setSlateValue(document) {
-        // Force update of editor's child elements
-        editor.children = document.children;
-        _setSlateValue(_toConsumableArray(document.children));
-      },
-      updateDocumentVersion: function updateDocumentVersion(document) {
-        editor.updateDocumentVersion(document);
-      },
-      // get value
-      getSlateValue: function getSlateValue() {
-        return deepCopy(_objectSpread(_objectSpread({}, document), {}, {
-          children: slateValue
-        }));
-      }
-
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    };
-  }, [document, editor, slateValue]);
-  if (isReloading) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "h-100 w-100 d-flex align-items-center justify-content-center"
-    }, /*#__PURE__*/React.createElement(CommonLoading, null));
-  }
-  return /*#__PURE__*/React.createElement(SDocEditor, {
-    slateValue: slateValue,
-    editor: editor,
-    updateSlateValue: updateSlateValue
-  });
-});
-export default Editor;