@seafile/seafile-editor 0.3.113 → 0.3.115

package/dist/assets/css/topbar.css

@@ -64,6 +64,12 @@
   color: #eb8205;
 }
 
+.rich-icon-btn.svg-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .btn-active[data-active='true'] {
   color: #eb8205;
 }

package/dist/components/error-boundary.js

@@ -0,0 +1,35 @@
+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, { Children } from 'react';
+
+var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(ErrorBoundary, _React$Component);
+
+  var _super = _createSuper(ErrorBoundary);
+
+  function ErrorBoundary() {
+    _classCallCheck(this, ErrorBoundary);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(ErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error) {
+      console.error(error);
+      this.forceUpdate();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var children = this.props.children;
+      return children;
+    }
+  }]);
+
+  return ErrorBoundary;
+}(React.Component);
+
+export default ErrorBoundary;

package/dist/components/menu/index.js

@@ -0,0 +1,4 @@
+import Menu from './menu';
+import Item from './item';
+Menu.Item = Item;
+export default Menu;

package/dist/components/menu/item.js

@@ -0,0 +1,60 @@
+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 CheckMarkIcon from '../svg-icons/check-mark-icon';
+import './style.css';
+
+var MenuItem = /*#__PURE__*/function (_React$Component) {
+  _inherits(MenuItem, _React$Component);
+
+  var _super = _createSuper(MenuItem);
+
+  function MenuItem() {
+    var _this;
+
+    _classCallCheck(this, MenuItem);
+
+    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 (e) {
+      _this.props.onClick(e);
+    };
+
+    return _this;
+  }
+
+  _createClass(MenuItem, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          children = _this$props.children,
+          itemClass = _this$props.itemClass,
+          iconClass = _this$props.iconClass,
+          isChecked = _this$props.isChecked;
+      var containerClass = "seafile-menu-item ".concat(itemClass || '');
+      var itemIconClass = "menu-item-icon ".concat(iconClass || '');
+      return /*#__PURE__*/React.createElement("span", {
+        className: containerClass,
+        onClick: this.onClick
+      }, /*#__PURE__*/React.createElement("span", {
+        className: itemIconClass
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "menu-item-name"
+      }, children), isChecked && /*#__PURE__*/React.createElement(CheckMarkIcon, {
+        className: "checked-icon",
+        width: 13,
+        color: "#aaa"
+      }));
+    }
+  }]);
+
+  return MenuItem;
+}(React.Component);
+
+export default MenuItem;

package/dist/components/menu/menu.js

@@ -0,0 +1,49 @@
+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 Menu = /*#__PURE__*/function (_React$Component) {
+  _inherits(Menu, _React$Component);
+
+  var _super = _createSuper(Menu);
+
+  function Menu() {
+    var _this;
+
+    _classCallCheck(this, Menu);
+
+    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.getStyle = function () {
+      var position = _this.props.position;
+      var width = position.width;
+      return {
+        marginLeft: width - 10,
+        marginTop: '30px'
+      };
+    };
+
+    return _this;
+  }
+
+  _createClass(Menu, [{
+    key: "render",
+    value: function render() {
+      var style = this.getStyle();
+      return /*#__PURE__*/React.createElement("span", {
+        className: "seafile-menu-container",
+        style: style
+      }, this.props.children);
+    }
+  }]);
+
+  return Menu;
+}(React.Component);
+
+export default Menu;

package/dist/components/menu/style.css

@@ -0,0 +1,42 @@
+.seafile-menu-container {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  width: 150px;
+  padding: 8px 0;
+  min-width: 80px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border: 1px solid #e5e5e5;
+  box-shadow: 0 4px 10px #eee;
+  border-radius: 4px;
+  background: #fff;
+  color: #333;
+  z-index: 1080;
+}
+
+.seafile-menu-container .seafile-menu-item {
+  height: 32px;
+  line-height: 32px;
+  display: flex;
+  padding: 0 10px;
+  cursor: pointer;
+  position: relative;
+}
+
+.seafile-menu-container .seafile-menu-item:hover {
+  background-color: #f5f5f5;
+}
+
+.seafile-menu-container .seafile-menu-item .menu-item-icon {
+  margin-right: 5px;
+  color: #aaa;
+}
+
+.seafile-menu-container .seafile-menu-item .checked-icon {
+  position: absolute;
+  right: 10px;
+  height: 32px;
+  line-height: 32px;
+  color: #aaa;
+}

package/dist/components/select/_option.js

@@ -0,0 +1,56 @@
+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 Option = /*#__PURE__*/function (_React$Component) {
+  _inherits(Option, _React$Component);
+
+  var _super = _createSuper(Option);
+
+  function Option() {
+    var _this;
+
+    _classCallCheck(this, Option);
+
+    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) {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+      var option = _this.props.option;
+
+      _this.props.onOptionChanged(option);
+    };
+
+    return _this;
+  }
+
+  _createClass(Option, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          option = _this$props.option,
+          isActive = _this$props.isActive,
+          optionClass = _this$props.optionClass;
+      var className = "option-item ".concat(optionClass || '', " ").concat(isActive ? 'active' : '');
+      return /*#__PURE__*/React.createElement("span", {
+        className: className,
+        onClick: this.onClick
+      }, option.iconClass && /*#__PURE__*/React.createElement("span", {
+        className: "item-icon ".concat(option.iconClass)
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "label"
+      }, option.label));
+    }
+  }]);
+
+  return Option;
+}(React.Component);
+
+export default Option;

package/dist/components/select/field-setting.js

@@ -0,0 +1,132 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+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 Menu from '../menu';
+import { withTranslation } from 'react-i18next';
+import TextIcon from '../svg-icons/text-icon';
+
+var FieldSetting = /*#__PURE__*/function (_React$Component) {
+  _inherits(FieldSetting, _React$Component);
+
+  var _super = _createSuper(FieldSetting);
+
+  function FieldSetting(props) {
+    var _this;
+
+    _classCallCheck(this, FieldSetting);
+
+    _this = _super.call(this, props);
+
+    _this.onFontStyleClick = function () {
+      if (!_this.props.option) return;
+      var isShowMenu = _this.state.isShowMenu;
+
+      if (isShowMenu) {
+        _this.setState({
+          isShowMenu: false
+        });
+
+        return;
+      }
+
+      var container = _this.settingRef;
+
+      var _container$getBoundin = container.getBoundingClientRect(),
+          height = _container$getBoundin.height,
+          width = _container$getBoundin.width;
+
+      var position = {
+        height: height,
+        width: width
+      };
+
+      _this.setState({
+        isShowMenu: true,
+        position: position
+      });
+    };
+
+    _this.onBoldClick = function (event) {
+      event.stopPropagation();
+      var option = _this.props.option;
+
+      var newOption = _objectSpread(_objectSpread({}, option), {}, {
+        bold: !option.bold
+      });
+
+      _this.props.onUpdateOption(newOption);
+    };
+
+    _this.onItalicClick = function (event) {
+      event.stopPropagation();
+      var option = _this.props.option;
+
+      var newOption = _objectSpread(_objectSpread({}, option), {}, {
+        italic: !option.italic
+      });
+
+      _this.props.onUpdateOption(newOption);
+    };
+
+    _this.setSettingRef = function (ref) {
+      _this.settingRef = ref;
+    };
+
+    _this.state = {
+      isShowMenu: false,
+      position: {
+        top: 0,
+        left: 0
+      }
+    };
+    return _this;
+  }
+
+  _createClass(FieldSetting, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          option = _this$props.option,
+          t = _this$props.t;
+      var isDisable = !option;
+
+      var _ref = option || {},
+          isBold = _ref.bold,
+          isItalic = _ref.italic;
+
+      var isShowMenu = this.state.isShowMenu;
+      var className = "option-item ".concat(isDisable ? 'disable' : '', " ").concat(isShowMenu ? 'active' : '', " field-setting");
+      return /*#__PURE__*/React.createElement("span", {
+        ref: this.setSettingRef,
+        className: className,
+        onClick: this.onFontStyleClick
+      }, /*#__PURE__*/React.createElement(TextIcon, {
+        width: "14",
+        color: isShowMenu ? '#fff' : '#aaa'
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "label"
+      }, t('Font_style')), /*#__PURE__*/React.createElement("span", {
+        className: "icon-container"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "iconfont icon-caret-up op-icon"
+      })), isShowMenu && /*#__PURE__*/React.createElement(Menu, {
+        position: this.state.position
+      }, /*#__PURE__*/React.createElement(Menu.Item, {
+        iconClass: 'iconfont icon-bold',
+        isChecked: isBold,
+        onClick: this.onBoldClick
+      }, t('bold')), /*#__PURE__*/React.createElement(Menu.Item, {
+        iconClass: 'iconfont icon-italic',
+        isChecked: isItalic,
+        onClick: this.onItalicClick
+      }, t('italic'))));
+    }
+  }]);
+
+  return FieldSetting;
+}(React.Component);
+
+export default withTranslation('seafile-editor')(FieldSetting);

package/dist/components/select/index.js

@@ -0,0 +1,163 @@
+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 Option from './_option';
+import FieldSetting from './field-setting';
+import './style.css';
+
+var Select = /*#__PURE__*/function (_React$Component) {
+  _inherits(Select, _React$Component);
+
+  var _super = _createSuper(Select);
+
+  function Select(props) {
+    var _this;
+
+    _classCallCheck(this, Select);
+
+    _this = _super.call(this, props);
+
+    _this.handleSelector = function (event) {
+      if (_this.selector && !_this.selector.contains(event.target)) {
+        _this.setState({
+          isShowSelector: false
+        });
+      }
+    };
+
+    _this.getCurrentOption = function () {
+      var _this$props = _this.props,
+          value = _this$props.value,
+          options = _this$props.options;
+      var currentOption = value && options.find(function (option) {
+        return option.value === value.value;
+      });
+      return currentOption;
+    };
+
+    _this.onSelectToggle = function (event) {
+      _this.setState({
+        isShowSelector: !_this.state.isShowSelector
+      });
+    };
+
+    _this.onChange = function (option) {
+      _this.setState({
+        isShowSelector: false,
+        currentOption: option
+      });
+
+      _this.props.onChange(option);
+    };
+
+    _this.onUpdateOption = function (option) {
+      _this.setState({
+        currentOption: option
+      });
+
+      _this.props.onChange(option);
+    };
+
+    _this.setContainerRef = function (ref) {
+      _this.dropdownContainer = ref;
+    };
+
+    _this.setSelectorRef = function (ref) {
+      _this.selector = ref;
+    };
+
+    _this.state = {
+      isShowSelector: false,
+      currentOption: _this.getCurrentOption()
+    };
+    _this.dropdownContainerHasInit = false;
+    return _this;
+  }
+
+  _createClass(Select, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('click', this.handleSelector);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('click', this.handleSelector);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      var options = this.props.options;
+      var currentOption = this.state.currentOption;
+      var activeIndex = currentOption && options.findIndex(function (option) {
+        return option.value === currentOption.value;
+      });
+
+      if (activeIndex > -1) {
+        var scrollTop = 48 + (activeIndex + 1) * 32 - 150;
+        if (scrollTop < 0) return;
+
+        if (this.dropdownContainer && !this.dropdownContainerHasInit) {
+          this.dropdownContainerHasInit = true;
+          this.dropdownContainer.scrollTop = scrollTop;
+        }
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          selectClass = _this$props2.selectClass,
+          optionClass = _this$props2.optionClass,
+          isSelected = _this$props2.isSelected,
+          options = _this$props2.options,
+          placeholder = _this$props2.placeholder;
+      var _this$state = this.state,
+          currentOption = _this$state.currentOption,
+          isShowSelector = _this$state.isShowSelector;
+      var isActive = isShowSelector || isSelected;
+      return /*#__PURE__*/React.createElement("span", {
+        ref: this.setSelectorRef,
+        className: "select-container ".concat(selectClass || '')
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "control-container ".concat(isActive ? 'active' : ''),
+        onClick: this.onSelectToggle
+      }, !currentOption && /*#__PURE__*/React.createElement("span", {
+        className: "label placeholder"
+      }, placeholder), currentOption && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        className: "control-icon ".concat(currentOption.iconClass)
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "control-label"
+      }, currentOption.label)), /*#__PURE__*/React.createElement("span", {
+        className: "operation"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "iconfont icon-drop-down arrow"
+      }))), isShowSelector && /*#__PURE__*/React.createElement("span", {
+        ref: this.setContainerRef,
+        className: "value-container"
+      }, /*#__PURE__*/React.createElement(FieldSetting, {
+        option: currentOption,
+        onUpdateOption: this.onUpdateOption
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "option-item-divider"
+      }), options.map(function (option) {
+        var isActive = option.value === (currentOption && currentOption.value);
+        return /*#__PURE__*/React.createElement(Option, {
+          key: option.value,
+          optionClass: optionClass,
+          isActive: isActive,
+          option: option,
+          onOptionChanged: _this2.onChange
+        });
+      })));
+    }
+  }]);
+
+  return Select;
+}(React.Component);
+
+export default Select;

package/dist/components/select/style.css

@@ -0,0 +1,149 @@
+.select-container {
+  position: relative;
+  display: inline-block;
+  margin: 0 5px;
+  font-weight: normal;
+}
+
+.select-container .control-container {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 0 10px;
+  height: 24px;
+  font-size: 13px;
+  line-height: 1.5;
+  cursor: pointer;
+  user-select: none;
+}
+
+.select-container .control-container.active,
+.select-container .control-container:hover {
+  border: 1px solid #3C88FD;
+  box-shadow: 0 0 0 2px rgb(70 127 207 / 25%);
+}
+
+.select-container .control-container .placeholder {
+  color: #BFBFBF;
+}
+
+.select-container .control-container .control-icon {
+  font-size: 13px;
+  color: rgb(170, 170, 170);
+  cursor: default;
+  margin-right: 5px;
+}
+
+.select-container .control-container .operation {
+  margin-left: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.select-container .control-container .arrow {
+  color: #949494;
+  display: inline-block;
+  font-size: 12px;
+  transform: scale(.8);
+  transition: all .1s;
+}
+
+.select-container .control-container .arrow:hover {
+  color: #666;
+}
+
+.select-container .value-container {
+  position: absolute;
+  left: 0;
+  display: flex;
+  min-width: 80px;
+  max-height: 150px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  margin-top: 4px;
+  padding: 8px 0;
+  flex-direction: column;
+  border: 1px solid #e5e5e5;
+  box-shadow: 0 4px 10px #eee;
+  border-radius: 4px;
+  background: #fff;
+  z-index: 10;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.select-container .value-container::-webkit-scrollbar {
+  display: none;
+}
+
+.select-container .value-container .option-item {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  min-width: 80px;
+  height: 32px;
+  padding: 0 12px;
+  cursor: pointer;
+  overflow-wrap: normal;
+  white-space: nowrap;
+}
+
+.select-container .value-container .option-item:hover {
+  background-color: #F5F5F5;
+}
+
+.select-container .value-container .option-item.active {
+  background-color: #39A0FF;
+  color: #fff;
+}
+
+.select-container .value-container .option-item.disable {
+  color: #aaa;
+  cursor: default;
+}
+
+.select-container .value-container .option-item .item-icon {
+  font-size: 14px;
+  color: rgb(170, 170, 170);
+  cursor: default;
+}
+
+.select-container .value-container .option-item.active .item-icon {
+  color: #fff;
+}
+
+.select-container .value-container .option-item .label {
+  margin: 0 5px;
+}
+
+.option-item.field-setting {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.option-item.field-setting .icon-container {
+  position: absolute;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.option-item.field-setting .op-icon {
+  font-size: 12px;
+  transform: rotate(90deg);
+  color: #aaa;
+}
+
+.option-item.active.field-setting .op-icon {
+  color: #FFF;
+}
+
+.value-container .option-item-divider {
+  margin-top: 8px;
+  border-top: 1px solid #EFEFEF;
+}