@seafile/sdoc-editor 0.1.8 → 0.1.9

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

@@ -0,0 +1,4 @@
+.sdoc-editor-page-header .doc-info {
+  display: flex;
+  align-items: center;
+}

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

@@ -156,6 +156,9 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, doc
       _this.editor.isRemote = false;
     });
   };
+  this.subscribe = function (type, handler) {
+    return _this.eventBus.subscribe(type, handler);
+  };
   this.dispatchConnectState = function (type, message) {
     _this.eventBus.dispatch(type, message);
   };

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

@@ -0,0 +1,39 @@
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+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 './style.css';
+var TipMessage = /*#__PURE__*/function (_React$Component) {
+  _inherits(TipMessage, _React$Component);
+  var _super = _createSuper(TipMessage);
+  function TipMessage() {
+    var _this;
+    _classCallCheck(this, TipMessage);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.render = function () {
+      var _this$props = _this.props,
+        t = _this$props.t,
+        isSaved = _this$props.isSaved,
+        isSaving = _this$props.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;
+    };
+    return _this;
+  }
+  return _createClass(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/pages/simple-editor.js

@@ -7,9 +7,11 @@ 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 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);
@@ -17,6 +19,25 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
     var _this;
     _classCallCheck(this, SimpleEditor);
     _this = _super.call(this, props);
+    _this.onDocumentSaving = function () {
+      _this.setState({
+        isSaving: true,
+        isSaved: false
+      });
+    };
+    _this.onDocumentSaved = function () {
+      _this.setState({
+        isSaving: false,
+        isSaved: true
+      });
+      if (_this.saveTimer) clearTimeout(_this.saveTimer);
+      _this.saveTimer = setTimeout(function () {
+        _this.setState({
+          isSaving: false,
+          isSaved: false
+        });
+      }, 2000);
+    };
     _this.onValueChanged = function (value) {
       _this.isValueChanged = true;
       _this.value = value;
@@ -34,18 +55,24 @@ 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, [{
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var contentRes, result;
+        var contentRes, result, socketManager;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -81,6 +108,10 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
                 document: null
               });
             case 15:
+              socketManager = this.editorRef.getSocketManager();
+              this.unsubscribeSavingEvent = socketManager.subscribe('is-saving', this.onDocumentSaving);
+              this.unsubscribeSavedEvent = socketManager.subscribe('saved', this.onDocumentSaved);
+            case 18:
             case "end":
               return _context.stop();
           }
@@ -91,6 +122,13 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
       }
       return componentDidMount;
     }()
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.unsubscribeSavingEvent();
+      this.unsubscribeSavedEvent();
+      clearTimeout(this.saveTimer);
+    }
   }, {
     key: "render",
     value: function render() {
@@ -108,9 +146,22 @@ 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", {
+      var _this$state2 = this.state,
+        isSaved = _this$state2.isSaved,
+        isSaving = _this$state2.isSaving;
+      return /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement("div", {
+        className: "doc-info"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "doc-name"
+      }, config.docName), /*#__PURE__*/React.createElement(TipMessage, {
+        isSaving: isSaving,
+        isSaved: isSaved
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "doc-ops"
+      }, !isOpenSocket && /*#__PURE__*/React.createElement("button", {
         onClick: this.onSave
       }, "Save"))), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(SDocEditor, {
+        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.9",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",

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

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

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

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

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

@@ -1,28 +0,0 @@
-html, body {
-  height: 100%;
-  width: 100%;
-}
-
-#root {
-  height: 100%;
-  width: 100%;
-}
-
-.markdown-wrapper {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.markdown-header {
-  display: flex;
-  justify-content: flex-end;
-  padding: 0 1rem;
-}
-
-.markdown-content {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-}