@seafile/seafile-editor 0.3.99 → 0.3.102

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

@@ -0,0 +1,77 @@
+.seafile-simple-editor {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 768px;
+  overflow: hidden;
+  border: 1px solid #e5e5e5;
+}
+
+.seafile-simple-editor .seafile-editor-topbar {
+  width: 100%;
+  background-color: #fff;
+  border-bottom: 1px solid #e5e5e5;
+  box-shadow: 0 3px 2px -2px rgba(200,200,200,.15);
+  user-select: none;
+  position: relative;
+  z-index: 3;
+  display: flex;
+  justify-content: space-between;
+}
+
+.seafile-simple-editor .seafile-editor-topbar .use-help-icon {
+  background-color: #fff;
+  box-sizing: border-box;
+}
+
+.seafile-simple-editor .seafile-editor-topbar .editor-btn-group {
+  height: 100%;
+  padding: 5px 0 5px 5px;
+  font-size: 0.75rem;
+  border-right: 1px solid #e5e5e5;
+  color: #555555;
+}
+
+.seafile-simple-editor .header-list-container {
+  border-left: 0;
+}
+
+.seafile-simple-editor .editor {
+  margin: 0;
+  padding: 10px;
+  height: 100%;
+  border: none;
+}
+
+/*set scroll bar*/
+.seafile-simple-editor ::-webkit-scrollbar{
+  width: 8px;
+  height: 8px;
+}
+
+.seafile-simple-editor ::-webkit-scrollbar-button {
+  display: none;
+}
+
+.seafile-simple-editor ::-webkit-scrollbar-thumb {
+  background-color: rgb(206, 206, 212);
+  border-radius: 10px;
+}
+
+.editor-container {
+  /* this container is needed to show the scroll bar */
+  height: 100%;
+  overflow-y: auto;
+  flex: 1 1 auto;
+  position: relative;
+}
+
+.editor {
+  min-height: calc(100% - 40px);
+  background: #fff;
+  padding: 40px 60px;
+  margin: 20px 40px;
+  border: 1px solid rgb(230,230,221);
+  overflow-x: hidden;
+}

package/dist/components/add-formula-dialog.js

@@ -6,7 +6,7 @@ import React, { Fragment } from 'react';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input } from 'reactstrap';
 import { withTranslation } from 'react-i18next';
 import { Editor } from 'slate';
-import { EditorUtils } from '../editor/editor-utils/common-editor-utils';
+import EditorBuilder from '../editor/editor-builder';
 
 var AddFormulaDialog = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(AddFormulaDialog, _React$PureComponent);
@@ -21,7 +21,8 @@ var AddFormulaDialog = /*#__PURE__*/function (_React$PureComponent) {
     _this = _super.call(this, props);
 
     _this.setInitialValue = function () {
-      var nodes = Editor.match(window.editor, window.editor.selection, {
+      var editor = EditorBuilder.getEditor();
+      var nodes = Editor.match(editor, editor.selection, {
         type: 'formula'
       });
 
@@ -70,7 +71,7 @@ var AddFormulaDialog = /*#__PURE__*/function (_React$PureComponent) {
       _this.props.toggleFormulaDialog();
     };
 
-    _this.editorUtils = new EditorUtils(window.editor);
+    _this.editorUtils = EditorBuilder.getEditorUtils();
     _this.state = {
       formula: ''
     };
@@ -82,7 +83,8 @@ var AddFormulaDialog = /*#__PURE__*/function (_React$PureComponent) {
   _createClass(AddFormulaDialog, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.editorSelection = window.editor.selection;
+      var editor = EditorBuilder.getEditor();
+      this.editorSelection = editor.selection;
 
       if (this.formulaNode) {
         this.renderFormula(this.state.formula);

package/dist/components/add-image-dialog.js

@@ -5,6 +5,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input } from 'reactstrap';
 import { withTranslation } from 'react-i18next';
+import EditorBuilder from '../editor/editor-builder';
 
 var AddImageDialog = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(AddImageDialog, _React$PureComponent);
@@ -43,7 +44,8 @@ var AddImageDialog = /*#__PURE__*/function (_React$PureComponent) {
   _createClass(AddImageDialog, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.editorSelection = window.editor.selection;
+      var editor = EditorBuilder.getEditor();
+      this.editorSelection = editor.selection;
     }
   }, {
     key: "render",

package/dist/components/add-link-dialog.js

@@ -5,7 +5,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Fragment } from 'react';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { withTranslation } from 'react-i18next';
-import { EditorUtils } from '../editor/editor-utils/common-editor-utils';
+import EditorBuilder from '../editor/editor-builder';
 
 var AddLinkDialog = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(AddLinkDialog, _React$PureComponent);
@@ -76,7 +76,7 @@ var AddLinkDialog = /*#__PURE__*/function (_React$PureComponent) {
       }
     };
 
-    _this.editorUtils = new EditorUtils(window.editor);
+    _this.editorUtils = EditorBuilder.getEditorUtils();
     _this.isLinkActive = _this.editorUtils.isLinkActive();
     _this.editorSelection = null;
     _this.state = {
@@ -89,7 +89,8 @@ var AddLinkDialog = /*#__PURE__*/function (_React$PureComponent) {
   _createClass(AddLinkDialog, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.editorSelection = window.editor.selection;
+      var editor = EditorBuilder.getEditor();
+      this.editorSelection = editor.selection;
     }
   }, {
     key: "componentWillMount",

package/dist/components/comment-dialog.js

@@ -3,8 +3,10 @@ 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 { Button } from 'reactstrap';
 import { processor } from '../utils/seafile-markdown2html';
+import '../assets/css/comment-dialog.css';
 
 var CommentDialog = /*#__PURE__*/function (_React$Component) {
   _inherits(CommentDialog, _React$Component);
@@ -74,16 +76,20 @@ var CommentDialog = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
+      var t = this.props.t;
+      var _this$state = this.state,
+          comment = _this$state.comment,
+          quote = _this$state.quote;
       return /*#__PURE__*/React.createElement("div", {
-        className: "comment-dialog"
+        className: "seafile-editor-comment comment-dialog"
       }, /*#__PURE__*/React.createElement("div", null, this.props.editorApi.name), /*#__PURE__*/React.createElement("blockquote", {
         className: "comment-dialog-quote"
       }, /*#__PURE__*/React.createElement("div", {
         dangerouslySetInnerHTML: {
-          __html: this.state.quote
+          __html: quote
         }
       })), /*#__PURE__*/React.createElement("textarea", {
-        value: this.state.comment,
+        value: comment,
         onChange: this.handleCommentChange
       }), /*#__PURE__*/React.createElement("div", {
         className: "button-group"
@@ -91,11 +97,11 @@ var CommentDialog = /*#__PURE__*/function (_React$Component) {
         size: "sm",
         color: "primary",
         onClick: this.submitComment
-      }, this.props.t('submit')), /*#__PURE__*/React.createElement(Button, {
+      }, t('submit')), /*#__PURE__*/React.createElement(Button, {
         size: "sm",
         color: "secondary",
         onClick: this.props.toggleCommentDialog
-      }, this.props.t('cancel'))), /*#__PURE__*/React.createElement("span", {
+      }, t('cancel'))), /*#__PURE__*/React.createElement("span", {
         className: "comment-dialog-triangle"
       }));
     }
@@ -104,4 +110,4 @@ var CommentDialog = /*#__PURE__*/function (_React$Component) {
   return CommentDialog;
 }(React.Component);
 
-export default CommentDialog;
+export default withTranslation('seafile-editor')(CommentDialog);

package/dist/components/markdown-lint.js

@@ -3,6 +3,7 @@ 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 '../assets/css/issue-card.css';
 
 var MarkdownLint = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(MarkdownLint, _React$PureComponent);

package/dist/components/outline/index.js

@@ -0,0 +1,104 @@
+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 EditorBuilder from '../../editor/editor-builder';
+import OutlineItem from './outline-item';
+import '../../assets/css/outline.css';
+
+var OutlineView = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(OutlineView, _React$PureComponent);
+
+  var _super = _createSuper(OutlineView);
+
+  function OutlineView(props) {
+    var _this;
+
+    _classCallCheck(this, OutlineView);
+
+    _this = _super.call(this, props);
+
+    _this.scrollToNode = function (node) {
+      // wiki module
+      if (_this.props.scrollToNode) {
+        _this.props.scrollToNode(node);
+
+        return;
+      }
+
+      var editorRef = EditorBuilder.getEditorRef();
+      editorRef.scrollToNode(node);
+    };
+
+    _this.getHeaderList = function (document) {
+      var headerList = [];
+      document.forEach(function (node, index) {
+        if (node.type === 'header_two' || node.type === 'header_three') {
+          headerList.push(Object.assign({}, node, {
+            path: [index]
+          }));
+        }
+      });
+
+      _this.setState({
+        headerList: headerList
+      });
+    };
+
+    _this.state = {
+      headerList: null
+    };
+    return _this;
+  }
+
+  _createClass(OutlineView, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.getHeaderList(this.props.document);
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if (this.props.document !== nextProps.document) {
+        this.getHeaderList(nextProps.document);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          isViewer = _this$props.isViewer,
+          t = _this$props.t;
+      var headerList = this.state.headerList;
+
+      if (!headerList || headerList.length === 0) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "seafile-editor-outline py-2 pr-4"
+        }, isViewer && null, !isViewer && /*#__PURE__*/React.createElement("div", {
+          className: "size-panel-no-content"
+        }, t('no_out_line')));
+      }
+
+      var activeTitleIndex = this.props.activeTitleIndex;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "seafile-editor-outline py-2 pr-4"
+      }, headerList.map(function (node, index) {
+        var isActive = index === activeTitleIndex;
+        return /*#__PURE__*/React.createElement(OutlineItem, {
+          key: index,
+          node: node,
+          isActive: isActive,
+          scrollToNode: _this2.scrollToNode
+        });
+      }));
+    }
+  }]);
+
+  return OutlineView;
+}(React.PureComponent);
+
+export default withTranslation('seafile-editor')(OutlineView);

package/dist/components/outline/outline-item.js

@@ -0,0 +1,70 @@
+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';
+
+var OutlineItem = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(OutlineItem, _React$PureComponent);
+
+  var _super = _createSuper(OutlineItem);
+
+  function OutlineItem() {
+    var _this;
+
+    _classCallCheck(this, OutlineItem);
+
+    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.onClick = function (event) {
+      var _this$props = _this.props,
+          scrollToNode = _this$props.scrollToNode,
+          node = _this$props.node;
+      scrollToNode && scrollToNode(node);
+    };
+
+    return _this;
+  }
+
+  _createClass(OutlineItem, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var hash = decodeURI(window.location.hash);
+      hash = hash.substring(1, hash.length);
+      var _this$props2 = this.props,
+          node = _this$props2.node,
+          scrollToNode = _this$props2.scrollToNode;
+
+      if (hash && node && hash === node.text) {
+        scrollToNode && scrollToNode(node);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+          node = _this$props3.node,
+          isActive = _this$props3.isActive;
+      var className = isActive ? 'active' : '';
+
+      if (node.type === 'header_two') {
+        className = 'outline-h2 ' + className;
+      } else if (node.type === 'header_three') {
+        className = 'outline-h3 ' + className;
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: className,
+        onClick: this.onClick
+      }, node.children[0].text);
+    }
+  }]);
+
+  return OutlineItem;
+}(React.PureComponent);
+
+export default OutlineItem;

package/dist/components/shortcut-dialog.js

@@ -5,7 +5,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Fragment } from 'react';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import { withTranslation } from 'react-i18next';
-import '../css/keyboard-shortcuts.css';
+import '../assets/css/keyboard-shortcuts.css';
 var isMac = window.navigator.platform.indexOf('Win') < 0 ? true : false;
 var controlKey = isMac ? '⌘' : 'CTRL';
 

package/dist/components/toolbar/help-group.js

@@ -0,0 +1,40 @@
+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 ButtonItem from './widgets/button-item';
+
+var HelpGroup = /*#__PURE__*/function (_React$Component) {
+  _inherits(HelpGroup, _React$Component);
+
+  var _super = _createSuper(HelpGroup);
+
+  function HelpGroup() {
+    _classCallCheck(this, HelpGroup);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(HelpGroup, [{
+    key: "render",
+    value: function render() {
+      var t = this.props.t;
+      return /*#__PURE__*/React.createElement("div", {
+        className: 'btn-group editor-btn-group'
+      }, /*#__PURE__*/React.createElement(ButtonItem, {
+        isRichEditor: true,
+        text: t('Shortcut_help'),
+        id: 'helpIcon',
+        className: 'use-help-icon',
+        icon: 'iconfont icon-use-help',
+        onMouseDown: this.props.onHelpToggle
+      }));
+    }
+  }]);
+
+  return HelpGroup;
+}(React.Component);
+
+export default withTranslation('seafile-editor')(HelpGroup);

package/dist/components/toolbar/index.js

@@ -0,0 +1,4 @@
+import Toolbar from './toolbar';
+import HelpGroup from './help-group';
+export default Toolbar;
+export { HelpGroup };

package/dist/components/{topbar-component/upload-img.js → toolbar/insert-image.js}

@@ -5,16 +5,17 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Tooltip, Label, Input } from 'reactstrap';
 import { withTranslation } from 'react-i18next';
+import EditorBuilder from '../../editor/editor-builder';
 
-var UploadImg = /*#__PURE__*/function (_React$Component) {
-  _inherits(UploadImg, _React$Component);
+var InsertImage = /*#__PURE__*/function (_React$Component) {
+  _inherits(InsertImage, _React$Component);
 
-  var _super = _createSuper(UploadImg);
+  var _super = _createSuper(InsertImage);
 
-  function UploadImg() {
+  function InsertImage() {
     var _this;
 
-    _classCallCheck(this, UploadImg);
+    _classCallCheck(this, InsertImage);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -26,7 +27,7 @@ var UploadImg = /*#__PURE__*/function (_React$Component) {
       tooltipOpen: false
     };
 
-    _this.imgtoggle = function () {
+    _this.imgToggle = function () {
       _this.setState({
         dropdownOpen: !_this.state.dropdownOpen
       });
@@ -47,8 +48,10 @@ var UploadImg = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.uploadLocalImage = function (event) {
-      if (window.editor.editorApi.uploadLocalImage) {
-        window.editor.editorApi.uploadLocalImage(event.target.files[0]).then(function (res) {
+      var editor = EditorBuilder.getEditor();
+
+      if (editor.editorApi.uploadLocalImage) {
+        editor.editorApi.uploadLocalImage(event.target.files[0]).then(function (res) {
           _this.props.onInsertImage({
             url: res
           });
@@ -73,13 +76,13 @@ var UploadImg = /*#__PURE__*/function (_React$Component) {
     return _this;
   }
 
-  _createClass(UploadImg, [{
+  _createClass(InsertImage, [{
     key: "render",
     value: function render() {
       var t = this.props.t;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
+      return /*#__PURE__*/React.createElement(Dropdown, {
         isOpen: this.state.dropdownOpen,
-        toggle: this.imgtoggle,
+        toggle: this.imgToggle,
         className: this.props.disabled ? 'upload-localimg upload-localimg-disabled' : 'upload-localimg upload-localimg-hover'
       }, /*#__PURE__*/React.createElement(DropdownToggle, {
         id: this.props.id,
@@ -97,7 +100,7 @@ var UploadImg = /*#__PURE__*/function (_React$Component) {
         isOpen: this.state.tooltipOpen
       }, t('insert_image'))), /*#__PURE__*/React.createElement(DropdownMenu, null, /*#__PURE__*/React.createElement(DropdownItem, {
         onClick: this.props.onToggleImageDialog
-      }, t('insert_network_image')), !this.props.isSimpleEditor && /*#__PURE__*/React.createElement(DropdownItem, {
+      }, t('insert_network_image')), !!this.props.insertRepoFile && /*#__PURE__*/React.createElement(DropdownItem, {
         onMouseDown: this.props.insertRepoFile
       }, t('Insert_library_image')), /*#__PURE__*/React.createElement(DropdownItem, {
         className: "image-uploader-btn"
@@ -112,11 +115,11 @@ var UploadImg = /*#__PURE__*/function (_React$Component) {
         onClick: this.onInputFile,
         className: "image-uploader",
         id: "image-uploader"
-      })))));
+      }))));
     }
   }]);
 
-  return UploadImg;
+  return InsertImage;
 }(React.Component);
 
-export default withTranslation('seafile-editor')(UploadImg);
+export default withTranslation('seafile-editor')(InsertImage);