@seafile/comment-editor 0.0.1-alpha.0

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

@@ -0,0 +1,31 @@
+"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 _reactI18next = require("react-i18next");
+var _classnames = _interopRequireDefault(require("classnames"));
+const ColorItem = _ref => {
+  let {
+    t,
+    color,
+    lastUsedColor
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('sdoc-color-item', {
+      'selected': lastUsedColor === color.value
+    }),
+    style: {
+      backgroundColor: color.value
+    },
+    color: color.value,
+    "data-color": color.value,
+    title: color.index ? t(color.name, {
+      value: color.index
+    }) : t(color.name)
+  });
+};
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(ColorItem);

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

@@ -0,0 +1,161 @@
+.menu-group .sdoc-color-menu.menu-show {
+  background: #e5e5e5;
+  border-radius: 2px;
+}
+
+.menu-group .sdoc-color-menu .last-used-color-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.menu-group .sdoc-color-menu .last-used-color-container.disabled {
+  padding-right: 0;
+}
+
+.menu-group .sdoc-color-menu .sdoc-color-toggle {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.menu-group .sdoc-color-menu .sdoc-color-toggle:hover,
+.menu-group .sdoc-color-menu .last-used-color-container:not(.disabled):hover {
+  background-color: #E5E5E5;
+}
+
+.menu-group .sdoc-color-menu.disabled .sdoc-color-toggle .sdocfont {
+  color: #BDBDBD;
+}
+
+.sdoc-color-menu .sdoc-color-icon {
+  height: 12px;
+  width: 12px;
+  transform: scale(.85);
+  line-height: 12px;
+}
+
+.sdoc-color-menu .last-used-color {
+  width: 14px;
+  height: 3px;
+  border-radius: 1px;
+  margin-top: 1px;
+  border: 1px solid rgba(0, 0, 0, .08);
+}
+
+.sdoc-color-menu-popover .popover {
+  left: -24px !important;
+}
+
+.sdoc-color-menu-popover .sdoc-color-dropdown-menu {
+  width: 251px;
+  padding: 0 0 12px 0;
+}
+
+.sdoc-color-menu-popover .sdoc-color-no-color-container {
+  width: 100%;
+  height: 24px;
+  margin-bottom: 5px;
+}
+
+.sdoc-color-menu-popover .sdoc-color-no-color-content {
+  height: 100%;
+  width: 100%;
+  text-align: center;
+  border: 1px solid rgba(0, 0, 0, .12);
+  border-radius: 2px;
+  font-size: 12px;
+  line-height: 22px;
+  cursor: pointer;
+}
+
+.sdoc-color-menu-popover .sdoc-color-default-colors-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.sdoc-color-menu-popover .sdoc-color-item {
+  position: relative;
+  height: 20px;
+  width: 20px;
+  margin-right: 3px;
+  margin-bottom: 3px;
+  border: 0.5px solid rgba(0, 0, 0, .08);
+}
+
+.sdoc-color-menu-popover .sdoc-color-item:not(.selected):hover::before {
+  content: '';
+  position: absolute;
+  width: calc(100% + 5px);
+  height: calc((100% + 5px));
+  top: -2.5px;
+  left: -2.5px;
+  pointer-events: none;
+  border: 1px solid rgba(0, 0, 0, .24);
+}
+
+.sdoc-color-menu-popover .sdoc-color-item.selected::after {
+  content: '';
+  position: absolute;
+  width: calc(100% + 5px);
+  height: calc((100% + 5px));
+  top: -2.5px;
+  left: -2.5px;
+  pointer-events: none;
+  border: 1px solid rgba(0, 0, 0, .88);
+}
+
+.sdoc-color-menu-popover .sdoc-color-item:hover {
+  cursor: pointer;
+}
+
+.sdoc-color-menu-popover .sdoc-color-item:nth-child(10n) {
+  margin-right: 0px;
+}
+
+.sdoc-color-menu-popover .sdoc-color-sub-title {
+  font-size: 11px;
+  line-height: 16px;
+  margin: 7px 0;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.sdoc-color-menu-popover .sdoc-colors-divider {
+  width: 100%;
+  height: 1px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  margin: 0px 0 8px 0;
+}
+
+.sdoc-color-menu-popover .sdoc-more-colors {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 30px;
+  font-size: 12px;
+  padding: 0 12px;
+}
+
+.sdoc-color-menu-popover .sdoc-more-colors .sdocfont {
+  font-size: 12px;
+  transform: scale(.6);
+  color: #888;
+}
+
+.sdoc-color-menu-popover .sdoc-more-colors.show-pick {
+  cursor: pointer;
+  background-color: rgba(51, 77, 102, .06);
+}
+
+.sdoc-more-colors-popover .popover {
+  left: 10px !important;
+}
+
+/* commission */
+.menu-group #button-sdoc-highlight-color .sdoc-color-icon {
+  position: relative;
+  left: 1px;
+}

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

@@ -0,0 +1,208 @@
+"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 _reactColor = require("react-color");
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _tooltip = _interopRequireDefault(require("../../../components/tooltip"));
+var _localStorageUtils = _interopRequireDefault(require("../../../utils/local-storage-utils"));
+var _mouseEvent = require("../../../utils/mouse-event");
+var _constants = require("../../constants");
+var _colorItem = _interopRequireDefault(require("./color-item"));
+require("./index.css");
+const ColorMenu = _ref => {
+  let {
+    isRichEditor = true,
+    className = 'menu-group-item',
+    ariaLabel,
+    iconClass,
+    id,
+    popoverClassName,
+    disabled,
+    t,
+    setColor,
+    recentUsedColorsKey,
+    text,
+    defaultColorTip,
+    defaultColor,
+    lastUsedColor,
+    updateLastUsedColor
+  } = _ref;
+  const popoverRef = (0, _react.useRef)(null);
+  const moreColorsPopoverRef = (0, _react.useRef)(null);
+  const [recentUsedColors, setRecentUsedColors] = (0, _react.useState)(_localStorageUtils.default.getItem(recentUsedColorsKey, _constants.DEFAULT_RECENT_USED_LIST));
+  const [isShowMenu, setMenuShow] = (0, _react.useState)(false);
+  const [isPickerShow, setPickerShow] = (0, _react.useState)(false);
+  const onSetColor = (0, _react.useCallback)(function (color) {
+    let shouldClose = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    if (disabled) return;
+    const validColor = color || '';
+    setColor(validColor);
+    if (validColor !== '' && recentUsedColors[0] !== validColor) {
+      let newRecentUsedColors = recentUsedColors.slice(0, 9);
+      newRecentUsedColors.unshift(validColor);
+      _localStorageUtils.default.setItem(recentUsedColorsKey, newRecentUsedColors);
+      setRecentUsedColors(newRecentUsedColors);
+    }
+    updateLastUsedColor && updateLastUsedColor(validColor);
+    if (shouldClose) {
+      popoverRef.current.toggle();
+      setMenuShow(!isShowMenu);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [recentUsedColors, recentUsedColorsKey, isShowMenu, isPickerShow, disabled]);
+  const setColorProxy = (0, _react.useCallback)(event => {
+    if (event.target.className.includes('sdoc-color-item')) {
+      const color = event.target.dataset.color;
+      onSetColor(color);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [recentUsedColors, recentUsedColorsKey, isShowMenu, isPickerShow]);
+  const toggle = (0, _react.useCallback)(() => {
+    if (isPickerShow) return;
+    popoverRef.current.toggle();
+    setMenuShow(!isShowMenu);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowMenu, isPickerShow]);
+  const moreColorsPopoverToggle = (0, _react.useCallback)(() => {
+    moreColorsPopoverRef.current.toggle();
+    setPickerShow(!isPickerShow);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [moreColorsPopoverRef, isPickerShow]);
+  const onClick = (0, _react.useCallback)(event => {
+    (0, _mouseEvent.eventStopPropagation)(event);
+  }, []);
+  const onChange = (0, _react.useCallback)(color => {
+    const validColor = color.hex;
+    onSetColor(validColor, false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [disabled]);
+  const setLastUsedColor = (0, _react.useCallback)(event => {
+    (0, _mouseEvent.eventStopPropagation)(event);
+    onSetColor(lastUsedColor, false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [recentUsedColors, lastUsedColor, disabled]);
+  const buttonId = `button-${id}`;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    "aria-label": ariaLabel,
+    className: (0, _classnames.default)(className, 'sdoc-color-menu sdoc-menu-with-dropdown', {
+      'menu-show': isShowMenu,
+      'disabled': disabled,
+      'rich-icon-btn d-flex': isRichEditor,
+      'rich-icon-btn-disabled': isRichEditor && disabled,
+      'rich-icon-btn-hover': isRichEditor && !disabled,
+      'btn btn-icon btn-secondary btn-active d-flex': !isRichEditor
+    }),
+    id: buttonId,
+    disabled: disabled
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('last-used-color-container sdoc-menu-with-dropdown-icon', {
+      'disabled': disabled
+    }),
+    onClick: setLastUsedColor
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: (0, _classnames.default)(iconClass, 'sdoc-color-icon')
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "last-used-color",
+    style: {
+      backgroundColor: lastUsedColor || 'unset'
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    id: id,
+    className: "sdoc-color-toggle sdoc-menu-with-dropdown-triangle"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: `sdoc-menu-with-dropdown-triangle-icon sdocfont sdoc-${isShowMenu ? 'caret-up' : 'drop-down'}`
+  }))), text && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    target: buttonId
+  }, t(text)), !disabled && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
+    target: id,
+    className: (0, _classnames.default)('sdoc-color-menu-popover', popoverClassName),
+    trigger: "legacy",
+    placement: "bottom-start",
+    hideArrow: true,
+    toggle: toggle,
+    fade: false,
+    ref: popoverRef
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-dropdown-menu sdoc-color-dropdown-menu"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-3 d-flex flex-column"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-color-no-color-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-color-no-color-content",
+    onClick: () => onSetColor(defaultColor)
+  }, defaultColorTip || t('No_color'))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-color-default-colors-container",
+    onClick: setColorProxy
+  }, _constants.DEFAULT_COLORS.map((color, index) => {
+    return /*#__PURE__*/_react.default.createElement(_colorItem.default, {
+      key: `default-color-${index}`,
+      color: color,
+      lastUsedColor: lastUsedColor
+    });
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-color-standard-colors-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-color-sub-title"
+  }, t('Standard_color')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex",
+    onClick: setColorProxy
+  }, _constants.STANDARD_COLORS.map((color, index) => {
+    return /*#__PURE__*/_react.default.createElement(_colorItem.default, {
+      key: `standard-color-${index}`,
+      color: color,
+      lastUsedColor: lastUsedColor
+    });
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-color-recent-used-colors-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-color-sub-title"
+  }, t('Recently_used')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex",
+    onClick: setColorProxy
+  }, recentUsedColors.map((color, index) => {
+    return /*#__PURE__*/_react.default.createElement(_colorItem.default, {
+      key: `standard-color-${index}`,
+      color: {
+        value: color,
+        name: color
+      }
+    });
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-colors-divider"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('sdoc-more-colors pr-2', {
+      'show-pick': isPickerShow
+    }),
+    id: "sdoc-more-colors"
+  }, /*#__PURE__*/_react.default.createElement("span", null, t('More_color')), /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-right-slide"
+  })), /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
+    target: "sdoc-more-colors",
+    className: "sdoc-more-colors-popover",
+    trigger: "hover",
+    placement: "right",
+    hideArrow: true,
+    fade: false,
+    toggle: moreColorsPopoverToggle,
+    ref: moreColorsPopoverRef
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-more-colors-container",
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement(_reactColor.ChromePicker, {
+    disableAlpha: true,
+    color: lastUsedColor || '',
+    onChange: onChange
+  }))))));
+};
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(ColorMenu);

package/dist/basic-sdk/extension/commons/dropdown-menu-item/index.css

@@ -0,0 +1,12 @@
+/* insert element dropdown item */
+.sdoc-dropdown-item-with-left-icon .sdoc-dropdown-item-content .sdoc-dropdown-item-content-icon {
+  color: #444;
+}
+
+.sdoc-link-dropdown-menu-item .sdoc-dropdown-item-content{
+  justify-content: space-between;
+}
+
+.sdoc-dropdown-menu-item-relative {
+  position: relative;
+}

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

@@ -0,0 +1,57 @@
+"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 _menuShortcutIndicator = _interopRequireDefault(require("../menu-shortcut-indicator"));
+require("./index.css");
+const DropdownMenuItem = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    disabled,
+    onClick,
+    menuConfig,
+    children,
+    className,
+    shortcut,
+    isHidden
+  } = props;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const {
+    iconClass
+  } = menuConfig;
+  const [isShowChildren, setShowChildren] = (0, _react.useState)(false);
+
+  // onMount
+  (0, _react.useEffect)(() => {
+    setShowChildren(!isShowChildren);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('sdoc-dropdown-menu-item', className, {
+      'disabled': disabled,
+      'sdoc-dropdown-item-with-left-icon': iconClass,
+      'sdoc-link-dropdown-menu-item': shortcut,
+      'sdoc-dropdown-menu-item-hidden': isHidden
+    }),
+    id: menuConfig.id || '',
+    onClick: disabled ? () => {} : onClick || (() => {}),
+    ref: ref
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-dropdown-item-content"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-dropdown-item-left"
+  }, iconClass && /*#__PURE__*/_react.default.createElement("i", {
+    className: (0, _classnames.default)(iconClass, 'sdoc-dropdown-item-content-icon')
+  }), /*#__PURE__*/_react.default.createElement("span", null, t(menuConfig.text))), shortcut && /*#__PURE__*/_react.default.createElement(_menuShortcutIndicator.default, {
+    shortcuts: shortcut
+  })), isShowChildren && children);
+});
+var _default = exports.default = DropdownMenuItem;

package/dist/basic-sdk/extension/commons/element-popover/index.js

@@ -0,0 +1,47 @@
+"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 _reactDom = _interopRequireDefault(require("react-dom"));
+class ElementPopover extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "state", {
+      isMounted: false
+    });
+    this.el = document.createElement('div');
+    if (props.className) {
+      this.el.className = props.className;
+    }
+    if (props.style) {
+      this.el.style = props.style;
+    }
+  }
+  componentDidMount() {
+    document.body.appendChild(this.el);
+  }
+  componentDidUpdate() {
+    const {
+      className,
+      style
+    } = this.props;
+    if (className) {
+      this.el.className = className;
+    }
+    if (style) {
+      this.el.style = style;
+    }
+  }
+  componentWillUnmount() {
+    document.body.removeChild(this.el);
+  }
+  render() {
+    return /*#__PURE__*/_reactDom.default.createPortal(this.props.children, this.el);
+  }
+}
+var _default = exports.default = ElementPopover;