@seafile/sdoc-editor 0.1.48 → 0.1.49

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

@@ -32,3 +32,7 @@
   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/assets/css/sdoc-editor-plugins.css

@@ -69,3 +69,12 @@
   font-size: 12px;
 }
 
+/* caret */
+.sdoc-editor-container .article .caret-item .caret-name {
+  display: none;
+}
+
+.sdoc-editor-container .article .caret-item:hover .caret-name {
+  display: block;
+}
+

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

@@ -0,0 +1,32 @@
+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 decorateCursors = function decorateCursors(nodeEntry, storageCursors) {
+  var ranges = [];
+  var _nodeEntry = _slicedToArray(nodeEntry, 2),
+    node = _nodeEntry[0],
+    path = _nodeEntry[1];
+  var cursors = Object.values(storageCursors || {});
+  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;
+        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 : node.text.length
+          },
+          focus: {
+            path: path,
+            offset: isFocusNode ? focus.offset : 0
+          }
+        }));
+      }
+    });
+  }
+  return ranges;
+};

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

@@ -0,0 +1,39 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+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), cursorData);
+    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
+  };
+};

package/dist/basic-sdk/decorates/index.js

@@ -0,0 +1,25 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import { useCallback } from 'react';
+import { decorateCursors } from '../cursor/decorate-cursors';
+export var useDecorate = function useDecorate(editor) {
+  var cursors = editor.cursors;
+  var decorate = useCallback(function (nodeEntry) {
+    var ranges = [];
+    var addRanges = function addRanges(newRanges) {
+      if (newRanges.length) {
+        ranges = [].concat(_toConsumableArray(ranges), _toConsumableArray(newRanges));
+      }
+    };
+    console.log('eeee');
+    // useCursor
+    addRanges(decorateCursors(nodeEntry, cursors));
+
+    // others decorate
+    // ...
+
+    return ranges;
+  }, [cursors]);
+  return {
+    decorate: decorate
+  };
+};

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 { uiDecorate } from './decorates';
 import './assets/css/layout.css';
 import './assets/css/sdoc-editor-plugins.css';
 var SDocEditor = /*#__PURE__*/function (_React$Component) {
@@ -45,7 +46,9 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
         });
       }
     };
-    var children = props.document.children;
+    var _props$document = props.document,
+      children = _props$document.children,
+      cursors = _props$document.cursors;
     _this.state = {
       slateValue: children,
       isLoading: true
@@ -60,6 +63,7 @@ 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);
@@ -67,6 +71,7 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
     _this.renderLeaf = function (props) {
       return renderLeaf(props, _this.editor);
     };
+    _this.decorate = uiDecorate(_this.editor);
     return _this;
   }
   _createClass(SDocEditor, [{
@@ -110,7 +115,8 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
         renderElement: this.renderElement,
         renderLeaf: this.renderLeaf,
         onKeyDown: this.eventProxy.onKeyDown,
-        onDOMBeforeInput: this.onDOMBeforeInput
+        onDOMBeforeInput: this.onDOMBeforeInput,
+        decorate: this.decorate
       }))))));
     }
   }]);

package/dist/basic-sdk/editor2.js

@@ -0,0 +1,107 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _this = this;
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Node } from '@seafile/slate';
+import { Editable, Slate, ReactEditor } from '@seafile/slate-react';
+import { Editor } from '@seafile/slate';
+import { useUpdate } from 'ahooks';
+import editor2, { 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 './assets/css/layout.css';
+import './assets/css/sdoc-editor-plugins.css';
+import { useDecorate } from './decorates';
+var SDocEditor = function SDocEditor(_ref) {
+  var document = _ref.document,
+    config = _ref.config;
+  var _useState = useState(document.children),
+    _useState2 = _slicedToArray(_useState, 2),
+    slateValue = _useState2[0],
+    setSlateValue = _useState2[1];
+
+  // init editor
+  var editor = useMemo(function () {
+    var newEditor = withNodeId(withSocketIO(editor2, {
+      document: document,
+      config: config
+    }));
+    var cursors = document.cursors;
+    newEditor.cursors = cursors || {};
+    return newEditor;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var eventProxy = useMemo(function () {
+    return new EventProxy(editor);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // useMount: init socket connection
+  useEffect(function () {
+    editor.openConnection();
+    return function () {
+      editor.closeConnection();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // useMount: focus editor
+  useEffect(function () {
+    if (Node.string(editor) === '') {
+      var firstNodePath = ReactEditor.findPath(editor, editor.children[0]);
+      focusEditor(_this.editor, firstNodePath);
+    }
+  }, []);
+  var _renderElement = useCallback(function (props) {
+    return renderElement(props, editor);
+  }, []);
+  var _renderLeaf = useCallback(function (props) {
+    return renderLeaf(props, editor);
+  }, []);
+  var onChange = useCallback(function (slateValue) {
+    setSlateValue(_toConsumableArray(slateValue));
+  }, []);
+  var update = useUpdate();
+  var onDOMBeforeInput = useCallback(function (e) {
+    if (e.data && e.data !== '') {
+      var _node$;
+      var node = Editor.parent(editor, editor.selection);
+      editor.onDOMBeforeInputId = (_node$ = node[0]) === null || _node$ === void 0 ? void 0 : _node$.id;
+      update();
+    } else {
+      editor.onDOMBeforeInputId = null;
+      update();
+    }
+  }, []);
+  var _useDecorate = useDecorate(editor),
+    decorate = _useDecorate.decorate;
+  console.log('dadadihuaile');
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-editor-container"
+  }, /*#__PURE__*/React.createElement(Toolbar, {
+    editor: editor
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-editor-content"
+  }, /*#__PURE__*/React.createElement(SDocOutline, {
+    doc: slateValue,
+    docUuid: config.docUuid
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex-fill o-auto"
+  }, /*#__PURE__*/React.createElement(Slate, {
+    editor: editor,
+    value: slateValue,
+    onChange: onChange
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "article"
+  }, /*#__PURE__*/React.createElement(Editable, {
+    renderElement: _renderElement,
+    renderLeaf: _renderLeaf,
+    onKeyDown: eventProxy.onKeyDown,
+    onDOMBeforeInput: onDOMBeforeInput,
+    decorate: decorate
+  }))))));
+};
+export default SDocEditor;

package/dist/basic-sdk/extension/index.js

@@ -6,12 +6,12 @@ import renderElement from './render/render-element';
 import renderLeaf from './render/render-leaf';
 import Toolbar from './toolbar';
 var baseEditor = withHistory(withReact(createEditor()));
-var editor = Plugins.reduce(function (editor, pluginItem) {
+var editor2 = Plugins.reduce(function (editor, pluginItem) {
   var withPlugin = pluginItem.editorPlugin;
   if (withPlugin) {
     return withPlugin(editor);
   }
   return editor;
 }, baseEditor);
-export default editor;
+export default editor2;
 export { renderLeaf, renderElement, Toolbar };

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

@@ -0,0 +1,49 @@
+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,
+    name = _ref.name;
+  var cursorStyles = _objectSpread(_objectSpread({}, cursorStyleBase), {}, {
+    background: color,
+    left: '0%',
+    cursor: 'default'
+  });
+  var caretStyles = _objectSpread(_objectSpread({}, caretStyleBase), {}, {
+    background: color,
+    left: '0%'
+  });
+  caretStyles['top'] = 1;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: "caret-item",
+    contentEditable: false,
+    style: caretStyles
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "caret-name",
+    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,
@@ -38,8 +39,17 @@ var renderText = function renderText(props, editor) {
       className: "token ".concat(leaf.type)
     }, markedChildren);
   }
+  var style = {
+    position: 'relative'
+  };
+  if (leaf.isCaret) {
+    style['display'] = 'inline-block';
+    style['minWidth'] = '2px';
+  }
   return /*#__PURE__*/React.createElement("span", Object.assign({
     "data-id": leaf.id
-  }, attributes), markedChildren);
+  }, attributes, {
+    style: style
+  }), leaf.isCaret ? /*#__PURE__*/React.createElement(Caret, leaf) : null, markedChildren);
 };
 export default renderText;

package/dist/basic-sdk/index.js

@@ -1,4 +1,4 @@
-import SDocEditor from './editor';
+import SDocEditor from './editor2';
 import SDocViewer from './viewer';
 import SDocOutline from './outline';
 import EventBus from './utils/event-bus';

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

@@ -3,6 +3,8 @@ 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;
@@ -250,11 +252,21 @@ export var reExecRevertOperationList = function reExecRevertOperationList(editor
     _loop2();
   }
 };
-export var syncRemoteOperations = function syncRemoteOperations(editor, remoteOperations) {
+export var syncRemoteOperations = function syncRemoteOperations(editor, remoteOperations, user, selection, cursorData) {
   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);
+    }
+    var currentUser = editor.user;
+    if (user && user.username !== currentUser.username) {
+      setCursor(editor, remoteOperations, user, selection, cursorData);
+      // sync cursor position
+      editor.onChange();
+    }
   });
 };

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 () {
@@ -76,13 +78,14 @@ var SocketClient = /*#__PURE__*/_createClass(function SocketClient(config) {
     var socketManager = SocketManager.getInstance();
     socketManager.dispatchConnectState('leave-room', username);
   };
-  this.sendOperations = function (operations, version, callback) {
+  this.sendOperations = function (operations, version, selection, callback) {
     debug('=========== send operations ==========');
     debug('%O', operations);
     debug('======================================');
     _this.socket.emit('update-document', _this.getParams({
       operations: operations,
-      version: version
+      version: version,
+      selection: selection
     }), function (result) {
       callback && callback(result);
     });

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

@@ -4,6 +4,7 @@ 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);
@@ -28,7 +29,8 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, doc
     _this.dispatchConnectState('is-saving');
     var version = _this.document.version;
     var operations = _this.pendingOperationList.shift();
-    _this.socketClient.sendOperations(operations, version, _this.sendOperationsCallback);
+    var selection = _this.editor.selection;
+    _this.socketClient.sendOperations(operations, version, selection, _this.sendOperationsCallback);
   };
   this.sendOperationsCallback = function (result) {
     if (result && result.success) {
@@ -83,10 +85,13 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, doc
         }
 
         // 2. execute operations
-        var operations = params.operations;
+        var operations = params.operations,
+          user = params.user,
+          selection = params.selection,
+          cursorData = params.cursor_data;
         // 2.1 Update content & version
         debug('execute remote operations: %O', operations);
-        syncRemoteOperations(_this.editor, operations);
+        syncRemoteOperations(_this.editor, operations, user, selection, cursorData);
 
         // 2.2 Update document
         _this.document.version = serverVersion;
@@ -157,6 +162,10 @@ 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,12 +1,17 @@
 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 socketManager = null;
+  var user = options.config.user;
+  newEditor.user = user;
   newEditor.openConnection = function () {
     var document = options.document,
       config = options.config;
+    var cursorData = generateCursorData(options.config);
+    config['cursorData'] = cursorData;
     socketManager = SocketManager.getInstance(newEditor, document, config);
   };
   newEditor.closeConnection = function () {
@@ -14,9 +19,7 @@ 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);

package/dist/pages/simple-editor.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.1.48",
+  "version": "0.1.49",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",
@@ -10,10 +10,12 @@
     "@seafile/slate-history": "0.86.2",
     "@seafile/slate-hyperscript": "0.81.7",
     "@seafile/slate-react": "0.92.2",
+    "ahooks": "3.7.7",
     "classnames": "2.3.2",
     "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",