@seafile/sdoc-editor 0.1.0 → 0.1.2

package/dist/{new-editors/editor.js → editor.js}

@@ -1,3 +1,4 @@
+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";
@@ -5,15 +6,22 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { Editable, Slate } from 'slate-react';
 import isHotkey from 'is-hotkey';
-import editor, { renderLeaf as _renderLeaf, renderElement as _renderElement, Toolbar } from '../slate-extension';
-import '../assets/css/new-editor.css';
-var NewEditor = /*#__PURE__*/function (_React$Component) {
-  _inherits(NewEditor, _React$Component);
-  var _super = _createSuper(NewEditor);
-  function NewEditor(props) {
+import editor, { renderLeaf as _renderLeaf, renderElement as _renderElement, Toolbar } from './slate-extension';
+import SocketManager from './slate-extension/socket/socket-manager';
+import './assets/css/sdoc-editor.css';
+var SDocEditor = /*#__PURE__*/function (_React$Component) {
+  _inherits(SDocEditor, _React$Component);
+  var _super = _createSuper(SDocEditor);
+  function SDocEditor(props) {
     var _this;
-    _classCallCheck(this, NewEditor);
+    _classCallCheck(this, SDocEditor);
     _this = _super.call(this, props);
+    _this.updateWithRemoteOperation = function (params) {
+      var operation = params.operation;
+      _this.editor.apply(_objectSpread(_objectSpread({}, operation), {}, {
+        is_remote: true
+      }));
+    };
     _this.onChange = function (slateValue) {
       var onValueChanged = _this.props.onValueChanged;
       _this.setState({
@@ -21,22 +29,32 @@ var NewEditor = /*#__PURE__*/function (_React$Component) {
       });
       onValueChanged && onValueChanged(slateValue);
     };
+    var children = props.document.children;
     _this.state = {
-      slateValue: props.value,
+      slateValue: children,
       isLoading: true
     };
     _this.editor = editor;
+    _this.socketManager = null;
     return _this;
   }
-  _createClass(NewEditor, [{
+  _createClass(SDocEditor, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var value = this.props.value;
-      var slateValue = value;
-      this.setState({
-        slateValue: slateValue,
-        isLoading: false
-      });
+      var _this$props = this.props,
+        isOpenSocket = _this$props.isOpenSocket,
+        document = _this$props.document,
+        config = _this$props.config;
+      if (isOpenSocket) {
+        this.socketManager = SocketManager.getInstance(document, config);
+        var eventBus = this.socketManager.eventBus;
+        this.unsubscribeReceiveOption = eventBus.subscribe('receive-operation', this.updateWithRemoteOperation);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.unsubscribeReceiveOption();
     }
   }, {
     key: "render",
@@ -72,6 +90,9 @@ var NewEditor = /*#__PURE__*/function (_React$Component) {
       })))));
     }
   }]);
-  return NewEditor;
+  return SDocEditor;
 }(React.Component);
-export default NewEditor;
+SDocEditor.defaultProps = {
+  isOpenSocket: false
+};
+export default SDocEditor;

package/dist/index.js

@@ -1,36 +1,2 @@
-// import Toolbar from './components/toolbar';
-// import Outline from './components/outline';
-// import UserHelp from './components/user-help';
-// import EditorContext from './containers/editor-context';
-// import { deserialize, serialize } from './utils/slate2markdown';
-// import { processor } from './utils/seafile-markdown2html';
-// import { replaceColumnData } from './utils/utils';
-// import { 
-//   MarkdownEditor, 
-//   SimpleEditor, 
-//   PlainMarkdownEditor, 
-//   SeatableEditor 
-// } from './editors';
-// import { 
-//   DiffViewer, 
-//   MarkdownViewer, 
-//   SeatableViewer 
-// } from './viewer';
-import NewEditor from './new-editors/editor';
-export {
-// EditorContext,
-// MarkdownEditor,
-// SimpleEditor,
-// PlainMarkdownEditor,
-// DiffViewer,
-// MarkdownViewer,
-// SeatableViewer,
-// Toolbar,
-// Outline,
-// UserHelp,
-// deserialize,
-// serialize,
-// processor,
-// SeatableEditor,
-// replaceColumnData,
-NewEditor };
+import SDocEditor from './editor';
+export { SDocEditor };

package/dist/slate-extension/core/transforms/move-children.js

@@ -10,7 +10,7 @@ export var moveChildren = function moveChildren(editor, _ref) {
   var moved = 0;
   var parentPath = Path.isPath(at) ? at : at[1];
   var parentNode = Path.isPath(at) ? getNode(editor, parentPath) : at[0];
-
+  if (!parentNode) return moved;
   // There have none children in a not block element
   if (!Editor.isBlock(editor, parentNode)) return moved;
   for (var i = parentNode.children.length - 1; i >= fromStartIndex; i--) {

package/dist/slate-extension/plugins/blockquote/helpers.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { Editor, Transforms } from "slate";
-import { BLOCKQUOTE } from "../../constants";
-import { getNodeType } from "../../core";
+import { Editor, Transforms } from 'slate';
+import { BLOCKQUOTE } from '../../constants';
+import { getNodeType } from '../../core';
 export var isMenuDisabled = function isMenuDisabled(editor) {
   if (editor.selection == null) return true;
   var _Editor$nodes = Editor.nodes(editor, {

package/dist/slate-extension/plugins/index.js

@@ -3,6 +3,7 @@ import BlockquotePlugin from './blockquote';
 import ListPlugin from './list';
 import CheckListPlugin from './check-list';
 import TextPlugin from './text-style';
-var Plugins = [HeaderPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, TextPlugin];
+import SocketPlugin from './socket';
+var Plugins = [HeaderPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, TextPlugin, SocketPlugin];
 export default Plugins;
-export { HeaderPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, TextPlugin };
+export { HeaderPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, TextPlugin, SocketPlugin };

package/dist/slate-extension/plugins/list/transforms/normalize-list-item.js

@@ -1,7 +1,7 @@
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import { Transforms, Editor, Path } from 'slate';
+import { Transforms, Editor, Path, Element } from 'slate';
 import { LIST_LIC } from '../../../constants';
 import { getChildren, getDeepInlineChildren, match } from '../../../core';
 import { getListTypes } from '../queries';
@@ -79,7 +79,7 @@ export var normalizeListItem = function normalizeListItem(editor, _ref) {
     try {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
         var licChild = _step.value;
-        if (!Editor.isBlock(editor, licChild[0])) {
+        if (!(Element.isElement(licChild[0]) && Editor.isBlock(editor, licChild[0]))) {
           break;
         }
         blockPathRefs.push(Editor.pathRef(editor, licChild[1]));

package/dist/slate-extension/plugins/list/transforms/toggle-list.js

@@ -6,15 +6,19 @@ import { findNode, getNodeEntries, getNodeType, getSelectedNodeEntryByType, isRa
 import { getListItemEntry, getListTypes } from '../queries';
 import { unwrapList } from './unwrap-list';
 var wrapLineList = function wrapLineList(editor, type) {
+  Transforms.wrapNodes(editor, {
+    type: type,
+    children: []
+  });
   var nodeEntry = getSelectedNodeEntryByType(editor, PARAGRAPH);
+  if (!nodeEntry) return;
   var _nodeEntry = _slicedToArray(nodeEntry, 2),
     node = _nodeEntry[0],
     path = _nodeEntry[1];
   if (node.type !== LIST_LIC) {
+    // paragraph to list-lic
     Transforms.setNodes(editor, {
       type: LIST_LIC
-    }, {
-      at: path
     });
   }
   Transforms.wrapNodes(editor, {
@@ -23,12 +27,6 @@ var wrapLineList = function wrapLineList(editor, type) {
   }, {
     at: path
   });
-  Transforms.wrapNodes(editor, {
-    type: type,
-    children: []
-  }, {
-    at: path
-  });
   return;
 };
 var wrapRangeList = function wrapRangeList(editor, type) {

package/dist/slate-extension/plugins/socket/index.js

@@ -0,0 +1,6 @@
+import withSocket from './plugin';
+var SocketPlugin = {
+  type: 'socket',
+  editorPlugin: withSocket
+};
+export default SocketPlugin;

package/dist/slate-extension/plugins/socket/plugin.js

@@ -0,0 +1,23 @@
+import SocketManager from "../../socket/socket-manager";
+var withSocket = function withSocket(editor) {
+  var apply = editor.apply;
+  var newEditor = editor;
+  newEditor.apply = function (operation) {
+    var isRemote = operation.is_remote;
+    if (isRemote) {
+      apply(operation);
+      return;
+    }
+
+    // 合并 op
+    try {
+      var socketManager = SocketManager.getInstance();
+      socketManager.addOperation && socketManager.addOperation(operation);
+    } catch (err) {
+      // first load, socketManager has not been init
+    }
+    apply(operation);
+  };
+  return newEditor;
+};
+export default withSocket;

package/dist/slate-extension/socket/socket-client.js

@@ -0,0 +1,94 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import io from 'socket.io-client';
+import Debug from 'debug';
+import SocketManager from './socket-manager';
+var debug = Debug('sdoc:socket-client');
+var SocketClient = /*#__PURE__*/_createClass(function SocketClient(config) {
+  var _this = this;
+  _classCallCheck(this, SocketClient);
+  this.getParams = function () {
+    var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return _objectSpread({}, params);
+  };
+  this.onConnected = function () {
+    var socketManager = SocketManager.getInstance();
+    var _this$config = _this.config,
+      fileUuid = _this$config.fileUuid,
+      filePath = _this$config.filePath,
+      fileName = _this$config.fileName,
+      accessToken = _this$config.accessToken;
+    var params = {
+      file_uuid: fileUuid,
+      file_path: filePath,
+      file_name: fileName,
+      access_token: accessToken
+    };
+    _this.socket.emit('join-room', params, function (result) {
+      if (result.status) {
+        socketManager.dispatchConnectState('connect', result);
+        return;
+      }
+
+      // Disconnect the server in the client side. There will be no reconnection.
+      _this.socket.disconnect();
+      socketManager.dispatchConnectState('connect-error', result);
+    });
+  };
+  this.onReconnect = function (data) {
+    debug('reconnect.');
+    var socketManager = SocketManager.getInstance();
+    socketManager.dispatchConnectState('reconnect');
+  };
+  this.onReconnecting = function (attemptNumber) {
+    debug('reconnecting.', attemptNumber);
+    var socketManager = SocketManager.getInstance();
+    socketManager.dispatchConnectState('reconnecting', attemptNumber);
+  };
+  this.onDisconnected = function (data) {
+    debug('disconnect message: %s', data);
+    var socketManager = SocketManager.getInstance();
+    socketManager.dispatchConnectState('disconnect');
+  };
+  this.onJoinRoom = function (username) {
+    debug('%s joined room success.', username);
+    var socketManager = SocketManager.getInstance();
+    socketManager.dispatchConnectState('join-room', username);
+  };
+  this.onLeaveRoom = function (username) {
+    debug('%s leaved room success.', username);
+    var socketManager = SocketManager.getInstance();
+    socketManager.dispatchConnectState('leave-room', username);
+  };
+  this.sendOperation = function (operation, callback) {
+    debug('==================================');
+    debug('send operation: %s' + operation.toString());
+    debug('==================================');
+    _this.socket.emit('update-document', _this.getParams({
+      operation: operation
+    }), function (result) {
+      callback && callback(result);
+    });
+  };
+  this.receiveOperation = function (operation, version) {
+    debug('==================================');
+    debug('received operation: %s' + operation.toString());
+    debug('==================================');
+    var socketManager = SocketManager.getInstance();
+    socketManager.receiveOperation(operation, version);
+  };
+  this.disconnectWithServer = function () {
+    _this.socket.disconnect();
+  };
+  this.config = config;
+  this.socket = io(config.sdocServer);
+  this.socket.on('connect', this.onConnected);
+  this.socket.on('reconnect', this.onReconnect);
+  this.socket.on('reconnecting', this.onReconnecting);
+  this.socket.on('disconnect', this.onDisconnected);
+  this.socket.on('join-room', this.onJoinRoom);
+  this.socket.on('leave-room', this.onLeaveRoom);
+  this.socket.on('update-document', this.receiveOperation);
+});
+export default SocketClient;

package/dist/slate-extension/socket/socket-manager.js

@@ -0,0 +1,63 @@
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import EventBus from '../../utils/event-bus';
+import SocketClient from './socket-client';
+var SocketManager = /*#__PURE__*/_createClass(function SocketManager(document, config) {
+  var _this = this;
+  _classCallCheck(this, SocketManager);
+  this.addOperation = function (operation) {
+    _this.pendingOperations.push(operation);
+    _this.sendOperation();
+  };
+  this.sendOperation = function () {
+    if (_this.isSendingOperation || _this.pendingOperations.length === 0) return;
+    _this.isSendingOperation = true;
+    _this.sendNextOperation();
+  };
+  this.sendNextOperation = function () {
+    if (_this.pendingOperations.length === 0) {
+      _this.isSendingOperation = false;
+      return;
+    }
+    var operation = _this.pendingOperations.shift();
+    _this.sendingOperation = operation;
+    _this.socketClient.sendOperation(operation, _this.sendOperationCallback);
+  };
+  this.sendOperationCallback = function (result) {
+    if (result && result.success) {
+      _this.sendingOperation = null;
+      var remoteVersion = result.version;
+      var localeVersion = _this.doc.version;
+      _this.doc['version'] = remoteVersion > localeVersion ? remoteVersion : localeVersion;
+      _this.sendNextOperation();
+      return;
+    }
+
+    // operation is execute failure
+    _this.sendingOperation = null;
+    _this.sendNextOperation();
+  };
+  this.receiveOperation = function (params, last_version) {
+    _this.eventBus.dispatch('receive-operation', params);
+  };
+  this.dispatchConnectState = function (type, message) {
+    console.log(type);
+  };
+  this.doc = document;
+  this.socketClient = new SocketClient(config);
+  this.sendingOperation = null;
+  this.pendingOperations = [];
+  this.isSendingOperation = false;
+  this.eventBus = new EventBus();
+});
+SocketManager.getInstance = function (document, socketConfig) {
+  if (SocketManager.instance) {
+    return SocketManager.instance;
+  }
+  if (!document || !socketConfig) {
+    throw new Error('SocketManager init params is invalid. Place check your code to fix it.');
+  }
+  SocketManager.instance = new SocketManager(document, socketConfig);
+  return SocketManager.instance;
+};
+export default SocketManager;

package/dist/slate-extension/toolbar/index.js

@@ -9,7 +9,7 @@ import { ORDERED_LIST, UNORDERED_LIST } from '../constants';
 import HeaderMenu from '../plugins/header/menu';
 import CheckListMenu from '../plugins/check-list/menu';
 import { MenuGroup } from '../menu';
-import '../../assets/css/new-editor-toolbar.css';
+import '../../assets/css/sdoc-editor-toolbar.css';
 var Toolbar = /*#__PURE__*/function (_React$Component) {
   _inherits(Toolbar, _React$Component);
   var _super = _createSuper(Toolbar);

package/dist/utils/event-bus.js

@@ -0,0 +1,39 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+var EventBus = /*#__PURE__*/function () {
+  function EventBus() {
+    _classCallCheck(this, EventBus);
+    this.subscribers = {};
+  }
+  _createClass(EventBus, [{
+    key: "subscribe",
+    value: function subscribe(type, handler) {
+      if (!this.subscribers[type]) {
+        this.subscribers[type] = [];
+      }
+      var handlers = this.subscribers[type];
+      handlers.push(handler);
+      return function () {
+        var index = handlers.indexOf(handler);
+        if (index > -1) {
+          handlers.splice(index, 1);
+        }
+      };
+    }
+  }, {
+    key: "dispatch",
+    value: function dispatch(type) {
+      for (var _len = arguments.length, data = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        data[_key - 1] = arguments[_key];
+      }
+      var handlers = this.subscribers[type];
+      if (Array.isArray(handlers)) {
+        handlers.forEach(function (handler) {
+          return handler.apply(void 0, data);
+        });
+      }
+    }
+  }]);
+  return EventBus;
+}();
+export default EventBus;

package/package.json

@@ -1,39 +1,19 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "2.0.2",
-    "@seafile/slate-react": "^0.54.13",
-    "codemirror": "^5.37.0",
-    "deepmerge": "^2.1.0",
-    "detect-indent": "^4.0.0",
-    "hast-util-sanitize": "^1.1.2",
     "is-hotkey": "0.2.0",
-    "is-url": "^1.2.4",
-    "lodash": "4.17.21",
-    "mdast-util-definitions": "^1.2.2",
-    "prismjs": "1.23.0",
+    "react-cookies": "0.1.1",
     "reactstrap": "8.9.0",
-    "rehype-format": "^2.2.0",
-    "rehype-mathjax": "^2.0.0",
-    "rehype-raw": "^2.0.0",
-    "rehype-stringify": "^3.0.0",
-    "remark": "^9.0.0",
-    "remark-breaks": "^1.0.0",
-    "remark-math": "^3.0.0",
-    "remark-parse": "^5.0.0",
-    "remark-rehype": "^3.0.0",
-    "remark-slug": "^5.0.0",
-    "slate": "0.88.1",
+    "slate": "0.91.4",
     "slate-history": "0.86.0",
     "slate-hyperscript": "0.77.0",
-    "slate-react": "0.88.2",
-    "unified": "7.0.0",
-    "url-parse": "^1.4.3",
-    "xtend": "^4.0.1"
+    "slate-react": "0.92.0",
+    "socket.io-client": "4.6.1"
   },
   "scripts": {
     "clean": "rm -rf dist && mkdir dist",

package/dist/assets/css/comment-dialog.css

@@ -1,50 +0,0 @@
-.seafile-editor-comment.comment-dialog {
-  width: 500px;
-  position: absolute;
-  top: 30%;
-  right: 0;
-  padding: 15px;
-  background-color: #fafafa;
-  border: 1px solid rgba(0,0,0,.2);
-  border-radius: .3rem;
-  box-shadow: 0 0 3px #ccc;
-  z-index: 1000;
-}
-
-.seafile-editor-comment.comment-dialog .comment-dialog-triangle {
-  position: absolute;
-  left: -5px;
-  top: 50%;
-  transform: rotate(45deg);
-  border: 1px solid rgba(0,0,0,.2);
-  border-top: none;
-  border-right: none;
-  width: 10px;
-  height: 10px;
-  background-color: #fafafa;
-  box-shadow: -1px 1px #ccc;
-}
-
-.seafile-editor-comment.comment-dialog textarea {
-  width: 100%;
-  min-height: 100px;
-  max-height: 300px;
-  padding: 5px;
-  background-color: #fff;
-}
-
-.seafile-editor-comment.comment-dialog .button-group .btn {
-  margin-right: 10px;
-}
-
-.seafile-editor-comment.comment-dialog .comment-dialog-quote {
-  margin-top: 10px;
-  max-height: 6rem;
-  overflow: auto;
-  padding-left: 1rem;
-}
-
-.seafile-editor-comment.comment-dialog .comment-dialog-quote ul,
-.seafile-editor-comment.comment-dialog .comment-dialog-quote ol {
-  padding-left: 1rem;
-}

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

@@ -1,105 +0,0 @@
-.diff-added {
-  padding: 0 5px;
-  margin: 0 -5px;
-  background-color: #e6ffed;
-  overflow: hidden;
-}
-
-.diff-removed {
-  padding: 0 5px;
-  margin: 0 -5px;
-  overflow: hidden;
-  background-color: #ffeef0;
-}
-
-.diff-removed * {
-  border-left: none;
-  padding-left: 0
-}
-
-.diff-added * {
-  padding-left: 0;
-  border-left: none;
-}
-
-
-.diff-replaced {
-  padding-left: 2px;
-  margin-left: -5px;
-  border-left: 3px solid #f9c513;
-}
-
-.diff-replaced .diff-added {
-  background-color: #e6ffed;
-  margin-left: 0;
-  padding-left: 0;
-  overflow: visible;
-}
-
-.diff-replaced .diff-removed {
-  overflow: visible;
-  padding-left: 0;
-  color: #cb2431;
-  margin-left: 0;
-  background-color: #ffeef0;
-}
-
-.diff-replaced .diff-replaced {
-  border-left: none;
-  margin-left: 0;
-  overflow: visible;
-}
-
-.diff-replaced .diff-removed-container {
-  padding: 0 5px;
-  margin: 0 -5px;
-  background-color: #ffeef0;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.diff-replaced .diff-added-container {
-  padding: 0 5px;
-  margin: 0 -5px;
-  background-color: #e6ffed;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-
-.diff-replaced table .diff-added {
-  background-color: #e6ffed;
-  padding: 0 0;
-  margin: 0;
-}
-
-.diff-replaced table .diff-removed {
-  background-color: #ffeef0;
-  margin: 0;
-  padding: 0 0;
-}
-
-.diff-replaced table tr.diff-replaced {
-  padding-left: 0;
-}
-
-.diff-replaced del {
-  background-color: #fdb8c0;
-  text-decoration: none;
-  color: #cb2431;
-}
-
-.diff-replaced ins {
-  background-color: #acf2bd;
-  text-decoration: none;
-}
-
-.article .diff-replaced .old-paragraph {
-  background-color: #ffeef0;
-  margin-bottom: 0;
-}
-
-.article .diff-replaced .new-paragraph {
-  background-color: #e6ffed;
-  margin-top: 0;
-}

package/dist/assets/css/formula.css

@@ -1,19 +0,0 @@
-.seafile-editor-module .selected-formula {
-  outline: 2px solid #007bff;
-}
-
-.seafile-editor-module .block-formula {
-  display: block;
-  user-select: none;
-}
-
-.seafile-editor-module .MathJax {
-  margin: 0;
-}
-
-.formula-preview {
-  padding: 10px;
-  border: 2px dashed #ebebeb;
-  min-height: 40px;
-  overflow-x: auto;
-}