@seafile/comment-editor 0.0.1-alpha.0

package/dist/basic-sdk/extension/plugins/table/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _constants = require("../../constants");
+var _menu = require("./menu");
+var _model = _interopRequireDefault(require("./model"));
+var _plugin = _interopRequireDefault(require("./plugin"));
+var _renderElem = require("./render-elem");
+const TablePlugin = {
+  type: _constants.TABLE,
+  nodeType: 'element',
+  model: _model.default,
+  editorMenus: [_menu.TableMenu],
+  editorPlugin: _plugin.default,
+  renderElements: [_renderElem.renderTable, _renderElem.renderTableRow, _renderElem.renderTableCell]
+};
+var _default = exports.default = TablePlugin;

package/dist/basic-sdk/extension/plugins/table/menu/active-table-menu/common-menu.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+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 = _interopRequireWildcard(require("react"));
+var _reactstrap = require("reactstrap");
+class CommonMenu extends _react.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "getClassName", () => {
+      const {
+        isRichEditor = true,
+        className = 'menu-group-item',
+        disabled
+      } = this.props;
+      let itemClass = 'btn btn-icon btn-secondary btn-active d-flex';
+      if (!isRichEditor) {
+        return itemClass + ' ' + className + ' sdoc-menu-with-dropdown';
+      }
+      itemClass = `rich-icon-btn d-flex ${disabled ? 'rich-icon-btn-disabled' : 'rich-icon-btn-hover'}`;
+      return itemClass + ' ' + className + ' sdoc-menu-with-dropdown';
+    });
+    (0, _defineProperty2.default)(this, "hidePopover", () => {
+      this.ref && this.ref.toggle && this.ref.toggle();
+    });
+    (0, _defineProperty2.default)(this, "setRef", ref => {
+      this.ref = ref;
+      if (!this.ref) return;
+      const {
+        toggle
+      } = this.ref;
+      this.ref.toggle = () => {
+        toggle && toggle();
+        this.setState({
+          isShowMenu: !this.state.isShowMenu
+        });
+      };
+    });
+    this.state = {
+      isShowMenu: false
+    };
+  }
+  render() {
+    const {
+      id,
+      iconClass,
+      children,
+      disabled
+    } = this.props;
+    const {
+      isShowMenu
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+      id: id,
+      type: "button",
+      className: this.getClassName()
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "sdoc-menu-with-dropdown-icon"
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: iconClass
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "sdoc-menu-with-dropdown-triangle"
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: `sdoc-menu-with-dropdown-triangle-icon sdocfont sdoc-${isShowMenu ? 'caret-up' : 'drop-down'}`
+    }))), !disabled && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
+      target: id,
+      className: "sdoc-common-menu-popover sdoc-table-menu-popover",
+      trigger: "legacy",
+      placement: "bottom-start",
+      hideArrow: true,
+      fade: false,
+      ref: this.setRef
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "sdoc-dropdown-menu"
+    }, children)));
+  }
+}
+var _default = exports.default = CommonMenu;

package/dist/basic-sdk/extension/plugins/table/menu/color-selector-popover/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/plugins/table/menu/color-selector-popover/index.js

@@ -0,0 +1,173 @@
+"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 _useColorContext = require("../../../../../hooks/use-color-context");
+var _localStorageUtils = _interopRequireDefault(require("../../../../../utils/local-storage-utils"));
+var _mouseEvent = require("../../../../../utils/mouse-event");
+var _constants = require("../../../../constants");
+var _helpers = require("../../helpers");
+var _colorItem = _interopRequireDefault(require("./color-item"));
+require("./style.css");
+const recentUsedColorsKey = _constants.RECENT_USED_TABLE_CELL_BACKGROUND_COLORS_KEY;
+const ColorSelectorPopover = _ref => {
+  let {
+    target,
+    editor,
+    readonly,
+    isRichEditor = true
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const {
+    lastUsedTableCellBackgroundColor: lastUsedColor,
+    updateLastUsedTableCellBackgroundColor: updateLastUsedColor
+  } = (0, _useColorContext.useColorContext)();
+  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 setColor = (0, _react.useCallback)(color => {
+    (0, _helpers.setCellStyle)(editor, {
+      background_color: color
+    });
+  }, [editor]);
+  const onSetColor = (0, _react.useCallback)(function (color) {
+    let shouldClose = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    if (readonly) 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, readonly]);
+  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 onMouseDown = (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
+  }, [readonly]);
+  return /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
+    target: target.current,
+    trigger: "hover",
+    placement: "right-start",
+    hideArrow: true,
+    fade: false,
+    className: "sdoc-color-menu-popover sdoc-table-cell-bg-colors-popover",
+    toggle: toggle,
+    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",
+    onMouseDown: () => onSetColor()
+  }, t('No_color'))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-color-default-colors-container",
+    onMouseDown: 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",
+    onMouseDown: 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",
+    onMouseDown: 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 sdoc-table-more-colors",
+    trigger: "hover",
+    placement: "right",
+    hideArrow: true,
+    fade: false,
+    toggle: moreColorsPopoverToggle,
+    ref: moreColorsPopoverRef
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-more-colors-container",
+    onMouseDown: onMouseDown
+  }, /*#__PURE__*/_react.default.createElement(_reactColor.ChromePicker, {
+    disableAlpha: true,
+    color: lastUsedColor || '',
+    onChange: onChange
+  })))));
+};
+var _default = exports.default = ColorSelectorPopover;

package/dist/basic-sdk/extension/plugins/table/menu/color-selector-popover/style.css

@@ -0,0 +1,7 @@
+.sdoc-table-cell-bg-colors-popover .popover {
+  margin-left: 30px;
+}
+
+.sdoc-table-more-colors.sdoc-more-colors-popover .popover {
+  margin-left: -8px;
+}

package/dist/basic-sdk/extension/plugins/table/menu/horizontal-align-popover/index.js

@@ -0,0 +1,79 @@
+"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 _reactstrap = require("reactstrap");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _core = require("../../../../core");
+var _constants = require("../../constants");
+var _helpers = require("../../helpers");
+require("../vertical-align-popover/style.css");
+const HorizontalAlignPopover = _ref => {
+  let {
+    target,
+    editor,
+    readonly,
+    horizontalAlign
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const setTextAlignStyle = (0, _react.useCallback)(textAlign => {
+    if (readonly) return;
+    (0, _helpers.setCellStyle)(editor, {
+      [_constants.TABLE_CELL_STYLE.TEXT_ALIGN]: textAlign
+    });
+    const focusPoint = editor.selection.focus;
+    // prevent select all text in the editor
+    (0, _core.focusEditor)(editor, focusPoint);
+    // Select last focus point
+    setTimeout(() => {
+      (0, _core.focusEditor)(editor, focusPoint);
+    }, 0);
+  }, [editor, readonly]);
+  return /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
+    target: target.current,
+    trigger: "hover",
+    placement: "right-start",
+    hideArrow: true,
+    fade: false
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-dropdown-menu sdoc-table-alignment-menu"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-dropdown-menu-item",
+    onMouseDown: () => setTextAlignStyle('left')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-checked"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: (0, _classnames.default)('sdocfont sdoc-check-mark', {
+      active: !horizontalAlign || horizontalAlign === 'left'
+    })
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: "active"
+  }, t('Left'))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-dropdown-menu-item",
+    onMouseDown: () => setTextAlignStyle('center')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-checked"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: (0, _classnames.default)('sdocfont sdoc-check-mark', {
+      active: horizontalAlign === 'center'
+    })
+  })), /*#__PURE__*/_react.default.createElement("span", null, t('Center'))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-dropdown-menu-item",
+    onMouseDown: () => setTextAlignStyle('right')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-checked"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: (0, _classnames.default)('sdocfont sdoc-check-mark', {
+      active: horizontalAlign === 'right'
+    })
+  })), /*#__PURE__*/_react.default.createElement("span", null, t('Right')))));
+};
+var _default = exports.default = HorizontalAlignPopover;

package/dist/basic-sdk/extension/plugins/table/menu/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, "TableContextMenu", {
+  enumerable: true,
+  get: function () {
+    return _tableContextMenu.default;
+  }
+});
+Object.defineProperty(exports, "TableMenu", {
+  enumerable: true,
+  get: function () {
+    return _tableMenu.default;
+  }
+});
+var _tableContextMenu = _interopRequireDefault(require("./table-context-menu"));
+var _tableMenu = _interopRequireDefault(require("./table-menu"));

package/dist/basic-sdk/extension/plugins/table/menu/table-context-menu/index.css

@@ -0,0 +1,40 @@
+.sdoc-context-menu .sdoc-table-context-menu {
+  display: block;
+  font-size: 0.875rem;
+}
+
+.sdoc-table-context-menu .insert-number {
+  margin-left: 50px;
+}
+
+.sdoc-table-context-menu .insert-number-input {
+  width: 36px;
+  height: 20px;
+  margin-right: .25rem;
+  padding-left: 4px;
+  padding-right: 4px;
+  text-align: center;
+  transition: none;
+}
+
+.sdoc-table-context-menu .dropdown-item:hover .insert-number-input {
+  background-color: transparent;
+  border: 1px solid #fff;
+  color: #fff;
+}
+
+.sdoc-table-context-menu .dropdown-item:disabled .insert-number-input {
+  color: #adb5bd;
+}
+
+.side-extendable {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-right: 12px;
+}
+
+.side-extendable .sdoc-right-slide {
+  color: #fff;
+  transform: scale(.6);
+}