@seafile/seafile-editor 0.3.97 → 0.3.100

package/dist/components/outline/index.js

@@ -0,0 +1,97 @@
+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) {
+      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';
 
@@ -14,12 +14,16 @@ var KeyboardShortcuts = /*#__PURE__*/function (_React$PureComponent) {
 
   var _super = _createSuper(KeyboardShortcuts);
 
-  function KeyboardShortcuts(props) {
+  function KeyboardShortcuts() {
     var _this;
 
     _classCallCheck(this, KeyboardShortcuts);
 
-    _this = _super.call(this, props);
+    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.renderShortcut = function (keys) {
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
@@ -41,39 +45,6 @@ var KeyboardShortcuts = /*#__PURE__*/function (_React$PureComponent) {
       }, 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;
   }
 
@@ -97,7 +68,7 @@ var KeyboardShortcuts = /*#__PURE__*/function (_React$PureComponent) {
         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", {
+      }, t(userHelpData[1]['shortcutType'])), this.renderContainer(['#', 'space'], t(userHelpData[1].shortcutData['Heading_1'])), this.renderContainer(['##', 'space'], t(userHelpData[1].shortcutData['Heading_2'])), this.renderContainer(['###', 'space'], t(userHelpData[1].shortcutData['Heading_3'])), this.renderContainer(['####', 'space'], t(userHelpData[1].shortcutData['Heading_4'])), this.renderContainer(['#####', 'space'], t(userHelpData[1].shortcutData['Heading_5'])), this.renderContainer(['######', 'space'], t(userHelpData[1].shortcutData['Heading_6']))), /*#__PURE__*/React.createElement("div", {
         className: "pb-2"
       }, /*#__PURE__*/React.createElement("div", {
         className: "keyboard-shortcut-title pb-1"
@@ -105,15 +76,15 @@ var KeyboardShortcuts = /*#__PURE__*/function (_React$PureComponent) {
         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", {
+      }, this.renderShortcut(['*', 'space']), this.renderShortcut(['-', 'space'])), /*#__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", {
+      }, this.renderShortcut(['1.', 'space'])), /*#__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", {
+      }, t(userHelpData[0].shortcutData['Make_ordered_list']))), this.renderContainer(['Tab'], t(userHelpData[0].shortcutData['Increase_depth'])), this.renderContainer(['Shift', 'Enter'], t(userHelpData[0].shortcutData['Insert_child_in_item'])), this.renderContainer(['Enter'], t(userHelpData[0].shortcutData['Insert_new_item']))), /*#__PURE__*/React.createElement("div", {
         className: "pb-2"
       }, /*#__PURE__*/React.createElement("div", {
         className: "keyboard-shortcut-title pb-1"
@@ -121,21 +92,21 @@ var KeyboardShortcuts = /*#__PURE__*/function (_React$PureComponent) {
         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", {
+      }, this.renderShortcut(['**bold**', 'space']), this.renderShortcut(['__bold__', 'space'])), /*#__PURE__*/React.createElement("div", {
         className: "col-8"
-      }, t(userHelpData[5].shortcutData['Bold']))), /*#__PURE__*/React.createElement("div", {
+      }, t(userHelpData[6].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", {
+      }, this.renderShortcut(['*italic*', 'space']), this.renderShortcut(['_italic_', 'space'])), /*#__PURE__*/React.createElement("div", {
         className: "col-8"
-      }, t(userHelpData[5].shortcutData['Italic']))), /*#__PURE__*/React.createElement("div", {
+      }, t(userHelpData[6].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", {
+      }, this.renderShortcut(['***italic***', 'space']), this.renderShortcut(['___italic___', 'space'])), /*#__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", {
+      }, t(userHelpData[6].shortcutData['Italic_Bold']))), this.renderContainer(['`code`', 'space'], t(userHelpData[6].shortcutData['Inline_code']))), /*#__PURE__*/React.createElement("div", {
         className: "pb-2"
       }, /*#__PURE__*/React.createElement("div", {
         className: "keyboard-shortcut-title pb-1"
@@ -143,21 +114,25 @@ var KeyboardShortcuts = /*#__PURE__*/function (_React$PureComponent) {
         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", {
+      }, this.renderShortcut(['```']), this.renderShortcut(['space*4'])), /*#__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", {
+      }, t(userHelpData[2].shortcutData['Make_code_block']))), this.renderContainer(['Tab'], t(userHelpData[2].shortcutData['Insert_indent'])), this.renderContainer(['Enter'], t(userHelpData[2].shortcutData['Insert_new_line'])), this.renderContainer([controlKey, 'Enter'], 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(['>', 'space'], t(userHelpData[3].shortcutData['Make_Block_quote'])), this.renderContainer(['Enter'], 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[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", {
+      }, t(userHelpData[4]['shortcutType'])), this.renderContainer(['Enter'], t(userHelpData[4].shortcutData['Insert_Table_Row'])), this.renderContainer([controlKey, 'Enter'], 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[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", {
+      }, t(userHelpData[7]['shortcutType'])), this.renderContainer([controlKey, 's'], t(userHelpData[7].shortcutData['Save_file']))), /*#__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']))))));
+      }, t(userHelpData[8]['shortcutType'])), this.renderContainer([controlKey, 'v'], t(userHelpData[8].shortcutData['Paste_screen_shot']))))));
     }
   }]);
 

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);

package/dist/components/toolbar/insert-table.js

@@ -0,0 +1,155 @@
+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, { Component } from 'react';
+import ClickOutside from '../click-outside';
+import ButtonItem from './widgets/button-item';
+
+var InsertTable = /*#__PURE__*/function (_Component) {
+  _inherits(InsertTable, _Component);
+
+  var _super = _createSuper(InsertTable);
+
+  function InsertTable(props) {
+    var _this;
+
+    _classCallCheck(this, InsertTable);
+
+    _this = _super.call(this, props);
+
+    _this.toggleCard = function () {
+      _this.setState({
+        showCard: !_this.state.showCard,
+        columnCount: -1,
+        rowCount: -1
+      });
+    };
+
+    _this.createTableCells = function () {
+      var rows = [];
+      var _this$state = _this.state,
+          columnCount = _this$state.columnCount,
+          rowCount = _this$state.rowCount,
+          currentMaxColumnCount = _this$state.currentMaxColumnCount,
+          currentMaxRowCount = _this$state.currentMaxRowCount;
+
+      var _loop = function _loop(rowIndex) {
+        var cells = [];
+
+        var _loop2 = function _loop2(columnIndex) {
+          var isActive = columnIndex <= columnCount - 1 && rowIndex <= rowCount - 1;
+          var vDom = /*#__PURE__*/React.createElement("div", {
+            onMouseEnter: function onMouseEnter() {
+              return _this.onTableCellMouseEnter(rowIndex, columnIndex);
+            },
+            key: "table-row-".concat(rowIndex, "-").concat(columnIndex),
+            className: "sf-editor-table-card-cell ".concat(isActive ? 'sf-editor-table-card-active-cell' : '')
+          });
+          cells.push(vDom);
+        };
+
+        for (var columnIndex = 0; columnIndex < currentMaxColumnCount; columnIndex++) {
+          _loop2(columnIndex);
+        }
+
+        var row = /*#__PURE__*/React.createElement("div", {
+          key: "table-row-".concat(rowIndex),
+          className: "sf-editor-table-card-row"
+        }, cells);
+        rows.push(row);
+      };
+
+      for (var rowIndex = 0; rowIndex < currentMaxRowCount; rowIndex++) {
+        _loop(rowIndex);
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        onClick: function onClick(event) {
+          return _this.onAddTable(event, rowCount, columnCount);
+        },
+        className: "sf-editor-table-card"
+      }, rows);
+    };
+
+    _this.onAddTable = function (event, rowCount, columnCount) {
+      _this.props.onAddTable(event, rowCount, columnCount);
+
+      _this.toggleCard();
+    };
+
+    _this.onTableCellMouseEnter = function (rowIndex, columnIndex) {
+      var columnCount = columnIndex + 1,
+          rowCount = rowIndex + 1;
+      var currentMaxRowCount = rowCount + 1,
+          currentMaxColumnCount = columnCount + 1;
+
+      if (currentMaxColumnCount > 10) {
+        currentMaxColumnCount = 10;
+      } else if (currentMaxColumnCount < 4) {
+        currentMaxColumnCount = 4;
+      }
+
+      if (currentMaxRowCount > 10) {
+        currentMaxRowCount = 10;
+      } else if (currentMaxRowCount < 4) {
+        currentMaxRowCount = 4;
+      }
+
+      _this.setState({
+        columnCount: columnCount,
+        rowCount: rowCount,
+        currentMaxColumnCount: currentMaxColumnCount,
+        currentMaxRowCount: currentMaxRowCount
+      });
+    };
+
+    _this.state = {
+      showCard: false,
+      currentMaxColumnCount: 4,
+      currentMaxRowCount: 4,
+      columnCount: -1,
+      rowCount: -1
+    };
+    return _this;
+  }
+
+  _createClass(InsertTable, [{
+    key: "createTableScaleCard",
+    value: function createTableScaleCard(props) {
+      var _this$state2 = this.state,
+          columnCount = _this$state2.columnCount,
+          rowCount = _this$state2.rowCount;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "sf-editor-table-count-card"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "sf-editor-table-cells-header"
+      }, "".concat(columnCount < 0 ? 0 : columnCount, " x ").concat(rowCount < 0 ? 0 : rowCount)), this.createTableCells());
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          disabled = _this$props.disabled,
+          isRichEditor = _this$props.isRichEditor,
+          text = _this$props.text;
+      var showCard = this.state.showCard;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "sf-editor-table-btn-wrapper"
+      }, /*#__PURE__*/React.createElement(ButtonItem, {
+        disabled: disabled,
+        isRichEditor: isRichEditor,
+        text: text,
+        id: 'tableButton',
+        icon: 'iconfont icon-table',
+        onMouseDown: this.toggleCard
+      }), showCard && /*#__PURE__*/React.createElement(ClickOutside, {
+        clickOutside: this.toggleCard
+      }, this.createTableScaleCard()));
+    }
+  }]);
+
+  return InsertTable;
+}(Component);
+
+export default InsertTable;