@seafile/seafile-editor 0.4.8 → 1.0.0

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

package/dist/components/toolbar/widgets/drop-list.js

@@ -1,88 +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 ReactDOM from 'react-dom';
-var DropList = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(DropList, _React$PureComponent);
-  var _super = _createSuper(DropList);
-  function DropList(props) {
-    var _this;
-    _classCallCheck(this, DropList);
-    _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(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 DropList;