@seafile/sdoc-editor 0.1.47 → 0.1.48

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

@@ -32,7 +32,3 @@
   border: 1px solid #e5e6e8;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
 }
-
-.sdoc-editor-container .sdoc-editor-content .article > div {
-  caret-color: blue;
-}

package/dist/basic-sdk/editor.js

@@ -7,13 +7,12 @@ import React from 'react';
 import { Node } from '@seafile/slate';
 import { Editable, Slate, ReactEditor } from '@seafile/slate-react';
 import { Editor } from '@seafile/slate';
-import editor, { renderLeaf as _renderLeaf, renderElement as _renderElement, Toolbar } from './extension';
+import editor, { renderLeaf, renderElement, Toolbar } from './extension';
 import { withSocketIO } from './socket';
 import withNodeId from './node-id';
 import SDocOutline from './outline';
 import EventProxy from './utils/event-handler';
 import { focusEditor } from './extension/core';
-import { getDecorate } from './cursor/decorate';
 import './assets/css/layout.css';
 import './assets/css/sdoc-editor-plugins.css';
 var SDocEditor = /*#__PURE__*/function (_React$Component) {
@@ -46,9 +45,7 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
         });
       }
     };
-    var _props$document = props.document,
-      children = _props$document.children,
-      cursors = _props$document.cursors;
+    var children = props.document.children;
     _this.state = {
       slateValue: children,
       isLoading: true
@@ -63,8 +60,13 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
         config: config
       });
     }
-    _this.editor.cursors = cursors;
     _this.eventProxy = new EventProxy(_this.editor);
+    _this.renderElement = function (props) {
+      return renderElement(props, _this.editor);
+    };
+    _this.renderLeaf = function (props) {
+      return renderLeaf(props, _this.editor);
+    };
     return _this;
   }
   _createClass(SDocEditor, [{
@@ -84,11 +86,9 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
       var slateValue = this.state.slateValue;
       var config = this.props.config;
       var docUuid = config.docUuid;
-      var decorate = getDecorate(this.editor);
       return /*#__PURE__*/React.createElement("div", {
         className: "sdoc-editor-container"
       }, /*#__PURE__*/React.createElement(Toolbar, {
@@ -107,15 +107,10 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement("div", {
         className: "article"
       }, /*#__PURE__*/React.createElement(Editable, {
-        renderElement: function renderElement(props) {
-          return _renderElement(props, _this2.editor);
-        },
-        renderLeaf: function renderLeaf(props) {
-          return _renderLeaf(props, _this2.editor);
-        },
+        renderElement: this.renderElement,
+        renderLeaf: this.renderLeaf,
         onKeyDown: this.eventProxy.onKeyDown,
-        onDOMBeforeInput: this.onDOMBeforeInput,
-        decorate: decorate
+        onDOMBeforeInput: this.onDOMBeforeInput
       }))))));
     }
   }]);

package/dist/basic-sdk/extension/plugins/text-style/render-elem.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import Caret from './caret';
 var renderText = function renderText(props, editor) {
   var attributes = props.attributes,
     children = props.children,
@@ -41,10 +40,6 @@ var renderText = function renderText(props, editor) {
   }
   return /*#__PURE__*/React.createElement("span", Object.assign({
     "data-id": leaf.id
-  }, attributes, {
-    style: {
-      position: 'relative'
-    }
-  }), leaf.isCaret ? /*#__PURE__*/React.createElement(Caret, leaf) : null, markedChildren);
+  }, attributes), markedChildren);
 };
 export default renderText;

package/dist/basic-sdk/outline.js

@@ -115,7 +115,9 @@ var OutlineItem = /*#__PURE__*/function (_React$PureComponent2) {
         onClick: this.onItemClick,
         onMouseOver: this.onMouseOver,
         onMouseOut: this.onMouseOut
-      }, children[0].text);
+      }, children.map(function (child) {
+        return child.text;
+      }).join(''));
     }
   }]);
   return OutlineItem;

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

@@ -3,8 +3,6 @@ import deepCopy from 'deep-copy';
 import { Editor, Operation } from '@seafile/slate';
 import { getNode } from '../extension/core';
 import * as OPERATION from '../node-id/constants';
-import { setCursor } from '../cursor/helper';
-import context from '../../context';
 export var getNodePathById = function getNodePathById(rootNode, nodeId) {
   var path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
   if (rootNode.id === nodeId) return path;
@@ -252,21 +250,11 @@ export var reExecRevertOperationList = function reExecRevertOperationList(editor
     _loop2();
   }
 };
-export var syncRemoteOperations = function syncRemoteOperations(editor, remoteOperations, user, selection, cursorData) {
+export var syncRemoteOperations = function syncRemoteOperations(editor, remoteOperations) {
   if (remoteOperations.length === 0) return;
   Editor.withoutNormalizing(editor, function () {
-    for (var i = 0; i < remoteOperations.length; i++) {
-      var op = remoteOperations[i];
-      if (op.type === 'set_selection') {
-        continue;
-      }
-      editor.apply(op);
-    }
-    var username = context.getSetting('username');
-    if (user && user.username !== username) {
-      setCursor(editor, remoteOperations, user, selection, cursorData);
-      // sync cursor position
-      editor.onChange();
-    }
+    remoteOperations.forEach(function (item) {
+      editor.apply(item);
+    });
   });
 };

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

@@ -11,12 +11,10 @@ var SocketClient = /*#__PURE__*/_createClass(function SocketClient(config) {
     var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     var _this$config = _this.config,
       docUuid = _this$config.docUuid,
-      user = _this$config.user,
-      cursorData = _this$config.cursorData;
+      user = _this$config.user;
     return _objectSpread({
       doc_uuid: docUuid,
-      user: user,
-      cursor_data: cursorData
+      user: user
     }, params);
   };
   this.onConnected = function () {
@@ -78,14 +76,13 @@ var SocketClient = /*#__PURE__*/_createClass(function SocketClient(config) {
     var socketManager = SocketManager.getInstance();
     socketManager.dispatchConnectState('leave-room', username);
   };
-  this.sendOperations = function (operations, version, selection, callback) {
+  this.sendOperations = function (operations, version, callback) {
     debug('=========== send operations ==========');
     debug('%O', operations);
     debug('======================================');
     _this.socket.emit('update-document', _this.getParams({
       operations: operations,
-      version: version,
-      selection: selection
+      version: version
     }), function (result) {
       callback && callback(result);
     });

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

@@ -4,7 +4,6 @@ import EventBus from '../utils/event-bus';
 import { syncRemoteOperations, reExecRevertOperationList, revertOperationList } from './helpers';
 import SocketClient from './socket-client';
 import debug from '../utils/debug';
-import { deleteCursor } from '../cursor/helper';
 var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, document, config) {
   var _this = this;
   _classCallCheck(this, SocketManager);
@@ -29,8 +28,7 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, doc
     _this.dispatchConnectState('is-saving');
     var version = _this.document.version;
     var operations = _this.pendingOperationList.shift();
-    var selection = _this.editor.selection;
-    _this.socketClient.sendOperations(operations, version, selection, _this.sendOperationsCallback);
+    _this.socketClient.sendOperations(operations, version, _this.sendOperationsCallback);
   };
   this.sendOperationsCallback = function (result) {
     if (result && result.success) {
@@ -85,13 +83,10 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, doc
         }
 
         // 2. execute operations
-        var operations = params.operations,
-          user = params.user,
-          selection = params.selection,
-          cursorData = params.cursor_data;
+        var operations = params.operations;
         // 2.1 Update content & version
         debug('execute remote operations: %O', operations);
-        syncRemoteOperations(_this.editor, operations, user, selection, cursorData);
+        syncRemoteOperations(_this.editor, operations);
 
         // 2.2 Update document
         _this.document.version = serverVersion;
@@ -162,10 +157,6 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, doc
     });
   };
   this.dispatchConnectState = function (type, message) {
-    if (type === 'leave-room') {
-      deleteCursor(_this.editor, message);
-      _this.editor.onChange();
-    }
     _this.eventBus.dispatch(type, message);
   };
   this.closeSocketConnect = function () {

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

@@ -1,15 +1,12 @@
 var _this = this;
-import { generateCursorData } from '../cursor/helper';
 import SocketManager from './socket-manager';
 var withSocketIO = function withSocketIO(editor, options) {
   var onChange = editor.onChange;
   var newEditor = editor;
-  var cursorData = generateCursorData(options.config);
   var socketManager = null;
   newEditor.openConnection = function () {
     var document = options.document,
       config = options.config;
-    config['cursorData'] = cursorData;
     socketManager = SocketManager.getInstance(newEditor, document, config);
   };
   newEditor.closeConnection = function () {
@@ -17,7 +14,9 @@ var withSocketIO = function withSocketIO(editor, options) {
   };
   newEditor.onChange = function () {
     var operations = newEditor.operations;
-    // operations = operations.filter(item => item.type !== 'set_selection');
+    operations = operations.filter(function (item) {
+      return item.type !== 'set_selection';
+    });
     if (!newEditor.isRemote && operations.length > 0) {
       var _socketManager = SocketManager.getInstance();
       _socketManager.addOperations && _socketManager.addOperations(operations);

package/dist/components/doc-operations/style.css

@@ -6,6 +6,7 @@
 .doc-ops .op-item {
   margin-left: 1rem;
   display: flex;
+  align-items: center;
   position: relative;
 }
 

package/dist/pages/simple-editor.js

@@ -68,8 +68,7 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
               if (result && !result.children) {
                 result = {
                   version: 0,
-                  children: result.content,
-                  cursors: result.cursors || {}
+                  children: result.content
                 };
               }
               this.setState({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.1.47",
+  "version": "0.1.48",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",
@@ -14,7 +14,6 @@
     "deep-copy": "1.4.2",
     "is-hotkey": "0.2.0",
     "is-url": "^1.2.4",
-    "randomcolor": "0.6.2",
     "react-cookies": "0.1.1",
     "reactstrap": "8.9.0",
     "slugid": "3.2.0",

package/dist/basic-sdk/cursor/decorate.js

@@ -1,35 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { Text, Path, Range } from '@seafile/slate';
-export var getDecorate = function getDecorate(editor) {
-  return function (nodeEntry) {
-    var ranges = [];
-    var _nodeEntry = _slicedToArray(nodeEntry, 2),
-      node = _nodeEntry[0],
-      path = _nodeEntry[1];
-    var cursors = Object.values(editor.cursors || {});
-    if (Text.isText(node) && (cursors === null || cursors === void 0 ? void 0 : cursors.length)) {
-      cursors.forEach(function (cursor) {
-        if (Range.includes(cursor, path)) {
-          var focus = cursor.focus,
-            anchor = cursor.anchor,
-            isForward = cursor.isForward;
-          var isFocusNode = Path.equals(focus.path, path);
-          var isAnchorNode = Path.equals(anchor.path, path);
-          ranges.push(_objectSpread(_objectSpread({}, cursor), {}, {
-            isCaret: isFocusNode,
-            anchor: {
-              path: path,
-              offset: isAnchorNode ? anchor.offset : isForward ? 0 : node.text.length
-            },
-            focus: {
-              path: path,
-              offset: isFocusNode ? focus.offset : isForward ? node.text.length : 0
-            }
-          }));
-        }
-      });
-    }
-    return ranges;
-  };
-};

package/dist/basic-sdk/cursor/helper.js

@@ -1,43 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import { Range } from '@seafile/slate';
-import randomColor from 'randomcolor';
-
-// selection: { anchor, focus }
-// cursor: { anchor, focus }
-
-export var setCursor = function setCursor(editor, operations, user, selection, cursorData) {
-  var clientId = user.username;
-  var cursorOps = operations.filter(function (operation) {
-    return operation.type === 'set_selection';
-  });
-  if (!editor.cursors) editor.cursors = {};
-  var oldCursor = editor.cursors[clientId] ? editor.cursors[clientId] : {};
-  var lastCursorOp = cursorOps[cursorOps.length - 1];
-  if (selection) {
-    var newCursor = lastCursorOp && lastCursorOp.newProperties || {};
-    var newCursorData = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, oldCursor), newCursor), selection), _objectSpread(_objectSpread({}, cursorData), {}, {
-      isForward: Range.isForward(selection)
-    }));
-    editor.cursors[clientId] = newCursorData;
-  } else {
-    delete editor.cursors[clientId];
-  }
-  return editor;
-};
-export var deleteCursor = function deleteCursor(editor, username) {
-  delete editor.cursors[username];
-};
-export var generateCursorData = function generateCursorData(config) {
-  var user = config.user;
-  var options = {
-    luminosity: 'dark',
-    format: 'rgba',
-    alpha: 1
-  };
-  var color = randomColor(options);
-  return {
-    name: user.name,
-    color: color,
-    alphaColor: color.slice(0, -2) + '0.2)'
-  };
-};

package/dist/basic-sdk/extension/plugins/text-style/caret.js

@@ -1,47 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React from 'react';
-var cursorStyleBase = {
-  position: 'absolute',
-  top: -2,
-  pointerEvents: 'none',
-  userSelect: 'none',
-  transform: 'translateY(-100%)',
-  fontSize: 10,
-  color: 'white',
-  background: 'palevioletred',
-  whiteSpace: 'nowrap'
-};
-var caretStyleBase = {
-  position: 'absolute',
-  pointerEvents: 'none',
-  userSelect: 'none',
-  height: '1.2em',
-  width: 2,
-  background: 'palevioletred'
-};
-var Caret = function Caret(_ref) {
-  var color = _ref.color,
-    isForward = _ref.isForward,
-    name = _ref.name;
-  var cursorStyles = _objectSpread(_objectSpread({}, cursorStyleBase), {}, {
-    background: color,
-    left: isForward ? '100%' : '0%'
-  });
-  var caretStyles = _objectSpread(_objectSpread({}, caretStyleBase), {}, {
-    background: color,
-    left: isForward ? '100%' : '0%'
-  });
-  caretStyles[isForward ? 'bottom' : 'top'] = 0;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    contentEditable: false,
-    style: caretStyles
-  }, /*#__PURE__*/React.createElement("span", {
-    style: {
-      position: 'relative'
-    }
-  }, /*#__PURE__*/React.createElement("span", {
-    contentEditable: false,
-    style: cursorStyles
-  }, name))));
-};
-export default Caret;