@seafile/sdoc-editor 0.1.8 → 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

@@ -0,0 +1,9 @@
+.sdoc-editor-page-header .doc-info {
+  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

@@ -169,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

@@ -0,0 +1,76 @@
+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(props) {
+    var _this;
+    _classCallCheck(this, TipMessage);
+    _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 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"
+        }, t('Saving'));
+      }
+      if (!isSaving && isSaved) {
+        return /*#__PURE__*/React.createElement("span", {
+          className: "tip-message"
+        }, t('All_changes_saved'));
+      }
+      return null;
+    };
+    _this.state = {
+      isSaved: false,
+      isSaving: false
+    };
+    _this.saveTimer = null;
+    return _this;
+  }
+  _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/components/tip-message/style.css

@@ -0,0 +1,9 @@
+.sdoc-editor-page-wrapper .tip-message {
+  margin-left: 12px;
+  font-size: 12px;
+  opacity: 0.75;
+  color: #999;
+  width: max-content;
+  display: inline-block;
+  white-space: nowrap;
+}

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

@@ -7,9 +7,12 @@ function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyri
 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';
+import '../assets/css/simple-editor.css';
 var SimpleEditor = /*#__PURE__*/function (_React$Component) {
   _inherits(SimpleEditor, _React$Component);
   var _super = _createSuper(SimpleEditor);
@@ -34,11 +37,17 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
         });
       }
     };
+    _this.setEditorRef = function (ref) {
+      _this.editorRef = ref;
+    };
     _this.state = {
       isContextInit: false,
       errorMessage: null,
-      document: null
+      document: null,
+      isSaved: false,
+      isSaving: false
     };
+    _this.saveTimer = null;
     return _this;
   }
   _createClass(SimpleEditor, [{
@@ -108,9 +117,12 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
       }
       var config = context.getEditorConfig();
       var isOpenSocket = context.getSetting('isOpenSocket');
-      return /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement("div", null, config.docName), !isOpenSocket && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
-        onClick: this.onSave
-      }, "Save"))), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(SDocEditor, {
+      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, null)), /*#__PURE__*/React.createElement(DocOperations, null)), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(SDocEditor, {
+        ref: this.setEditorRef,
         config: config,
         document: document,
         isOpenSocket: isOpenSocket,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.1.8",
+  "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

@@ -225,5 +225,10 @@
   "Insert_column": "Insert column",
   "The_link_address_is_required": "The link address is required.",
   "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."
+  "The_link_address_is_invalid": "The link address is invalid, please enter a correct connection address.",
+  "All_changes_saved": "All changes saved",
+  "Saving": "Saving...",
+  "Collaborators": "Collaborators",
+  "Online_members": "Online members",
+  "me": "me"
 }

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

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