@seafile/sdoc-editor 0.1.2 → 0.1.3

package/dist/{slate-extension → extension}/plugins/list/transforms/unwrap-list.js

@@ -1,4 +1,4 @@
-import { Editor, Transforms, Element, Node } from 'slate';
+import { Editor, Transforms, Element, Node } from '@seafile/slate';
 import { LIST_ITEM, LIST_LIC, PARAGRAPH } from '../../../constants';
 import { getAboveBlockNode, getAboveNode, getNodeType } from '../../../core';
 import { getListTypes } from '../queries';

package/dist/{slate-extension → extension}/plugins/text-style/render-elem.js

@@ -24,6 +24,8 @@ var renderText = function renderText(props, editor) {
       className: "token ".concat(leaf.type)
     }, markedChildren);
   }
-  return /*#__PURE__*/React.createElement("span", attributes, markedChildren);
+  return /*#__PURE__*/React.createElement("span", Object.assign({
+    "data-id": leaf.id
+  }, attributes), markedChildren);
 };
 export default renderText;

package/dist/{slate-extension → extension}/render/render-element.js

@@ -1,14 +1,16 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React from 'react';
-import { BLOCKQUOTE, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, LIST_LIC, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST } from '../constants';
-import { BlockquotePlugin, CheckListPlugin, HeaderPlugin, ListPlugin } from '../plugins';
+import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, LIST_LIC, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST } from '../constants';
+import { BlockquotePlugin, LinkPlugin, CheckListPlugin, HeaderPlugin, ListPlugin } from '../plugins';
 var renderElement = function renderElement(props, editor) {
   var attributes = props.attributes,
     children = props.children,
     element = props.element;
   switch (element.type) {
     case PARAGRAPH:
-      return /*#__PURE__*/React.createElement("p", attributes, children);
+      return /*#__PURE__*/React.createElement("p", Object.assign({
+        "data-id": element.id
+      }, attributes), children);
     case HEADER1:
     case HEADER2:
     case HEADER3:
@@ -20,6 +22,12 @@ var renderElement = function renderElement(props, editor) {
           renderHeader = _HeaderPlugin$renderE[0];
         return renderHeader(props, editor);
       }
+    case LINK:
+      {
+        var _LinkPlugin$renderEle = _slicedToArray(LinkPlugin.renderElements, 1),
+          renderLink = _LinkPlugin$renderEle[0];
+        return renderLink(props, editor);
+      }
     case BLOCKQUOTE:
       {
         var _BlockquotePlugin$ren = _slicedToArray(BlockquotePlugin.renderElements, 1),
@@ -55,7 +63,9 @@ var renderElement = function renderElement(props, editor) {
       }
     default:
       {
-        return /*#__PURE__*/React.createElement("p", attributes, children);
+        return /*#__PURE__*/React.createElement("p", Object.assign({
+          "data-id": element.id
+        }, attributes), children);
       }
   }
 };

package/dist/{slate-extension → extension}/toolbar/index.js

@@ -4,6 +4,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import QuoteMenu from '../plugins/blockquote/menu';
+import LinkMenu from '../plugins/link/menu';
 import ListMenu from '../plugins/list/menu';
 import { ORDERED_LIST, UNORDERED_LIST } from '../constants';
 import HeaderMenu from '../plugins/header/menu';
@@ -24,7 +25,9 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         className: "sf-editor-toolbar"
       }, /*#__PURE__*/React.createElement(HeaderMenu, {
         editor: this.props.editor
-      }), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(QuoteMenu, {
+      }), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(LinkMenu, {
+        editor: this.props.editor
+      }), /*#__PURE__*/React.createElement(QuoteMenu, {
         editor: this.props.editor
       }), /*#__PURE__*/React.createElement(ListMenu, {
         editor: this.props.editor,

package/dist/node-id/constants.js

@@ -0,0 +1,18 @@
+// insert_node & remove_node
+export var INSERT_TEXT = 'insert_text';
+export var REMOVE_TEXT = 'remove_text';
+
+// insert_node & remove_node
+export var INSERT_NODE = 'insert_node';
+export var REMOVE_NODE = 'remove_node';
+
+// merge_node  & split_node
+export var MERGE_NODE = 'merge_node';
+export var SPLIT_NODE = 'split_node';
+
+// set_node & move_node
+export var SET_NODE = 'set_node';
+export var MOVE_NODE = 'move_node';
+
+// set_selection
+export var SET_SELECTION = 'set_selection';

package/dist/node-id/helpers.js

@@ -0,0 +1,80 @@
+import { Node } from '@seafile/slate';
+import deepCopy from 'deep-copy';
+import slugid from 'slugid';
+import * as OPERATION from './constants';
+export var decorateOperation = function decorateOperation(editor, operation) {
+  var newOperation = deepCopy(operation);
+  var type = newOperation.type;
+  switch (type) {
+    case OPERATION.INSERT_TEXT:
+    case OPERATION.REMOVE_TEXT:
+      {
+        var path = newOperation.path;
+        var node = Node.get(editor, path);
+        newOperation['node_id'] = node.id;
+        break;
+      }
+    case OPERATION.INSERT_NODE:
+      {
+        var _path = newOperation.path,
+          _node = newOperation.node;
+        if (!_node.id) _node.id = slugid.nice(); // generate an id for insert node
+
+        var parent = Node.parent(editor, _path);
+        newOperation['parent_node_id'] = parent.id;
+        break;
+      }
+    case OPERATION.REMOVE_NODE:
+      {
+        var _path2 = newOperation.path;
+        var _node2 = Node.get(editor, _path2);
+        newOperation['node_id'] = _node2.id; // remove node's id
+        break;
+      }
+    case OPERATION.MERGE_NODE:
+      {
+        // merge next node into prev node
+        var _path3 = newOperation.path;
+        var _node3 = Node.get(editor, _path3);
+        newOperation['node_id'] = _node3.id;
+        break;
+      }
+    case OPERATION.SPLIT_NODE:
+      {
+        // child: split [7, 0] -> [[7, 0],[7, 1]]
+        // parent: split [[7, 0], [7, 1]] -> [[7], [8]] 
+        var _path4 = newOperation.path,
+          _newOperation$propert = newOperation.properties,
+          properties = _newOperation$propert === void 0 ? {} : _newOperation$propert;
+        // need generate a new id for new node
+        properties.id = slugid.nice();
+        var _node4 = Node.get(editor, _path4);
+        newOperation['node_id'] = _node4.id; // split node's id
+        break;
+      }
+    case OPERATION.SET_NODE:
+      {
+        var _properties = newOperation.properties,
+          newProperties = newOperation.newProperties;
+        if (!_properties.id) _properties.id = slugid.nice();
+        // newProperties none has id attribute, keep the original id
+        newProperties.id = _properties.id;
+        newOperation['node_id'] = _properties.id; // the node which will be set to another type
+        break;
+      }
+    case OPERATION.MOVE_NODE:
+      {
+        var _path5 = newOperation.path;
+        var _node5 = Node.get(editor, _path5);
+        // move operation not change the node's id
+        newOperation['node_id'] = _node5.id; // moved node's id
+        break;
+      }
+    default:
+      {
+        // set_selection
+        break;
+      }
+  }
+  return newOperation;
+};

package/dist/node-id/index.js

@@ -0,0 +1,11 @@
+import { decorateOperation } from './helpers';
+var withNodeId = function withNodeId(editor) {
+  var apply = editor.apply;
+  var newEditor = editor;
+  newEditor.apply = function (op) {
+    var newOp = decorateOperation(newEditor, op);
+    apply(newOp);
+  };
+  return newEditor;
+};
+export default withNodeId;

package/dist/socket/helpers.js

@@ -0,0 +1,258 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import deepCopy from 'deep-copy';
+import { Editor, Operation } from '@seafile/slate';
+import { getNode } from '../extension/core';
+import * as OPERATION from '../node-id/constants';
+export var getNodePathById = function getNodePathById(rootNode, nodeId) {
+  var path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  if (rootNode.id === nodeId) return path;
+  var _rootNode$children = rootNode.children,
+    children = _rootNode$children === void 0 ? [] : _rootNode$children;
+  for (var i = 0; i < children.length; i++) {
+    var child = children[i];
+    path.push(i);
+    var nodePath = getNodePathById(child, nodeId, path);
+    if (nodePath) return nodePath;
+    path.pop();
+  }
+  return null;
+};
+export var validateOperation = function validateOperation(editor, operation) {
+  var isValid = false;
+  var newOperation = deepCopy(operation);
+  var type = newOperation.type;
+  switch (type) {
+    case OPERATION.INSERT_TEXT:
+    case OPERATION.REMOVE_TEXT:
+      {
+        var node_id = newOperation.node_id,
+          path = newOperation.path;
+        var node = getNode(editor, path);
+        // node is exist and node path is not changed
+        if (node && node.id === node_id) {
+          isValid = true;
+          break;
+        }
+
+        // node is exist but node path is changed
+        var nodePath = getNodePathById(editor, node_id);
+        if (nodePath) {
+          isValid = true;
+          newOperation.path = nodePath;
+          break;
+        }
+        // node is not exist
+        isValid = false;
+        break;
+      }
+    case OPERATION.INSERT_NODE:
+      {
+        var parent_node_id = newOperation.parent_node_id,
+          _path = newOperation.path;
+        var parentNodePath = getNodePathById(editor, parent_node_id);
+        if (!parentNodePath) {
+          isValid = false;
+          break;
+        }
+        var parentPath = _path.slice(0, _path.length - 1);
+        if (parentPath.join() === parentNodePath.join()) {
+          isValid = true;
+          break;
+        }
+
+        // reset insert node path
+        var parentNode = Node.get(editor, _path);
+        var childLength = parentNode.children.length;
+        var index = Math.min(_path[_path.length - 1], childLength);
+        newOperation.path = parentNodePath.concat([index]);
+        isValid = true;
+        break;
+      }
+    case OPERATION.REMOVE_NODE:
+      {
+        var _node_id = newOperation.node_id,
+          _path2 = newOperation.path;
+        var _node = getNode(editor, _path2);
+        // node is exist and node path is not changed
+        if (_node && _node.id === _node_id) {
+          isValid = true;
+          break;
+        }
+
+        // node is exist but node path is changed
+        var _nodePath = getNodePathById(editor, _node_id);
+        if (_nodePath) {
+          isValid = true;
+          newOperation.path = _nodePath;
+          break;
+        }
+
+        // node is not exist
+        isValid = false;
+        break;
+      }
+    case OPERATION.MERGE_NODE:
+      {
+        // merge next node into prev node
+        var _node_id2 = newOperation.node_id,
+          _path3 = newOperation.path;
+        var _node2 = getNode(editor, _path3);
+        // node is exist and node path is not changed
+        if (_node2 && _node2.id === _node_id2) {
+          isValid = true;
+          break;
+        }
+
+        // node is exist but node path is changed
+        var _nodePath2 = getNodePathById(editor, _node_id2);
+        if (_nodePath2) {
+          isValid = true;
+          newOperation.path = _nodePath2;
+          break;
+        }
+
+        // node is not exist
+        isValid = false;
+        break;
+      }
+    case OPERATION.SPLIT_NODE:
+      {
+        var _node_id3 = newOperation.node_id,
+          _path4 = newOperation.path;
+        var _node3 = getNode(editor, _path4);
+        // node is exist and node path is not changed
+        if (_node3 && _node3.id === _node_id3) {
+          isValid = true;
+          break;
+        }
+
+        // node is exist but node path is changed
+        var _nodePath3 = getNodePathById(editor, _node_id3);
+        if (_nodePath3) {
+          isValid = true;
+          newOperation.path = _nodePath3;
+          break;
+        }
+
+        // node is not exist
+        isValid = false;
+        break;
+      }
+    case OPERATION.SET_NODE:
+      {
+        var _node_id4 = newOperation.node_id,
+          _path5 = newOperation.path,
+          properties = newOperation.properties;
+        var _node4 = getNode(editor, _path5);
+        // node is exist and node path is not changed
+        if (_node4 && _node4.id === _node_id4) {
+          isValid = true;
+          newOperation.properties = _objectSpread(_objectSpread({}, properties), {}, {
+            type: _node4.type
+          });
+          break;
+        }
+
+        // node is exist but node path is changed
+        var _nodePath4 = getNodePathById(editor, _node_id4);
+        if (_nodePath4) {
+          isValid = true;
+          var _node5 = getNode(editor, _nodePath4);
+          newOperation.properties = _objectSpread(_objectSpread({}, properties), {}, {
+            type: _node5.type
+          });
+          newOperation.path = _nodePath4;
+          break;
+        }
+
+        // node is not exist
+        isValid = false;
+        break;
+      }
+    case OPERATION.MOVE_NODE:
+      {
+        var _node_id5 = newOperation.node_id,
+          _path6 = newOperation.path;
+        var _node6 = getNode(editor, _path6);
+        // node is exist and node path is not changed
+        if (_node6 && _node6.id === _node_id5) {
+          isValid = true;
+          break;
+        }
+
+        // TODO: newPath can not calculate by nodePath
+        // node is exist but node path is changed
+        // const nodePath = getNodePathById(editor, node_id);
+        // if (nodePath) {}
+
+        // node is not exist
+        isValid = false;
+        break;
+      }
+    default:
+      {
+        // set_selection
+        break;
+      }
+  }
+  if (isValid) return newOperation;
+  return isValid;
+};
+export var getRevertOperationList = function getRevertOperationList(operationList) {
+  if (operationList.length === 0) return [];
+
+  // Generate a duplicate operationList, The original value cannot be modified here
+  var revertOperationList = deepCopy(operationList);
+  revertOperationList = revertOperationList.reverse();
+  return revertOperationList.map(function (operations) {
+    var ops = operations.reverse();
+    return ops.map(function (item) {
+      return Operation.inverse(item);
+    });
+  });
+};
+export var revertOperationList = function revertOperationList(editor, operationList) {
+  if (operationList.length === 0) return [];
+  var revertOperationList = getRevertOperationList(operationList);
+
+  // Cancel locale execute operations
+  var _loop = function _loop() {
+    var operations = revertOperationList[i];
+    Editor.withoutNormalizing(editor, function () {
+      for (var j = 0; j < operations.length; j++) {
+        var op = operations[j];
+        editor.apply(op);
+      }
+    });
+  };
+  for (var i = 0; i < revertOperationList.length; i++) {
+    _loop();
+  }
+};
+export var reExecRevertOperationList = function reExecRevertOperationList(editor, revertOperationList) {
+  if (revertOperationList.length === 0) return;
+
+  // Re-execute revert operations
+  var _loop2 = function _loop2() {
+    var operations = revertOperationList[i];
+    Editor.withoutNormalizing(editor, function () {
+      for (var j = 0; j < operations.length; j++) {
+        var op = validateOperation(editor, operations[j]);
+        if (op) {
+          editor.apply(op);
+        }
+      }
+    });
+  };
+  for (var i = 0; i < revertOperationList.length; i++) {
+    _loop2();
+  }
+};
+export var syncRemoteOperations = function syncRemoteOperations(editor, remoteOperations) {
+  if (remoteOperations.length === 0) return;
+  Editor.withoutNormalizing(editor, function () {
+    remoteOperations.forEach(function (item) {
+      editor.apply(item);
+    });
+  });
+};

package/dist/socket/index.js

@@ -0,0 +1,3 @@
+import withSocketIO from './with-socket-io';
+import SocketManager from './socket-manager';
+export { SocketManager, withSocketIO };

package/dist/socket/socket-client.js

@@ -0,0 +1,138 @@
+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] : {};
+    var docUuid = _this.config.docUuid;
+    return _objectSpread({
+      doc_uuid: docUuid
+    }, params);
+  };
+  this.onConnected = function () {
+    var _this$config = _this.config,
+      doc_uuid = _this$config.docUuid,
+      doc_path = _this$config.docPath,
+      doc_name = _this$config.docName,
+      access_token = _this$config.accessToken;
+    var params = {
+      doc_uuid: doc_uuid,
+      doc_path: doc_path,
+      doc_name: doc_name,
+      access_token: access_token
+    };
+    // join room
+    _this.socket.emit('join-room', params, function (result) {
+      var socketManager = SocketManager.getInstance();
+      if (result.success) {
+        // sync operations or document
+        if (_this.isReconnect) {
+          _this.isReconnect = false;
+          var serverVersion = result.version;
+          var clientVersion = socketManager.getDocumentVersion();
+          if (serverVersion !== clientVersion) {
+            _this.syncDocumentBySocket();
+          }
+        }
+        socketManager.dispatchConnectState('onConnected', 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.');
+    _this.isReconnect = true;
+    var socketManager = SocketManager.getInstance();
+    socketManager.dispatchConnectState('reconnect');
+  };
+  this.onReconnectAttempt = function (attemptNumber) {
+    debug('reconnect_attempt. %s', attemptNumber);
+    var socketManager = SocketManager.getInstance();
+    socketManager.dispatchConnectState('reconnect_attempt', attemptNumber);
+  };
+  this.onReconnectError = function () {
+    debug('reconnect_error. %s');
+    var socketManager = SocketManager.getInstance();
+    socketManager.dispatchConnectState('reconnect_error');
+  };
+  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.sendOperations = function (operations, version, callback) {
+    debug('=========== send operations ==========');
+    debug('%O', operations);
+    debug('======================================');
+    _this.socket.emit('update-document', _this.getParams({
+      operations: operations,
+      version: version
+    }), function (result) {
+      callback && callback(result);
+    });
+  };
+  /**
+   * receive remote broadcast operations
+   * @param {*} params {operations, version}
+   */
+  this.receiveOperations = function (params) {
+    debug('********* receive operations *********');
+    debug('%O', params);
+    debug('**************************************');
+    var socketManager = SocketManager.getInstance();
+    socketManager.receiveOperations(params);
+  };
+  this.disconnectWithServer = function () {
+    _this.socket.disconnect();
+  };
+  this.syncDocumentBySocket = function () {
+    var docUuid = _this.config.docUuid;
+    var socketManager = SocketManager.getInstance();
+    var clientVersion = socketManager.getDocumentVersion();
+    _this.socket.emit('sync-document', {
+      doc_uuid: docUuid,
+      version: clientVersion
+    }, function (result) {
+      if (result.success) {
+        socketManager.syncDocumentBySocket(result);
+      }
+    });
+  };
+  this.config = config;
+  this.isReconnect = false;
+  this.socket = io(config.sdocServer, {
+    reconnection: true,
+    query: {
+      doc_uuid: config.docUuid
+    }
+  });
+  this.socket.on('connect', this.onConnected);
+  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.receiveOperations);
+  this.socket.io.on('reconnect', this.onReconnect);
+  this.socket.io.on('reconnect_attempt', this.onReconnectAttempt);
+  this.socket.io.on('reconnect_error', this.onReconnectError);
+});
+export default SocketClient;