@seafile/sdoc-editor 0.1.0 → 0.1.1

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

@@ -5,14 +5,15 @@ 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.onChange = function (slateValue) {
       var onValueChanged = _this.props.onValueChanged;
@@ -21,22 +22,24 @@ var NewEditor = /*#__PURE__*/function (_React$Component) {
       });
       onValueChanged && onValueChanged(slateValue);
     };
+    var content = props.document.content;
     _this.state = {
-      slateValue: props.value,
+      slateValue: content,
       isLoading: true
     };
     _this.editor = editor;
     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) {
+        SocketManager.getInstance(document, config);
+      }
     }
   }, {
     key: "render",
@@ -72,6 +75,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/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/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,17 @@
+import SocketManager from "../../socket/socket-manager";
+var withSocket = function withSocket(editor) {
+  var apply = editor.apply;
+  var newEditor = editor;
+  newEditor.apply = function (operation) {
+    // 合并 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,84 @@
+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();
+    // todo
+    _this.socket.emit('join-room', _this.getParams(_this.config), 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,61 @@
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+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 (operation, last_version) {
+    console.log(operation);
+  };
+  this.dispatchConnectState = function (type, message) {
+    console.log(type);
+  };
+  this.doc = document;
+  this.socketClient = new SocketClient(config);
+  this.sendingOperation = null;
+  this.pendingOperations = [];
+  this.isSendingOperation = false;
+});
+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/package.json

@@ -1,39 +1,19 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "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-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"
+    "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;
-}

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

@@ -1,104 +0,0 @@
-.seafile-history-side-panel {
-  user-select: none;
-  border-left: 1px solid #e5e5e5;
-  background-color: #fff;
-  display: flex;
-  flex-direction: column;
-  flex: 0 0 auto;
-}
-
-.history-side-panel-title {
-  height: 50px;
-  border-bottom: 1px solid #e5e5e5;
-  line-height: 50px;
-  font-size: 1rem;
-  padding: 0 10px;
-  box-sizing: border-box;
-  background-color: rgb(250,250,249);
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.history-side-panel-title .history-tile-text {
-  font-weight: bolder;
-}
-
-
-.history-side-panel-title .history-title-close {
-  color: #b9b9b9;
-}
-
-.history-side-panel-title .history-title-close:hover {
-  color: #888;
-}
-
-
-.history-list-container {
-  height: calc(100% - 36px);
-  overflow-y: hidden;
-}
-.history-list-container:hover {
-  overflow-y: auto;
-}
-
-.item-active {
-  background-color: #fdc297;
-}
-
-.history-item-container {
-  padding: 0.5rem .8rem;
-}
-
-.history-item-container:not(.item-active):hover {
-  background-color: #ffe7d5;
-}
-
-.history-item-container div {
- width: 100%;
-}
-
-.history-item-container .owner {
- margin-top: 0.2rem;
-}
-
-.history-item-container .owner i {
-  color: #549b5a;
-  font-size: 0.2rem;
-  margin-right: 0.2rem;
-  vertical-align: middle;
-}
-
-.history-item-container .owner span {
-  vertical-align: middle;
-}
-
-.diff-container {
-  flex: 1 1 auto;
-  overflow: auto;
-  box-sizing: border-box;
-}
-
-.diff-wrapper {
-  width: 90%;
-  border: 1px solid #e5e5e5;
-  margin: 20px auto;
-  background-color: #fff;
-  min-height: calc(100% - 40px);
-  padding: 70px 75px;
-}
-
-@media (max-width:991.8px) {
-  .diff-container {
-    width: 100%;
-    box-sizing: border-box;
-  }
-  .diff-wrapper {
-    padding: 20px;
-  }
-}
-@media (min-width:992px) {
-  .seafile-history-side-panel {
-    width: 260px;
-  }
-}