@seafile/sdoc-editor 0.1.6 → 0.1.8

package/dist/api/sdoc-server-api.js

@@ -0,0 +1,53 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import axios from 'axios';
+var SDocServerApi = /*#__PURE__*/function () {
+  function SDocServerApi(options) {
+    _classCallCheck(this, SDocServerApi);
+    if (!options.docUuid) {
+      throw new Error('settings has no docUuid');
+    }
+    if (!options.sdocServer) {
+      throw new Error('settings has no sdocServer');
+    }
+    if (!options.accessToken) {
+      throw new Error('settings has no accessToken');
+    }
+    this.server = options.sdocServer;
+    this.docUuid = options.docUuid;
+    this.accessToken = options.accessToken;
+  }
+  _createClass(SDocServerApi, [{
+    key: "getDocContent",
+    value: function getDocContent(docPath, docName) {
+      var server = this.server,
+        docUuid = this.docUuid,
+        accessToken = this.accessToken;
+      var url = "".concat(server, "/api/v1/docs/").concat(docUuid, "/?doc_path=").concat(encodeURIComponent(docPath), "&doc_name=").concat(encodeURIComponent(docName));
+      return axios.get(url, {
+        headers: {
+          Authorization: "Token ".concat(accessToken)
+        }
+      });
+    }
+  }, {
+    key: "saveDocContent",
+    value: function saveDocContent(docPath, docName, content) {
+      var server = this.server,
+        docUuid = this.docUuid,
+        accessToken = this.accessToken;
+      var url = "".concat(server, "/api/v1/docs/").concat(docUuid, "/");
+      var formData = new FormData();
+      formData.append('doc_path', docPath);
+      formData.append('doc_name', docName);
+      formData.append('doc_content', content);
+      return axios.post(url, formData, {
+        headers: {
+          Authorization: "Token ".concat(accessToken)
+        }
+      });
+    }
+  }]);
+  return SDocServerApi;
+}();
+export default SDocServerApi;

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

@@ -0,0 +1,28 @@
+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;
+}

package/dist/{editor.js → basic-sdk/editor.js}

@@ -9,7 +9,7 @@ import editor, { renderLeaf as _renderLeaf, renderElement as _renderElement, Too
 import { SocketManager, withSocketIO } from './socket';
 import withNodeId from './node-id';
 import './assets/css/layout.css';
-import './assets/css/sdoc-editor-content.css';
+import './assets/css/sdoc-editor-plugins.css';
 var SDocEditor = /*#__PURE__*/function (_React$Component) {
   _inherits(SDocEditor, _React$Component);
   var _super = _createSuper(SDocEditor);
@@ -17,6 +17,9 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
     var _this;
     _classCallCheck(this, SDocEditor);
     _this = _super.call(this, props);
+    _this.getSocketManager = function () {
+      return _this.socketManager;
+    };
     _this.onChange = function (slateValue) {
       var onValueChanged = _this.props.onValueChanged;
       _this.setState({
@@ -48,6 +51,12 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
         this.socketManager = SocketManager.getInstance(this.editor, document, config);
       }
     }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.socketManager.closeSocketConnect();
+      this.socketManager = null;
+    }
   }, {
     key: "render",
     value: function render() {

package/dist/basic-sdk/index.js

@@ -0,0 +1,3 @@
+import SDocEditor from './editor';
+import SDocViewer from './viewer';
+export { SDocEditor, SDocViewer };

package/dist/{socket → basic-sdk/socket}/socket-client.js

@@ -69,6 +69,11 @@ var SocketClient = /*#__PURE__*/_createClass(function SocketClient(config) {
     var socketManager = SocketManager.getInstance();
     socketManager.dispatchConnectState('disconnect');
   };
+  this.onConnectError = function () {
+    debug('connect_error.');
+    var socketManager = SocketManager.getInstance();
+    socketManager.dispatchConnectState('connect_error');
+  };
   this.onJoinRoom = function (username) {
     debug('%s joined room success.', username);
     var socketManager = SocketManager.getInstance();
@@ -101,9 +106,6 @@ var SocketClient = /*#__PURE__*/_createClass(function SocketClient(config) {
     var socketManager = SocketManager.getInstance();
     socketManager.receiveOperations(params);
   };
-  this.disconnectWithServer = function () {
-    _this.socket.disconnect();
-  };
   this.syncDocumentBySocket = function () {
     var docUuid = _this.config.docUuid;
     var socketManager = SocketManager.getInstance();
@@ -117,6 +119,9 @@ var SocketClient = /*#__PURE__*/_createClass(function SocketClient(config) {
       }
     });
   };
+  this.disconnectWithServer = function () {
+    _this.socket.disconnect();
+  };
   this.config = config;
   this.isReconnect = false;
   this.socket = io(config.sdocServer, {
@@ -127,6 +132,7 @@ var SocketClient = /*#__PURE__*/_createClass(function SocketClient(config) {
   });
   this.socket.on('connect', this.onConnected);
   this.socket.on('disconnect', this.onDisconnected);
+  this.socket.on('connect_error', this.onConnectError);
   this.socket.on('join-room', this.onJoinRoom);
   this.socket.on('leave-room', this.onLeaveRoom);
   this.socket.on('update-document', this.receiveOperations);

package/dist/{socket → basic-sdk/socket}/socket-manager.js

@@ -25,6 +25,7 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, doc
       _this.isSending = false;
       return;
     }
+    _this.dispatchConnectState('is-saving');
     var version = _this.document.version;
     var operations = _this.pendingOperationList.shift();
     _this.socketClient.sendOperations(operations, version, _this.sendOperationsCallback);
@@ -33,6 +34,7 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, doc
     if (result && result.success) {
       var serverVersion = result.version;
       _this.document['version'] = serverVersion;
+      _this.dispatchConnectState('saved');
       _this.sendNextOperations();
       return;
     }
@@ -155,7 +157,10 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, doc
     });
   };
   this.dispatchConnectState = function (type, message) {
-    console.log(type);
+    _this.eventBus.dispatch(type, message);
+  };
+  this.closeSocketConnect = function () {
+    _this.socketClient.disconnectWithServer();
   };
   this.editor = editor;
   this.document = document;

package/dist/{viewer.js → basic-sdk/viewer.js}

@@ -9,7 +9,8 @@ import editor, { renderLeaf as _renderLeaf, renderElement as _renderElement } fr
 import { SocketManager, withSocketIO } from './socket';
 import withNodeId from './node-id';
 import './assets/css/layout.css';
-import './assets/css/sdoc-editor-content.css';
+import './assets/css/sdoc-editor-plugins.css';
+import { generateDefaultDocContent } from '../utils';
 var SDocViewer = /*#__PURE__*/function (_React$Component) {
   _inherits(SDocViewer, _React$Component);
   var _super = _createSuper(SDocViewer);
@@ -17,7 +18,8 @@ var SDocViewer = /*#__PURE__*/function (_React$Component) {
     var _this;
     _classCallCheck(this, SDocViewer);
     _this = _super.call(this, props);
-    var children = props.document.children;
+    var _ref = props.document || generateDefaultDocContent(),
+      children = _ref.children;
     _this.state = {
       slateValue: children,
       isLoading: true
@@ -47,15 +49,15 @@ var SDocViewer = /*#__PURE__*/function (_React$Component) {
       var _this2 = this;
       var slateValue = this.state.slateValue;
       return /*#__PURE__*/React.createElement("div", {
-        className: "sf-editor-container"
+        className: "sdoc-editor-container"
       }, /*#__PURE__*/React.createElement("div", {
-        className: "sf-editor-content"
+        className: "sdoc-editor-content"
       }, /*#__PURE__*/React.createElement(Slate, {
         editor: this.editor,
         value: slateValue,
         onChange: function onChange() {}
       }, /*#__PURE__*/React.createElement("div", {
-        className: "editor-article"
+        className: "article"
       }, /*#__PURE__*/React.createElement(Editable, {
         readOnly: true,
         placeholder: "",

package/dist/components/loading/index.js

@@ -0,0 +1,26 @@
+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 './style.css';
+var Loading = /*#__PURE__*/function (_React$Component) {
+  _inherits(Loading, _React$Component);
+  var _super = _createSuper(Loading);
+  function Loading() {
+    _classCallCheck(this, Loading);
+    return _super.apply(this, arguments);
+  }
+  _createClass(Loading, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "empty-loading-page"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "lds-ripple page-centered"
+      }, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null)));
+    }
+  }]);
+  return Loading;
+}(React.Component);
+export default Loading;

package/dist/components/loading/style.css

@@ -0,0 +1,49 @@
+.empty-loading-page {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+}
+
+.page-centered {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  /* bring your own prefixes */
+  transform: translate(-50%, -50%);
+}
+
+.lds-ripple {
+  display: inline-block;
+  position: relative;
+  width: 64px;
+  height: 64px;
+}
+
+.lds-ripple div {
+  position: absolute;
+  border: 4px solid #eb8205;
+  opacity: 1;
+  border-radius: 50%;
+  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+
+.lds-ripple div:nth-child(2) {
+  animation-delay: -0.5s;
+}
+
+@keyframes lds-ripple {
+  0% {
+    top: 28px;
+    left: 28px;
+    width: 0;
+    height: 0;
+    opacity: 1;
+  }
+  100% {
+    top: -1px;
+    left: -1px;
+    width: 58px;
+    height: 58px;
+    opacity: 0;
+  }
+}

package/dist/context.js

@@ -0,0 +1,162 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import cookie from 'react-cookies';
+import { SeafileAPI } from 'seafile-js';
+import Url from 'url-parse';
+import SDocServerApi from './api/sdoc-server-api';
+import { getDirPath } from './utils';
+var Context = /*#__PURE__*/function () {
+  function Context() {
+    var _this = this;
+    _classCallCheck(this, Context);
+    this.initSettings = function () {
+      _this.settings = window.seafile ? window.seafile : window.seafileConfig;
+      var isOpenSocket = _this.getSetting('isOpenSocket');
+      if (isOpenSocket) {
+        _this.sdocServerApi = new SDocServerApi(_this.settings);
+      }
+    };
+    this.settings = null;
+    this.sdocServerApi = null;
+    this.api = null;
+    this.config = null;
+  }
+  _createClass(Context, [{
+    key: "initApi",
+    value: function initApi() {
+      this.initSettings(); // lazy init context class
+      var seafileAPI = new SeafileAPI();
+      if (this.getSetting('isDevelopment')) {
+        var server = this.getSetting('serviceUrl');
+        var username = this.getSetting('username');
+        var password = this.getSetting('password');
+        seafileAPI.init({
+          server: server,
+          username: username,
+          password: password
+        });
+        this.api = seafileAPI;
+        return seafileAPI.login();
+      } else {
+        var siteRoot = this.getSetting('siteRoot');
+        var xcsrfHeaders = cookie.load('dtable_csrftoken');
+        seafileAPI.initForSeahubUsage({
+          siteRoot: siteRoot,
+          xcsrfHeaders: xcsrfHeaders
+        });
+        this.api = seafileAPI;
+      }
+    }
+  }, {
+    key: "getSettings",
+    value: function getSettings() {
+      return this.settings;
+    }
+  }, {
+    key: "getSetting",
+    value: function getSetting(key) {
+      if (this.settings[key] === false) return this.settings[key];
+      return this.settings[key] || '';
+    }
+  }, {
+    key: "getViewConfig",
+    value: function getViewConfig() {
+      if (this.config) return this.config;
+      var _this$getSettings = this.getSettings(),
+        rawPath = _this$getSettings.rawPath,
+        docName = _this$getSettings.docName;
+      this.config = {
+        rawPath: rawPath,
+        docName: docName
+      };
+      return this.config;
+    }
+  }, {
+    key: "getEditorConfig",
+    value: function getEditorConfig() {
+      if (this.config) return this.config;
+      var _this$getSettings2 = this.getSettings(),
+        docName = _this$getSettings2.docName,
+        docPath = _this$getSettings2.docPath,
+        docUuid = _this$getSettings2.docUuid,
+        accessToken = _this$getSettings2.accessToken,
+        sdocServer = _this$getSettings2.sdocServer;
+      this.config = {
+        docName: docName,
+        docPath: docPath,
+        docUuid: docUuid,
+        accessToken: accessToken,
+        sdocServer: new Url(sdocServer).origin
+      };
+      return this.config;
+    }
+  }, {
+    key: "getFileContent",
+    value: function getFileContent() {
+      var isOpenSocket = this.getSetting('isOpenSocket');
+      if (isOpenSocket) {
+        return this.getFileContent1();
+      }
+
+      // visit by shared link
+      var rawPath = this.getSetting('rawPath');
+      if (rawPath) {
+        return this.api.getFileContent(rawPath);
+      }
+      return this.getFileContent2();
+    }
+  }, {
+    key: "saveContent",
+    value: function saveContent(content) {
+      var isOpenSocket = this.getSetting('isOpenSocket');
+      if (isOpenSocket) {
+        return this.saveContent1(content);
+      }
+      return this.saveContent2(content);
+    }
+  }, {
+    key: "getFileContent1",
+    value: function getFileContent1() {
+      var settings = this.getSettings();
+      var docPath = settings.docPath,
+        docName = settings.docName;
+      return this.sdocServerApi.getDocContent(docPath, docName);
+    }
+  }, {
+    key: "saveContent1",
+    value: function saveContent1(content) {
+      var settings = this.getSettings();
+      var docPath = settings.docPath,
+        docName = settings.docName;
+      return this.sdocServerApi.saveDocContent(docPath, docName, content);
+    }
+  }, {
+    key: "getFileContent2",
+    value: function getFileContent2() {
+      var _this2 = this;
+      var repoID = this.getSetting('repoID');
+      var docPath = this.getSetting('docPath');
+      return this.api.getFileDownloadLink(repoID, docPath).then(function (res) {
+        var downloadLink = res.data;
+        return _this2.api.getFileContent(downloadLink);
+      });
+    }
+  }, {
+    key: "saveContent2",
+    value: function saveContent2(content) {
+      var _this3 = this;
+      var settings = this.getSettings();
+      var repoID = settings.repoID,
+        docPath = settings.docPath,
+        docName = settings.docName;
+      var dirPath = getDirPath(docPath);
+      return this.api.getUpdateLink(repoID, dirPath).then(function (res) {
+        var uploadLink = res.data;
+        return _this3.api.updateFile(uploadLink, docPath, docName, content);
+      });
+    }
+  }]);
+  return Context;
+}();
+var context = new Context();
+export default context;

package/dist/index.js

@@ -1,3 +1,4 @@
-import SDocEditor from './editor';
-import SDocViewer from './viewer';
-export { SDocEditor, SDocViewer };
+import { SDocViewer } from './basic-sdk';
+import SimpleEditor from './pages/simple-editor';
+import SimpleViewer from './pages/simple-viewer';
+export { SDocViewer, SimpleEditor, SimpleViewer };

package/dist/layout/content.js

@@ -0,0 +1,30 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+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 = ["children", "className"];
+import React, { Component } from 'react';
+import classnames from 'classnames';
+var Content = /*#__PURE__*/function (_Component) {
+  _inherits(Content, _Component);
+  var _super = _createSuper(Content);
+  function Content() {
+    _classCallCheck(this, Content);
+    return _super.apply(this, arguments);
+  }
+  _createClass(Content, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        children = _this$props.children,
+        className = _this$props.className,
+        restProps = _objectWithoutProperties(_this$props, _excluded);
+      return /*#__PURE__*/React.createElement("div", Object.assign({
+        className: classnames('sdoc-editor-page-content', className)
+      }, restProps), children);
+    }
+  }]);
+  return Content;
+}(Component);
+export { Content as default };

package/dist/layout/header.js

@@ -0,0 +1,30 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+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 = ["children", "className"];
+import React, { Component } from 'react';
+import classnames from 'classnames';
+var Header = /*#__PURE__*/function (_Component) {
+  _inherits(Header, _Component);
+  var _super = _createSuper(Header);
+  function Header() {
+    _classCallCheck(this, Header);
+    return _super.apply(this, arguments);
+  }
+  _createClass(Header, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        children = _this$props.children,
+        className = _this$props.className,
+        restProps = _objectWithoutProperties(_this$props, _excluded);
+      return /*#__PURE__*/React.createElement("div", Object.assign({
+        className: classnames('sdoc-editor-page-header', className)
+      }, restProps), children);
+    }
+  }]);
+  return Header;
+}(Component);
+export { Header as default };

package/dist/layout/index.js

@@ -0,0 +1,6 @@
+import Layout from './layout';
+import Header from './header';
+import Content from './content';
+import './layout.css';
+export { Header, Content };
+export default Layout;

package/dist/layout/layout.css

@@ -0,0 +1,33 @@
+html, body {
+  height: 100%;
+  width: 100%;
+}
+
+#root, #wrapper {
+  height: 100%;
+  width: 100%;
+  display: flex;
+}
+
+.sdoc-editor-page-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.sdoc-editor-page-wrapper .sdoc-editor-page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 10px;
+  border-bottom: 1px solid #c9c9c9;
+  flex-shrink: 0;
+  height: 58px;
+}
+
+.sdoc-editor-page-wrapper .sdoc-editor-page-content {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}

package/dist/layout/layout.js

@@ -0,0 +1,30 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+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 = ["children", "className"];
+import React, { Component } from 'react';
+import classnames from 'classnames';
+var Layout = /*#__PURE__*/function (_Component) {
+  _inherits(Layout, _Component);
+  var _super = _createSuper(Layout);
+  function Layout() {
+    _classCallCheck(this, Layout);
+    return _super.apply(this, arguments);
+  }
+  _createClass(Layout, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        children = _this$props.children,
+        className = _this$props.className,
+        restProps = _objectWithoutProperties(_this$props, _excluded);
+      return /*#__PURE__*/React.createElement("div", Object.assign({
+        className: classnames('sdoc-editor-page-wrapper', className)
+      }, restProps), children);
+    }
+  }]);
+  return Layout;
+}(Component);
+export { Layout as default };