@seafile/seafile-editor 0.3.76

package/dist/components/outline.js

@@ -0,0 +1,130 @@
+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';
+
+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) {
+      _this.props.editor.scrollToNode(_this.props.node);
+    };
+
+    return _this;
+  }
+
+  _createClass(OutlineItem, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var hash = decodeURI(window.location.hash);
+      hash = hash.substring(1, hash.length);
+
+      if (hash && this.props.node && hash === this.props.node.text) {
+        this.props.editor && this.props.editor.scrollToNode(this.props.node);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          node = _this$props.node,
+          index = _this$props.index,
+          activeTitleIndex = _this$props.activeTitleIndex;
+      var className = "".concat(node.type === 'header_two' ? 'outline-h2' : '', "\n      ").concat(node.type === 'header_three' ? 'outline-h3' : '', "\n      ").concat(index === activeTitleIndex ? ' active' : '');
+      return /*#__PURE__*/React.createElement("div", {
+        className: className,
+        key: index,
+        onClick: this.onClick
+      }, node.children[0].text);
+    }
+  }]);
+
+  return OutlineItem;
+}(React.PureComponent);
+
+var OutlineView = /*#__PURE__*/function (_React$PureComponent2) {
+  _inherits(OutlineView, _React$PureComponent2);
+
+  var _super2 = _createSuper(OutlineView);
+
+  function OutlineView(props) {
+    var _this2;
+
+    _classCallCheck(this, OutlineView);
+
+    _this2 = _super2.call(this, props);
+
+    _this2.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]
+          }));
+        }
+      });
+
+      _this2.setState({
+        headerList: headerList
+      });
+    };
+
+    _this2.state = {
+      headerList: null
+    };
+    return _this2;
+  }
+
+  _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 _this3 = this;
+
+      var headerList = this.state.headerList;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "seafile-editor-outline"
+      }, headerList && headerList.length > 0 ? headerList.map(function (node, index) {
+        return /*#__PURE__*/React.createElement(OutlineItem, {
+          key: index,
+          editor: _this3.props.editor,
+          activeTitleIndex: _this3.props.activeTitleIndex,
+          node: node,
+          index: index
+        });
+      }) : this.props.isViewer ? null : /*#__PURE__*/React.createElement("div", {
+        className: "size-panel-no-content"
+      }, this.props.t('no_out_line')));
+    }
+  }]);
+
+  return OutlineView;
+}(React.PureComponent);
+
+export default withTranslation('seafile-editor')(OutlineView);

package/dist/components/participants-list.js

@@ -0,0 +1,126 @@
+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 { Tooltip } from 'reactstrap';
+import '../css/richeditor/participants-list.css';
+
+var ParticipantsList = /*#__PURE__*/function (_React$Component) {
+  _inherits(ParticipantsList, _React$Component);
+
+  var _super = _createSuper(ParticipantsList);
+
+  function ParticipantsList(props) {
+    var _this;
+
+    _classCallCheck(this, ParticipantsList);
+
+    _this = _super.call(this, props);
+
+    _this.handleClick = function () {
+      _this.props.openDialogs && _this.props.openDialogs('add-participant');
+    };
+
+    _this.tooltipToggle = function () {
+      _this.setState({
+        tooltipOpen: !_this.state.tooltipOpen
+      });
+    };
+
+    _this.state = {
+      tooltipOpen: false
+    };
+    return _this;
+  }
+
+  _createClass(ParticipantsList, [{
+    key: "render",
+    value: function render() {
+      var participants = this.props.participants;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "participants mb-2 position-relative"
+      }, participants.map(function (item, index) {
+        return /*#__PURE__*/React.createElement(Participant, {
+          item: item,
+          index: index,
+          key: index
+        });
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "add-participants",
+        onClick: this.handleClick,
+        id: "add-participant-icon"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "iconfont icon-plus-circle"
+      })), /*#__PURE__*/React.createElement(Tooltip, {
+        toggle: this.tooltipToggle,
+        delay: {
+          show: 0,
+          hide: 0
+        },
+        target: "add-participant-icon",
+        placement: "bottom",
+        isOpen: this.state.tooltipOpen
+      }, this.props.t('Add_participants')));
+    }
+  }]);
+
+  return ParticipantsList;
+}(React.Component);
+
+var Participant = /*#__PURE__*/function (_React$Component2) {
+  _inherits(Participant, _React$Component2);
+
+  var _super2 = _createSuper(Participant);
+
+  function Participant(props) {
+    var _this2;
+
+    _classCallCheck(this, Participant);
+
+    _this2 = _super2.call(this, props);
+
+    _this2.toggleAvatarTooltip = function () {
+      _this2.setState({
+        showAvatarTooltip: !_this2.state.showAvatarTooltip
+      });
+    };
+
+    _this2.state = {
+      showAvatarTooltip: false
+    };
+    return _this2;
+  }
+
+  _createClass(Participant, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          item = _this$props.item,
+          index = _this$props.index;
+      var target = 'participant-avatar-' + index;
+      return /*#__PURE__*/React.createElement("span", {
+        className: "participant-avatar"
+      }, /*#__PURE__*/React.createElement("img", {
+        src: item.avatar_url,
+        className: "avatar",
+        id: target,
+        alt: "avatar",
+        key: index
+      }), /*#__PURE__*/React.createElement(Tooltip, {
+        toggle: this.toggleAvatarTooltip,
+        delay: {
+          show: 0,
+          hide: 0
+        },
+        target: target,
+        placement: "bottom",
+        isOpen: this.state.showAvatarTooltip
+      }, item.name));
+    }
+  }]);
+
+  return Participant;
+}(React.Component);
+
+export default ParticipantsList;

package/dist/components/related-files-list.js

@@ -0,0 +1,75 @@
+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 { Card, CardTitle, CardText } from 'reactstrap';
+import { withTranslation } from 'react-i18next';
+
+require('../css/related-files-list.css');
+
+var RelatedFilesList = /*#__PURE__*/function (_React$Component) {
+  _inherits(RelatedFilesList, _React$Component);
+
+  var _super = _createSuper(RelatedFilesList);
+
+  function RelatedFilesList(props) {
+    var _this;
+
+    _classCallCheck(this, RelatedFilesList);
+
+    _this = _super.call(this, props);
+
+    _this.encodePath = function (path) {
+      if (!path) {
+        return '';
+      }
+
+      var path_arr = path.split('/');
+      var path_arr_ = [];
+
+      for (var i = 0, len = path_arr.length; i < len; i++) {
+        path_arr_.push(encodeURIComponent(path_arr[i]));
+      }
+
+      return path_arr_.join('/');
+    };
+
+    return _this;
+  }
+
+  _createClass(RelatedFilesList, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var siteRoot = this.props.siteRoot;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "sf-releted-files",
+        id: "sf-releted-files"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "sf-releted-files-header"
+      }, /*#__PURE__*/React.createElement("h4", null, this.props.t('related_files'))), this.props.relatedFiles.map(function (relatedFile, index) {
+        var href = siteRoot + 'lib/' + relatedFile.repo_id + '/file' + _this2.encodePath(relatedFile.path);
+
+        return /*#__PURE__*/React.createElement("div", {
+          className: "sf-releted-file",
+          key: index
+        }, /*#__PURE__*/React.createElement("a", {
+          href: href,
+          rel: "noopener noreferrer",
+          target: "_blank"
+        }, /*#__PURE__*/React.createElement(Card, {
+          body: true,
+          size: "sm"
+        }, /*#__PURE__*/React.createElement(CardTitle, null, relatedFile.name), /*#__PURE__*/React.createElement(CardText, null, relatedFile.repo_name), /*#__PURE__*/React.createElement("span", {
+          className: "sf-releted-file-arrow"
+        }))));
+      }));
+    }
+  }]);
+
+  return RelatedFilesList;
+}(React.Component);
+
+export default withTranslation('seafile-editor')(RelatedFilesList);

package/dist/components/shortcut-dialog.js

@@ -0,0 +1,167 @@
+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, { Fragment } from 'react';
+import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { withTranslation } from 'react-i18next';
+import '../css/keyboard-shortcuts.css';
+var isMac = window.navigator.platform.indexOf('Win') < 0 ? true : false;
+var controlKey = isMac ? '⌘' : 'CTRL';
+
+var KeyboardShortcuts = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(KeyboardShortcuts, _React$PureComponent);
+
+  var _super = _createSuper(KeyboardShortcuts);
+
+  function KeyboardShortcuts(props) {
+    var _this;
+
+    _classCallCheck(this, KeyboardShortcuts);
+
+    _this = _super.call(this, props);
+
+    _this.renderShortcut = function (keys) {
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
+        className: "keyboard-shortcut"
+      }, keys.map(function (key, index) {
+        return /*#__PURE__*/React.createElement("kbd", {
+          key: index
+        }, key);
+      })), /*#__PURE__*/React.createElement("br", null));
+    };
+
+    _this.renderContainer = function (keys, description) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "keyboard-shortcut-container"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "col-4"
+      }, _this.renderShortcut(keys)), /*#__PURE__*/React.createElement("div", {
+        className: "col-8"
+      }, description));
+    };
+
+    _this.shortcutData = [{
+      'Make_list': [['*', 'space'], ['-', 'space']],
+      'Make_ordered_list': [['1.', 'space']],
+      'Insert_new_item': [['Enter']],
+      'Insert_child_in_item': [['Shift', 'Enter']],
+      'Increase_depth': [['Tab']]
+    }, {
+      'Heading_1': [['#', 'space']],
+      'Heading_2': [['##', 'space']],
+      'Heading_3': [['###', 'space']],
+      'Heading_4': [['####', 'space']],
+      'Heading_5': [['#####', 'space']],
+      'Heading_6': [['######', 'space']]
+    }, {
+      'Make_code_block': [['```'], ['space*4']],
+      'Insert_new_line': [['Enter']],
+      'Escape_code_block': [[controlKey, 'Enter']],
+      'Insert_indent': [['Tab']]
+    }, {
+      'Make_Block_quote': [['>', 'space']],
+      'Escape_Block_quote': [['Enter']]
+    }, {
+      'Insert_Table_Row': [['Enter']],
+      'Escape_table': [[controlKey, 'Enter']]
+    }, {
+      'Bold': [['**bold**', 'space'], ['__bold__', 'space']],
+      'Italic': [['*italic*', 'space'], ['_italic_', 'space']],
+      'Italic_Bold': [['***italic***', 'space'], ['___italic___', 'space']],
+      'Inline_code': [['`code`', 'space']]
+    }, {
+      'Paste_screen_shot': [[controlKey, 'v']],
+      'Drag_image_from_anywhere_to_upload_it': []
+    }];
+    return _this;
+  }
+
+  _createClass(KeyboardShortcuts, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          t = _this$props.t,
+          toggleShortcutDialog = _this$props.toggleShortcutDialog,
+          userHelp = _this$props.userHelp;
+      var userHelpData = userHelp.userHelpData;
+      return /*#__PURE__*/React.createElement(Modal, {
+        isOpen: true,
+        toggle: toggleShortcutDialog,
+        className: "keyboard-shortcut-dialog"
+      }, /*#__PURE__*/React.createElement(ModalHeader, {
+        toggle: toggleShortcutDialog
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "mr-2"
+      }, t(userHelp.title))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: "pb-2"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "keyboard-shortcut-title pb-1"
+      }, t(userHelpData[1]['shortcutType'])), this.renderContainer(this.shortcutData[1]['Heading_1'][0], t(userHelpData[1].shortcutData['Heading_1'])), this.renderContainer(this.shortcutData[1]['Heading_2'][0], t(userHelpData[1].shortcutData['Heading_2'])), this.renderContainer(this.shortcutData[1]['Heading_3'][0], t(userHelpData[1].shortcutData['Heading_3'])), this.renderContainer(this.shortcutData[1]['Heading_4'][0], t(userHelpData[1].shortcutData['Heading_4'])), this.renderContainer(this.shortcutData[1]['Heading_5'][0], t(userHelpData[1].shortcutData['Heading_5'])), this.renderContainer(this.shortcutData[1]['Heading_6'][0], t(userHelpData[1].shortcutData['Heading_6']))), /*#__PURE__*/React.createElement("div", {
+        className: "pb-2"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "keyboard-shortcut-title pb-1"
+      }, t(userHelpData[0]['shortcutType'])), /*#__PURE__*/React.createElement("div", {
+        className: "keyboard-shortcut-container"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "col-4"
+      }, this.renderShortcut(this.shortcutData[0]['Make_list'][0]), this.renderShortcut(this.shortcutData[0]['Make_list'][1])), /*#__PURE__*/React.createElement("div", {
+        className: "col-8"
+      }, t(userHelpData[0].shortcutData['Make_list']))), /*#__PURE__*/React.createElement("div", {
+        className: "keyboard-shortcut-container"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "col-4"
+      }, this.renderShortcut(this.shortcutData[0]['Make_ordered_list'][0])), /*#__PURE__*/React.createElement("div", {
+        className: "col-8"
+      }, t(userHelpData[0].shortcutData['Make_ordered_list']))), this.renderContainer(this.shortcutData[0]['Increase_depth'][0], t(userHelpData[0].shortcutData['Increase_depth'])), this.renderContainer(this.shortcutData[0]['Insert_child_in_item'][0], t(userHelpData[0].shortcutData['Insert_child_in_item'])), this.renderContainer(this.shortcutData[0]['Insert_new_item'][0], t(userHelpData[0].shortcutData['Insert_new_item']))), /*#__PURE__*/React.createElement("div", {
+        className: "pb-2"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "keyboard-shortcut-title pb-1"
+      }, t(userHelpData[6]['shortcutType'])), /*#__PURE__*/React.createElement("div", {
+        className: "keyboard-shortcut-container"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "col-4"
+      }, this.renderShortcut(this.shortcutData[5]['Bold'][0]), this.renderShortcut(this.shortcutData[5]['Bold'][1])), /*#__PURE__*/React.createElement("div", {
+        className: "col-8"
+      }, t(userHelpData[5].shortcutData['Bold']))), /*#__PURE__*/React.createElement("div", {
+        className: "keyboard-shortcut-container"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "col-4"
+      }, this.renderShortcut(this.shortcutData[5]['Italic'][0]), this.renderShortcut(this.shortcutData[5]['Italic'][1])), /*#__PURE__*/React.createElement("div", {
+        className: "col-8"
+      }, t(userHelpData[5].shortcutData['Italic']))), /*#__PURE__*/React.createElement("div", {
+        className: "keyboard-shortcut-container"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "col-4"
+      }, this.renderShortcut(this.shortcutData[5]['Italic_Bold'][0]), this.renderShortcut(this.shortcutData[5]['Italic_Bold'][1])), /*#__PURE__*/React.createElement("div", {
+        className: "col-8"
+      }, t(userHelpData[5].shortcutData['Italic_Bold']))), this.renderContainer(this.shortcutData[5]['Inline_code'][0], t(userHelpData[5].shortcutData['Inline_code']))), /*#__PURE__*/React.createElement("div", {
+        className: "pb-2"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "keyboard-shortcut-title pb-1"
+      }, t(userHelpData[2]['shortcutType'])), /*#__PURE__*/React.createElement("div", {
+        className: "keyboard-shortcut-container"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "col-4"
+      }, this.renderShortcut(this.shortcutData[2]['Make_code_block'][0]), this.renderShortcut(this.shortcutData[2]['Make_code_block'][1])), /*#__PURE__*/React.createElement("div", {
+        className: "col-8"
+      }, t(userHelpData[2].shortcutData['Make_code_block']))), this.renderContainer(this.shortcutData[2]['Insert_indent'][0], t(userHelpData[2].shortcutData['Insert_indent'])), this.renderContainer(this.shortcutData[2]['Insert_new_line'][0], t(userHelpData[2].shortcutData['Insert_new_line'])), this.renderContainer(this.shortcutData[2]['Escape_code_block'][0], t(userHelpData[2].shortcutData['Escape_code_block']))), /*#__PURE__*/React.createElement("div", {
+        className: "pb-2"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "keyboard-shortcut-title pb-1"
+      }, t(userHelpData[3]['shortcutType'])), this.renderContainer(this.shortcutData[3]['Make_Block_quote'][0], t(userHelpData[3].shortcutData['Make_Block_quote'])), this.renderContainer(this.shortcutData[3]['Escape_Block_quote'][0], t(userHelpData[3].shortcutData['Escape_Block_quote']))), /*#__PURE__*/React.createElement("div", {
+        className: "pb-2"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "keyboard-shortcut-title pb-1"
+      }, t(userHelpData[4]['shortcutType'])), this.renderContainer(this.shortcutData[4]['Insert_Table_Row'][0], t(userHelpData[4].shortcutData['Insert_Table_Row'])), this.renderContainer(this.shortcutData[4]['Escape_table'][0], t(userHelpData[4].shortcutData['Escape_table']))), /*#__PURE__*/React.createElement("div", {
+        className: "pb-2"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "keyboard-shortcut-title pb-1"
+      }, t(userHelpData[7]['shortcutType'])), this.renderContainer(this.shortcutData[6]['Paste_screen_shot'][0], t(userHelpData[7].shortcutData['Paste_screen_shot']))))));
+    }
+  }]);
+
+  return KeyboardShortcuts;
+}(React.PureComponent);
+
+export default withTranslation('dtable')(KeyboardShortcuts);

package/dist/components/side-panel.js

@@ -0,0 +1,175 @@
+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";
+
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react';
+import OutlineView from './outline';
+import CommentPanel from './comment-panel';
+import DetailListView from './detail-list-view';
+
+var SidePanel = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(SidePanel, _React$PureComponent);
+
+  var _super = _createSuper(SidePanel);
+
+  function SidePanel() {
+    var _this;
+
+    _classCallCheck(this, SidePanel);
+
+    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.state = {
+      navItem: 'outline'
+    };
+
+    _this.onOutlineClick = function (event) {
+      event.preventDefault();
+
+      _this.props.toggleCommentBtn(false);
+
+      _this.setState({
+        navItem: 'outline'
+      });
+    };
+
+    _this.onMarkdownHintClick = function (event) {
+      event.preventDefault();
+
+      _this.props.toggleCommentBtn(false);
+
+      _this.setState({
+        navItem: 'markdownHint'
+      });
+    };
+
+    _this.onDetailClick = function (event) {
+      event.preventDefault();
+
+      _this.props.toggleCommentBtn(false);
+
+      _this.setState({
+        navItem: 'detail'
+      });
+    };
+
+    _this.onCommentsPanelClick = function (event) {
+      event.preventDefault();
+
+      _this.props.toggleCommentBtn(true);
+
+      _this.setState({
+        navItem: 'commentsPanel'
+      });
+    };
+
+    _this.openMarkdownHint = function () {
+      _this.setState({
+        navItem: 'markdownHint'
+      });
+    };
+
+    return _this;
+  }
+
+  _createClass(SidePanel, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      window.openMarkdownHint = this.openMarkdownHint;
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if (nextProps.issues !== this.props.issues) {
+        if (nextProps.issues.issue_list.length > 0) {
+          this.setState({
+            navItem: 'markdownHint'
+          });
+        }
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.openMarkdownHint = null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var outlineActive = ''; // var markdownHint = '';
+
+      var commentsPanel = '';
+      var detailList = '';
+
+      if (this.state.navItem === 'outline') {
+        outlineActive = 'active';
+      } else if (this.state.navItem === 'commentsPanel') {
+        commentsPanel = 'active';
+      } else if (this.state.navItem === 'detail') {
+        detailList = 'active';
+      } else {// markdownHint = 'active';
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: "side-panel"
+      }, /*#__PURE__*/React.createElement("ul", {
+        className: "nav justify-content-center"
+      }, /*#__PURE__*/React.createElement("li", {
+        className: "nav-item"
+      }, /*#__PURE__*/React.createElement("a", {
+        className: 'nav-link ' + outlineActive,
+        href: "",
+        onClick: this.onOutlineClick
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "iconfont icon-list-ul"
+      }))), /*#__PURE__*/React.createElement("li", {
+        className: "nav-item"
+      }, /*#__PURE__*/React.createElement("a", {
+        className: 'nav-link ' + detailList,
+        href: "",
+        onClick: this.onDetailClick
+      }, /*#__PURE__*/React.createElement("i", {
+        className: 'iconfont icon-info-circle'
+      }))), /*#__PURE__*/React.createElement("li", {
+        className: "nav-item"
+      }, /*#__PURE__*/React.createElement("a", {
+        className: 'nav-link ' + commentsPanel,
+        href: "",
+        onClick: this.onCommentsPanelClick
+      }, /*#__PURE__*/React.createElement("i", {
+        className: 'iconfont icon-comment'
+      })))), /*#__PURE__*/React.createElement("div", {
+        className: "side-panel-content"
+      }, this.state.navItem === 'outline' && /*#__PURE__*/React.createElement(OutlineView, {
+        editor: this.props.editor,
+        document: this.props.document,
+        t: this.props.t
+      }), this.state.navItem === 'commentsPanel' && /*#__PURE__*/React.createElement(CommentPanel, {
+        editorApi: this.props.editorApi,
+        t: this.props.t,
+        scrollToQuote: this.props.scrollToQuote,
+        relistComment: this.props.relistComment,
+        openDialogs: this.props.openDialogs,
+        participants: this.props.participants,
+        onParticipantsChange: this.props.onParticipantsChange
+      }), this.state.navItem === 'detail' && /*#__PURE__*/React.createElement(DetailListView, {
+        t: this.props.t,
+        relatedFiles: this.props.relatedFiles,
+        fileTagList: this.props.fileTagList,
+        editorApi: this.props.editorApi,
+        openDialogs: this.props.openDialogs,
+        fileInfo: this.props.fileInfo,
+        participants: this.props.participants
+      })));
+    }
+  }]);
+
+  return SidePanel;
+}(React.PureComponent);
+
+export default SidePanel;