@seafile/sdoc-editor 0.1.44 → 0.1.45

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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,40 @@
+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(id, editor, operations, cursorData) {
+  var cursorOps = operations.filter(function (operation) {
+    return operation.type === 'set_selection';
+  });
+  if (!editor.cursors) editor.cursors = {};
+  var oldCursor = editor.cursors[id] ? editor.cursors[id] : {};
+  var lastCursorOp = cursorOps[cursorOps.length - 1];
+  var selection = editor.selection;
+  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[id] = newCursorData;
+  } else {
+    delete editor.cursors[id];
+  }
+  return editor;
+};
+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/editor.js

@@ -13,6 +13,7 @@ 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) {
@@ -84,6 +85,7 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
       var slateValue = this.state.slateValue;
       var config = this.props.config;
       var docUuid = config.docUuid;
+      var decorate = getDecorate(editor);
       return /*#__PURE__*/React.createElement("div", {
         className: "sdoc-editor-container"
       }, /*#__PURE__*/React.createElement(Toolbar, {
@@ -109,7 +111,8 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
           return _renderLeaf(props, _this2.editor);
         },
         onKeyDown: this.eventProxy.onKeyDown,
-        onDOMBeforeInput: this.onDOMBeforeInput
+        onDOMBeforeInput: this.onDOMBeforeInput,
+        decorate: decorate
       }))))));
     }
   }]);

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

@@ -0,0 +1,47 @@
+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;

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

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

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

@@ -3,6 +3,7 @@ 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';
 export var getNodePathById = function getNodePathById(rootNode, nodeId) {
   var path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
   if (rootNode.id === nodeId) return path;
@@ -250,11 +251,16 @@ export var reExecRevertOperationList = function reExecRevertOperationList(editor
     _loop2();
   }
 };
-export var syncRemoteOperations = function syncRemoteOperations(editor, remoteOperations) {
+export var syncRemoteOperations = function syncRemoteOperations(editor, remoteOperations, user) {
   if (remoteOperations.length === 0) return;
   Editor.withoutNormalizing(editor, function () {
-    remoteOperations.forEach(function (item) {
-      editor.apply(item);
-    });
+    for (var i = 0; i < remoteOperations.length; i++) {
+      var op = remoteOperations[i];
+      if (op.type === 'set_selection') {
+        continue;
+      }
+      editor.apply(op);
+    }
+    setCursor(user.username, editor, remoteOperations);
   });
 };

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

@@ -11,10 +11,12 @@ 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;
+      user = _this$config.user,
+      cursorData = _this$config.cursorData;
     return _objectSpread({
       doc_uuid: docUuid,
-      user: user
+      user: user,
+      cursor_data: cursorData
     }, params);
   };
   this.onConnected = function () {

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

@@ -83,10 +83,11 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, doc
         }
 
         // 2. execute operations
-        var operations = params.operations;
+        var operations = params.operations,
+          user = params.user;
         // 2.1 Update content & version
         debug('execute remote operations: %O', operations);
-        syncRemoteOperations(_this.editor, operations);
+        syncRemoteOperations(_this.editor, operations, user);
 
         // 2.2 Update document
         _this.document.version = serverVersion;

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

@@ -1,12 +1,15 @@
 var _this = this;
+import { generateCursorData, setCursor } 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 () {
@@ -14,12 +17,13 @@ var withSocketIO = function withSocketIO(editor, options) {
   };
   newEditor.onChange = function () {
     var operations = newEditor.operations;
-    operations = operations.filter(function (item) {
-      return item.type !== 'set_selection';
-    });
+    // operations = operations.filter(item => item.type !== 'set_selection');
     if (!newEditor.isRemote && operations.length > 0) {
       var _socketManager = SocketManager.getInstance();
       _socketManager.addOperations && _socketManager.addOperations(operations);
+      var config = options.config;
+      var clientId = config.user.username;
+      setCursor(clientId, editor, operations, cursorData);
     }
     onChange();
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.1.44",
+  "version": "0.1.45",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",
@@ -14,6 +14,7 @@
     "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",