@seafile/sea-email-editor 0.0.1

package/dist/components/popover/index.js

@@ -0,0 +1,85 @@
+"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 _constants = require("@/constants");
+var _dom = require("@/utils/dom");
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+class Popover extends _react.default.Component {
+  constructor() {
+    super(...arguments);
+    this.popoverRef = null;
+    this.onHistoryState = e => {
+      e.preventDefault();
+      this.props.hidePopover(e);
+    };
+    this.onKeyDown = e => {
+      const {
+        canHidePopover = true,
+        hidePopoverWithEsc
+      } = this.props;
+      if (e.keyCode === _constants.KeyCodes.esc && typeof hidePopoverWithEsc === 'function') {
+        e.preventDefault();
+        hidePopoverWithEsc();
+      } else if (e.keyCode === _constants.KeyCodes.enter) {
+        this.props.onEnter && this.props.onEnter(e);
+        // Resolve the default behavior of the enter key when entering formulas is blocked
+        if (canHidePopover) return;
+        e.stopImmediatePropagation();
+      }
+    };
+    this.onMousedown = e => {
+      const {
+        canHidePopover = true
+      } = this.props;
+      if (!canHidePopover) return;
+      if (this.popoverRef && e && (0, _dom.getEventClassName)(e).indexOf('popover') === -1 && !this.popoverRef.contains(e.target)) {
+        this.props.hidePopover(e);
+      }
+    };
+    this.onPopoverInsideClick = e => {
+      e.stopPropagation();
+    };
+  }
+  componentDidMount() {
+    document.addEventListener('mousedown', this.onMousedown);
+    document.addEventListener('keydown', this.onKeyDown);
+    window.addEventListener('popstate', this.onHistoryState);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.onMousedown);
+    document.removeEventListener('keydown', this.onKeyDown);
+    window.removeEventListener('popstate', this.onHistoryState);
+  }
+  render() {
+    const {
+      target,
+      innerClassName,
+      className,
+      hideArrow = true,
+      placement = 'bottom-start'
+    } = this.props;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Popover, {
+      placement: placement,
+      isOpen: true,
+      target: target,
+      fade: false,
+      hideArrow: hideArrow,
+      innerClassName: innerClassName,
+      className: className,
+      modifiers: (0, _utils.generatorModifiers)(this.props),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: ref => this.popoverRef = ref,
+        onClick: this.onPopoverInsideClick,
+        children: this.props.children
+      })
+    });
+  }
+}
+var _default = exports.default = Popover;

package/dist/components/popover/utils.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generatorModifiers = void 0;
+const generatorModifiers = _ref => {
+  let {
+    modifiers,
+    sameWidthWithTarget = false
+  } = _ref;
+  if (!sameWidthWithTarget) return modifiers;
+  let _modifiers = Array.isArray(modifiers) ? modifiers : [];
+  const flipModifier = {
+    name: 'flip',
+    enabled: true,
+    options: {}
+  };
+  const flipModifierIndex = _modifiers.findIndex(m => m.name === 'flip');
+  if (flipModifierIndex === -1) {
+    _modifiers.push(flipModifier);
+  } else {
+    const modifier = _modifiers[flipModifierIndex];
+    _modifiers[flipModifierIndex] = {
+      ...flipModifier,
+      ...modifier
+    };
+  }
+  const computeStylesModifier = {
+    name: 'computeStyles',
+    enabled: true,
+    options: {
+      // gpuAcceleration: false,
+      adaptive: true
+    }
+  };
+  const computeStylesModifierIndex = _modifiers.findIndex(m => m.name === 'computeStyles');
+  if (computeStylesModifierIndex === -1) {
+    _modifiers.push(computeStylesModifier);
+  } else {
+    const modifier = _modifiers[computeStylesModifierIndex];
+    _modifiers[computeStylesModifierIndex] = {
+      ...computeStylesModifier,
+      ...modifier
+    };
+  }
+  const sameWidthModifier = {
+    name: 'sameWidth',
+    enabled: true,
+    phase: 'beforeWrite',
+    requires: ['computeStyles'],
+    fn: _ref2 => {
+      let {
+        state
+      } = _ref2;
+      if (state.elements.reference) {
+        const width = state.elements.reference.getBoundingClientRect().width;
+        const validWidth = Math.max(sameWidthWithTarget, width);
+        state.styles.popper.width = `${validWidth}px`;
+        state.styles.popper.maxWidth = `${validWidth}px`;
+      }
+    }
+  };
+  const sameWidthModifierIndex = _modifiers.findIndex(m => m.name === 'sameWidth');
+  if (sameWidthModifierIndex === -1) {
+    _modifiers.push(sameWidthModifier);
+  } else {
+    const modifier = _modifiers[sameWidthModifierIndex];
+    _modifiers[sameWidthModifierIndex] = {
+      ...sameWidthModifier,
+      ...modifier
+    };
+  }
+  return _modifiers;
+};
+exports.generatorModifiers = generatorModifiers;

package/dist/components/search-input/index.css

@@ -0,0 +1,52 @@
+.sea-email-editor-search-input-wrapper {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sea-email-editor-search-input-wrapper .sea-email-editor-search-input {
+  width: 100%;
+  padding-left: 2.5rem;
+  border-radius: 8px;
+}
+
+.sea-email-editor-search-input-wrapper .sea-email-editor-search-input.small-size {
+  border-radius: 4px;
+}
+
+.sea-email-editor-search-input-wrapper .sea-email-editor-search-input:focus {
+  border-color: #0094F2;
+  box-shadow: none;
+}
+
+.sea-email-editor-search-input-wrapper .sea-email-editor-search-input::placeholder {
+  color: #868E96;
+  font: 14px;
+}
+
+.sea-email-editor-search-input-wrapper .sea-email-editor-search-input-search {
+  position: absolute;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  padding-left: 12px;
+  padding-right: 8px;
+}
+
+.sea-email-editor-search-input-wrapper .sea-email-editor-search-input-search:hover {
+  background-color: inherit;
+  cursor: default;
+}
+
+.sea-email-editor-search-input-wrapper .sea-email-editor-search-input-search .sea-email-editor-icon-svg {
+  color: var(--sea-email-icon-secondary-color);
+  height: 14px;
+  width: 14px;
+}
+
+.sea-email-project-search-in-popover.sea-email-editor-search-input-wrapper {
+  margin: 0 16px;
+  width: calc(100% - 32px);
+}

package/dist/components/search-input/index.js

@@ -0,0 +1,148 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var _iconButton = _interopRequireDefault(require("../icon-button"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+class SearchInput extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.onCompositionStart = () => {
+      this.isInputtingChinese = true;
+    };
+    this.onChange = e => {
+      this.timer && clearTimeout(this.timer);
+      const {
+        onChange,
+        wait
+      } = this.props;
+      let text = e.target.value;
+      this.setState({
+        searchValue: text || ''
+      }, () => {
+        if (this.isInputtingChinese) return;
+        this.timer = setTimeout(() => {
+          onChange && onChange(this.state.searchValue.trim());
+        }, wait);
+      });
+    };
+    this.onCompositionEnd = e => {
+      this.isInputtingChinese = false;
+      this.onChange(e);
+    };
+    this.onClear = () => {
+      const {
+        onClear
+      } = this.props;
+      this.timer && clearTimeout(this.timer);
+      this.setState({
+        searchValue: ''
+      }, () => {
+        onClear && onClear();
+      });
+    };
+    this.setFocus = isSelectAllText => {
+      if (this.inputRef === document.activeElement) return;
+      this.inputRef.focus();
+      if (isSelectAllText) {
+        const txtLength = this.state.searchValue.length;
+        this.inputRef.setSelectionRange(0, txtLength);
+      }
+    };
+    this.getSearchValue = () => {
+      return this.state.searchValue || '';
+    };
+    this.state = {
+      searchValue: props.value
+    };
+    this.isInputtingChinese = false;
+    this.timer = null;
+    this.inputRef = null;
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.value !== this.props.value) {
+      this.setState({
+        searchValue: nextProps.value
+      });
+    }
+  }
+  componentWillUnmount() {
+    this.timer && clearTimeout(this.timer);
+    this.timer = null;
+    this.inputRef = null;
+  }
+  render() {
+    const {
+      placeholder,
+      autoFocus,
+      className,
+      inputClassName,
+      disabled,
+      style,
+      isShowSearchIcon = true,
+      size = 38,
+      onKeyDown
+    } = this.props;
+    const {
+      searchValue
+    } = this.state;
+    const isSmallSize = size <= 30;
+    let paddingLeft = size - 2;
+    if (!isShowSearchIcon) {
+      paddingLeft = isSmallSize ? 8 : 12;
+    }
+    let paddingRight = 8;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)('sea-email-editor-search-input-wrapper', className, {
+        'display-search-icon': isShowSearchIcon,
+        'display-clear-icon': false
+      }),
+      style: {
+        ...style,
+        height: size
+      },
+      children: [isShowSearchIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.default, {
+        icon: "search",
+        className: "sea-email-editor-search-input-search",
+        style: {
+          height: size,
+          width: size - 2
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        ref: ref => this.inputRef = ref,
+        type: "text",
+        value: searchValue,
+        className: (0, _classnames.default)('form-control sea-email-editor-search-input', inputClassName, {
+          'small-size': isSmallSize
+        }),
+        onChange: this.onChange,
+        autoFocus: autoFocus,
+        placeholder: placeholder,
+        onCompositionStart: this.onCompositionStart,
+        onCompositionEnd: this.onCompositionEnd,
+        onKeyDown: onKeyDown,
+        disabled: disabled,
+        style: {
+          height: size,
+          paddingLeft: paddingLeft,
+          paddingRight: paddingRight
+        },
+        name: "search-input",
+        autoComplete: "off"
+      })]
+    });
+  }
+}
+SearchInput.defaultProps = {
+  wait: 100,
+  disabled: false,
+  value: ''
+};
+var _default = exports.default = SearchInput;

package/dist/components/selector-display/index.css

@@ -0,0 +1,86 @@
+.sea-email-customize-select {
+  width: fit-content;
+  max-width: 100%;
+  background-image: none;
+  padding: 0 0.75rem;
+  height: 36px;
+  border-radius: 8px;
+  color: #212529;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-align: left;
+  user-select: none;
+  position: relative;
+  appearance: none;
+  font-size: .9375rem;
+  font-weight: 400;
+  line-height: 1.6;
+  vertical-align: middle;
+  overflow: hidden !important;
+}
+
+.sea-email-customize-select:not(.disabled):hover {
+  cursor: pointer;
+}
+
+.sea-email-customize-select.disabled,
+.sea-email-customize-select.disabled .selected-option .sea-email-editor-icon-svg {
+  color: var(--sea-email-disabled-color);
+}
+
+.sea-email-customize-select:not(.display-border) {
+  border: none;
+}
+
+.sea-email-customize-select.bg-color {
+  background-color: #F7F7F5;
+}
+
+.sea-email-customize-select:hover {
+  background-color: var(--option-bg-color);
+}
+
+.sea-email-customize-select:not(.display-border):hover {
+  background-color: #EDEDEB;
+}
+
+.sea-email-customize-select.highlight {
+  margin: 0;
+  min-height: unset;
+  max-height: unset;
+  color: #ED7109;
+  border-color: #ED7109 !important;
+  background-color: rgba(237, 113, 9, 0.05);
+}
+
+.sea-email-customize-select.highlight .sea-email-editor-icon-svg {
+  color: inherit !important;
+}
+
+.sea-email-customize-select .selected-option {
+  background-color: transparent;
+  gap: 8px;
+  align-items: center;
+  display: flex;
+  flex: 1 1;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.sea-email-customize-select .selected-option .sea-email-editor-icon-svg {
+  height: 14px !important;
+  width: 14px !important;
+  color: var(--sea-email-icon-color);
+}
+
+.sea-email-customize-select .selected-option .selected-option-show {
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  align-items: center;
+  display: flex;
+  gap: 4px;
+}

package/dist/components/selector-display/index.js

@@ -0,0 +1,66 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var _icon = _interopRequireDefault(require("../icon"));
+var _tooltip = _interopRequireDefault(require("../tooltip"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+const SelectorDisplay = _ref => {
+  let {
+    icon,
+    innerRef,
+    children,
+    className,
+    highlight,
+    border = true,
+    displayBgColor = false,
+    iconPlacement = 'left',
+    tip,
+    tipPlacement,
+    disabled,
+    height = 36,
+    onClick
+  } = _ref;
+  const _className = (0, _react.useMemo)(() => {
+    return (0, _classnames.default)('custom-select sea-email-customize-select', className, {
+      'display-border': border,
+      'highlight': highlight,
+      'bg-color': displayBgColor,
+      'disabled': disabled
+    });
+  }, [className, highlight, border, displayBgColor, disabled]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _className,
+      ref: innerRef,
+      onClick: disabled ? () => {} : onClick,
+      style: {
+        height,
+        borderRadius: height > 30 ? 8 : 4
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)('selected-option', `icon-in-${iconPlacement}`),
+        children: [icon && iconPlacement === 'left' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
+          icon: icon
+        }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "selected-option-show",
+          children: children
+        }), icon && iconPlacement === 'right' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
+          icon: icon
+        })]
+      })
+    }), tip && innerRef && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
+      target: innerRef,
+      placement: tipPlacement,
+      children: tip
+    })]
+  });
+};
+var _default = exports.default = SelectorDisplay;

package/dist/components/toolbar/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ToolbarGroup", {
+  enumerable: true,
+  get: function () {
+    return _toolbarGroup.default;
+  }
+});
+Object.defineProperty(exports, "ToolbarItem", {
+  enumerable: true,
+  get: function () {
+    return _toolbarItem.default;
+  }
+});
+var _toolbarGroup = _interopRequireDefault(require("./toolbar-group"));
+var _toolbarItem = _interopRequireDefault(require("./toolbar-item"));

package/dist/components/toolbar/toolbar-group/index.css

@@ -0,0 +1,13 @@
+.sea-email-editor-toolbar-group {
+  height: 100%;
+  width: fit-content;
+  padding: 0 6px;
+  display: flex;
+  align-items: center;
+  border-left: 1px solid #e5e6e8;
+  gap: 8px;
+}
+
+.sea-email-editor-toolbar-group:first-child {
+  border-left: none;
+}

package/dist/components/toolbar/toolbar-group/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("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+const ToolbarGroup = _ref => {
+  let {
+    className,
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)('sea-email-editor-toolbar-group', className),
+    children: children
+  });
+};
+var _default = exports.default = ToolbarGroup;

package/dist/components/toolbar/toolbar-item/index.css

@@ -0,0 +1,3 @@
+.sea-email-toolbar-item[data-active=true] .sea-email-editor-icon-svg {
+  color: #eb8205;
+}

package/dist/components/toolbar/toolbar-item/index.js

@@ -0,0 +1,53 @@
+"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 _translate = require("../../../utils/translate");
+var _iconButton = _interopRequireDefault(require("../../icon-button"));
+var _tooltip = _interopRequireDefault(require("../../tooltip"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+const ToolbarItem = _ref => {
+  let {
+    disabled,
+    isActive,
+    type,
+    onClick,
+    className = 'sea-email-toolbar-item',
+    icon,
+    id,
+    text
+  } = _ref;
+  const handleClick = (0, _react.useCallback)(event => {
+    if (disabled) return;
+    onClick(event, type);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [disabled, type, onClick]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.default, {
+      icon: icon,
+      className: className,
+      id: id,
+      disabled: disabled,
+      "data-active": isActive,
+      onClick: handleClick,
+      size: {
+        icon: 14
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
+      target: id,
+      transition: {
+        timeout: 150
+      },
+      placement: "bottom",
+      children: (0, _translate.gettext)(text)
+    })]
+  });
+};
+var _default = exports.default = ToolbarItem;

package/dist/components/tooltip/index.css

@@ -0,0 +1,68 @@
+.sea-email-tooltip .tooltip.show {
+  opacity: 1;
+  z-index: 1099;
+}
+
+.sea-email-tooltip.top-start .tooltip.show {
+  left: -0.4rem !important;
+}
+
+.sea-email-tooltip .tooltip-inner {
+  max-width: 242px;
+  text-align: start;
+  background-color: #212529;
+  color: #fff;
+  border-radius: 4px;
+  line-height: 20px;
+  font-size: 14px;
+  font-weight: 400;
+  padding: 0.25rem 0.5rem;
+}
+
+.sea-email-tooltip.sea-email-tooltip-with-confirm-tip .tooltip-inner {
+  padding: 8px 12px;
+  display: inline-flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.sea-email-tooltip .sea-email-tooltip-text {
+  display: inline-block;
+  width: 100%;
+}
+
+.sea-email-tooltip.sea-email-tooltip-with-confirm-tip .sea-email-tooltip-confirm-text {
+  color: #999;
+  font-size: 14px;
+  line-height: 22px;
+  min-width: 40px;
+  max-width: 100%;
+  text-align: right;
+  cursor: pointer;
+}
+
+.sea-email-tooltip.sea-email-tooltip-with-confirm-tip .sea-email-tooltip-confirm-text:hover {
+  color: #fff;
+}
+
+.sea-email-tooltip .bs-tooltip-right .arrow::before,
+.sea-email-tooltip .bs-tooltip-auto[x-placement^="right"] .arrow::before,
+.sea-email-tooltip .bs-tooltip-auto[data-popper-placement^="right"] .arrow::before {
+  border-right-color: #212529;
+}
+
+.sea-email-tooltip .bs-tooltip-top .arrow::before,
+.sea-email-tooltip .bs-tooltip-auto[x-placement^="top"] .arrow::before {
+  border-top-color: #212529;
+}
+
+.sea-email-tooltip .bs-tooltip-bottom .arrow::before,
+.sea-email-tooltip .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
+  border-bottom-color: #212529;
+}
+
+.sea-email-tooltip .bs-tooltip-left .arrow::before,
+.sea-email-tooltip .bs-tooltip-auto[x-placement^="left"] .arrow::before {
+  border-left-color: #212529;
+}
+