@seafile/seafile-editor 0.3.76

package/dist/components/topbar-component/header-list.js

@@ -0,0 +1,128 @@
+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 ReactDOM from 'react-dom';
+import { withTranslation } from 'react-i18next';
+
+var HeaderList = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(HeaderList, _React$PureComponent);
+
+  var _super = _createSuper(HeaderList);
+
+  function HeaderList(props) {
+    var _this;
+
+    _classCallCheck(this, HeaderList);
+
+    _this = _super.call(this, props);
+
+    _this.handleClick = function (event) {
+      if (_this.props.disabled) return;
+
+      var container = _this.getContainer();
+
+      if (container.contains(event.target)) {
+        _this.toggle();
+      } else {
+        if (_this.state.dropdownOpen) {
+          _this.setState({
+            dropdownOpen: !_this.state.dropdownOpen
+          });
+        }
+      }
+    };
+
+    _this.toggle = function () {
+      _this.setState({
+        dropdownOpen: !_this.state.dropdownOpen
+      });
+    };
+
+    _this.state = {
+      dropdownOpen: false
+    };
+    return _this;
+  }
+
+  _createClass(HeaderList, [{
+    key: "getContainer",
+    value: function getContainer() {
+      return ReactDOM.findDOMNode(this);
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('click', this.handleClick);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('click', this.handleClick);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      /*
+      *  here need to use click event in DropdownItem instead of onMouseDown, reactStrap listen click, keyUp, to trigger toggle function,
+      *  if we listen mouseDown event the tool bar will render,the position of the component will change
+      *  and then the click event of this component will not be triggered
+      * */
+      return /*#__PURE__*/React.createElement("div", {
+        className: 'header-list'
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'list-body ' + (this.props.disabled ? '' : 'header-list-body-hover') + (this.state.dropdownOpen ? ' header-list-body-highlight' : '')
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'list-title'
+      }, this.props.t(this.props.headerType)), /*#__PURE__*/React.createElement("div", {
+        className: 'list-caret'
+      }, /*#__PURE__*/React.createElement("i", {
+        className: this.state.dropdownOpen ? 'iconfont icon-caret-up' : 'iconfont icon-drop-down'
+      }))), this.state.dropdownOpen && /*#__PURE__*/React.createElement("div", {
+        className: 'list-dropdown'
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'list-dropdown-item',
+        onClick: function onClick(event) {
+          _this2.props.onClickHeader(event, 'paragraph');
+        }
+      }, this.props.t('paragraph')), /*#__PURE__*/React.createElement("div", {
+        className: 'list-dropdown-item',
+        onClick: function onClick(event) {
+          _this2.props.onClickHeader(event, 'header_one');
+        }
+      }, this.props.t('header_one')), /*#__PURE__*/React.createElement("div", {
+        className: 'list-dropdown-item',
+        onClick: function onClick(event) {
+          _this2.props.onClickHeader(event, 'header_two');
+        }
+      }, this.props.t('header_two')), /*#__PURE__*/React.createElement("div", {
+        className: 'list-dropdown-item',
+        onClick: function onClick(event) {
+          _this2.props.onClickHeader(event, 'header_three');
+        }
+      }, this.props.t('header_three')), /*#__PURE__*/React.createElement("div", {
+        className: 'list-dropdown-item',
+        onClick: function onClick(event) {
+          _this2.props.onClickHeader(event, 'header_four');
+        }
+      }, this.props.t('header_four')), /*#__PURE__*/React.createElement("div", {
+        className: 'list-dropdown-item',
+        onClick: function onClick(event) {
+          _this2.props.onClickHeader(event, 'header_five');
+        }
+      }, this.props.t('header_five')), /*#__PURE__*/React.createElement("div", {
+        className: 'list-dropdown-item',
+        onClick: function onClick(event) {
+          _this2.props.onClickHeader(event, 'header_six');
+        }
+      }, this.props.t('header_six'))));
+    }
+  }]);
+
+  return HeaderList;
+}(React.PureComponent);
+
+export default withTranslation('seafile-editor')(HeaderList);

package/dist/components/topbar-component/icon-button.js

@@ -0,0 +1,99 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+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 { withTranslation } from 'react-i18next';
+
+var IconButton = /*#__PURE__*/function (_React$Component) {
+  _inherits(IconButton, _React$Component);
+
+  var _super = _createSuper(IconButton);
+
+  function IconButton(props) {
+    var _this;
+
+    _classCallCheck(this, IconButton);
+
+    _this = _super.call(this, props);
+
+    _this.toggle = function () {
+      if (_this.props.disabled || _this.state.isFreezed && !_this.state.tooltipOpen) return;
+
+      _this.setState({
+        tooltipOpen: !_this.state.tooltipOpen,
+        isFreezed: true
+      });
+
+      var that = _assertThisInitialized(_this);
+
+      setTimeout(function () {
+        that.setState({
+          isFreezed: false
+        });
+      }, 100);
+    };
+
+    _this.getClassName = function () {
+      var className = _this.props.isRichEditor ? 'rich-icon-btn ' + (_this.props.disabled ? 'rich-icon-btn-disabled' : 'rich-icon-btn-hover') : 'btn btn-icon btn-secondary btn-active';
+      className = className + ' ' + (_this.props.className || '');
+      return className;
+    };
+
+    _this.state = {
+      tooltipOpen: false,
+      isFreezed: false
+    };
+    return _this;
+  }
+
+  _createClass(IconButton, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      if (this.props.disabled !== nextProps.disabled) {
+        this.setState({
+          tooltipOpen: false
+        });
+        return true;
+      } // only render iconButton when the button is active or show show tooltip
+
+
+      if (nextState.tooltipOpen === this.state.tooltipOpen && nextProps.isActive === this.props.isActive) {
+        return false;
+      }
+
+      return true;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var className = this.getClassName();
+      return /*#__PURE__*/React.createElement("button", {
+        id: this.props.id,
+        type: 'button',
+        onClick: this.props.disabled ? null : this.props.onClick,
+        onMouseDown: this.props.disabled ? null : this.props.onMouseDown,
+        className: className,
+        "data-active": this.props.isActive || false,
+        disabled: this.props.disabled
+      }, /*#__PURE__*/React.createElement("i", {
+        className: this.props.icon
+      }), /*#__PURE__*/React.createElement(Tooltip, {
+        toggle: this.toggle,
+        delay: {
+          show: 0,
+          hide: 0
+        },
+        target: this.props.id,
+        placement: "bottom",
+        isOpen: this.state.tooltipOpen
+      }, this.props.text));
+    }
+  }]);
+
+  return IconButton;
+}(React.Component);
+
+export default withTranslation('seafile-editor')(IconButton);

package/dist/components/topbar-component/insert-file.js

@@ -0,0 +1,67 @@
+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 { withTranslation } from 'react-i18next';
+
+var InsertFile = /*#__PURE__*/function (_React$Component) {
+  _inherits(InsertFile, _React$Component);
+
+  var _super = _createSuper(InsertFile);
+
+  function InsertFile(props) {
+    var _this;
+
+    _classCallCheck(this, InsertFile);
+
+    _this = _super.call(this, props);
+
+    _this.toggle = function () {
+      if (_this.props.disabled) {
+        _this.setState({
+          tooltipOpen: false
+        });
+
+        return;
+      } else {
+        _this.setState({
+          tooltipOpen: !_this.state.tooltipOpen
+        });
+      }
+    };
+
+    _this.state = {
+      tooltipOpen: false
+    };
+    return _this;
+  }
+
+  _createClass(InsertFile, [{
+    key: "render",
+    value: function render() {
+      var className = this.props.disabled ? 'insert-file insert-file-disabled rich-icon-btn rich-icon-btn-disabled' : 'insert-file rich-icon-btn';
+      return /*#__PURE__*/React.createElement("span", {
+        className: className,
+        id: "insertFileButton",
+        onMouseDown: this.props.insertRepoFile
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "iconfont icon-file"
+      }), /*#__PURE__*/React.createElement(Tooltip, {
+        toggle: this.toggle,
+        delay: {
+          show: 0,
+          hide: 0
+        },
+        target: "insertFileButton",
+        placement: "bottom",
+        isOpen: this.state.tooltipOpen
+      }, this.props.t('insert_file')));
+    }
+  }]);
+
+  return InsertFile;
+}(React.Component);
+
+export default withTranslation('seafile-editor')(InsertFile);

package/dist/components/topbar-component/table-toolbar.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";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import IconButton from './icon-button';
+import ButtonGroup from './button-group';
+import { withTranslation } from 'react-i18next';
+
+var TableToolBar = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(TableToolBar, _React$PureComponent);
+
+  var _super = _createSuper(TableToolBar);
+
+  function TableToolBar() {
+    _classCallCheck(this, TableToolBar);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(TableToolBar, [{
+    key: "render",
+    value: function render() {
+      var _this = this;
+
+      return /*#__PURE__*/React.createElement(ButtonGroup, {
+        className: 'editor-btn-group'
+      }, /*#__PURE__*/React.createElement(DropList, {
+        icon: 'iconfont icon-left-alignment',
+        items: [{
+          handle: function handle(e) {
+            _this.props.onSetAlign(e, 'left');
+          },
+          icon: 'iconfont icon-left-alignment',
+          text: this.props.t('left')
+        }, {
+          handle: function handle(e) {
+            _this.props.onSetAlign(e, 'center');
+          },
+          icon: 'iconfont icon-center-horizontally',
+          text: this.props.t('center')
+        }, {
+          handle: function handle(e) {
+            _this.props.onSetAlign(e, 'right');
+          },
+          icon: 'icon icon-align-right',
+          text: this.props.t('right')
+        }]
+      }), /*#__PURE__*/React.createElement(DropList, {
+        icon: 'iconfont icon-column',
+        items: [{
+          handle: this.props.onInsertColumn,
+          text: this.props.t('Insert_Column')
+        }, {
+          handle: this.props.onRemoveColumn,
+          text: this.props.t('Remove_Column')
+        }]
+      }), /*#__PURE__*/React.createElement(DropList, {
+        icon: 'iconfont icon-row',
+        items: [{
+          handle: this.props.onInsertRow,
+          text: this.props.t('Insert_Row')
+        }, {
+          handle: this.props.onRemoveRow,
+          text: this.props.t('Remove_Row')
+        }]
+      }), /*#__PURE__*/React.createElement(IconButton, {
+        disabled: false,
+        isRichEditor: true,
+        text: this.props.t('remove_table'),
+        id: 'removeTable',
+        icon: 'iconfont icon-delete-table',
+        onMouseDown: this.props.onRemoveTable
+      }));
+    }
+  }]);
+
+  return TableToolBar;
+}(React.PureComponent);
+
+var DropList = /*#__PURE__*/function (_React$PureComponent2) {
+  _inherits(DropList, _React$PureComponent2);
+
+  var _super2 = _createSuper(DropList);
+
+  function DropList(props) {
+    var _this2;
+
+    _classCallCheck(this, DropList);
+
+    _this2 = _super2.call(this, props);
+
+    _this2.handleClick = function (event) {
+      if (_this2.props.disabled) return;
+
+      var container = _this2.getContainer();
+
+      if (container.contains(event.target)) {
+        _this2.toggle();
+      } else {
+        if (_this2.state.dropdownOpen) {
+          _this2.setState({
+            dropdownOpen: !_this2.state.dropdownOpen
+          });
+        }
+      }
+    };
+
+    _this2.toggle = function () {
+      _this2.setState({
+        dropdownOpen: !_this2.state.dropdownOpen
+      });
+    };
+
+    _this2.state = {
+      dropdownOpen: false
+    };
+    return _this2;
+  }
+
+  _createClass(DropList, [{
+    key: "getContainer",
+    value: function getContainer() {
+      return ReactDOM.findDOMNode(this);
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('click', this.handleClick);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('click', this.handleClick);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var items = [];
+      this.props.items.forEach(function (item, index) {
+        items.push( /*#__PURE__*/React.createElement("button", {
+          key: 'dropdown-item' + index,
+          onMouseDown: item.handle,
+          className: 'dropdown-item'
+        }, item.icon ? /*#__PURE__*/React.createElement("i", {
+          className: item.icon,
+          style: {
+            marginRight: '6px'
+          }
+        }) : null, item.text));
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        className: 'custom-dropdown-list'
+      }, /*#__PURE__*/React.createElement("div", {
+        id: 'list_toggle',
+        className: 'dropdown-list-toggle'
+      }, /*#__PURE__*/React.createElement("i", {
+        className: this.props.icon,
+        style: {
+          marginRight: '3px'
+        }
+      }), /*#__PURE__*/React.createElement("i", {
+        className: this.state.dropdownOpen ? 'iconfont icon-caret-up' : 'iconfont icon-drop-down'
+      })), this.state.dropdownOpen && /*#__PURE__*/React.createElement("div", {
+        role: 'menu',
+        className: 'custom-dropdown-menu dropdown-menu'
+      }, items));
+    }
+  }]);
+
+  return DropList;
+}(React.PureComponent);
+
+export default withTranslation('seafile-editor')(TableToolBar);

package/dist/components/topbar-component/upload-img.js

@@ -0,0 +1,122 @@
+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 { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Tooltip, Label, Input } from 'reactstrap';
+import { withTranslation } from 'react-i18next';
+
+var UploadImg = /*#__PURE__*/function (_React$Component) {
+  _inherits(UploadImg, _React$Component);
+
+  var _super = _createSuper(UploadImg);
+
+  function UploadImg() {
+    var _this;
+
+    _classCallCheck(this, UploadImg);
+
+    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 = {
+      dropdownOpen: false,
+      tooltipOpen: false
+    };
+
+    _this.imgtoggle = function () {
+      _this.setState({
+        dropdownOpen: !_this.state.dropdownOpen
+      });
+    };
+
+    _this.toggle = function () {
+      if (_this.props.disabled) {
+        _this.setState({
+          tooltipOpen: false
+        });
+
+        return;
+      }
+
+      _this.setState({
+        tooltipOpen: !_this.state.tooltipOpen
+      });
+    };
+
+    _this.uploadLocalImage = function (event) {
+      if (window.editor.editorApi.uploadLocalImage) {
+        window.editor.editorApi.uploadLocalImage(event.target.files[0]).then(function (res) {
+          _this.props.onInsertImage({
+            url: res
+          });
+        });
+      }
+    };
+
+    _this.handleFileChange = function (event) {
+      _this.uploadLocalImage(event);
+
+      _this.setState({
+        dropdownOpen: false
+      });
+    };
+
+    _this.onInputFile = function (event) {
+      event.target.value = null;
+      event.nativeEvent.stopImmediatePropagation();
+      event.stopPropagation();
+    };
+
+    return _this;
+  }
+
+  _createClass(UploadImg, [{
+    key: "render",
+    value: function render() {
+      var t = this.props.t;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
+        isOpen: this.state.dropdownOpen,
+        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,
+        disabled: this.props.disabled
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "iconfont icon-image"
+      }), /*#__PURE__*/React.createElement(Tooltip, {
+        toggle: this.toggle,
+        delay: {
+          show: 0,
+          hide: 0
+        },
+        target: this.props.id,
+        placement: "bottom",
+        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, {
+        onMouseDown: this.props.insertRepoFile
+      }, t('Insert_library_image')), /*#__PURE__*/React.createElement(DropdownItem, {
+        className: "image-uploader-btn"
+      }, /*#__PURE__*/React.createElement(Label, {
+        className: "image-uploader-label",
+        for: "image-uploader",
+        onClick: this.onInputFile
+      }, t('upload_local_image')), /*#__PURE__*/React.createElement(Input, {
+        type: "file",
+        accept: "image/*",
+        onChange: this.handleFileChange,
+        onClick: this.onInputFile,
+        className: "image-uploader",
+        id: "image-uploader"
+      })))));
+    }
+  }]);
+
+  return UploadImg;
+}(React.Component);
+
+export default withTranslation('seafile-editor')(UploadImg);