@seafile/sdoc-editor 0.1.117 → 0.1.119

package/dist/basic-sdk/extension/plugins/sdoc-link/helpers.js

@@ -2,6 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { ReactEditor } from '@seafile/slate-react';
 import { Editor, Transforms, Range } from '@seafile/slate';
 import slugid from 'slugid';
+import copy from 'copy-to-clipboard';
 import context from '../../../../context';
 import { SDOC_LINK, LINK, INSERT_FILE_DISPLAY_TYPE } from '../../constants';
 import { getNodeType, getSelectedElems } from '../../core';
@@ -121,4 +122,18 @@ export var getNewFileListData = function getNewFileListData(fileListData, indexI
 };
 export var getUrl = function getUrl(uuid) {
   return context.getSdocLocalFileUrl(uuid);
+};
+export var onCopySdocLinkNode = function onCopySdocLinkNode(editor, element) {
+  if (editor.selection == null || Range.isExpanded(editor.selection)) return;
+  var p = ReactEditor.findPath(editor, element);
+  Transforms.select(editor, p);
+  var newData = editor.setFragmentData(new DataTransfer());
+  copy('copy', {
+    onCopy: function onCopy(clipboardData) {
+      newData.types.forEach(function (type) {
+        var data = newData.getData(type);
+        clipboardData.setData(type, data);
+      });
+    }
+  });
 };

package/dist/basic-sdk/extension/plugins/sdoc-link/menu/index.css

@@ -19,7 +19,7 @@
 .sdoc-link-menu .sdoc-link-menu-popover {
   position: absolute;
   top: 36px;
-  left: 0px;
+  left: -15px;
   padding: 8px 0;
   background-color: #fff;
   border: 1px solid #e5e6e8;
@@ -30,7 +30,7 @@
   align-items: flex-start;
   z-index: 101;
   white-space: nowrap;
-  width: 180px;
+  width: 138px;
 }
 
 .sdoc-link-menu .sdoc-link-menu-popover .sdoc-link-menu-item {
@@ -40,9 +40,9 @@
   user-select: none;
   display: flex;
   align-items: center;
-  font-size: 12px;
+  font-size: 14px;
   color: #212529;
-  padding-left: 24px;
+  padding-left: 5px;
 }
 
 .sdoc-link-menu .sdoc-link-menu-popover .sdoc-link-menu-item > span :first-child {

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

@@ -1,6 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { withTranslation } from 'react-i18next';
 import { SDOC_LINK, MENUS_CONFIG_MAP } from '../../../constants';
 import { MenuItem } from '../../../commons';
@@ -30,13 +30,13 @@ var SdocLinkMenu = function SdocLinkMenu(_ref) {
   }, []);
   var onInsertFileDialogToggle = useCallback(function () {
     setShowInsertPopover(true);
-    // setShowInsertDialog(!showInsertDialog);
   }, []);
-  var onMouseDown = useCallback(function () {
+  var onMouseDown = useCallback(function (e) {
+    e.stopPropagation();
     onInsertFileDialogToggle();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var onInsertSdocFile = useCallback(function () {
+  var onInsertSdocFile = useCallback(function (e) {
     setShowInsertPopover(false);
     setShowInsertDialog(true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -44,6 +44,20 @@ var SdocLinkMenu = function SdocLinkMenu(_ref) {
   var onDialogToggle = useCallback(function (value) {
     setShowInsertDialog(value);
   }, []);
+  var onHidenInsertPopover = useCallback(function () {
+    setShowInsertPopover(false);
+  }, []);
+  useEffect(function () {
+    if (showInsertPopover) {
+      window.addEventListener('click', onHidenInsertPopover);
+    } else {
+      window.removeEventListener('click', onHidenInsertPopover);
+    }
+    return function () {
+      window.removeEventListener('click', onHidenInsertPopover);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showInsertPopover]);
   var menuConfig = MENUS_CONFIG_MAP[SDOC_LINK];
   var props = _objectSpread(_objectSpread({
     isRichEditor: isRichEditor,

package/dist/basic-sdk/extension/plugins/sdoc-link/menu/sdoc-link-hover-menu.js

@@ -2,37 +2,37 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useState } from 'react';
 import { Transforms } from '@seafile/slate';
 import { ReactEditor } from '@seafile/slate-react';
-import copy from 'copy-to-clipboard';
 import { withTranslation } from 'react-i18next';
 import { ElementPopover } from '../../../commons';
 import toaster from '../../../../../components/toast';
-import { getUrl } from '../helpers';
+import { getUrl, onCopySdocLinkNode } from '../helpers';
 import './sdoc-link-hover-menu.css';
 var SdocLinkHoverMenu = function SdocLinkHoverMenu(_ref) {
   var editor = _ref.editor,
     menuPosition = _ref.menuPosition,
     element = _ref.element,
     onUnwrapFileLinkNode = _ref.onUnwrapFileLinkNode,
+    onHideInsertHoverMenu = _ref.onHideInsertHoverMenu,
     t = _ref.t;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isShowDisplayStylePopover = _useState2[0],
     setIsShowDisplayStylePopover = _useState2[1];
-  var onCopy = useCallback(function () {
-    copy(String(getUrl(element.doc_uuid)), {
-      format: 'text/plain'
-    });
+  var onCopy = useCallback(function (e) {
+    e.stopPropagation();
+    onCopySdocLinkNode(editor, element);
     toaster.success(t('Copied'), {
       hasCloseButton: false,
       duration: 2
     });
+    onHideInsertHoverMenu();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   var onShowProver = useCallback(function (e) {
-    e.stopPropagation();
     setIsShowDisplayStylePopover(true);
   }, []);
-  var onSelect = useCallback(function (value) {
+  var onSelect = useCallback(function (e, value) {
+    e.stopPropagation();
     var path = ReactEditor.findPath(editor, element);
     if (path) {
       Transforms.setNodes(editor, {
@@ -41,6 +41,7 @@ var SdocLinkHoverMenu = function SdocLinkHoverMenu(_ref) {
         at: path
       });
     }
+    onHideInsertHoverMenu();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React.createElement(ElementPopover, null, /*#__PURE__*/React.createElement("div", {
@@ -84,8 +85,8 @@ var SdocLinkHoverMenu = function SdocLinkHoverMenu(_ref) {
     className: "sdoc-file-display-style-popover"
   }, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-file-display-style-item ".concat(element.display_type === 'text_link' ? 'active' : 'inactive'),
-    onClick: function onClick() {
-      onSelect('text_link');
+    onClick: function onClick(e) {
+      onSelect(e, 'text_link');
     }
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("i", {
     className: "sdocfont sdoc-text-link"
@@ -93,8 +94,8 @@ var SdocLinkHoverMenu = function SdocLinkHoverMenu(_ref) {
     className: "sdocfont sdoc-check-mark"
   }))), /*#__PURE__*/React.createElement("div", {
     className: "sdoc-file-display-style-item ".concat(element.display_type === 'icon_link' ? 'active' : 'inactive'),
-    onClick: function onClick() {
-      onSelect('icon_link');
+    onClick: function onClick(e) {
+      onSelect(e, 'icon_link');
     }
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("i", {
     className: "sdocfont sdoc-inline-link"
@@ -102,8 +103,8 @@ var SdocLinkHoverMenu = function SdocLinkHoverMenu(_ref) {
     className: "sdocfont sdoc-check-mark"
   }))), /*#__PURE__*/React.createElement("div", {
     className: "sdoc-file-display-style-item ".concat(element.display_type === 'card_link' ? 'active' : 'inactive'),
-    onClick: function onClick() {
-      onSelect('card_link');
+    onClick: function onClick(e) {
+      onSelect(e, 'card_link');
     }
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("i", {
     className: "sdocfont sdoc-card-link"

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

@@ -69,6 +69,7 @@ var SdocFileLink = function SdocFileLink(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isShowInsertHoverMenu]);
   var onClickFile = useCallback(function (e) {
+    e.stopPropagation();
     setPosition(e.currentTarget);
     setIsShowInsertHoverMenu(true);
     setTimeout(function () {
@@ -76,7 +77,7 @@ var SdocFileLink = function SdocFileLink(_ref) {
     }, 0);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var onHideInsertHoverMenu = useCallback(function () {
+  var onHideInsertHoverMenu = useCallback(function (e) {
     setIsShowInsertHoverMenu(false);
     unregisterEventHandle();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -107,7 +108,8 @@ var SdocFileLink = function SdocFileLink(_ref) {
     editor: editor,
     menuPosition: menuPosition,
     element: element,
-    onUnwrapFileLinkNode: onUnwrapFileLinkNode
+    onUnwrapFileLinkNode: onUnwrapFileLinkNode,
+    onHideInsertHoverMenu: onHideInsertHoverMenu
   }));
 };
 var renderSdocLink = function renderSdocLink(props, editor) {

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

@@ -25,11 +25,8 @@ var SocketClient = /*#__PURE__*/_createClass(function SocketClient(config) {
         // sync operations or document
         if (_this.isReconnect) {
           _this.isReconnect = false;
-          var serverVersion = result.version;
-          var clientVersion = socketManager.getDocumentVersion();
-          if (serverVersion !== clientVersion) {
-            _this.syncDocumentBySocket();
-          }
+          // The reconnect of socketManager needs to be triggered after entering the room again
+          socketManager.onReconnect(result);
         }
         socketManager.dispatchConnectState('onConnected', result);
         return;
@@ -92,14 +89,14 @@ var SocketClient = /*#__PURE__*/_createClass(function SocketClient(config) {
    * receive remote broadcast operations
    * @param {*} params {operations, version}
    */
-  this.receiveOperations = function (params) {
+  this.onReceiveRemoteOperations = function (params) {
     debug('********* receive operations *********');
     debug('%O', params);
     debug('**************************************');
     var socketManager = SocketManager.getInstance();
-    socketManager.receiveOperations(params);
+    socketManager.onReceiveRemoteOperations(params);
   };
-  this.syncDocumentBySocket = function () {
+  this.getRecentOperations = function () {
     var docUuid = _this.config.docUuid;
     var socketManager = SocketManager.getInstance();
     var clientVersion = socketManager.getDocumentVersion();
@@ -108,7 +105,7 @@ var SocketClient = /*#__PURE__*/_createClass(function SocketClient(config) {
       version: clientVersion
     }, function (result) {
       if (result.success) {
-        socketManager.syncDocumentBySocket(result);
+        socketManager.onGetRecentOperations(result);
       }
     });
   };
@@ -139,7 +136,7 @@ var SocketClient = /*#__PURE__*/_createClass(function SocketClient(config) {
   this.socket.on('connect_error', this.onConnectError);
   this.socket.on('join-room', this.onJoinRoom);
   this.socket.on('leave-room', this.onLeaveRoom);
-  this.socket.on('update-document', this.receiveOperations);
+  this.socket.on('update-document', this.onReceiveRemoteOperations);
   this.socket.on('update-cursor', this.receiveCursorLocation);
   this.socket.io.on('reconnect', this.onReconnect);
   this.socket.io.on('reconnect_attempt', this.onReconnectAttempt);

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

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import EventBus from '../utils/event-bus';
@@ -5,31 +6,43 @@ import { syncRemoteOperations, reExecRevertOperationList, revertOperationList, s
 import SocketClient from './socket-client';
 import debug from '../utils/debug';
 import { deleteCursor } from '../cursor/helper';
+
+//  idle --> sending --> conflict --> idle
+//       --> conflict --> idle
+//       --> disconnect --> conflict --> idle
+//                      --> idle
+var STATE = {
+  IDLE: 'idle',
+  SENDING: 'sending',
+  CONFLICT: 'conflict',
+  DISCONNECT: 'disconnect',
+  NEED_RELOAD: 'need_reload'
+};
 var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, document, config) {
   var _this = this;
   _classCallCheck(this, SocketManager);
-  this.addOperations = function (operations) {
+  this.getDocumentVersion = function () {
+    var version = _this.document.version;
+    return version;
+  };
+  this.onReceiveLocalOperations = function (operations) {
     _this.pendingOperationList.push(operations);
     if (_this.pendingOperationList.length > 5) {
       _this.dispatchConnectState('pending_operations_exceed_limit');
     }
     _this.sendOperations();
   };
-  this.getDocumentVersion = function () {
-    var version = _this.document.version;
-    return version;
-  };
   this.sendOperations = function () {
-    if (_this.isSending || _this.pendingOperationList.length === 0) return;
-    _this.isSending = true;
+    if (_this.state !== STATE.IDLE) return;
+    _this.state = STATE.SENDING;
     _this.sendNextOperations();
   };
   this.sendNextOperations = function () {
+    if (_this.state !== STATE.SENDING) return;
     if (_this.pendingOperationList.length === 0) {
-      _this.isSending = false;
+      _this.state = STATE.IDLE;
       return;
     }
-    if (_this._sendingOperations || _this.disconnect) return;
     _this.dispatchConnectState('is-saving');
     var version = _this.document.version;
     var operations = _this.pendingOperationList.shift();
@@ -38,113 +51,97 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, doc
     _this.socketClient.sendOperations(operations, version, selection, _this.sendOperationsCallback);
   };
   this.sendOperationsCallback = function (result) {
-    _this._sendingOperations = null;
     if (result && result.success) {
       var serverVersion = result.version;
       _this.document['version'] = serverVersion;
       var lastSavedAt = new Date().getTime();
       _this.dispatchConnectState('saved', lastSavedAt);
+
+      // send next operations
+      _this._sendingOperations = null;
       _this.sendNextOperations();
       return;
     }
 
     // Operations are execute failure
-    var error_type = result.error_type,
-      operations = result.operations;
+    var error_type = result.error_type;
     if (error_type === 'version_behind_server') {
       // Put the failed operation into the pending list and re-execute it
-      _this.pendingOperationList.unshift(operations);
-      _this.sendNextOperations();
+      _this.pendingOperationList.unshift(_toConsumableArray(_this._sendingOperations));
+      _this.state = STATE.CONFLICT;
+      var lose_operations = result.lose_operations;
+      _this.resolveConflicting(lose_operations);
     } else if (error_type === 'document_content_load_failed') {
       // After a short-term reconnection, the content of the document fails to load
       _this.dispatchConnectState(error_type);
+
+      // reset sending control
+      _this.state = STATE.NEED_RELOAD;
+      _this._sendingOperations = null;
     } else if (error_type === 'Internal_server_error') {
       _this.dispatchConnectState(error_type);
+
+      // reset sending control
+      _this.state = STATE.NEED_RELOAD;
+      _this._sendingOperations = null;
     } else if (error_type === 'operation_exec_error') {
       _this.editor.isRemote = true;
-      revertOperationList(_this.editor, [operations]);
+      var dupSendingOperations = _toConsumableArray(_this._sendingOperations);
+      revertOperationList(_this.editor, [dupSendingOperations]);
 
-      // reset control flag
+      // Set isRemote to false must be in Promise.resolve function, make sure the modification of isRemote is later than the onChange event
       Promise.resolve().then(function (_) {
         _this.editor.isRemote = false;
         _this.dispatchConnectState(error_type);
+
+        // send next operations
+        _this._sendingOperations = null;
         _this.sendNextOperations();
       });
     }
   };
-  this.receiveOperations = function (params) {
-    _this.remoteOperationsList.push(params);
-    // sort operations by version
-    if (_this.remoteOperationsList.length > 1) {
-      _this.remoteOperationsList = _this.remoteOperationsList.sort(function (prev, next) {
-        return prev.version - next.version;
+  this.onReceiveRemoteOperations = function (params) {
+    // if this.disconnect is true, Then the message sent by the remote end cannot be received
+    if (_this.state !== STATE.IDLE) return;
+    var serverVersion = params.version;
+    var clientVersion = _this.document.version;
+    if (serverVersion === clientVersion + 1) {
+      // update execute remote operations flag
+      _this.editor.isRemote = true;
+      debug('Editor isRemote is true: %s', _this.editor.isRemote);
+      var operations = params.operations;
+      // Update content & version
+      debug('execute remote operations: %O', operations);
+      syncRemoteOperations(_this.editor, operations);
+
+      // Update document
+      _this.document.version = serverVersion;
+      _this.document.children = _this.editor.children;
+      Promise.resolve().then(function () {
+        _this.editor.isRemote = false;
+        _this.revertOperationList = [];
       });
+    } else {
+      // isConflict
+      _this.onConflictHappen();
     }
-    if (_this.isExecRemoteOperations) return;
-
-    // update execute remote operations flag
-    _this.isExecRemoteOperations = true;
-    _this.editor.isRemote = true;
-    _this.execRemoteOperations();
   };
-  this.execRemoteOperations = function () {
-    if (_this.remoteOperationsList.length > 0) {
-      var params = _this.remoteOperationsList.shift();
-      var serverVersion = params.version;
-      var clientVersion = _this.document.version;
-      if (serverVersion === clientVersion + 1) {
-        // When performing remote operations, the revert operation is only required for the first time
-        if (_this.revertOperationList.length === 0) {
-          // 1. Revert operations
-          // 1.1 record reverted operationList & clear pendingOperationList
-          _this.revertOperationList = _this.pendingOperationList.slice();
-          _this.pendingOperationList = [];
-
-          // 1.2 Revert operationList
-          debug('revert locale operations: %O', _this.revertOperationList);
-          revertOperationList(_this.editor, _this.revertOperationList);
-        }
-
-        // 2. execute operations
-        var operations = params.operations;
-        // 2.1 Update content & version
-        debug('execute remote operations: %O', operations);
-        syncRemoteOperations(_this.editor, operations);
-
-        // 2.2 Update document
-        _this.document.version = serverVersion;
-        _this.document.children = _this.editor.children;
-
-        // Execute next operations
-        if (_this.remoteOperationsList.length > 0) {
-          _this.execRemoteOperations();
-          return;
-        }
-
-        // Re-execute undone operations after isRemote is set to false
-        // Need resend this operations to server
-        Promise.resolve().then(function (_) {
-          // reset execute remote operations flag
-          _this.isExecRemoteOperations = false;
-          _this.editor.isRemote = false;
-
-          // 3. Execute pending operations
-          // 3.1 Re-execute operations
-          debug('Editor isRemote is false: %s', _this.editor.isRemote);
-          debug('Re-execute pending operations, %O', _this.revertOperationList);
-          reExecRevertOperationList(_this.editor, _this.revertOperationList);
-
-          // 3.2 Clear revert operationList
-          _this.revertOperationList = [];
-        });
-      } else {
-        // conflict:
-        // remote operations is not empty, waiting until remote operations all executed
-        debug('remote operations is not empty, and local version is not match remote version.');
-      }
+  this.onReconnect = function (result) {
+    var serverVersion = result.version;
+    var clientVersion = _this.getDocumentVersion();
+    // The client version is inconsistent with the server version, and the latest operations performed by the server need to be loaded
+    if (serverVersion !== clientVersion) {
+      _this.onConflictHappen();
     }
+
+    // The version consistency indicates that there is no conflict and no processing is required
+    _this.state = STATE.IDLE;
+  };
+  this.onConflictHappen = function () {
+    _this.state = STATE.CONFLICT;
+    _this.socketClient.getRecentOperations();
   };
-  this.syncDocumentBySocket = function (result) {
+  this.onGetRecentOperations = function (result) {
     var mode = result.mode,
       content = result.content;
     // sync document
@@ -158,6 +155,8 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, doc
       _this.editor.isRemote = true;
       _this.editor.onChange();
       _this.editor.isRemote = false;
+      _this.state = STATE.IDLE;
+      _this._sendingOperations = null;
 
       // 2. exec client operationList
       var pendingOperationList = _this.pendingOperationList.slice();
@@ -169,14 +168,67 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, doc
       return;
     }
 
-    // sync operations
+    // mode os operations: sync operations
     // content is [{version, operations}, {version, operations}, ...]
-    _this.remoteOperationsList = content;
-
-    // update execute remote operations flag
-    _this.isExecRemoteOperations = true;
+    var loseOperations = content;
+    _this.resolveConflicting(loseOperations);
+  };
+  this.resolveConflicting = function (loseOperations) {
     _this.editor.isRemote = true;
-    _this.execRemoteOperations();
+    debug('Editor isRemote is true: %s', _this.editor.isRemote);
+    if (_this.pendingOperationList.length !== 0) {
+      // 1. Revert operations
+      // 1.1 record reverted operationList & clear pendingOperationList
+      _this.revertOperationList = _this.pendingOperationList.slice();
+      _this.pendingOperationList = [];
+
+      // 1.2 Revert operationList
+      debug('revert locale operations: %O', _this.revertOperationList);
+      revertOperationList(_this.editor, _this.revertOperationList);
+    }
+    loseOperations = loseOperations.sort(function (prev, next) {
+      return prev.version - next.version;
+    });
+    debug('lose operations length: %s', loseOperations.length);
+    while (loseOperations.length > 0) {
+      var operationParams = loseOperations.shift();
+      // 2. execute operations
+      var operations = operationParams.operations,
+        serverVersion = operationParams.version;
+      // 2.1 Update content & version
+      debug('execute lose operations: %O', operations);
+      syncRemoteOperations(_this.editor, operations);
+
+      // 2.2 Update document
+      _this.document.version = serverVersion;
+      _this.document.children = _this.editor.children;
+    }
+    if (_this.revertOperationList.length === 0) {
+      Promise.resolve().then(function () {
+        _this.editor.isRemote = false;
+        _this.state = STATE.IDLE;
+        _this._sendingOperations = null;
+        _this.revertOperationList = [];
+      });
+      return;
+    }
+
+    // Set isRemote to false must be in Promise.resolve function, make sure the modification of isRemote is later than the onChange event
+    Promise.resolve().then(function () {
+      // reset execute remote operations flag
+      _this.editor.isRemote = false;
+      _this.state = STATE.IDLE;
+      _this._sendingOperations = null;
+
+      // 3. Execute pending operations
+      // 3.1 Re-execute operations
+      debug('Editor isRemote is false: %s', _this.editor.isRemote);
+      debug('Re-execute pending operations, %O', _this.revertOperationList);
+      reExecRevertOperationList(_this.editor, _this.revertOperationList);
+
+      // 3.2 Clear revert operationList
+      _this.revertOperationList = [];
+    });
   };
   this.sendCursorLocation = function (location) {
     _this.socketClient.sendCursorLocation(location);
@@ -198,16 +250,12 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, doc
         _this.pendingOperationList.unshift(_this._sendingOperations.slice());
         _this._sendingOperations = null;
       }
-      _this.isSending = false;
-      _this.disconnect = true;
+      _this.state = STATE.DISCONNECT;
 
       // Update saved state
       var lastSavedAt = new Date().getTime();
       _this.dispatchConnectState('saved', lastSavedAt);
     }
-    if (type === 'reconnect') {
-      _this.disconnect = false;
-    }
     _this.eventBus.dispatch(type, message);
   };
   this.closeSocketConnect = function () {
@@ -216,11 +264,11 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, doc
   this.editor = editor;
   this.document = document;
   this.socketClient = new SocketClient(config);
-  this.isSending = false;
   this.pendingOperationList = []; // Two-dimensional arrays： [operations, operations, ...]
   this.remoteOperationsList = []; // Same with pending operations
   this.revertOperationList = [];
   this.eventBus = EventBus.getInstance();
+  this.state = STATE.IDLE;
 });
 SocketManager.getInstance = function (editor, document, socketConfig) {
   if (SocketManager.instance) {

package/dist/basic-sdk/socket/with-socket-io.js

@@ -30,7 +30,7 @@ var withSocketIO = function withSocketIO(editor, options) {
         var updateOperations = operations.filter(function (operation) {
           return operation.type !== 'set_selection';
         });
-        _socketManager.addOperations && _socketManager.addOperations(updateOperations);
+        _socketManager.onReceiveLocalOperations(updateOperations);
       }
       _socketManager.sendCursorLocation(editor.selection);
     }

package/dist/pages/simple-editor.js

@@ -141,7 +141,7 @@ var SimpleEditor = function SimpleEditor(_ref) {
     className: "error-page"
   }, /*#__PURE__*/React.createElement("div", {
     className: "error-tip"
-  }, t(errorMessage))), !isLoadingSdoc && /*#__PURE__*/React.createElement(React.Fragment, null, isShowChanges ? /*#__PURE__*/React.createElement(DiffViewer, {
+  }, t(errorMessage))), !isLoadingSdoc && !errorMessage && /*#__PURE__*/React.createElement(React.Fragment, null, isShowChanges ? /*#__PURE__*/React.createElement(DiffViewer, {
     currentContent: currentContent,
     lastContent: lastContent
   }) : /*#__PURE__*/React.createElement(SDocEditor, {

package/package.json

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