@seafile/seafile-editor 0.3.76

package/dist/components/toolbar.js

@@ -0,0 +1,235 @@
+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 HeaderList from '../components/topbar-component/header-list';
+import ButtonGroup from '../components/topbar-component/button-group';
+import IconButton from '../components/topbar-component/icon-button';
+import { withTranslation } from 'react-i18next';
+import AddLinkDialog from './add-link-dialog';
+import AddImageDialog from './add-image-dialog';
+import AddFormulaDialog from './add-formula-dialog';
+import TableToolBar from './topbar-component/table-toolbar';
+import { EditorUtils } from '../editor/editor-utils/common-editor-utils';
+import UploadImg from './topbar-component/upload-img'; // import InsertFile from './topbarcomponent/insertFile';
+
+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.onToggleLink = function (event) {
+      event.preventDefault();
+
+      var isLinkActive = _this.editorUtils.isLinkActive();
+
+      if (!isLinkActive) {
+        _this.props.onToggleLinkDialog();
+
+        return;
+      } else {
+        _this.editorUtils.unwrapLink();
+      }
+    };
+
+    _this.editor = window.editor;
+    _this.editorUtils = new EditorUtils(_this.editor);
+    return _this;
+  }
+
+  _createClass(ToolBar, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var t = this.props.t;
+      var toolbarStatus = this.props.toolbarStatus;
+      var readOnly = this.props.readOnly;
+      var isTableActive = toolbarStatus.isTableActive,
+          isHeadActive = toolbarStatus.isHeadActive,
+          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;
+      var isListActive = isOrderedListActive || isUnorderedListActive || isCheckListActive;
+      return /*#__PURE__*/React.createElement("div", {
+        className: 'sf-editor-rich-menu ' + (this.props.isSimpleEditor ? '' : 'rich-menu')
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'button-container'
+      }, !readOnly && /*#__PURE__*/React.createElement("div", {
+        className: 'header-list-container'
+      }, /*#__PURE__*/React.createElement(HeaderList, {
+        disabled: isFormulaActive || isCodeActive || isTableActive,
+        headerType: toolbarStatus.headerType,
+        onClickHeader: this.editorUtils.onClickHeader
+      })), /*#__PURE__*/React.createElement(ButtonGroup, {
+        className: 'editor-btn-group'
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        disabled: isFormulaActive || isCodeActive || isHeadActive,
+        isRichEditor: true,
+        text: t('bold'),
+        id: 'BOLDButton',
+        icon: 'iconfont icon-bold',
+        isActive: isBoldActive,
+        onMouseDown: function onMouseDown(event) {
+          return _this2.editorUtils.onClickMark(event, 'BOLD');
+        }
+      }), /*#__PURE__*/React.createElement(IconButton, {
+        disabled: isFormulaActive || isCodeActive || isHeadActive,
+        isRichEditor: true,
+        text: t('italic'),
+        id: 'ITALICButton',
+        icon: 'iconfont icon-italic',
+        isActive: isItalicActive,
+        onMouseDown: function onMouseDown(event) {
+          return _this2.editorUtils.onClickMark(event, 'ITALIC');
+        }
+      }), /*#__PURE__*/React.createElement(IconButton, {
+        disabled: isFormulaActive || isCodeActive || isHeadActive,
+        isRichEditor: true,
+        text: t('code'),
+        id: 'CODEButton',
+        icon: 'iconfont icon-code',
+        isActive: isInlineCodeActive,
+        onMouseDown: function onMouseDown(event) {
+          return _this2.editorUtils.onClickMark(event, 'CODE');
+        }
+      }), /*#__PURE__*/React.createElement(IconButton, {
+        disabled: isFormulaActive || isCodeActive || isHeadActive,
+        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(IconButton, {
+        disabled: isFormulaActive || isTableActive || isCodeActive || isHeadActive,
+        isRichEditor: true,
+        text: t('quote'),
+        id: 'block-quoteButton',
+        icon: 'iconfont icon-quote-left',
+        isActive: isBlockquoteActive,
+        onMouseDown: function onMouseDown(event) {
+          return _this2.editorUtils.onClickBlock(event, 'blockquote');
+        }
+      }), /*#__PURE__*/React.createElement(IconButton, {
+        disabled: isFormulaActive || isTableActive || isCodeActive || isHeadActive,
+        isRichEditor: true,
+        text: t('ordered_list'),
+        id: 'ordered_listButton',
+        icon: 'iconfont icon-list-ol',
+        isActive: isOrderedListActive,
+        onMouseDown: function onMouseDown(event) {
+          return _this2.editorUtils.onClickBlock(event, 'ordered_list');
+        }
+      }), /*#__PURE__*/React.createElement(IconButton, {
+        disabled: isFormulaActive || isTableActive || isCodeActive || isHeadActive,
+        isRichEditor: true,
+        text: t('unordered_list'),
+        id: 'unordered_listButton',
+        icon: 'iconfont icon-list-ul',
+        isActive: isUnorderedListActive,
+        onMouseDown: function onMouseDown(event) {
+          return _this2.editorUtils.onClickBlock(event, 'unordered_list');
+        }
+      }), /*#__PURE__*/React.createElement(IconButton, {
+        disabled: isFormulaActive || isTableActive || isCodeActive || isHeadActive,
+        isRichEditor: true,
+        text: t('check_list_item'),
+        id: 'checkListItemButton',
+        icon: 'iconfont icon-check-square',
+        isActive: isCheckListActive,
+        onMouseDown: this.editorUtils.onToggleCheckItem
+      })), /*#__PURE__*/React.createElement(ButtonGroup, {
+        className: 'editor-btn-group'
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        disabled: isFormulaActive || isTableActive || isHeadActive,
+        isRichEditor: true,
+        text: t('code_block'),
+        id: 'codeButton',
+        icon: 'iconfont icon-code-block',
+        onMouseDown: function onMouseDown(event) {
+          return _this2.editorUtils.onClickBlock(event, 'code_block');
+        },
+        isActive: isCodeActive && !readOnly
+      }), /*#__PURE__*/React.createElement(IconButton, {
+        disabled: isFormulaActive || isCodeActive || isTableActive || isHeadActive,
+        isRichEditor: true,
+        text: t('insert_table'),
+        id: 'tableButton',
+        icon: 'iconfont icon-table',
+        onMouseDown: this.editorUtils.onAddTable
+      }), window.canInsertFormula && /*#__PURE__*/React.createElement(IconButton, {
+        disabled: isFormulaActive || isCodeActive || isTableActive || isHeadActive || isListActive,
+        isRichEditor: true,
+        text: t('insert_formula'),
+        id: 'formulaButton',
+        icon: 'iconfont icon-formula',
+        onMouseDown: this.props.onToggleFormulaDialog
+      }), /*#__PURE__*/React.createElement(UploadImg, {
+        disabled: isFormulaActive || isCodeActive || isHeadActive,
+        text: 'insert_image',
+        id: 'insertImageButton',
+        insertRepoFile: this.props.insertRepoFile,
+        isSimpleEditor: this.props.isSimpleEditor,
+        onInsertImage: this.editorUtils.insertImage,
+        toolbarStatus: this.props.toolbarStatus,
+        onToggleImageDialog: this.props.onToggleImageDialog
+      })), isTableActive && !readOnly && /*#__PURE__*/React.createElement(TableToolBar, {
+        onRemoveTable: this.editorUtils.onRemoveTable,
+        onInsertColumn: this.editorUtils.onInsertColumn,
+        onRemoveColumn: this.editorUtils.onRemoveColumn,
+        onInsertRow: this.editorUtils.onInsertRow,
+        onRemoveRow: this.editorUtils.onRemoveRow,
+        onSetAlign: this.editorUtils.onSetAlign
+      })), this.props.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(IconButton, {
+        isRichEditor: true,
+        text: t('Show_side_panel'),
+        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(IconButton, {
+        isRichEditor: true,
+        text: t('Hide_side_panel'),
+        id: "hideSidepanel",
+        icon: "iconfont icon-angle-double-right",
+        isActive: false,
+        onMouseDown: this.props.toggleSidePanel
+      }))), this.props.isShowLinkDialog && /*#__PURE__*/React.createElement(AddLinkDialog, {
+        toggleLinkDialog: this.props.onToggleLinkDialog
+      }), this.props.isShowFormulaDialog && /*#__PURE__*/React.createElement(AddFormulaDialog, {
+        toggleFormulaDialog: this.props.onToggleFormulaDialog
+      }), this.props.isShowImageDialog && /*#__PURE__*/React.createElement(AddImageDialog, {
+        onToggleImageDialog: this.props.onToggleImageDialog,
+        insertImage: this.editorUtils.insertImage
+      }));
+    }
+  }]);
+
+  return ToolBar;
+}(React.Component);
+
+export default withTranslation('seafile-editor')(ToolBar);

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

@@ -0,0 +1,31 @@
+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;