@seafile/sdoc-editor 0.1.18 → 0.1.20

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

@@ -23,15 +23,16 @@
 
 .sdoc-editor-container .sdoc-editor-content {
   flex: 1;
+  display: flex;
   background: #f5f5f5;
   overflow: auto;
 }
 
 .sdoc-editor-container .sdoc-editor-content .article {
-  max-width: 950px;
+  width: 794px;
   min-height: calc(100% - 40px);
-  margin: 20px auto;
   padding: 40px 60px;
+  margin: 20px 0;
   background-color: #fff;
   border: 1px solid #e5e6e8;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);

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

@@ -0,0 +1,51 @@
+.display-outline-icon {
+  font-size: 18px;
+  color: #888;
+  cursor: pointer;
+  width: 36px;
+  height: 36px;
+  background: #fff;
+  border-radius: 0 50% 50% 0;
+  box-shadow: 0 0 6px rgba(0,0,0, 0.12);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 20px 230px 0 0;
+}
+
+.display-outline-icon:hover {
+  color: #333;
+}
+
+.sdoc-outline {
+  font-size: 14px;
+  width: 220px; 
+  margin: 20px 30px 20px 16px;
+}
+
+.sdoc-outline-header {
+  color: #999;
+  border-bottom: 1px solid #dbdbdb;
+}
+
+.font-size-inherit {
+  font-size: inherit;
+}
+
+.sdoc-outline-header .close-icon {
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.sdoc-outline-header .close-icon:hover {
+  color: #555;
+}
+
+.outline-item {
+  line-height: 30px;
+  cursor: pointer;
+}
+
+.outline-item.active {
+  color: #ff8000;
+}

package/dist/basic-sdk/editor.js

@@ -7,6 +7,7 @@ import { Editable, Slate } from '@seafile/slate-react';
 import editor, { renderLeaf as _renderLeaf, renderElement as _renderElement, Toolbar } from './extension';
 import { SocketManager, withSocketIO } from './socket';
 import withNodeId from './node-id';
+import SDocOutline from './outline';
 import EventProxy from './utils/event-handler';
 import './assets/css/layout.css';
 import './assets/css/sdoc-editor-plugins.css';
@@ -62,12 +63,17 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this2 = this;
       var slateValue = this.state.slateValue;
+      var doc = this.props.document;
       return /*#__PURE__*/React.createElement("div", {
         className: "sdoc-editor-container"
       }, /*#__PURE__*/React.createElement(Toolbar, {
         editor: this.editor
       }), /*#__PURE__*/React.createElement("div", {
         className: "sdoc-editor-content"
+      }, /*#__PURE__*/React.createElement(SDocOutline, {
+        doc: doc
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "flex-fill o-auto"
       }, /*#__PURE__*/React.createElement(Slate, {
         editor: this.editor,
         value: slateValue,
@@ -83,7 +89,7 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
           return _renderLeaf(props, _this2.editor);
         },
         onKeyDown: this.eventProxy.onKeyDown
-      })))));
+      }))))));
     }
   }]);
   return SDocEditor;

package/dist/basic-sdk/extension/plugins/header/menu/index.js

@@ -38,7 +38,7 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
     };
     _this.onToggleClick = function (event) {
       event.stopPropagation();
-      event.nativeEvent.stopImmediatePropagation;
+      event.nativeEvent.stopImmediatePropagation();
       var isShowHeaderPopover = !_this.state.isShowHeaderPopover;
       if (isShowHeaderPopover) {
         _this.setState({

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

@@ -7,6 +7,7 @@ var renderHeader = function renderHeader(props, editor) {
   var level = type.split('header')[1];
   var Tag = "h".concat(level);
   return /*#__PURE__*/React.createElement(Tag, Object.assign({
+    id: element.id,
     "data-id": element.id
   }, attributes), children);
 };

package/dist/basic-sdk/index.js

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

package/dist/basic-sdk/outline.js

@@ -0,0 +1,114 @@
+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 { UncontrolledTooltip } from 'reactstrap';
+import './assets/css/outline.css';
+var SDocOutline = /*#__PURE__*/function (_React$Component) {
+  _inherits(SDocOutline, _React$Component);
+  var _super = _createSuper(SDocOutline);
+  function SDocOutline(props) {
+    var _this;
+    _classCallCheck(this, SDocOutline);
+    _this = _super.call(this, props);
+    _this.toggleShow = function () {
+      _this.setState({
+        isShown: !_this.state.isShown
+      });
+    };
+    _this.state = {
+      isShown: false
+    };
+    return _this;
+  }
+  _createClass(SDocOutline, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        doc = _this$props.doc,
+        t = _this$props.t;
+      var isShown = this.state.isShown;
+      var list = doc.children.filter(function (item) {
+        return item.type == 'header2' || item.type == 'header3';
+      });
+      return isShown ? /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-outline d-flex flex-column"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-outline-header d-flex align-items-center justify-content-between py-1"
+      }, /*#__PURE__*/React.createElement("h2", {
+        className: "font-weight-normal m-0 font-size-inherit"
+      }, t('Outline')), /*#__PURE__*/React.createElement("span", {
+        onClick: this.toggleShow,
+        className: "close-icon iconfont icon-cancel"
+      })), list.length ? /*#__PURE__*/React.createElement("ol", {
+        className: "list-unstyled py-2 flex-fill o-auto"
+      }, list.map(function (item, index) {
+        return /*#__PURE__*/React.createElement(OutlineItem, {
+          key: index,
+          item: item
+        });
+      })) : /*#__PURE__*/React.createElement("p", {
+        className: "mt-4 text-secondary"
+      }, t('Headings_you_add_to_the_document_will_appear_here'))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        onClick: this.toggleShow,
+        id: "display-outline-icon",
+        className: "display-outline-icon iconfont icon-table-of-content",
+        style: {
+          'marginRight': (window.innerWidth - 794) / 2 - 36
+        }
+      }), /*#__PURE__*/React.createElement(UncontrolledTooltip, {
+        placement: "right",
+        target: "display-outline-icon"
+      }, t('Outline')));
+    }
+  }]);
+  return SDocOutline;
+}(React.Component);
+var OutlineItem = /*#__PURE__*/function (_React$Component2) {
+  _inherits(OutlineItem, _React$Component2);
+  var _super2 = _createSuper(OutlineItem);
+  function OutlineItem(props) {
+    var _this2;
+    _classCallCheck(this, OutlineItem);
+    _this2 = _super2.call(this, props);
+    _this2.onItemClick = function () {
+      var item = _this2.props.item;
+      var id = item.id;
+      document.getElementById(id).scrollIntoView();
+    };
+    _this2.onMouseOver = function () {
+      _this2.setState({
+        isHighlighted: true
+      });
+    };
+    _this2.onMouseOut = function () {
+      _this2.setState({
+        isHighlighted: false
+      });
+    };
+    _this2.state = {
+      isHighlighted: false
+    };
+    return _this2;
+  }
+  _createClass(OutlineItem, [{
+    key: "render",
+    value: function render() {
+      var isHighlighted = this.state.isHighlighted;
+      var item = this.props.item;
+      var id = item.id,
+        type = item.type,
+        children = item.children;
+      return /*#__PURE__*/React.createElement("li", {
+        className: "outline-item ".concat(type == 'header3' ? 'pl-5' : '', " ").concat(isHighlighted ? 'active' : ''),
+        onClick: this.onItemClick,
+        onMouseOver: this.onMouseOver,
+        onMouseOut: this.onMouseOut
+      }, children[0].text);
+    }
+  }]);
+  return OutlineItem;
+}(React.Component);
+export default withTranslation('sdoc-editor')(SDocOutline);

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

@@ -9,9 +9,12 @@ var SocketClient = /*#__PURE__*/_createClass(function SocketClient(config) {
   _classCallCheck(this, SocketClient);
   this.getParams = function () {
     var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var docUuid = _this.config.docUuid;
+    var _this$config = _this.config,
+      docUuid = _this$config.docUuid,
+      user = _this$config.user;
     return _objectSpread({
-      doc_uuid: docUuid
+      doc_uuid: docUuid,
+      user: user
     }, params);
   };
   this.onConnected = function () {

package/dist/basic-sdk/viewer.js

@@ -52,12 +52,14 @@ var SDocViewer = /*#__PURE__*/function (_React$Component) {
         className: "sdoc-editor-container"
       }, /*#__PURE__*/React.createElement("div", {
         className: "sdoc-editor-content"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "flex-fill o-auto"
       }, /*#__PURE__*/React.createElement(Slate, {
         editor: this.editor,
         value: slateValue,
         onChange: function onChange() {}
       }, /*#__PURE__*/React.createElement("div", {
-        className: "article"
+        className: "article mx-auto"
       }, /*#__PURE__*/React.createElement(Editable, {
         readOnly: true,
         placeholder: "",
@@ -73,7 +75,7 @@ var SDocViewer = /*#__PURE__*/function (_React$Component) {
             editor.handleTab && editor.handleTab(event);
           }
         }
-      })))));
+      }))))));
     }
   }]);
   return SDocViewer;

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

@@ -4,25 +4,40 @@ 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 context from '../../context';
 import './style.css';
 var DocOperations = /*#__PURE__*/function (_React$Component) {
   _inherits(DocOperations, _React$Component);
   var _super = _createSuper(DocOperations);
   function DocOperations() {
+    var _this;
     _classCallCheck(this, DocOperations);
-    return _super.apply(this, arguments);
+    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.toggleHistory = function (event) {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+      var historyURL = context.getSetting('historyURL');
+      window.location.href = historyURL;
+    };
+    return _this;
   }
   _createClass(DocOperations, [{
     key: "render",
     value: function render() {
+      var docPerm = context.getSetting('docPerm');
+      var historyURL = context.getSetting('historyURL');
       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"
+      })), docPerm === 'rw' && historyURL && /*#__PURE__*/React.createElement("span", {
+        className: "op-item",
+        onClick: this.toggleHistory
       }, /*#__PURE__*/React.createElement("i", {
         className: "iconfont icon-history"
       })), /*#__PURE__*/React.createElement(CollaboratorsOperation, null), /*#__PURE__*/React.createElement("span", {

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

@@ -5,6 +5,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { withTranslation } from 'react-i18next';
 import { EventBus } from '../../basic-sdk';
+import toaster from '../toast';
 import './style.css';
 var TipMessage = /*#__PURE__*/function (_React$Component) {
   _inherits(TipMessage, _React$Component);
@@ -13,6 +14,33 @@ var TipMessage = /*#__PURE__*/function (_React$Component) {
     var _this;
     _classCallCheck(this, TipMessage);
     _this = _super.call(this, props);
+    _this.onDisconnect = function () {
+      var t = _this.props.t;
+      var message = t('Server_is_not_connected_Operation_will_be_sent_to_server_later');
+      toaster.warning(message, {
+        hasCloseButton: true,
+        duration: null
+      });
+    };
+    _this.onReconnectError = function () {
+      if (!_this.isConnectError) {
+        _this.isConnectError = true;
+        var t = _this.props.t;
+        var message = t('Server_is_disconnected_Reconnecting');
+        toaster.closeAll();
+        toaster.warning(message, {
+          hasCloseButton: true,
+          duration: null
+        });
+      }
+    };
+    _this.onReconnect = function () {
+      _this.isConnectError = false;
+      var t = _this.props.t;
+      var message = t('Server_is_reconnected');
+      toaster.closeAll();
+      toaster.success(message); // close after serval seconds
+    };
     _this.onDocumentSaving = function () {
       _this.setState({
         isSaving: true,
@@ -65,6 +93,10 @@ var TipMessage = /*#__PURE__*/function (_React$Component) {
       var eventBus = EventBus.getInstance();
       this.unsubscribeSavingEvent = eventBus.subscribe('is-saving', this.onDocumentSaving);
       this.unsubscribeSavedEvent = eventBus.subscribe('saved', this.onDocumentSaved);
+      // offline reconnect
+      this.unsubscribeDisconnectEvent = eventBus.subscribe('disconnect', this.onDisconnect);
+      this.unsubscribeReconnectErrorEvent = eventBus.subscribe('reconnect_error', this.onReconnectError);
+      this.unsubscribeReconnectEvent = eventBus.subscribe('reconnect', this.onReconnect);
     }
   }, {
     key: "componentWillUnmount",

package/dist/components/toast/alert.js

@@ -0,0 +1,130 @@
+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 { css } from 'glamor';
+var Alert = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(Alert, _React$PureComponent);
+  var _super = _createSuper(Alert);
+  function Alert(props) {
+    var _this;
+    _classCallCheck(this, Alert);
+    _this = _super.call(this, props);
+    _this.containerStyle = css({
+      borderRadius: '3px',
+      backgroundColor: '#fff',
+      padding: '10px 16px',
+      display: 'flex',
+      boxSizing: 'border-box',
+      boxShadow: 'rgba(67, 90, 111, 0.3) 0px 0px 1px, rgba(67, 90, 111, 0.47) 0px 8px 10px -4px',
+      justifyContent: 'space-between',
+      flexDirection: 'row'
+    });
+    _this.containerBorderSuccess = css({
+      borderLeft: '3px solid rgb(71, 184, 129)'
+    });
+    _this.containerBorderWarn = css({
+      borderLeft: '3px solid rgb(217, 130, 43)'
+    });
+    _this.containerBorderDanger = css({
+      borderLeft: '3px solid rgb(236, 76, 71)'
+    });
+    _this.containerBorderNotify = css({
+      borderLeft: '3px solid rgb(16, 112, 202)'
+    });
+    _this.toastTextTitle = css({
+      fontWeight: '600',
+      fontSize: '14px',
+      color: '#435a6f',
+      margin: '0'
+    });
+    _this.toastTextChild = css({
+      fontSize: '14px',
+      color: '#999',
+      margin: '0'
+    });
+    _this.toastClose = css({
+      marginLeft: '15px',
+      height: '24px',
+      width: '24px',
+      lineHeight: '22px',
+      fontWeight: '700',
+      textAlign: 'center',
+      fontSize: '20px',
+      color: '#000',
+      cursor: 'pointer',
+      opacity: '0.5',
+      ':hover': {
+        opacity: 1
+      }
+    });
+    _this.toastIcon = css({
+      marginRight: '10px',
+      width: '14px',
+      height: '20px',
+      lineHeight: '20px'
+    });
+    return _this;
+  }
+  _createClass(Alert, [{
+    key: "getContainerStyle",
+    value: function getContainerStyle(intent) {
+      switch (intent) {
+        case 'success':
+          return {
+            borderStyle: this.containerBorderSuccess,
+            iconColor: css({
+              color: 'rgb(71, 184, 129)'
+            }),
+            iconClass: 'dtable-font dtable-icon-check-circle'
+          };
+        case 'warning':
+          return {
+            borderStyle: this.containerBorderWarn,
+            iconColor: css({
+              color: 'rgb(217, 130, 43)'
+            }),
+            iconClass: 'dtable-font dtable-icon-exclamation-triangle'
+          };
+        case 'none':
+          return {
+            borderStyle: this.containerBorderNotify,
+            iconColor: css({
+              color: 'rgb(16, 112, 202)'
+            }),
+            iconClass: 'dtable-font dtable-icon-description'
+          };
+        case 'danger':
+          return {
+            borderStyle: this.containerBorderDanger,
+            iconColor: css({
+              color: 'rgb(236, 76, 71)'
+            }),
+            iconClass: 'dtable-font dtable-icon-exclamation-circle'
+          };
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var toastStyle = this.getContainerStyle(this.props.intent);
+      return /*#__PURE__*/React.createElement("div", css(toastStyle.borderStyle, this.containerStyle), /*#__PURE__*/React.createElement("div", {
+        className: this.toastIcon
+      }, /*#__PURE__*/React.createElement("i", Object.assign({
+        className: toastStyle.iconClass
+      }, toastStyle.iconColor))), /*#__PURE__*/React.createElement("div", {
+        className: this.toastTextContainer
+      }, /*#__PURE__*/React.createElement("p", {
+        className: this.toastTextTitle
+      }, this.props.title), this.props.children ? /*#__PURE__*/React.createElement("p", {
+        className: this.toastTextChild
+      }, this.props.children) : null), this.props.isRemoveable && /*#__PURE__*/React.createElement("div", {
+        onClick: this.props.onRemove,
+        className: this.toastClose
+      }, /*#__PURE__*/React.createElement("span", null, "\xD7")));
+    }
+  }]);
+  return Alert;
+}(React.PureComponent);
+export default Alert;

package/dist/components/toast/index.js

@@ -0,0 +1,3 @@
+import Toaster from './toaster';
+var toaster = new Toaster();
+export default toaster;

package/dist/components/toast/toast.js

@@ -0,0 +1,164 @@
+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 { css } from 'glamor';
+import Transition from 'react-transition-group/Transition';
+import Alert from './alert';
+var animationEasing = {
+  deceleration: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
+  acceleration: 'cubic-bezier(0.4, 0.0, 1, 1)',
+  spring: 'cubic-bezier(0.175, 0.885, 0.320, 1.175)'
+};
+var ANIMATION_DURATION = 240;
+var openAnimation = css.keyframes('openAnimation', {
+  from: {
+    opacity: 0,
+    transform: 'translateY(-120%)'
+  },
+  to: {
+    transform: 'translateY(0)'
+  }
+});
+var closeAnimation = css.keyframes('closeAnimation', {
+  from: {
+    transform: 'scale(1)',
+    opacity: 1
+  },
+  to: {
+    transform: 'scale(0.9)',
+    opacity: 0
+  }
+});
+var animationStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  height: 0,
+  transition: "all ".concat(ANIMATION_DURATION, "ms ").concat(animationEasing.deceleration),
+  '&[data-state="entering"], &[data-state="entered"]': {
+    animation: "".concat(openAnimation, " ").concat(ANIMATION_DURATION, "ms ").concat(animationEasing.spring, " both")
+  },
+  '&[data-state="exiting"]': {
+    animation: "".concat(closeAnimation, " 120ms ").concat(animationEasing.acceleration, " both")
+  }
+});
+var Toast = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(Toast, _React$PureComponent);
+  var _super = _createSuper(Toast);
+  function Toast() {
+    var _this;
+    _classCallCheck(this, Toast);
+    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.state = {
+      isShown: true,
+      height: 0
+    };
+    _this.close = function (event) {
+      if (event) {
+        event.nativeEvent.stopImmediatePropagation();
+        event.stopPropagation();
+      }
+      _this.clearCloseTimer();
+      _this.setState({
+        isShown: false
+      });
+    };
+    _this.startCloseTimer = function () {
+      if (_this.props.duration) {
+        _this.closeTimer = setTimeout(function () {
+          _this.close();
+        }, _this.props.duration * 1000);
+      }
+    };
+    _this.clearCloseTimer = function () {
+      if (_this.closeTimer) {
+        clearTimeout(_this.closeTimer);
+        _this.closeTimer = null;
+      }
+    };
+    _this.handleMouseEnter = function () {
+      _this.clearCloseTimer();
+    };
+    _this.handleMouseLeave = function () {
+      _this.startCloseTimer();
+    };
+    _this.onRef = function (ref) {
+      if (ref === null) return;
+      var _ref$getBoundingClien = ref.getBoundingClientRect(),
+        height = _ref$getBoundingClien.height;
+      _this.setState({
+        height: height
+      });
+    };
+    return _this;
+  }
+  _createClass(Toast, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.isShown !== this.props.isShown) {
+        // eslint-disable-next-line react/no-did-update-set-state
+        this.setState({
+          isShown: this.props.isShown
+        });
+      }
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.startCloseTimer();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.clearCloseTimer();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      return /*#__PURE__*/React.createElement(Transition, {
+        appear: true,
+        unmountOnExit: true,
+        timeout: ANIMATION_DURATION,
+        in: this.state.isShown,
+        onExited: this.props.onRemove
+      }, function (state) {
+        return /*#__PURE__*/React.createElement("div", {
+          "data-state": state,
+          className: animationStyles,
+          onMouseEnter: _this2.handleMouseEnter,
+          onMouseLeave: _this2.handleMouseLeave,
+          style: {
+            height: _this2.state.height,
+            zIndex: _this2.props.zIndex,
+            marginBottom: _this2.state.isShown ? 0 : -_this2.state.height
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          ref: _this2.onRef,
+          style: {
+            padding: 8
+          }
+        }, /*#__PURE__*/React.createElement(Alert, {
+          intent: _this2.props.intent,
+          title: _this2.props.title,
+          "aria-label": _this2.props.title,
+          children: _this2.props.children || '',
+          isRemoveable: _this2.props.hasCloseButton,
+          onRemove: function onRemove(event) {
+            return _this2.close(event);
+          }
+        })));
+      });
+    }
+  }]);
+  return Toast;
+}(React.PureComponent);
+Toast.defaultProps = {
+  intent: 'none'
+};
+export { Toast as default };

package/dist/components/toast/toastManager.js

@@ -0,0 +1,149 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+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";
+var _excluded = ["id", "description"];
+import React from 'react';
+import { css } from 'glamor';
+import Toast from './toast';
+var wrapperClass = css({
+  maxWidth: 560,
+  margin: '0 auto',
+  top: 0,
+  left: 0,
+  right: 0,
+  position: 'fixed',
+  zIndex: 30
+});
+var hasCustomId = function hasCustomId(settings) {
+  return Object.hasOwnProperty.call(settings, 'id');
+};
+var ToastManager = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(ToastManager, _React$PureComponent);
+  var _super = _createSuper(ToastManager);
+  function ToastManager(props, context) {
+    var _this;
+    _classCallCheck(this, ToastManager);
+    _this = _super.call(this, props, context);
+    _this.getToasts = function () {
+      return _this.state.toasts;
+    };
+    _this.closeAll = function () {
+      _this.getToasts().forEach(function (toast) {
+        return toast.close();
+      });
+    };
+    _this.notify = function (title, settings) {
+      // If there's a custom toast ID passed, close existing toasts with the same custom ID
+      if (hasCustomId(settings)) {
+        var _iterator = _createForOfIteratorHelper(_this.state.toasts),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var toast = _step.value;
+            // Since unique ID is still appended to a custom ID, skip the unique ID and check only prefix
+            if (String(toast.id).startsWith(settings.id)) {
+              _this.closeToast(toast.id);
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      }
+      var instance = _this.createToastInstance(title, settings);
+      _this.onClose = settings.onClose;
+      _this.setState(function (previousState) {
+        return {
+          toasts: [instance].concat(_toConsumableArray(previousState.toasts))
+        };
+      });
+      return instance;
+    };
+    _this.createToastInstance = function (title, settings) {
+      var uniqueId = ++ToastManager.idCounter;
+      var id = hasCustomId(settings) ? "".concat(settings.id, "-").concat(uniqueId) : uniqueId;
+      var hasCloseButton = settings.hasCloseButton || true;
+      var duration = settings.duration || 2;
+      if (settings.hasCloseButton !== undefined) {
+        hasCloseButton = settings.hasCloseButton;
+      }
+      if (settings.duration !== undefined) {
+        duration = settings.duration;
+      }
+      return {
+        id: id,
+        title: title,
+        description: settings.description,
+        hasCloseButton: hasCloseButton,
+        duration: duration,
+        close: function close() {
+          return _this.closeToast(id);
+        },
+        intent: settings.intent
+      };
+    };
+    /**
+     * This will set isShown on the Toast which will close the toast.
+     * It won't remove the toast until onExited triggers onRemove.
+     */
+    _this.closeToast = function (id) {
+      _this.setState(function (previousState) {
+        return {
+          toasts: previousState.toasts.map(function (toast) {
+            if (toast.id === id) {
+              return _objectSpread(_objectSpread({}, toast), {}, {
+                isShown: false
+              });
+            }
+            return toast;
+          })
+        };
+      });
+    };
+    _this.removeToast = function (id) {
+      _this.onClose && _this.onClose();
+      _this.setState(function (previousState) {
+        return {
+          toasts: previousState.toasts.filter(function (toast) {
+            return toast.id !== id;
+          })
+        };
+      });
+    };
+    props.bindNotify(_this.notify);
+    props.bindGetToasts(_this.getToasts);
+    props.bindCloseAll(_this.closeAll);
+    _this.state = {
+      toasts: []
+    };
+    return _this;
+  }
+  _createClass(ToastManager, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      return /*#__PURE__*/React.createElement("span", {
+        className: wrapperClass
+      }, this.state.toasts.map(function (_ref) {
+        var id = _ref.id,
+          description = _ref.description,
+          props = _objectWithoutProperties(_ref, _excluded);
+        return /*#__PURE__*/React.createElement(Toast, Object.assign({
+          key: id,
+          onRemove: function onRemove() {
+            return _this2.removeToast(id);
+          }
+        }, props), description);
+      }));
+    }
+  }]);
+  return ToastManager;
+}(React.PureComponent);
+ToastManager.idCounter = 0;
+export { ToastManager as default };

package/dist/components/toast/toaster.js

@@ -0,0 +1,65 @@
+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 React from 'react';
+import ReactDOM from 'react-dom';
+import ToastManager from './toastManager';
+var isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';
+
+/**
+ * The Toaster manages the interactionsb between
+ * the ToasterManger and the toast API.
+ */
+var Toaster = /*#__PURE__*/_createClass(function Toaster() {
+  var _this = this;
+  _classCallCheck(this, Toaster);
+  this._bindNotify = function (handler) {
+    _this.notifyHandler = handler;
+  };
+  this._bindGetToasts = function (handler) {
+    _this.getToastsHandler = handler;
+  };
+  this._bindCloseAll = function (handler) {
+    _this.closeAllHandler = handler;
+  };
+  this.getToasts = function () {
+    return _this.getToastsHandler();
+  };
+  this.closeAll = function () {
+    return _this.closeAllHandler();
+  };
+  this.notify = function (title) {
+    var settings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return _this.notifyHandler(title, _objectSpread(_objectSpread({}, settings), {}, {
+      intent: 'none'
+    }));
+  };
+  this.success = function (title) {
+    var settings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return _this.notifyHandler(title, _objectSpread(_objectSpread({}, settings), {}, {
+      intent: 'success'
+    }));
+  };
+  this.warning = function (title) {
+    var settings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return _this.notifyHandler(title, _objectSpread(_objectSpread({}, settings), {}, {
+      intent: 'warning'
+    }));
+  };
+  this.danger = function (title) {
+    var settings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return _this.notifyHandler(title, _objectSpread(_objectSpread({}, settings), {}, {
+      intent: 'danger'
+    }));
+  };
+  if (!isBrowser) return;
+  var container = document.createElement('div');
+  container.setAttribute('data-evergreen-toaster-container', '');
+  document.body.appendChild(container);
+  ReactDOM.render( /*#__PURE__*/React.createElement(ToastManager, {
+    bindNotify: this._bindNotify,
+    bindGetToasts: this._bindGetToasts,
+    bindCloseAll: this._bindCloseAll
+  }), container);
+});
+export { Toaster as default };

package/dist/context.js

@@ -82,7 +82,8 @@ var Context = /*#__PURE__*/function () {
       this.config = {
         docUuid: docUuid,
         accessToken: accessToken,
-        sdocServer: new Url(sdocServer).origin
+        sdocServer: new Url(sdocServer).origin,
+        user: this.getUserInfo()
       };
       return this.config;
     }

package/package.json

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

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

@@ -230,5 +230,10 @@
   "Saving": "Saving...",
   "Collaborators": "Collaborators",
   "Online_members": "Online members",
-  "me": "me"
+  "me": "me",
+  "Server_is_not_connected_Operation_will_be_sent_to_server_later": "Server is not connected. Operation will be sent to server later.",
+  "Server_is_disconnected_Reconnecting": "Server is disconnected. Reconnecting...",
+  "Server_is_reconnected": "Server is reconnected.",
+  "Outline": "Outline",
+  "Headings_you_add_to_the_document_will_appear_here": "Headings you add to the document will appear here"
 }

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

@@ -225,5 +225,8 @@
   "All_changes_saved": "所有更改均已保存",
   "Saving": "保存中...",
   "Online_members": "在线成员",
-  "me": "我"
+  "me": "我",
+  "Server_is_not_connected_Operation_will_be_sent_to_server_later": "服务器未连接。 操作稍后将发送到服务器。",
+  "Server_is_disconnected_Reconnecting": "服务器断开连接。正在重新连接...",
+  "Server_is_reconnected": "服务器已重新连接。"
 }

package/public/media/sdoc-editor-font/iconfont.svg

@@ -14,6 +14,10 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="cancel" unicode="&#58945;" d="M512 441.6L214.4 742.4 185.6 768 128 710.4l25.6-28.8 300.8-297.6-300.8-297.6-25.6-28.8L185.6 0l28.8 25.6 297.6 300.8 297.6-300.8 28.8-25.6 57.6 57.6-25.6 28.8-300.8 297.6 300.8 297.6 25.6 28.8L838.4 768l-28.8-25.6-297.6-300.8z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="table-of-content" unicode="&#58946;" d="M64 800h512c35.2 0 64-28.8 64-64s-28.8-64-64-64H64C28.8 672 0 700.8 0 736s28.8 64 64 64zM998.4 355.2l-12.8-12.8-172.8-172.8c-25.6-25.6-64-25.6-89.6 0s-25.6 64 0 89.6l134.4 134.4-134.4 134.4c-25.6 25.6-25.6 64 0 89.6s64 25.6 89.6 0l172.8-172.8 9.6-9.6c12.8-12.8 19.2-25.6 19.2-41.6v-3.2c0-12.8-9.6-28.8-16-35.2zM64 448h800c35.2 0 64-28.8 64-64s-28.8-64-64-64H64c-35.2 0-64 28.8-64 64s28.8 64 64 64zM64 96h512c35.2 0 64-28.8 64-64s-28.8-64-64-64H64c-35.2 0-64 28.8-64 64s28.8 64 64 64z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="history" unicode="&#58944;" d="M544 864c265.6 0 480-214.4 480-480S809.6-96 544-96c-115.2 0-224 41.6-304 108.8-6.4 6.4-12.8 12.8-22.4 19.2l-9.6 9.6c-9.6 25.6-6.4 51.2 12.8 73.6l3.2 6.4c22.4 22.4 44.8 32 70.4 22.4l6.4-3.2 6.4-6.4c3.2-3.2 9.6-9.6 16-12.8 60.8-51.2 137.6-83.2 220.8-83.2 188.8 0 342.4 153.6 342.4 342.4S732.8 726.4 544 726.4C387.2 726.4 256 624 214.4 480h44.8c19.2 0 32-12.8 32-32 0-6.4-3.2-12.8-6.4-19.2L169.6 262.4c-9.6-12.8-28.8-19.2-44.8-6.4l-9.6 9.6L0 432c-9.6 16-6.4 35.2 9.6 44.8C16 480 22.4 480 28.8 480h44.8C115.2 697.6 304 860.8 531.2 864H544z m-6.4-224c32 0 60.8-25.6 60.8-60.8V400l115.2-89.6 3.2-3.2c22.4-19.2 22.4-54.4 3.2-76.8-22.4-25.6-60.8-25.6-86.4-6.4L476.8 348.8V582.4c0 28.8 28.8 57.6 60.8 57.6z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="share" unicode="&#58895;" d="M662.4 681.6c0 83.2 67.2 150.4 150.4 150.4S960 764.8 960 681.6s-67.2-150.4-150.4-150.4-147.2 70.4-147.2 150.4zM371.2 502.4l246.4 124.8c6.4-25.6 16-48 32-67.2L403.2 435.2c-3.2 25.6-16 48-32 67.2zM64 384c0 83.2 67.2 150.4 150.4 150.4S364.8 467.2 364.8 384s-67.2-150.4-150.4-150.4S64 300.8 64 384z m307.2-118.4c16 19.2 25.6 41.6 32 67.2L649.6 208c-16-19.2-25.6-41.6-32-67.2L371.2 265.6z m291.2-179.2c0 83.2 67.2 150.4 150.4 150.4s150.4-67.2 150.4-150.4S892.8-64 809.6-64s-147.2 67.2-147.2 150.4z"  horiz-adv-x="1024" />

package/public/media/sdoc-editor-font.css

@@ -16,6 +16,13 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-cancel:before {
+  content: "\e641";
+}
+
+.icon-table-of-content:before {
+  content: "\e642";
+}
 
 .icon-history:before {
   content: "\e640";