@seafile/comment-editor 0.0.1-alpha.0

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

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+class MenuGroup extends _react.default.PureComponent {
+  render() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: 'btn-group ' + (this.props.className || 'menu-group'),
+      role: 'group'
+    }, this.props.children);
+  }
+}
+var _default = exports.default = MenuGroup;

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

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _tooltip = _interopRequireDefault(require("../../../components/tooltip"));
+var _constants = require("../../constants");
+const MenuItem = _ref => {
+  let {
+    isRichEditor = true,
+    className = 'menu-group-item',
+    disabled,
+    isActive,
+    type,
+    onMouseDown,
+    iconClass,
+    id,
+    text,
+    ariaLabel
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const onClick = (0, _react.useCallback)(event => {
+    if (disabled) return;
+    onMouseDown(event, type);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [disabled, type]);
+  const validClassName = (0, _classnames.default)('', className, {
+    'btn btn-icon btn-secondary btn-active': !isRichEditor,
+    'rich-icon-btn': isRichEditor,
+    'rich-icon-btn-disabled': isRichEditor && disabled,
+    'rich-icon-btn-hover': isRichEditor && !disabled
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    id: id,
+    type: "button",
+    "aria-label": ariaLabel,
+    className: validClassName,
+    disabled: disabled,
+    "data-active": isActive,
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: iconClass
+  }), type === _constants.SDOC_LINK && /*#__PURE__*/_react.default.createElement("span", {
+    className: "sdoc-link-menu-item"
+  }, /*#__PURE__*/_react.default.createElement("span", null, t(text)), /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-drop-down"
+  }))), /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    target: id
+  }, t(text)));
+};
+var _default = exports.default = MenuItem;

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

@@ -0,0 +1,82 @@
+.menu-group {
+  height: 100%;
+  padding: 6px 0 6px 8px;
+  font-size: 0.75rem;
+  border-right: 1px solid #e5e6e8;
+  border-radius: 0 !important;
+  color: #444;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.menu-group .menu-group-item {
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  margin-right: 8px;
+  border: none !important;
+  color: #444;
+  background-color: transparent;
+}
+
+.menu-group .menu-group-item:disabled {
+  color: #BDBDBD;
+}
+
+.menu-group .menu-group-item:hover {
+  background-color: #F2F2F2;
+  border-radius: 2px;
+}
+
+.menu-group .menu-group-item[data-active='true'] {
+  color: #eb8205;
+}
+
+.menu-group .menu-group-item .sdocfont,
+.sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-icon .sdocfont {
+  font-size: 12px;
+}
+
+/* sdoc-menu-with-dropdown */
+.menu-group .menu-group-item.sdoc-menu-with-dropdown {
+  width: 36px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0 !important;
+  padding: 0 !important;
+  margin-right: 10px;
+  overflow: hidden;
+}
+
+.menu-group .menu-group-item.sdoc-menu-with-dropdown.disabled {
+  color: #999;
+}
+
+.sdoc-menu-with-dropdown:not(.disabled):hover {
+  background: #F2F2F2;
+  border-radius: 2px;
+}
+
+.sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-icon {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-triangle {
+  width: 12px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-triangle .sdoc-menu-with-dropdown-triangle-icon {
+  font-size: 12px;
+  color: #999;
+}

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./style.css");
+const MenuShortcutPrompt = _ref => {
+  let {
+    shortcuts,
+    containerClassName = ''
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('sdoc-shortcut-prompt-container', containerClassName)
+  }, shortcuts.map((shortcut, index) => /*#__PURE__*/_react.default.createElement("kbd", {
+    key: `sdoc-shortcut-${shortcut}-${index}`
+  }, shortcut)));
+};
+var _default = exports.default = MenuShortcutPrompt;

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

@@ -0,0 +1,18 @@
+.sdoc-shortcut-prompt-container kbd {
+  display: inline-block;
+  margin-bottom: 0px;
+  margin-left: 1px;
+  margin-right: 1px;
+  padding: 1px 3px;
+  min-width: 12px;
+  border: none;
+  font: inherit;
+  text-align: center;
+  color: #999;
+  background-color: transparent;
+}
+
+.sdoc-shortcut-prompt-container kbd:last-child {
+  margin-right: 0px;
+  padding-right: 0px;
+}

package/dist/basic-sdk/extension/commons/more-dropdown/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactstrap = require("reactstrap");
+var _classnames = _interopRequireDefault(require("classnames"));
+const MoreDropdown = _ref => {
+  let {
+    isRichEditor = true,
+    className = 'menu-group-item',
+    disabled,
+    children
+  } = _ref;
+  const validClassName = (0, _classnames.default)(className, 'sdoc-more-text-button', {
+    'disabled': disabled,
+    'rich-icon-btn': isRichEditor,
+    'rich-icon-btn-disabled': isRichEditor && disabled,
+    'rich-icon-btn-hover': isRichEditor && !disabled,
+    'btn btn-icon btn-secondary btn-active': !isRichEditor
+  });
+  const buttonId = 'sdoc-more-text-operations';
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    className: validClassName,
+    type: "button",
+    "aria-label": "more",
+    id: buttonId
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-more"
+  })), /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
+    target: buttonId,
+    className: "sdoc-menu-popover sdoc-dropdown-menu",
+    trigger: "legacy",
+    placement: "bottom-end",
+    hideArrow: true,
+    fade: false
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "menu-group"
+  }, children)));
+};
+var _default = exports.default = MoreDropdown;

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

@@ -0,0 +1,28 @@
+.sdoc-search-list {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+}
+
+.sdoc-search-list .sdoc-search-list-wrapper {
+  padding: 12px;
+}
+
+.sdoc-search-list .sdoc-search-list-wrapper>input {
+  font-size: 12px;
+  max-height: 30px;
+}
+
+.sdoc-search-list .sdoc-search-list-content-wrapper {
+  min-height: 0;
+  min-width: 0;
+  flex: 1;
+  overflow: auto;
+  max-height: 300px;
+}
+
+.sdoc-search-list .sdoc-search-list-with-no-results {
+  font-size: 12px;
+  padding: 4px 16px;
+}

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

@@ -0,0 +1,149 @@
+"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

@@ -0,0 +1,39 @@
+"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

@@ -0,0 +1,109 @@
+"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);