@seafile/sdoc-editor 0.1.50 → 0.1.52

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

@@ -4,17 +4,12 @@ import randomColor from 'randomcolor';
 // selection: { anchor, focus }
 // cursor: { anchor, focus }
 
-export var setCursor = function setCursor(editor, operations, user, selection, cursorData) {
+export var setCursor = function setCursor(editor, user, location, 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);
+  if (location) {
+    var oldCursor = editor.cursors[clientId] ? editor.cursors[clientId] : {};
+    var newCursorData = _objectSpread(_objectSpread(_objectSpread({}, oldCursor), location), cursorData);
     editor.cursors[clientId] = newCursorData;
   } else {
     delete editor.cursors[clientId];

package/dist/basic-sdk/editor.js

@@ -1,7 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Node, Editor } from '@seafile/slate';
+import { Node } from '@seafile/slate';
 import { Editable, Slate, ReactEditor } from '@seafile/slate-react';
 import defaultEditor, { renderLeaf, renderElement, Toolbar, ContextMenu } from './extension';
 import { focusEditor } from './extension/core';
@@ -26,6 +25,20 @@ var SDocEditor = function SDocEditor(_ref) {
     return newEditor;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  var _useState = useState(document.children),
+    _useState2 = _slicedToArray(_useState, 2),
+    slateValue = _useState2[0],
+    setSlateValue = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isShowContextMenu = _useState4[0],
+    setContextMenu = _useState4[1];
+  var _useState5 = useState({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    menuPosition = _useState6[0],
+    setMenuPosition = _useState6[1];
+  var _useCursors = useCursors(editor),
+    cursors = _useCursors.cursors;
 
   // init eventHandler
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -50,28 +63,6 @@ var SDocEditor = function SDocEditor(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-
-  // handle placeholder
-  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;
-      setSlateValue(_toConsumableArray(slateValue));
-    } else {
-      editor.onDOMBeforeInputId = null;
-      setSlateValue(_toConsumableArray(slateValue));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isShowContextMenu = _useState2[0],
-    setContextMenu = _useState2[1];
-  var _useState3 = useState({}),
-    _useState4 = _slicedToArray(_useState3, 2),
-    menuPosition = _useState4[0],
-    setMenuPosition = _useState4[1];
   var onContextMenu = useCallback(function (event) {
     if (editor.isAllInTable()) {
       event.preventDefault();
@@ -84,17 +75,11 @@ var SDocEditor = function SDocEditor(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var _useState5 = useState(document.children),
-    _useState6 = _slicedToArray(_useState5, 2),
-    slateValue = _useState6[0],
-    setSlateValue = _useState6[1];
   var onChange = useCallback(function (slateValue) {
     setSlateValue(slateValue);
     setContextMenu(false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var _useCursors = useCursors(editor),
-    cursors = _useCursors.cursors;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-editor-container"
   }, /*#__PURE__*/React.createElement(Toolbar, {
@@ -116,7 +101,6 @@ var SDocEditor = function SDocEditor(_ref) {
     renderElement: renderElement,
     renderLeaf: renderLeaf,
     onKeyDown: eventProxy.onKeyDown,
-    onDOMBeforeInput: onDOMBeforeInput,
     cursors: cursors,
     onContextMenu: onContextMenu
   })))))), isShowContextMenu && /*#__PURE__*/React.createElement(ContextMenu, {

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

@@ -4,13 +4,14 @@ import { Placeholder } from '../../core';
 var renderHeader = function renderHeader(props, editor) {
   var element = props.element,
     attributes = props.attributes,
-    children = props.children;
+    children = props.children,
+    isComposing = props.isComposing;
   var type = element.type;
   var level = type.split('header')[1];
   var Tag = "h".concat(level);
   var isShowPlaceHolder = false;
   var firstChild = editor.children[0];
-  if (firstChild.id === element.id && Node.string(element) === '' && (editor === null || editor === void 0 ? void 0 : editor.onDOMBeforeInputId) !== (element === null || element === void 0 ? void 0 : element.id)) {
+  if (firstChild.id === element.id && Node.string(element) === '' && !isComposing) {
     isShowPlaceHolder = true;
   }
   return /*#__PURE__*/React.createElement(Tag, Object.assign({

package/dist/basic-sdk/extension/render/render-element.js

@@ -1,10 +1,10 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React from 'react';
-import { Node, Editor } from '@seafile/slate';
+import { Node } from '@seafile/slate';
 import { useSlateStatic } from '@seafile/slate-react';
 import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, LIST_LIC, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, IMAGE, ELEMENT_TYPE } from '../constants';
 import { BlockquotePlugin, LinkPlugin, CheckListPlugin, HeaderPlugin, ListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin } from '../plugins';
-import { Placeholder, findNode } from '../core';
+import { Placeholder } from '../core';
 var CustomElement = function CustomElement(props) {
   var editor = useSlateStatic();
   var attributes = props.attributes,
@@ -14,22 +14,13 @@ var CustomElement = function CustomElement(props) {
     case PARAGRAPH:
       {
         var isShowPlaceHolder = false;
-        if (editor.children.length < 3) {
-          var firstParagraphNode = findNode(editor, {
-            at: [],
-            match: function match(node) {
-              return node.type === 'paragraph';
-            }
-          });
-          if (firstParagraphNode) {
-            var _firstParagraphNode = _slicedToArray(firstParagraphNode, 2),
-              node = _firstParagraphNode[0],
-              path = _firstParagraphNode[1];
-            var nextNode = Editor.next(editor, {
-              at: path
-            });
-            isShowPlaceHolder = (node === null || node === void 0 ? void 0 : node.id) === (element === null || element === void 0 ? void 0 : element.id) && Node.string(element) === '' && !nextNode && (editor === null || editor === void 0 ? void 0 : editor.onDOMBeforeInputId) !== (element === null || element === void 0 ? void 0 : element.id);
-          }
+        var isComposing = props.isComposing;
+        if (editor.children.length === 1) {
+          isShowPlaceHolder = Node.string(element) === '' && !isComposing;
+        }
+        if (editor.children.length === 2 && editor.children[0].type.startsWith('header')) {
+          var node = editor.children[1];
+          isShowPlaceHolder = Node.string(element) === '' && (node === null || node === void 0 ? void 0 : node.id) === (element === null || element === void 0 ? void 0 : element.id) && !isComposing;
         }
         return /*#__PURE__*/React.createElement("p", Object.assign({
           "data-id": element.id

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

@@ -251,7 +251,7 @@ 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++) {
@@ -261,11 +261,14 @@ export var syncRemoteOperations = function syncRemoteOperations(editor, remoteOp
       }
       editor.apply(op);
     }
-    var currentUser = editor.user;
-    if (user && user.username !== currentUser.username) {
-      setCursor(editor, remoteOperations, user, selection, cursorData);
-      // sync cursor position
-      editor.onCursor && editor.onCursor(editor.cursors);
-    }
   });
+};
+export var syncRemoteCursorLocation = function syncRemoteCursorLocation(editor, user, location, cursorData) {
+  var currentUser = editor.user;
+  if (user && user.username !== currentUser.username) {
+    setCursor(editor, user, location, cursorData);
+
+    // sync cursor position
+    editor.onCursor && editor.onCursor(editor.cursors);
+  }
 };

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 () {
@@ -114,6 +112,17 @@ var SocketClient = /*#__PURE__*/_createClass(function SocketClient(config) {
       }
     });
   };
+  this.sendCursorLocation = function (location) {
+    var cursor_data = _this.config.cursorData;
+    _this.socket.emit('update-cursor', _this.getParams({
+      location: location,
+      cursor_data: cursor_data
+    }));
+  };
+  this.receiveCursorLocation = function (params) {
+    var socketManager = SocketManager.getInstance();
+    socketManager.receiveCursorLocation(params);
+  };
   this.disconnectWithServer = function () {
     _this.socket.disconnect();
   };
@@ -131,6 +140,7 @@ var SocketClient = /*#__PURE__*/_createClass(function SocketClient(config) {
   this.socket.on('join-room', this.onJoinRoom);
   this.socket.on('leave-room', this.onLeaveRoom);
   this.socket.on('update-document', this.receiveOperations);
+  this.socket.on('update-cursor', this.receiveCursorLocation);
   this.socket.io.on('reconnect', this.onReconnect);
   this.socket.io.on('reconnect_attempt', this.onReconnectAttempt);
   this.socket.io.on('reconnect_error', this.onReconnectError);

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

@@ -1,7 +1,7 @@
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import EventBus from '../utils/event-bus';
-import { syncRemoteOperations, reExecRevertOperationList, revertOperationList } from './helpers';
+import { syncRemoteOperations, reExecRevertOperationList, revertOperationList, syncRemoteCursorLocation } from './helpers';
 import SocketClient from './socket-client';
 import debug from '../utils/debug';
 import { deleteCursor } from '../cursor/helper';
@@ -85,13 +85,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;
@@ -161,6 +158,16 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, doc
       _this.editor.isRemote = false;
     });
   };
+  this.sendCursorLocation = function (location) {
+    _this.socketClient.sendCursorLocation(location);
+  };
+  this.receiveCursorLocation = function (params) {
+    var user = params.user,
+      location = params.location,
+      cursorData = params.cursor_data;
+    syncRemoteCursorLocation(_this.editor, user, location, cursorData);
+    return;
+  };
   this.dispatchConnectState = function (type, message) {
     if (type === 'leave-room') {
       deleteCursor(_this.editor, message);

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

@@ -20,8 +20,18 @@ var withSocketIO = function withSocketIO(editor, options) {
   newEditor.onChange = function () {
     var operations = newEditor.operations;
     if (!newEditor.isRemote && operations.length > 0) {
+      var isAllSetSelection = operations.every(function (operation) {
+        return operation.type === 'set_selection';
+      });
       var _socketManager = SocketManager.getInstance();
-      _socketManager.addOperations && _socketManager.addOperations(operations);
+      if (!isAllSetSelection) {
+        // get update content value operations
+        var updateOperations = operations.filter(function (operation) {
+          return operation.type !== 'set_selection';
+        });
+        _socketManager.addOperations && _socketManager.addOperations(updateOperations);
+      }
+      _socketManager.sendCursorLocation(editor.selection);
     }
     onChange();
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.1.50",
+  "version": "0.1.52",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",
@@ -9,7 +9,7 @@
     "@seafile/slate": "0.91.8",
     "@seafile/slate-history": "0.86.2",
     "@seafile/slate-hyperscript": "0.81.7",
-    "@seafile/slate-react": "0.92.5",
+    "@seafile/slate-react": "0.92.6",
     "ahooks": "3.7.7",
     "classnames": "2.3.2",
     "deep-copy": "1.4.2",