@seafile/seafile-sdoc-editor 2.0.0

package/dist/components/draft-dropdown/style.css

@@ -0,0 +1,43 @@
+.sdoc-draft-menu {
+  position: relative;
+  margin-left: 0.5rem;
+}
+
+.sdoc-draft-identifier {
+  display: inline-block;
+  font-size: 14px;
+  color: #888;
+  background: #eee;
+  padding: 0 8px; 
+  height: 20px;
+  line-height: 20px;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.sdoc-draft-identifier:hover {
+  background: #dbdbdb;
+}
+
+.sdoc-draft-menu .draft-popover {
+  position: absolute;
+  top: 25px;
+  left: 0;
+  width: 178px;
+  background-color: #fff;
+  border: 1px solid #e5e6e8;
+  border-radius: 2px;
+  padding: 8px 0;
+  box-shadow: 0 0 10px #e5e6e8;
+  z-index: 10;
+}
+
+.sdoc-draft-menu .draft-popover .draft-menu-item {
+  cursor: pointer;
+  width: 100%;
+  padding: 4px 12px;
+}
+
+.sdoc-draft-menu .draft-popover .draft-menu-item:hover {
+  background-color: rgb(245, 245, 245);
+}

package/dist/components/error-boundary/error-page.css

@@ -0,0 +1,16 @@
+.error-page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+.error-page .error-tip {
+  color: red;
+}
+
+.error-page .error-button {
+  margin-top: 20px;
+}

package/dist/components/error-boundary/error-page.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _sdocEditor = require("@seafile/sdoc-editor");
+require("./error-page.css");
+function ErrorPage(_ref) {
+  var t = _ref.t;
+  var normalizeSdoc = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
+    var res, success;
+    return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return _sdocEditor.context.normalizeSdocContent();
+        case 2:
+          res = _context.sent;
+          success = res.data.success;
+          if (success) {
+            // eslint-disable-next-line no-restricted-globals
+            location.reload(true);
+          }
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "error-page"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "error-tip"
+  }, t('Sdoc_error_tip')), /*#__PURE__*/_react["default"].createElement(_reactstrap.Button, {
+    className: "error-button",
+    onClick: function onClick() {
+      return normalizeSdoc();
+    }
+  }, t('Repair')));
+}
+var _default = exports["default"] = (0, _reactI18next.withTranslation)('sdoc-editor')(ErrorPage);

package/dist/components/error-boundary/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/callSuper"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _react = _interopRequireWildcard(require("react"));
+var _errorPage = _interopRequireDefault(require("./error-page"));
+var ErrorBoundary = exports["default"] = /*#__PURE__*/function (_PureComponent) {
+  function ErrorBoundary(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, ErrorBoundary);
+    _this = (0, _callSuper2["default"])(this, ErrorBoundary, [props]);
+    _this.state = {
+      hasError: false
+    };
+    return _this;
+  }
+  (0, _inherits2["default"])(ErrorBoundary, _PureComponent);
+  return (0, _createClass2["default"])(ErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, errorInfo) {
+      console.log(error, errorInfo);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.state.hasError) {
+        return /*#__PURE__*/_react["default"].createElement(_errorPage["default"], null);
+      }
+      return this.props.children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError(error) {
+      return {
+        hasError: true
+      };
+    }
+  }]);
+}(_react.PureComponent);

package/dist/components/modal-header/index.css

@@ -0,0 +1,18 @@
+.sdoc-add-link-close-icon {
+  border-radius: 3px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  width: 28px;
+}
+
+.sdoc-add-link-close-icon .sdocfont {
+  font-size: 18px;
+  font-weight: 600;
+  color: #666;
+}
+
+.sdoc-add-link-close-icon:hover {
+  background-color: #efefef;
+}

package/dist/components/modal-header/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = SdocModalHeader;
+var _react = _interopRequireDefault(require("react"));
+var _reactstrap = require("reactstrap");
+require("./index.css");
+function SdocModalHeader(_ref) {
+  var toggle = _ref.toggle,
+    children = _ref.children;
+  var close = null;
+  if (toggle) {
+    close = /*#__PURE__*/_react["default"].createElement("span", {
+      className: "sdoc-add-link-close-icon",
+      onClick: toggle
+    }, /*#__PURE__*/_react["default"].createElement("i", {
+      className: "sdocfont sdoc-sm-close",
+      "aria-hidden": "true"
+    }));
+  }
+  return /*#__PURE__*/_react["default"].createElement(_reactstrap.ModalHeader, {
+    close: close
+  }, children);
+}

package/dist/components/modal-portal/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/callSuper"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _react = _interopRequireDefault(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var modalRoot = document.getElementById('modal-wrapper');
+var ModalPortal = /*#__PURE__*/function (_React$Component) {
+  function ModalPortal(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, ModalPortal);
+    _this = (0, _callSuper2["default"])(this, ModalPortal, [props]);
+    _this.el = document.createElement('div');
+    return _this;
+  }
+  (0, _inherits2["default"])(ModalPortal, _React$Component);
+  return (0, _createClass2["default"])(ModalPortal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      modalRoot.appendChild(this.el);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      modalRoot.removeChild(this.el);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_reactDom["default"].createPortal(this.props.children, this.el);
+    }
+  }]);
+}(_react["default"].Component);
+var _default = exports["default"] = ModalPortal;

package/dist/components/switch/index.css

@@ -0,0 +1,14 @@
+.seadoc-switch.small .custom-switch-indicator {
+  width: 22px;
+  height: 12px;
+  border-radius: 6px;
+}
+
+.seadoc-switch.small .custom-switch-indicator:before {
+  height: 8px;
+  width: 8px;
+}
+
+.seadoc-switch.small .custom-switch-input:checked~.custom-switch-indicator:before {
+  left: 12px;
+}

package/dist/components/switch/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./index.css");
+function Switch(props) {
+  var onChange = props.onChange,
+    checked = props.checked,
+    placeholder = props.placeholder,
+    disabled = props.disabled,
+    className = props.className,
+    size = props.size;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])('seadoc-switch position-relative', className, size)
+  }, /*#__PURE__*/_react["default"].createElement("label", {
+    className: "custom-switch"
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    className: "custom-switch-input",
+    type: "checkbox",
+    checked: checked,
+    onChange: onChange,
+    name: "custom-switch-checkbox",
+    disabled: disabled
+  }), placeholder && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "custom-switch-description text-truncate"
+  }, placeholder), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "custom-switch-indicator"
+  })));
+}
+var _default = exports["default"] = Switch;

package/dist/components/tip-dialog/index.css

@@ -0,0 +1,48 @@
+.sdoc-tip-dialog .highlight-bg-color {
+  background-color: #FF8000;
+  border-color: #FF8000;
+}
+
+.sdoc-tip-dialog .sdoc-tip-dialog-custom-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 46px;
+  padding-bottom: 40px;
+}
+
+.sdoc-tip-dialog .sdoc-tip-dialog-custom-container .sdoc-tip-img-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 140px;
+  height: 140px;
+  overflow: hidden;
+}
+
+.sdoc-tip-dialog .sdoc-tip-dialog-custom-container .sdoc-tip-content {
+  width: 100%;
+  padding: 10px 16px 64px 16px;
+  text-align: center;
+}
+
+.sdoc-tip-dialog .sdoc-tip-dialog-custom-container .sdoc-tip-operation-btn {
+  min-width: 140px;
+}
+
+.sdoc-tip-dialog .sdoc-tip-dialog-custom-container.publishing {
+  padding: 2rem;
+  height: 180px;
+  justify-content: center;
+}
+
+.sdoc-tip-dialog .sdoc-tip-dialog-custom-container.publishing .common-loading-tip {
+  width: 30px;
+  height: 30px;
+  border-width: 4px;
+}
+
+.sdoc-tip-dialog .sdoc-tip-dialog-custom-container.publishing .sdoc-tip-content {
+  margin-top: 8px;
+  padding: 0;
+}

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

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _sdocEditor = require("@seafile/sdoc-editor");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _contentReplaced = _interopRequireDefault(require("../../assets/images/content-replaced.png"));
+var _constants = require("../../constants");
+var _modalHeader = _interopRequireDefault(require("../modal-header"));
+require("./index.css");
+var NOT_CLOSE_DIALOG_TIP_TYPE = [_constants.TIP_TYPE.HAS_BEEN_REPLACED, _constants.TIP_TYPE.HAS_BEEN_PUBLISHED, _constants.TIP_TYPE.CHECKING, _constants.TIP_TYPE.PUBLISHING];
+var TipDialog = function TipDialog(_ref) {
+  var className = _ref.className,
+    tipType = _ref.tipType,
+    onClose = _ref.onClose,
+    propsOnSubmit = _ref.onSubmit,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? 1071 : _ref$zIndex,
+    children = _ref.children;
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isSubmitting = _useState2[0],
+    setSubmitting = _useState2[1];
+  var closeDialog = (0, _react.useCallback)(function () {
+    if (NOT_CLOSE_DIALOG_TIP_TYPE.includes(tipType)) return;
+    if (isSubmitting) return;
+    onClose && onClose();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tipType, isSubmitting]);
+  var onSubmit = (0, _react.useCallback)(function () {
+    if ([_constants.TIP_TYPE.HAS_CONFLICT_BEFORE_VIEW_CHANGES, _constants.TIP_TYPE.HAS_CONFLICT_BEFORE_PUBLISH].includes(tipType)) {
+      closeDialog();
+      return;
+    }
+    setSubmitting(true);
+    propsOnSubmit && propsOnSubmit();
+  }, [closeDialog, propsOnSubmit, tipType]);
+  (0, _react.useEffect)(function () {
+    if (isSubmitting) {
+      var timer = setTimeout(function () {
+        setSubmitting(false);
+      }, 3000);
+      return function () {
+        clearTimeout(timer);
+      };
+    }
+  }, [isSubmitting]);
+  var refreshPage = (0, _react.useCallback)(function () {
+    window.location.reload();
+  }, []);
+  var renderTip = (0, _react.useCallback)(function () {
+    if (tipType === _constants.TIP_TYPE.HAS_BEEN_REPLACED) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "sdoc-tip-dialog-custom-container"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "sdoc-tip-img-container"
+      }, /*#__PURE__*/_react["default"].createElement("img", {
+        src: _contentReplaced["default"],
+        alt: "",
+        height: "140"
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "sdoc-tip-content"
+      }, t(_constants.TIP_CONTENT[tipType])), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "sdoc-tip-operations-container"
+      }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Button, {
+        color: "primary",
+        className: "highlight-bg-color sdoc-tip-operation-btn",
+        onClick: refreshPage
+      }, t('Refresh'))));
+    }
+    if (tipType === _constants.TIP_TYPE.PUBLISHING) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "sdoc-tip-dialog-custom-container publishing"
+      }, /*#__PURE__*/_react["default"].createElement(_sdocEditor.FileLoading, null), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "sdoc-tip-content"
+      }, t(_constants.TIP_CONTENT[tipType])));
+    }
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_modalHeader["default"], {
+      toggle: NOT_CLOSE_DIALOG_TIP_TYPE.includes(tipType) ? undefined : closeDialog
+    }, t(_constants.TIP_TITLE[tipType])), /*#__PURE__*/_react["default"].createElement(_reactstrap.ModalBody, {
+      className: "sdoc-tip-body"
+    }, children ? children : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, t(_constants.TIP_CONTENT[tipType]))), !NOT_CLOSE_DIALOG_TIP_TYPE.includes(tipType) && /*#__PURE__*/_react["default"].createElement(_reactstrap.ModalFooter, null, /*#__PURE__*/_react["default"].createElement(_reactstrap.Button, {
+      color: "secondary",
+      className: "mr-2",
+      onClick: closeDialog
+    }, t('Cancel')), /*#__PURE__*/_react["default"].createElement(_reactstrap.Button, {
+      color: "primary",
+      className: (0, _classnames["default"])('highlight-bg-color', {
+        'd-flex align-items-center': isSubmitting
+      }),
+      disabled: isSubmitting,
+      onClick: onSubmit
+    }, isSubmitting && /*#__PURE__*/_react["default"].createElement("span", {
+      className: "submit-loading-container mr-2"
+    }, /*#__PURE__*/_react["default"].createElement(_sdocEditor.FileLoading, null)), t('Confirm'))));
+  }, [children, closeDialog, isSubmitting, onSubmit, t, tipType, refreshPage]);
+  return /*#__PURE__*/_react["default"].createElement(_reactstrap.Modal, {
+    isOpen: true,
+    autoFocus: false,
+    zIndex: zIndex,
+    returnFocusAfterClose: false,
+    toggle: closeDialog,
+    className: (0, _classnames["default"])('sdoc-tip-dialog', className),
+    contentClassName: "sdoc-tip-modal"
+  }, renderTip());
+};
+var _default = exports["default"] = TipDialog;

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

@@ -0,0 +1,189 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/callSuper"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _reactI18next = require("react-i18next");
+var _sdocEditor = require("@seafile/sdoc-editor");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+require("./style.css");
+var TipMessage = /*#__PURE__*/function (_React$Component) {
+  function TipMessage(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, TipMessage);
+    _this = (0, _callSuper2["default"])(this, TipMessage, [props]);
+    (0, _defineProperty2["default"])(_this, "onOperationExecuteError", function () {
+      var t = _this.props.t;
+      var message = t('Failed_to_execute_operation_on_server');
+      _sdocEditor.toaster.warning(message, {
+        hasCloseButton: true
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "onSyncServerOperationError", function () {
+      var t = _this.props.t;
+      var message = t('Failed_to_sync_with_server_operations');
+      _sdocEditor.toaster.danger(message, {
+        hasCloseButton: false,
+        duration: null
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "onInternalServerExecError", function () {
+      var t = _this.props.t;
+      var message = t('Internal_server_exec_operations_error');
+      _sdocEditor.toaster.danger(message, {
+        hasCloseButton: false,
+        duration: null
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "onTokenExpiredError", function (msg) {
+      var t = _this.props.t;
+      var message = t('Token_expired_Please_refresh_the_page');
+      _sdocEditor.toaster.closeAll();
+      _sdocEditor.toaster.danger(message, {
+        duration: null
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "onPendingOpExceedLimit", function () {
+      var t = _this.props.t;
+      _sdocEditor.toaster.closeAll();
+      var message = t('Pending_operations_exceed_limit');
+      _sdocEditor.toaster.warning(message, {
+        duration: 5
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "onDisconnect", function () {
+      var _this$props = _this.props,
+        t = _this$props.t,
+        isEditMode = _this$props.isEditMode;
+      if (!isEditMode) return;
+      var message = t('Server_is_not_connected_Operation_will_be_sent_to_server_later');
+      _sdocEditor.toaster.warning(message, {
+        hasCloseButton: true,
+        duration: null
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "onReconnectError", function () {
+      if (!_this.isConnectError) {
+        _this.isConnectError = true;
+        var t = _this.props.t;
+        var message = t('Server_is_disconnected_Reconnecting');
+        _sdocEditor.toaster.closeAll();
+        _sdocEditor.toaster.warning(message, {
+          hasCloseButton: true,
+          duration: null
+        });
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "onReconnect", function () {
+      _this.isConnectError = false;
+      var t = _this.props.t;
+      var message = t('Server_is_reconnected');
+      _sdocEditor.toaster.closeAll();
+      _sdocEditor.toaster.success(message); // close after serval seconds
+    });
+    (0, _defineProperty2["default"])(_this, "onDocumentSaving", function () {
+      _this.setState({
+        isSaving: true,
+        isSaved: false
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "onDocumentSaved", function (lastSavedAt) {
+      if (_this.saveTimer) clearTimeout(_this.saveTimer);
+      if (_this.resetTimer) clearTimeout(_this.resetTimer);
+      _this.saveTimer = setTimeout(function () {
+        _this.setState({
+          lastSavedAt: lastSavedAt,
+          isSaving: false,
+          isSaved: true
+        });
+      }, 1000);
+      _this.resetTimer = setTimeout(function () {
+        _this.setState({
+          isSaving: false,
+          isSaved: false
+        });
+      }, 2000);
+    });
+    (0, _defineProperty2["default"])(_this, "render", function () {
+      var t = _this.props.t;
+      var _this$state = _this.state,
+        isSaved = _this$state.isSaved,
+        isSaving = _this$state.isSaving,
+        lastSavedAt = _this$state.lastSavedAt;
+      if (isSaving && !isSaved) {
+        return /*#__PURE__*/_react["default"].createElement("span", {
+          className: "tip-message"
+        }, t('Saving'));
+      }
+      if (!isSaving && isSaved) {
+        return /*#__PURE__*/_react["default"].createElement("span", {
+          className: "tip-message"
+        }, t('All_changes_saved'));
+      }
+      if (lastSavedAt) {
+        return /*#__PURE__*/_react["default"].createElement("span", {
+          className: "tip-message"
+        }, /*#__PURE__*/_react["default"].createElement("span", {
+          className: "sdocfont sdoc-save-tip mr-2"
+        }), /*#__PURE__*/_react["default"].createElement("span", {
+          className: "save-time"
+        }, (0, _dayjs["default"])(lastSavedAt).format('HH:mm')));
+      }
+      return null;
+    });
+    _this.state = {
+      isSaved: false,
+      isSaving: false,
+      lastSavedAt: ''
+    };
+    _this.saveTimer = null;
+    return _this;
+  }
+  (0, _inherits2["default"])(TipMessage, _React$Component);
+  return (0, _createClass2["default"])(TipMessage, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var eventBus = _sdocEditor.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);
+
+      // server return error
+      this.unsubscribeOpExecError = eventBus.subscribe('execute_client_operations_error', this.onOperationExecuteError);
+      this.unsubscribeSyncServerOpError = eventBus.subscribe('sync_server_operations_error', this.onSyncServerOperationError);
+      this.unsubscribeDocumentLoadError = eventBus.subscribe('load_document_content_error', this.onInternalServerExecError);
+      this.unsubscribeOperationsSaveError = eventBus.subscribe('save_operations_to_database_error', this.onInternalServerExecError);
+      this.unsubscribeOperationsSaveError = eventBus.subscribe('token_expired', this.onTokenExpiredError);
+
+      // local error
+      this.unsubscribePendingOpExceedLimit = eventBus.subscribe('pending_operations_exceed_limit', this.onPendingOpExceedLimit);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.unsubscribeSavingEvent();
+      this.unsubscribeSavedEvent();
+      this.unsubscribeDisconnectEvent();
+      this.unsubscribeReconnectErrorEvent();
+      this.unsubscribeReconnectEvent();
+      this.unsubscribeOpExecError();
+      this.unsubscribeSyncServerOpError();
+      this.unsubscribePendingOpExceedLimit();
+      this.unsubscribeDocumentLoadError();
+      this.unsubscribeOperationsSaveError();
+      clearTimeout(this.saveTimer);
+    }
+  }]);
+}(_react["default"].Component);
+var _default = exports["default"] = (0, _reactI18next.withTranslation)('sdoc-editor')(TipMessage);

package/dist/components/tip-message/style.css

@@ -0,0 +1,15 @@
+.sdoc-editor-page-wrapper .tip-message {
+  margin-left: 12px;
+  font-size: 12px;
+  opacity: 0.75;
+  color: #999;
+  width: max-content;
+  height: 27px;
+  line-height: 27px;
+  display: inline-flex;
+}
+
+.sdoc-editor-page-wrapper .tip-message .sdocfont {
+  padding-top: 1px;
+  font-size: 14px;
+}