@seafile/sdoc-editor 0.1.9 → 0.1.10

package/dist/api/sdoc-server-api.js

@@ -47,6 +47,19 @@ var SDocServerApi = /*#__PURE__*/function () {
         }
       });
     }
+  }, {
+    key: "getCollaborators",
+    value: function getCollaborators() {
+      var server = this.server,
+        docUuid = this.docUuid,
+        accessToken = this.accessToken;
+      var url = "".concat(server, "/api/v1/docs/").concat(docUuid, "/collaborators/");
+      return axios.get(url, {
+        headers: {
+          Authorization: "Token ".concat(accessToken)
+        }
+      });
+    }
   }]);
   return SDocServerApi;
 }();

package/dist/assets/css/collaborator-popover.css

@@ -0,0 +1,75 @@
+.collaborators-popover.popover {
+  width: 300px;
+  max-width: 300px;
+}
+
+.collaborators-popover .popover-container {
+  padding: 0;
+  margin: 0;
+  max-height: 360px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.collaborators-popover .popover-header {
+  height: 50px;
+  min-height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 16px;
+  border-bottom: 1px solid #ededed;
+  color: #212529;
+}
+
+.collaborators-popover .popover-container .content-list {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: auto;
+  padding: 5px 0;
+}
+
+.content-list .collaborator-details {
+  height: 32px;
+  line-height: 32px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 3px 12px;
+  
+}
+
+.content-list .collaborator-details:hover {
+  background-color: #f8f8f8;
+}
+
+.content-list .collaborator-details .collaborator-tag {
+  margin-right: 8px;
+  height: 5px;
+  width: 5px;
+  background-color: #08DB6B;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.content-list .collaborator-details .collaborator-avatar {
+  margin-right: 8px;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.content-list .collaborator-details .collaborator-name {
+  max-width: calc(100% - 20px);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #212529;
+}
+
+

package/dist/assets/css/simple-editor.css

@@ -2,3 +2,8 @@
   display: flex;
   align-items: center;
 }
+
+.sdoc-editor-page-header .doc-info .doc-name {
+  font-size: 18px;
+  color: #212529;
+}

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

@@ -14,10 +14,10 @@
 .sdoc-editor-container .sdoc-editor-toolbar {
   display: flex;
   justify-content: center;
-  height: 39px;
+  height: 44px;
   align-items: center;
   padding: 0 10px;
-  background-color: #fcfcfc;
+  background-color: #fff;
   user-select: none;
   border-bottom: 1px solid #e5e5e5;
   box-shadow: 0 3px 2px -2px rgb(200 200 200 / 15%)

package/dist/basic-sdk/assets/css/sdoc-editor-toolbar.css

@@ -14,6 +14,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  margin: 0 5px;
 }
 
 .header-menu .header-toggle .iconfont {

package/dist/basic-sdk/extension/menu/menu.css

@@ -13,7 +13,7 @@
   border: 1px solid transparent;
   line-height: 30px;
   color: #555555;
-  background-color: #fcfcfc;
+  background-color: #fff;
 }
 
 .menu-group .menu-group-item:disabled {

package/dist/basic-sdk/index.js

@@ -1,3 +1,4 @@
 import SDocEditor from './editor';
 import SDocViewer from './viewer';
-export { SDocEditor, SDocViewer };
+import EventBus from './utils/event-bus';
+export { SDocEditor, SDocViewer, EventBus };

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

@@ -126,8 +126,8 @@ var SocketClient = /*#__PURE__*/_createClass(function SocketClient(config) {
   this.isReconnect = false;
   this.socket = io(config.sdocServer, {
     reconnection: true,
-    query: {
-      doc_uuid: config.docUuid
+    auth: {
+      token: config.accessToken
     }
   });
   this.socket.on('connect', this.onConnected);

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

@@ -156,9 +156,6 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, doc
       _this.editor.isRemote = false;
     });
   };
-  this.subscribe = function (type, handler) {
-    return _this.eventBus.subscribe(type, handler);
-  };
   this.dispatchConnectState = function (type, message) {
     _this.eventBus.dispatch(type, message);
   };
@@ -172,7 +169,7 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, doc
   this.pendingOperationList = []; // Two-dimensional arrays： [operations, operations, ...]
   this.remoteOperationsList = []; // Same with pending operations
   this.revertOperationList = [];
-  this.eventBus = new EventBus();
+  this.eventBus = EventBus.getInstance();
 });
 SocketManager.getInstance = function (editor, document, socketConfig) {
   if (SocketManager.instance) {

package/dist/basic-sdk/utils/event-bus.js

@@ -3,6 +3,7 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 var EventBus = /*#__PURE__*/function () {
   function EventBus() {
     _classCallCheck(this, EventBus);
+    this.instance = null;
     this.subscribers = {};
   }
   _createClass(EventBus, [{
@@ -33,6 +34,13 @@ var EventBus = /*#__PURE__*/function () {
         });
       }
     }
+  }], [{
+    key: "getInstance",
+    value: function getInstance() {
+      if (this.instance) return this.instance;
+      this.instance = new EventBus();
+      return this.instance;
+    }
   }]);
   return EventBus;
 }();

package/dist/components/doc-operations/collaborators-operation/collaborators-popover.js

@@ -0,0 +1,54 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import { withTranslation } from 'react-i18next';
+import { UncontrolledPopover, PopoverBody, PopoverHeader } from 'reactstrap';
+import '../../../assets/css/collaborator-popover.css';
+var CollaboratorsPopover = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(CollaboratorsPopover, _React$PureComponent);
+  var _super = _createSuper(CollaboratorsPopover);
+  function CollaboratorsPopover() {
+    _classCallCheck(this, CollaboratorsPopover);
+    return _super.apply(this, arguments);
+  }
+  _createClass(CollaboratorsPopover, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        t = _this$props.t,
+        collaborators = _this$props.collaborators;
+      return /*#__PURE__*/React.createElement(UncontrolledPopover, {
+        target: "collaborators",
+        placement: "bottom-end",
+        popperClassName: "collaborators-popover",
+        trigger: "legacy",
+        hideArrow: true,
+        security: "fixed"
+      }, /*#__PURE__*/React.createElement(PopoverHeader, {
+        className: "popover-header"
+      }, t('Online_members'), ' ', "(", collaborators.length, ")"), /*#__PURE__*/React.createElement(PopoverBody, {
+        className: "popover-container"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "content-list"
+      }, collaborators.map(function (item, index) {
+        var name = index === 0 ? "".concat(item.name, " (").concat(t('me'), ")") : item.name;
+        return /*#__PURE__*/React.createElement("div", {
+          key: index,
+          className: "collaborator-details"
+        }, /*#__PURE__*/React.createElement("span", {
+          className: "collaborator-tag"
+        }), /*#__PURE__*/React.createElement("img", {
+          className: "collaborator-avatar",
+          alt: name,
+          src: item.avatar_url
+        }), /*#__PURE__*/React.createElement("span", {
+          className: "collaborator-name"
+        }, name));
+      }))));
+    }
+  }]);
+  return CollaboratorsPopover;
+}(React.PureComponent);
+export default withTranslation('sdoc-editor')(CollaboratorsPopover);

package/dist/components/doc-operations/collaborators-operation/index.js

@@ -0,0 +1,107 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Fragment } from 'react';
+import { EventBus } from '../../../basic-sdk';
+import context from '../../../context';
+import CollaboratorsPopover from './collaborators-popover';
+var URL = 'https://tupian.qqw21.com/article/UploadPic/2020-8/20208522181570993.jpg';
+var CollaboratorsOperation = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(CollaboratorsOperation, _React$PureComponent);
+  var _super = _createSuper(CollaboratorsOperation);
+  function CollaboratorsOperation(props) {
+    var _this;
+    _classCallCheck(this, CollaboratorsOperation);
+    _this = _super.call(this, props);
+    _this.getUserInfo = function (username) {
+      return {
+        name: username,
+        username: username,
+        avatar_url: URL
+      };
+    };
+    _this.onUserJoinRoom = function (username) {
+      var collaborators = _this.state.collaborators;
+      var newCollaborators = collaborators.slice();
+      if (!newCollaborators.find(function (user) {
+        return user.username === username;
+      })) {
+        var newUser = _this.getUserInfo(username);
+        newCollaborators.push(newUser);
+        _this.setState({
+          collaborators: newCollaborators
+        });
+      }
+    };
+    _this.onUserLeaveRoom = function (username) {
+      if (_this.currentUser.username === username) return;
+      var collaborators = _this.state.collaborators;
+      var newCollaborators = collaborators.slice();
+      if (newCollaborators.find(function (user) {
+        return user.username === username;
+      })) {
+        newCollaborators = newCollaborators.filter(function (user) {
+          return user.username !== username;
+        });
+        _this.setState({
+          collaborators: newCollaborators
+        });
+      }
+    };
+    var _username = context.getSetting('username');
+    _this.currentUser = _this.getUserInfo(_username);
+    _this.state = {
+      collaborators: [_this.currentUser]
+    };
+    return _this;
+  }
+  _createClass(CollaboratorsOperation, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      context.getCollaborators().then(function (res) {
+        var collaborators = res.data.collaborators;
+        var newCollaborators = collaborators.map(function (item) {
+          return _this2.getUserInfo(item);
+        });
+        // delete current user and push it at first one
+        var currentUserIndex = newCollaborators.findIndex(function (user) {
+          return user.username === _this2.currentUser.username;
+        });
+        console.log(currentUserIndex);
+        if (currentUserIndex > -1) {
+          newCollaborators.splice(currentUserIndex, 1);
+        }
+        newCollaborators.unshift(_this2.currentUser);
+        _this2.setState({
+          collaborators: newCollaborators
+        });
+      });
+      var eventBus = EventBus.getInstance();
+      this.unsubscribeJoinEvent = eventBus.subscribe('join-room', this.onUserJoinRoom);
+      this.unsubscribeLeaveEvent = eventBus.subscribe('leave-room', this.onUserLeaveRoom);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.unsubscribeJoinEvent();
+      this.unsubscribeLeaveEvent();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var collaborators = this.state.collaborators;
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
+        className: "op-item",
+        id: "collaborators"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "iconfont icon-user mr-1"
+      }), collaborators.length), /*#__PURE__*/React.createElement(CollaboratorsPopover, {
+        collaborators: collaborators
+      }));
+    }
+  }]);
+  return CollaboratorsOperation;
+}(React.PureComponent);
+export default CollaboratorsOperation;

package/dist/components/doc-operations/index.js

@@ -0,0 +1,37 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Fragment } from 'react';
+import CollaboratorsOperation from './collaborators-operation';
+import './style.css';
+var DocOperations = /*#__PURE__*/function (_React$Component) {
+  _inherits(DocOperations, _React$Component);
+  var _super = _createSuper(DocOperations);
+  function DocOperations() {
+    _classCallCheck(this, DocOperations);
+    return _super.apply(this, arguments);
+  }
+  _createClass(DocOperations, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "doc-ops"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "op-item"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "iconfont icon-share"
+      })), /*#__PURE__*/React.createElement("span", {
+        className: "op-item"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "iconfont icon-history"
+      })), /*#__PURE__*/React.createElement(CollaboratorsOperation, null), /*#__PURE__*/React.createElement("span", {
+        className: "op-item"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "iconfont icon-menu"
+      }))));
+    }
+  }]);
+  return DocOperations;
+}(React.Component);
+export default DocOperations;

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

@@ -0,0 +1,25 @@
+.doc-ops {
+  display: flex;
+  align-items: center;
+}
+
+.doc-ops .op-item {
+  margin-right: 1rem;
+  display: flex;
+  position: relative;
+}
+
+.doc-ops .op-item .iconfont {
+  color: #666;
+  cursor: pointer;
+}
+
+.doc-ops .op-item .iconfont:hover {
+  color: #333;
+  cursor: pointer;
+}
+
+.doc-ops .popover-wrapper {
+  width: 300px;
+}
+

package/dist/components/tip-message/index.js

@@ -1,25 +1,42 @@
-import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { withTranslation } from 'react-i18next';
+import { EventBus } from '../../basic-sdk';
 import './style.css';
 var TipMessage = /*#__PURE__*/function (_React$Component) {
   _inherits(TipMessage, _React$Component);
   var _super = _createSuper(TipMessage);
-  function TipMessage() {
+  function TipMessage(props) {
     var _this;
     _classCallCheck(this, TipMessage);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props);
+    _this.onDocumentSaving = function () {
+      _this.setState({
+        isSaving: true,
+        isSaved: false
+      });
+    };
+    _this.onDocumentSaved = function () {
+      _this.setState({
+        isSaving: false,
+        isSaved: true
+      });
+      if (_this.saveTimer) clearTimeout(_this.saveTimer);
+      _this.saveTimer = setTimeout(function () {
+        _this.setState({
+          isSaving: false,
+          isSaved: false
+        });
+      }, 2000);
+    };
     _this.render = function () {
-      var _this$props = _this.props,
-        t = _this$props.t,
-        isSaved = _this$props.isSaved,
-        isSaving = _this$props.isSaving;
+      var t = _this.props.t;
+      var _this$state = _this.state,
+        isSaved = _this$state.isSaved,
+        isSaving = _this$state.isSaving;
       if (isSaving && !isSaved) {
         return /*#__PURE__*/React.createElement("span", {
           className: "tip-message"
@@ -32,8 +49,28 @@ var TipMessage = /*#__PURE__*/function (_React$Component) {
       }
       return null;
     };
+    _this.state = {
+      isSaved: false,
+      isSaving: false
+    };
+    _this.saveTimer = null;
     return _this;
   }
-  return _createClass(TipMessage);
+  _createClass(TipMessage, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var eventBus = EventBus.getInstance();
+      this.unsubscribeSavingEvent = eventBus.subscribe('is-saving', this.onDocumentSaving);
+      this.unsubscribeSavedEvent = eventBus.subscribe('saved', this.onDocumentSaved);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.unsubscribeSavingEvent();
+      this.unsubscribeSavedEvent();
+      clearTimeout(this.saveTimer);
+    }
+  }]);
+  return TipMessage;
 }(React.Component);
 export default withTranslation('sdoc-editor')(TipMessage);

package/dist/context.js

@@ -155,6 +155,11 @@ var Context = /*#__PURE__*/function () {
         return _this3.api.updateFile(uploadLink, docPath, docName, content);
       });
     }
+  }, {
+    key: "getCollaborators",
+    value: function getCollaborators() {
+      return this.sdocServerApi.getCollaborators();
+    }
   }]);
   return Context;
 }();

package/dist/layout/layout.css

@@ -23,7 +23,7 @@ html, body {
   padding: 4px 10px;
   border-bottom: 1px solid #c9c9c9;
   flex-shrink: 0;
-  height: 58px;
+  height: 56px;
 }
 
 .sdoc-editor-page-wrapper .sdoc-editor-page-content {

package/dist/pages/simple-editor.js

@@ -8,6 +8,7 @@ import React from 'react';
 import { SDocEditor } from '../basic-sdk';
 import Loading from '../components/loading';
 import TipMessage from '../components/tip-message';
+import DocOperations from '../components/doc-operations';
 import Layout, { Header, Content } from '../layout';
 import { generateDefaultDocContent } from '../utils';
 import context from '../context';
@@ -19,25 +20,6 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
     var _this;
     _classCallCheck(this, SimpleEditor);
     _this = _super.call(this, props);
-    _this.onDocumentSaving = function () {
-      _this.setState({
-        isSaving: true,
-        isSaved: false
-      });
-    };
-    _this.onDocumentSaved = function () {
-      _this.setState({
-        isSaving: false,
-        isSaved: true
-      });
-      if (_this.saveTimer) clearTimeout(_this.saveTimer);
-      _this.saveTimer = setTimeout(function () {
-        _this.setState({
-          isSaving: false,
-          isSaved: false
-        });
-      }, 2000);
-    };
     _this.onValueChanged = function (value) {
       _this.isValueChanged = true;
       _this.value = value;
@@ -72,7 +54,7 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var contentRes, result, socketManager;
+        var contentRes, result;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -108,10 +90,6 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
                 document: null
               });
             case 15:
-              socketManager = this.editorRef.getSocketManager();
-              this.unsubscribeSavingEvent = socketManager.subscribe('is-saving', this.onDocumentSaving);
-              this.unsubscribeSavedEvent = socketManager.subscribe('saved', this.onDocumentSaved);
-            case 18:
             case "end":
               return _context.stop();
           }
@@ -122,13 +100,6 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
       }
       return componentDidMount;
     }()
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.unsubscribeSavingEvent();
-      this.unsubscribeSavedEvent();
-      clearTimeout(this.saveTimer);
-    }
   }, {
     key: "render",
     value: function render() {
@@ -146,21 +117,11 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
       }
       var config = context.getEditorConfig();
       var isOpenSocket = context.getSetting('isOpenSocket');
-      var _this$state2 = this.state,
-        isSaved = _this$state2.isSaved,
-        isSaving = _this$state2.isSaving;
       return /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement("div", {
         className: "doc-info"
       }, /*#__PURE__*/React.createElement("div", {
         className: "doc-name"
-      }, config.docName), /*#__PURE__*/React.createElement(TipMessage, {
-        isSaving: isSaving,
-        isSaved: isSaved
-      })), /*#__PURE__*/React.createElement("div", {
-        className: "doc-ops"
-      }, !isOpenSocket && /*#__PURE__*/React.createElement("button", {
-        onClick: this.onSave
-      }, "Save"))), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(SDocEditor, {
+      }, config.docName), /*#__PURE__*/React.createElement(TipMessage, null)), /*#__PURE__*/React.createElement(DocOperations, null)), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(SDocEditor, {
         ref: this.setEditorRef,
         config: config,
         document: document,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",

package/public/index.html

@@ -13,7 +13,7 @@
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 
   	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/media/seafile-editor-font.css" />
+    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/media/sdoc-editor-font.css" />
     <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/media/seafile-ui.css" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.

package/public/locales/en/sdoc-editor.json

@@ -227,5 +227,8 @@
   "The_link_title_is_required": "The link title is required.",
   "The_link_address_is_invalid": "The link address is invalid, please enter a correct connection address.",
   "All_changes_saved": "All changes saved",
-  "Saving": "Saving..."
+  "Saving": "Saving...",
+  "Collaborators": "Collaborators",
+  "Online_members": "Online members",
+  "me": "me"
 }

package/public/locales/zh-CN/sdoc-editor.json

@@ -223,5 +223,7 @@
   "The_link_title_is_required": "链接标题是必填项。",
   "The_link_address_is_invalid": "链接地址不合法，请输入一个正确的链接地址。",
   "All_changes_saved": "所有更改均已保存",
-  "Saving": "保存中..."
+  "Saving": "保存中...",
+  "Online_members": "在线成员",
+  "me": "我"
 }