@seafile/sdoc-editor 0.1.18 → 0.1.19

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/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/package.json

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

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

@@ -230,5 +230,8 @@
   "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."
 }

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": "服务器已重新连接。"
 }