@seafile/comment-editor 0.0.1-alpha.9 → 0.0.2-alpha.0

package/dist/basic-sdk/extension/commons/search-list/index.js

@@ -1,149 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = SearchList;
-var _react = _interopRequireWildcard(require("react"));
-var _reactI18next = require("react-i18next");
-var _reactstrap = require("reactstrap");
-var _constants = require("../../../constants");
-require("./index.css");
-function SearchList(_ref) {
-  let {
-    list: originalList,
-    listItem: ListItem,
-    onListItemClick,
-    onEscClick
-  } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)('sdoc-editor');
-  const inputWrapperRef = (0, _react.useRef)(null);
-  const isComposingRef = (0, _react.useRef)(null);
-  const listRefs = (0, _react.useRef)([]);
-  const [searchedList, setSearchedList] = (0, _react.useState)(originalList);
-  const [currentSelectIndex, setCurrentSelectIndex] = (0, _react.useState)(-1);
-
-  // search input
-  const onChange = (0, _react.useCallback)(event => {
-    if (isComposingRef.current) return;
-    const value = event.target.value.trim();
-    if (value) {
-      const list = originalList.filter(item => item.label.indexOf(value) > -1);
-      setSearchedList(list);
-    } else {
-      setSearchedList(originalList);
-    }
-  }, [originalList]);
-  const onCompositionStart = (0, _react.useCallback)(() => {
-    isComposingRef.current = true;
-  }, []);
-  const onCompositionEnd = (0, _react.useCallback)(e => {
-    isComposingRef.current = false;
-    onChange(e);
-  }, [onChange]);
-
-  // search content list
-  const onItemClick = (0, _react.useCallback)(item => {
-    onListItemClick && onListItemClick(item);
-  }, [onListItemClick]);
-  const onHandleInputFocus = (0, _react.useCallback)(isFocus => {
-    if (inputWrapperRef.current) {
-      queueMicrotask(() => {
-        isFocus ? inputWrapperRef.current.focus() : inputWrapperRef.current.blur();
-      });
-    }
-  }, []);
-  (0, _react.useEffect)(() => {
-    if (currentSelectIndex === -1) {
-      onHandleInputFocus(true);
-    } else {
-      onHandleInputFocus(false);
-    }
-  }, [currentSelectIndex, onHandleInputFocus]);
-  const handleClick = (0, _react.useCallback)(event => {
-    var _inputWrapperRef$curr;
-    if (inputWrapperRef !== null && inputWrapperRef !== void 0 && (_inputWrapperRef$curr = inputWrapperRef.current) !== null && _inputWrapperRef$curr !== void 0 && _inputWrapperRef$curr.contains(event.target) || inputWrapperRef.current === event.target) {
-      event.stopPropagation();
-      event.nativeEvent && event.nativeEvent.stopImmediatePropagation && event.nativeEvent.stopImmediatePropagation();
-      return;
-    }
-  }, []);
-  const scrollIntoView = (0, _react.useCallback)(index => {
-    if (index === -1) return;
-    listRefs.current[index].scrollIntoView({
-      behavior: 'smooth',
-      block: 'center',
-      inline: 'nearest'
-    });
-  }, []);
-  const handleKeyDown = (0, _react.useCallback)(e => {
-    const {
-      UpArrow,
-      DownArrow,
-      Enter,
-      Esc
-    } = _constants.KeyCodes;
-    const {
-      keyCode
-    } = e;
-    if (keyCode === UpArrow) {
-      e.preventDefault();
-      if (currentSelectIndex > -1) {
-        setCurrentSelectIndex(currentSelectIndex - 1);
-        scrollIntoView(currentSelectIndex - 1);
-      }
-    }
-    if (keyCode === DownArrow) {
-      e.preventDefault();
-      if (currentSelectIndex === searchedList.length - 1) return;
-      if (currentSelectIndex < searchedList.length - 1) {
-        setCurrentSelectIndex(currentSelectIndex + 1);
-        scrollIntoView(currentSelectIndex + 1);
-      }
-    }
-    if (keyCode === Enter) {
-      e.preventDefault();
-      const item = searchedList[currentSelectIndex];
-      onItemClick(item);
-    }
-    if (keyCode === Esc) {
-      e.preventDefault();
-      onEscClick && onEscClick();
-    }
-  }, [currentSelectIndex, onEscClick, onItemClick, scrollIntoView, searchedList]);
-  (0, _react.useEffect)(() => {
-    document.addEventListener('mousedown', handleClick);
-    document.addEventListener('keydown', handleKeyDown);
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-      document.removeEventListener('click', handleClick);
-    };
-  }, [handleClick, handleKeyDown]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-search-list"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-search-list-wrapper"
-  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
-    innerRef: inputWrapperRef,
-    placeholder: t('Search_action'),
-    onChange: onChange,
-    onCompositionStart: onCompositionStart,
-    onCompositionEnd: onCompositionEnd
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-search-list-content-wrapper"
-  }, searchedList.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-search-list-with-no-results"
-  }, t('No_results')), searchedList.map((item, index) => {
-    const isSelected = index === currentSelectIndex;
-    return /*#__PURE__*/_react.default.createElement(ListItem, {
-      innerRef: el => listRefs.current[index] = el,
-      key: index,
-      item: item,
-      onItemClick: onItemClick,
-      isSelected: isSelected
-    });
-  })));
-}

package/dist/basic-sdk/extension/commons/select/_option.js

@@ -1,39 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-class Option extends _react.default.Component {
-  constructor() {
-    super(...arguments);
-    (0, _defineProperty2.default)(this, "onClick", event => {
-      event.stopPropagation();
-      event.nativeEvent.stopImmediatePropagation();
-      const {
-        option
-      } = this.props;
-      this.props.onOptionChanged(option);
-    });
-  }
-  render() {
-    const {
-      option,
-      isActive,
-      optionClass
-    } = this.props;
-    const className = `option-item ${optionClass || ''} ${isActive ? 'active' : ''}`;
-    return /*#__PURE__*/_react.default.createElement("span", {
-      className: className,
-      onClick: this.onClick
-    }, option.iconClass && /*#__PURE__*/_react.default.createElement("span", {
-      className: `item-icon ${option.iconClass}`
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: "label"
-    }, option.label));
-  }
-}
-var _default = exports.default = Option;

package/dist/basic-sdk/extension/commons/select/field-setting.js

@@ -1,109 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-var _reactI18next = require("react-i18next");
-var _menu = _interopRequireDefault(require("./menu"));
-class FieldSetting extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    (0, _defineProperty2.default)(this, "onMouseEnter", () => {
-      if (!this.props.option) return;
-      const container = this.settingRef;
-      const {
-        height,
-        width
-      } = container.getBoundingClientRect();
-      const position = {
-        height,
-        width
-      };
-      this.setState({
-        isShowMenu: true,
-        position
-      });
-    });
-    (0, _defineProperty2.default)(this, "onMouseLeave", () => {
-      this.setState({
-        isShowMenu: false
-      });
-    });
-    (0, _defineProperty2.default)(this, "onBoldClick", event => {
-      event.stopPropagation();
-      const {
-        option
-      } = this.props;
-      const newOption = {
-        ...option,
-        bold: !option.bold
-      };
-      this.props.onUpdateOption(newOption);
-    });
-    (0, _defineProperty2.default)(this, "onItalicClick", event => {
-      event.stopPropagation();
-      const {
-        option
-      } = this.props;
-      const newOption = {
-        ...option,
-        italic: !option.italic
-      };
-      this.props.onUpdateOption(newOption);
-    });
-    (0, _defineProperty2.default)(this, "setSettingRef", ref => {
-      this.settingRef = ref;
-    });
-    this.state = {
-      isShowMenu: false,
-      position: {
-        top: 0,
-        left: 0
-      }
-    };
-  }
-  render() {
-    const {
-      option,
-      t
-    } = this.props;
-    const isDisable = !option;
-    const {
-      bold: isBold,
-      italic: isItalic
-    } = option || {};
-    const {
-      isShowMenu
-    } = this.state;
-    const className = `sdoc-field-setting ${isDisable ? 'disable' : ''} option-item`;
-    return /*#__PURE__*/_react.default.createElement("span", {
-      ref: this.setSettingRef,
-      className: className,
-      onMouseEnter: this.onMouseEnter,
-      onMouseLeave: this.onMouseLeave
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "sdocfont sdoc-text-style"
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: "label"
-    }, t('Font_style')), /*#__PURE__*/_react.default.createElement("span", {
-      className: "icon-container"
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "sdocfont sdoc-caret-up op-icon"
-    })), isShowMenu && /*#__PURE__*/_react.default.createElement(_menu.default, {
-      position: this.state.position
-    }, /*#__PURE__*/_react.default.createElement(_menu.default.Item, {
-      iconClass: 'sdocfont sdoc-bold',
-      isChecked: isBold,
-      onClick: this.onBoldClick
-    }, t('Bold')), /*#__PURE__*/_react.default.createElement(_menu.default.Item, {
-      iconClass: 'sdocfont sdoc-italic',
-      isChecked: isItalic,
-      onClick: this.onItalicClick
-    }, t('Italic'))));
-  }
-}
-var _default = exports.default = (0, _reactI18next.withTranslation)('seafile-editor')(FieldSetting);

package/dist/basic-sdk/extension/commons/select/index.js

@@ -1,142 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-var _option = _interopRequireDefault(require("./_option"));
-var _fieldSetting = _interopRequireDefault(require("./field-setting"));
-require("./style.css");
-class Select extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    (0, _defineProperty2.default)(this, "handleSelector", event => {
-      if (this.selector && !this.selector.contains(event.target)) {
-        this.setState({
-          isShowSelector: false
-        });
-      }
-    });
-    (0, _defineProperty2.default)(this, "getCurrentOption", () => {
-      const {
-        value,
-        options
-      } = this.props;
-      const currentOption = value && options.find(option => option.value === value.value);
-      return currentOption;
-    });
-    (0, _defineProperty2.default)(this, "onSelectToggle", event => {
-      const {
-        isShowSelector
-      } = this.state;
-      const newValue = !isShowSelector;
-      if (newValue) {
-        this.dropdownContainerHasInit = false;
-      }
-      this.setState({
-        isShowSelector: newValue
-      });
-    });
-    (0, _defineProperty2.default)(this, "onChange", option => {
-      this.setState({
-        isShowSelector: false,
-        currentOption: option
-      });
-      this.props.onChange(option);
-    });
-    (0, _defineProperty2.default)(this, "onUpdateOption", option => {
-      this.setState({
-        currentOption: option
-      });
-      this.props.onChange(option);
-    });
-    (0, _defineProperty2.default)(this, "setContainerRef", ref => {
-      this.dropdownContainer = ref;
-    });
-    (0, _defineProperty2.default)(this, "setSelectorRef", ref => {
-      this.selector = ref;
-    });
-    this.state = {
-      isShowSelector: false,
-      currentOption: this.getCurrentOption()
-    };
-    this.dropdownContainerHasInit = false;
-  }
-  componentDidMount() {
-    document.addEventListener('mousedown', this.handleSelector);
-  }
-  componentWillUnmount() {
-    document.removeEventListener('mousedown', this.handleSelector);
-  }
-  componentDidUpdate() {
-    const {
-      options
-    } = this.props;
-    const {
-      currentOption
-    } = this.state;
-    const activeIndex = currentOption && options.findIndex(option => option.value === currentOption.value);
-    if (activeIndex > -1) {
-      const scrollTop = 48 + (activeIndex + 1) * 32 - 150;
-      if (scrollTop < 0) return;
-      if (this.dropdownContainer && !this.dropdownContainerHasInit) {
-        this.dropdownContainerHasInit = true;
-        this.dropdownContainer.scrollTop = scrollTop;
-      }
-    }
-  }
-  render() {
-    const {
-      selectClass,
-      optionClass,
-      isSelected,
-      options,
-      placeholder
-    } = this.props;
-    const {
-      currentOption,
-      isShowSelector
-    } = this.state;
-    const isActive = isShowSelector || isSelected;
-    return /*#__PURE__*/_react.default.createElement("span", {
-      ref: this.setSelectorRef,
-      className: `select-container ${selectClass || ''}`
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: `control-container ${isActive ? 'active' : ''}`,
-      onClick: this.onSelectToggle
-    }, !currentOption && /*#__PURE__*/_react.default.createElement("span", {
-      className: "label placeholder"
-    }, placeholder), currentOption && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-      className: `control-icon ${currentOption.iconClass}`
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: "control-label"
-    }, currentOption.label)), /*#__PURE__*/_react.default.createElement("span", {
-      className: "operation"
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "sdocfont sdoc-drop-down arrow"
-    }))), isShowSelector && /*#__PURE__*/_react.default.createElement("span", {
-      className: "select-popover"
-    }, /*#__PURE__*/_react.default.createElement(_fieldSetting.default, {
-      option: currentOption,
-      onUpdateOption: this.onUpdateOption
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: "option-item-divider"
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: "option-item-wrapper",
-      ref: this.setContainerRef
-    }, options.map(option => {
-      const isActive = option.value === (currentOption && currentOption.value);
-      return /*#__PURE__*/_react.default.createElement(_option.default, {
-        key: option.value,
-        optionClass: optionClass,
-        isActive: isActive,
-        option: option,
-        onOptionChanged: this.onChange
-      });
-    }))));
-  }
-}
-var _default = exports.default = Select;

package/dist/basic-sdk/extension/commons/select/menu/index.js

@@ -1,11 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _item = _interopRequireDefault(require("./item"));
-var _menu = _interopRequireDefault(require("./menu"));
-_menu.default.Item = _item.default;
-var _default = exports.default = _menu.default;

package/dist/basic-sdk/extension/commons/select/menu/item.js

@@ -1,39 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-require("./style.css");
-class MenuItem extends _react.default.Component {
-  constructor() {
-    super(...arguments);
-    (0, _defineProperty2.default)(this, "onClick", e => {
-      this.props.onClick(e);
-    });
-  }
-  render() {
-    const {
-      children,
-      itemClass,
-      iconClass,
-      isChecked
-    } = this.props;
-    const containerClass = `sdoc-menu-item ${itemClass || ''}`;
-    const itemIconClass = `menu-item-icon ${iconClass || ''}`;
-    return /*#__PURE__*/_react.default.createElement("span", {
-      className: containerClass,
-      onClick: this.onClick
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: itemIconClass
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: "menu-item-name"
-    }, children), isChecked && /*#__PURE__*/_react.default.createElement("span", {
-      className: "sdocfont sdoc-check-mark"
-    }));
-  }
-}
-var _default = exports.default = MenuItem;

package/dist/basic-sdk/extension/commons/select/menu/menu.js

@@ -1,34 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-class Menu extends _react.default.Component {
-  constructor() {
-    super(...arguments);
-    (0, _defineProperty2.default)(this, "getStyle", () => {
-      const {
-        position
-      } = this.props;
-      const {
-        width
-      } = position;
-      return {
-        marginLeft: width - 10,
-        marginTop: '30px'
-      };
-    });
-  }
-  render() {
-    const style = this.getStyle();
-    return /*#__PURE__*/_react.default.createElement("span", {
-      className: "sdoc-menu-container",
-      style: style
-    }, this.props.children);
-  }
-}
-var _default = exports.default = Menu;

package/dist/basic-sdk/extension/commons/select/menu/style.css

@@ -1,43 +0,0 @@
-.sdoc-menu-container {
-  position: absolute;
-  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: #212529;
-  z-index: 1080;
-}
-
-.sdoc-menu-container .sdoc-menu-item {
-  height: 32px;
-  line-height: 32px;
-  display: flex;
-  padding: 0 10px;
-  cursor: pointer;
-  position: relative;
-}
-
-.sdoc-menu-container .sdoc-menu-item:hover {
-  background-color: #f5f5f5;
-}
-
-.sdoc-menu-container .sdoc-menu-item .menu-item-icon {
-  margin-right: 5px;
-  color: #aaa;
-}
-
-.sdoc-menu-container .sdoc-menu-item .sdoc-check-mark {
-  position: absolute;
-  right: 10px;
-  height: 32px;
-  line-height: 32px;
-  font-size: 13px;
-  color: #aaa;
-}