@seafile/sdoc-editor 0.1.19 → 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/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/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.19",
+  "version": "0.1.20",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",

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

@@ -233,5 +233,7 @@
   "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."
+  "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/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";