@seafile/sdoc-editor 0.1.0 → 0.1.2

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

@@ -1,136 +0,0 @@
-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 (event) {
-      if (event) {
-        event.stopPropagation();
-        event.nativeEvent.stopImmediatePropagation();
-      }
-      _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;

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

@@ -1,74 +0,0 @@
-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 ButtonGroup from './widgets/button-group';
-import ButtonItem from './widgets/button-item';
-import DropList from './widgets/drop-list';
-var InsertTable = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(InsertTable, _React$PureComponent);
-  var _super = _createSuper(InsertTable);
-  function InsertTable() {
-    _classCallCheck(this, InsertTable);
-    return _super.apply(this, arguments);
-  }
-  _createClass(InsertTable, [{
-    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(ButtonItem, {
-        disabled: false,
-        isRichEditor: true,
-        text: this.props.t('remove_table'),
-        id: 'removeTable',
-        icon: 'iconfont icon-delete-table',
-        onMouseDown: this.props.onRemoveTable
-      }));
-    }
-  }]);
-  return InsertTable;
-}(React.PureComponent);
-export default withTranslation('seafile-editor')(InsertTable);

package/dist/components/toolbar/toolbar.js

@@ -1,317 +0,0 @@
-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, { Fragment } from 'react';
-import { withTranslation } from 'react-i18next';
-import EditorContext from '../../containers/editor-context';
-import ButtonItem from './widgets/button-item';
-import ButtonGroup from './widgets/button-group';
-import HeaderList from './header-list';
-import InsertTable from './insert-table';
-import InsertImage from './insert-image';
-import TableGroup from './table-group';
-import AddLinkDialog from '../dialogs/add-link-dialog';
-import AddImageDialog from '../dialogs/add-image-dialog';
-import AddFormulaDialog from '../dialogs/add-formula-dialog';
-import ColumnIcon from '../svg-icons/column-icon';
-import '../../assets/css/topbar.css';
-var Toolbar = /*#__PURE__*/function (_React$Component) {
-  _inherits(Toolbar, _React$Component);
-  var _super = _createSuper(Toolbar);
-  function Toolbar(props) {
-    var _this;
-    _classCallCheck(this, Toolbar);
-    _this = _super.call(this, props);
-    _this.onClickHeader = function (event, type) {
-      event.preventDefault();
-      _this.editorUtils.clickHeader(type);
-    };
-    _this.onClickMark = function (type) {
-      return function (event) {
-        event.preventDefault();
-        _this.editorUtils.clickMark(type);
-      };
-    };
-    _this.onClickBlock = function (type) {
-      return function (event) {
-        event.preventDefault();
-        _this.editorUtils.clickBlock(type);
-      };
-    };
-    _this.onClearFormat = function (event) {
-      event.preventDefault();
-      _this.editorUtils.clearFormat();
-    };
-    _this.onClickCheckItem = function (event) {
-      event.preventDefault();
-      _this.editorUtils.clickCheckItem();
-    };
-    _this.onAddTable = function (event, rowCount, columnCount) {
-      event.preventDefault();
-      _this.editorUtils.addTable(rowCount, columnCount);
-    };
-    _this.onInsertImage = function (data) {
-      _this.editorUtils.insertImage(data);
-    };
-    _this.onAddCustomColumn = function (event) {
-      event.preventDefault();
-      event.nativeEvent.stopImmediatePropagation();
-      _this.editorUtils.addCustomColumn();
-    };
-    _this.onRemoveTable = function (event) {
-      event.preventDefault();
-      _this.editorUtils.removeTable();
-    };
-    _this.onInsertColumn = function (event) {
-      event.preventDefault();
-      _this.editorUtils.insertColumn();
-    };
-    _this.onRemoveColumn = function (event) {
-      event.preventDefault();
-      _this.editorUtils.removeColumn();
-    };
-    _this.onInsertRow = function (event) {
-      event.preventDefault();
-      _this.editorUtils.insertRow();
-    };
-    _this.onRemoveRow = function (event) {
-      event.preventDefault();
-      _this.editorUtils.removeRow();
-    };
-    _this.onSetAlign = function (event, align) {
-      event.preventDefault();
-      _this.editorUtils.setAlign(align);
-    };
-    _this.onToggleLink = function (event) {
-      event.preventDefault();
-      var isLinkActive = _this.editorUtils.isLinkActive();
-      if (!isLinkActive) {
-        _this.setState({
-          isShowLinkDialog: !_this.state.isShowLinkDialog
-        });
-        return;
-      }
-      _this.editorUtils.unwrapLink();
-    };
-    _this.onToggleLinkDialog = function () {
-      _this.setState({
-        isShowLinkDialog: !_this.state.isShowLinkDialog
-      });
-    };
-    _this.onToggleFormulaDialog = function () {
-      _this.setState({
-        isShowFormulaDialog: !_this.state.isShowFormulaDialog
-      });
-    };
-    _this.onToggleImageDialog = function () {
-      _this.setState({
-        isShowImageDialog: !_this.state.isShowImageDialog
-      });
-    };
-    _this.state = {
-      isShowLinkDialog: false,
-      isShowImageDialog: false,
-      isShowFormulaDialog: false
-    };
-    _this.editorUtils = EditorContext.getEditorUtils();
-    window.abcdef_editorToolbar = _assertThisInitialized(_this);
-    return _this;
-  }
-  _createClass(Toolbar, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        hasSidePanel = _this$props.hasSidePanel,
-        isShowSidePanel = _this$props.isShowSidePanel,
-        canInsertColumn = _this$props.canInsertColumn,
-        t = _this$props.t;
-      var toolbarStatus = this.editorUtils.getToolbarStatus();
-      var isTableActive = toolbarStatus.isTableActive,
-        isCodeActive = toolbarStatus.isCodeActive,
-        isBoldActive = toolbarStatus.isBoldActive,
-        isItalicActive = toolbarStatus.isItalicActive,
-        isInlineCodeActive = toolbarStatus.isInlineCodeActive,
-        isLinkActive = toolbarStatus.isLinkActive,
-        isBlockquoteActive = toolbarStatus.isBlockquoteActive,
-        isOrderedListActive = toolbarStatus.isOrderedListActive,
-        isUnorderedListActive = toolbarStatus.isUnorderedListActive,
-        isCheckListActive = toolbarStatus.isCheckListActive,
-        isFormulaActive = toolbarStatus.isFormulaActive,
-        isColumnActive = toolbarStatus.isColumnActive;
-      var isListActive = isOrderedListActive || isUnorderedListActive || isCheckListActive;
-      var sidePanelText = isShowSidePanel ? t('Hide_side_panel') : t('Show_side_panel');
-      var _this$state = this.state,
-        isShowLinkDialog = _this$state.isShowLinkDialog,
-        isShowImageDialog = _this$state.isShowImageDialog,
-        isShowFormulaDialog = _this$state.isShowFormulaDialog;
-      var isHeadActive = toolbarStatus.headerType !== 'paragraph';
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: 'sf-editor-toolbar ' + (this.props.isSimpleEditor ? '' : 'rich-menu')
-      }, /*#__PURE__*/React.createElement("div", {
-        className: 'button-container'
-      }, /*#__PURE__*/React.createElement("div", {
-        className: 'header-list-container'
-      }, /*#__PURE__*/React.createElement(HeaderList, {
-        disabled: isFormulaActive || isCodeActive || isColumnActive || isTableActive,
-        headerType: toolbarStatus.headerType,
-        onClickHeader: this.onClickHeader
-      })), /*#__PURE__*/React.createElement(ButtonGroup, {
-        className: 'editor-btn-group'
-      }, /*#__PURE__*/React.createElement(ButtonItem, {
-        disabled: isFormulaActive || isCodeActive || isColumnActive,
-        isRichEditor: true,
-        text: t('italic'),
-        id: 'ITALICButton',
-        icon: 'iconfont icon-italic',
-        isActive: isItalicActive,
-        onMouseDown: this.onClickMark('ITALIC')
-      }), /*#__PURE__*/React.createElement(ButtonItem, {
-        disabled: isFormulaActive || isCodeActive || isColumnActive,
-        isRichEditor: true,
-        text: t('bold'),
-        id: 'BOLDButton',
-        icon: 'iconfont icon-bold',
-        isActive: isBoldActive,
-        onMouseDown: this.onClickMark('BOLD')
-      }), /*#__PURE__*/React.createElement(ButtonItem, {
-        disabled: isFormulaActive || isCodeActive || isColumnActive,
-        isRichEditor: true,
-        text: t('code'),
-        id: 'CODEButton',
-        icon: 'iconfont icon-code',
-        isActive: isInlineCodeActive,
-        onMouseDown: this.onClickMark('CODE')
-      }), /*#__PURE__*/React.createElement(ButtonItem, {
-        disabled: isFormulaActive || isCodeActive || isColumnActive,
-        isRichEditor: true,
-        text: t('insert_link'),
-        id: 'linkButton',
-        icon: 'iconfont icon-link',
-        isActive: isLinkActive,
-        onMouseDown: this.onToggleLink
-      })), /*#__PURE__*/React.createElement(ButtonGroup, {
-        className: 'editor-btn-group'
-      }, /*#__PURE__*/React.createElement(ButtonItem, {
-        disabled: isFormulaActive || isTableActive || isColumnActive || isCodeActive,
-        isRichEditor: true,
-        text: t('quote'),
-        id: 'block-quoteButton',
-        icon: 'iconfont icon-quote-left',
-        isActive: isBlockquoteActive,
-        onMouseDown: this.onClickBlock('blockquote')
-      }), /*#__PURE__*/React.createElement(ButtonItem, {
-        disabled: isFormulaActive || isTableActive || isColumnActive || isCodeActive,
-        isRichEditor: true,
-        text: t('ordered_list'),
-        id: 'ordered_listButton',
-        icon: 'iconfont icon-list-ol',
-        isActive: isOrderedListActive,
-        onMouseDown: this.onClickBlock('ordered_list')
-      }), /*#__PURE__*/React.createElement(ButtonItem, {
-        disabled: isFormulaActive || isTableActive || isColumnActive || isCodeActive,
-        isRichEditor: true,
-        text: t('unordered_list'),
-        id: 'unordered_listButton',
-        icon: 'iconfont icon-list-ul',
-        isActive: isUnorderedListActive,
-        onMouseDown: this.onClickBlock('unordered_list')
-      }), !canInsertColumn && /*#__PURE__*/React.createElement(ButtonItem, {
-        disabled: isFormulaActive || isTableActive || isColumnActive || isCodeActive,
-        isRichEditor: true,
-        text: t('check_list_item'),
-        id: 'checkListItemButton',
-        icon: 'iconfont icon-check-square',
-        isActive: isCheckListActive,
-        onMouseDown: this.onClickCheckItem
-      })), /*#__PURE__*/React.createElement(ButtonGroup, {
-        className: 'editor-btn-group'
-      }, /*#__PURE__*/React.createElement(ButtonItem, {
-        disabled: isFormulaActive || isTableActive || isColumnActive || isHeadActive,
-        isRichEditor: true,
-        text: t('code_block'),
-        id: 'codeButton',
-        icon: 'iconfont icon-code-block',
-        isActive: isCodeActive,
-        onMouseDown: this.onClickBlock('code_block')
-      }), /*#__PURE__*/React.createElement(InsertTable, {
-        disabled: isFormulaActive || isCodeActive || isTableActive || isColumnActive,
-        isRichEditor: true,
-        text: t('insert_table'),
-        id: 'tableButton',
-        icon: 'iconfont icon-table',
-        onAddTable: this.onAddTable
-      }), window.canInsertFormula && /*#__PURE__*/React.createElement(ButtonItem, {
-        disabled: isFormulaActive || isCodeActive || isTableActive || isColumnActive || isHeadActive || isListActive,
-        isRichEditor: true,
-        text: t('insert_formula'),
-        id: 'formulaButton',
-        icon: 'iconfont icon-formula',
-        onMouseDown: this.onToggleFormulaDialog
-      }), /*#__PURE__*/React.createElement(InsertImage, {
-        disabled: isFormulaActive || isCodeActive || isColumnActive || isHeadActive,
-        text: 'insert_image',
-        id: 'insertImageButton',
-        insertRepoFile: this.props.insertRepoFile,
-        toolbarStatus: this.props.toolbarStatus,
-        onInsertImage: this.onInsertImage,
-        onToggleImageDialog: this.onToggleImageDialog
-      }), canInsertColumn && /*#__PURE__*/React.createElement(ButtonItem, {
-        disabled: isFormulaActive || isTableActive || isHeadActive,
-        isRichEditor: true,
-        text: t('Insert_column'),
-        id: 'insertColumn',
-        className: "svg-button",
-        onMouseDown: this.onAddCustomColumn,
-        isActive: isCodeActive,
-        image: ColumnIcon
-      })), isTableActive && /*#__PURE__*/React.createElement(TableGroup, {
-        onRemoveTable: this.onRemoveTable,
-        onInsertColumn: this.onInsertColumn,
-        onRemoveColumn: this.onRemoveColumn,
-        onInsertRow: this.onInsertRow,
-        onRemoveRow: this.onRemoveRow,
-        onSetAlign: this.onSetAlign
-      }), /*#__PURE__*/React.createElement(ButtonGroup, {
-        className: 'editor-btn-group'
-      }, /*#__PURE__*/React.createElement(ButtonItem, {
-        className: 'editor-clear-format',
-        isRichEditor: true,
-        text: t('Clear_format'),
-        id: 'clearButton',
-        icon: 'iconfont icon-clear-format',
-        onMouseDown: this.onClearFormat
-      }))), hasSidePanel && /*#__PURE__*/React.createElement("div", {
-        className: "button-container"
-      }, !this.props.isShowSidePanel && /*#__PURE__*/React.createElement(ButtonGroup, {
-        className: "editor-btn-group position-absolute dropdown-menu-right"
-      }, /*#__PURE__*/React.createElement(ButtonItem, {
-        isRichEditor: true,
-        text: sidePanelText,
-        id: "showSidePanel",
-        icon: "iconfont icon-angle-double-left",
-        isActive: false,
-        onMouseDown: this.props.toggleSidePanel
-      })), this.props.isShowSidePanel && /*#__PURE__*/React.createElement(ButtonGroup, {
-        className: "editor-btn-group position-absolute dropdown-menu-right"
-      }, /*#__PURE__*/React.createElement(ButtonItem, {
-        isRichEditor: true,
-        text: sidePanelText,
-        id: "hideSidePanel",
-        icon: "iconfont icon-angle-double-right",
-        isActive: false,
-        onMouseDown: this.props.toggleSidePanel
-      })))), isShowLinkDialog && /*#__PURE__*/React.createElement(AddLinkDialog, {
-        toggleLinkDialog: this.onToggleLinkDialog
-      }), isShowFormulaDialog && /*#__PURE__*/React.createElement(AddFormulaDialog, {
-        toggleFormulaDialog: this.onToggleFormulaDialog
-      }), isShowImageDialog && /*#__PURE__*/React.createElement(AddImageDialog, {
-        insertImage: this.onInsertImage,
-        onToggleImageDialog: this.onToggleImageDialog
-      }));
-    }
-  }]);
-  return Toolbar;
-}(React.Component);
-export default withTranslation('seafile-editor')(Toolbar);

package/dist/components/toolbar/widgets/button-group.js

@@ -1,24 +0,0 @@
-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 ButtonGroup = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(ButtonGroup, _React$PureComponent);
-  var _super = _createSuper(ButtonGroup);
-  function ButtonGroup() {
-    _classCallCheck(this, ButtonGroup);
-    return _super.apply(this, arguments);
-  }
-  _createClass(ButtonGroup, [{
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: 'btn-group ' + this.props.className,
-        role: 'group'
-      }, this.props.children);
-    }
-  }]);
-  return ButtonGroup;
-}(React.PureComponent);
-export default ButtonGroup;

package/dist/components/toolbar/widgets/button-item.js

@@ -1,129 +0,0 @@
-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 ButtonItem = /*#__PURE__*/function (_React$Component) {
-  _inherits(ButtonItem, _React$Component);
-  var _super = _createSuper(ButtonItem);
-  function ButtonItem(props) {
-    var _this;
-    _classCallCheck(this, ButtonItem);
-    _this = _super.call(this, props);
-    _this.toggle = function () {
-      var disabled = _this.props.disabled;
-      if (disabled) return;
-      var _this$state = _this.state,
-        isFreezed = _this$state.isFreezed,
-        tooltipOpen = _this$state.tooltipOpen;
-      if (isFreezed && !tooltipOpen) return;
-      _this.setState({
-        tooltipOpen: !tooltipOpen,
-        isFreezed: true
-      });
-      _this.timer = setTimeout(function () {
-        _this.setState({
-          isFreezed: false
-        });
-      }, 100);
-    };
-    _this.onClick = function (event) {
-      if (!_this.props.disabled) {
-        _this.props.onClick && _this.props.onClick(event);
-      }
-    };
-    _this.onMouseDown = function (event) {
-      if (!_this.props.disabled) {
-        _this.props.onMouseDown(event);
-      }
-    };
-    _this.getClassName = function () {
-      var _this$props = _this.props,
-        isRichEditor = _this$props.isRichEditor,
-        className = _this$props.className,
-        disabled = _this$props.disabled;
-      var itemClass = 'btn btn-icon btn-secondary btn-active';
-      if (!isRichEditor) return itemClass + ' ' + className;
-      itemClass = "rich-icon-btn ".concat(disabled ? 'rich-icon-btn-disabled' : 'rich-icon-btn-hover');
-      return itemClass + ' ' + className;
-    };
-    _this.state = {
-      tooltipOpen: false,
-      isFreezed: false
-    };
-    return _this;
-  }
-  _createClass(ButtonItem, [{
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.timer && clearTimeout(this.timer);
-    }
-  }, {
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps, nextState) {
-      var disabled = nextProps.disabled,
-        isActive = nextProps.isActive;
-      var _this$props2 = this.props,
-        oldDisabled = _this$props2.disabled,
-        oldIsActive = _this$props2.isActive;
-      if (disabled !== oldDisabled) {
-        this.setState({
-          tooltipOpen: false
-        });
-        return true;
-      }
-      // only render iconButton when the button is active or show show tooltip
-      var tooltipOpen = nextState.tooltipOpen;
-      var oldTooltipOpen = this.state.tooltipOpen;
-      if (tooltipOpen === oldTooltipOpen && isActive === oldIsActive) {
-        return false;
-      }
-      return true;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var tooltipOpen = this.state.tooltipOpen;
-      var _this$props3 = this.props,
-        id = _this$props3.id,
-        isActive = _this$props3.isActive,
-        disabled = _this$props3.disabled,
-        icon = _this$props3.icon,
-        text = _this$props3.text,
-        Image = _this$props3.image;
-      var className = this.getClassName();
-      var delay = {
-        show: 0,
-        hide: 0
-      };
-      return /*#__PURE__*/React.createElement("button", {
-        type: "button",
-        id: id,
-        className: className,
-        "data-active": isActive,
-        disabled: disabled,
-        onClick: this.onClick,
-        onMouseDown: this.onMouseDown
-      }, icon ? /*#__PURE__*/React.createElement("i", {
-        className: icon
-      }) : /*#__PURE__*/React.createElement(Image, {
-        width: "13px",
-        color: disabled ? '#999' : '#555'
-      }), /*#__PURE__*/React.createElement(Tooltip, {
-        target: id,
-        isOpen: tooltipOpen,
-        delay: delay,
-        placement: "bottom",
-        toggle: this.toggle
-      }, text));
-    }
-  }]);
-  return ButtonItem;
-}(React.Component);
-ButtonItem.defaultProps = {
-  className: '',
-  isActive: false
-};
-export default withTranslation('seafile-editor')(ButtonItem);