@seafile/sdoc-editor 1.0.3 → 1.0.5

package/dist/basic-sdk/extension/plugins/seatable-tables/op-menu/index.js

@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { ElementPopover } from '../../../commons';
+import TableSettings from '../seatable-settings';
 import './index.css';
 export default function OpMenu(_ref) {
   let {
@@ -7,11 +8,23 @@ export default function OpMenu(_ref) {
     element,
     menuPosition
   } = _ref;
-  const [isShowSettingPanel, setIsShowSettingPanel] = useState(false);
+  const [isShowSeaTableSetting, setIsShowSeaTableSetting] = useState(false);
+  const onShowSettings = useCallback(() => {
+    setIsShowSeaTableSetting(true);
+  }, []);
+  const onHideSettings = useCallback(() => {
+    setIsShowSeaTableSetting(false);
+  }, []);
+  console.log(isShowSeaTableSetting);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ElementPopover, null, /*#__PURE__*/React.createElement("div", {
     className: "seatable-op-menu",
     style: menuPosition
   }, /*#__PURE__*/React.createElement("span", {
-    className: "sdocfont sdoc-settings"
-  }))));
+    className: "sdocfont sdoc-settings",
+    onClick: onShowSettings
+  }))), isShowSeaTableSetting && /*#__PURE__*/React.createElement(TableSettings, {
+    editor: editor,
+    element: element,
+    onHideSettings: onHideSettings
+  }));
 }

package/dist/basic-sdk/extension/plugins/seatable-tables/seatable-settings/custom-switch/index.css

@@ -0,0 +1,28 @@
+.document-plugin .widget-table-switch-properties .custom-switch-description {
+  margin-left: 0;
+  white-space: normal;
+  flex: 1;
+  margin-right: .5rem;
+}
+
+.document-plugin .widget-table-switch-properties .custom-switch {
+  width: 100%;
+  justify-content: space-between;
+  cursor: pointer;
+  padding-left: 0;
+}
+
+.document-plugin .widget-table-switch-properties .custom-switch-indicator {
+  width: 22px;
+  height: 12px;
+  flex-shrink: 0;
+}
+
+.document-plugin .widget-table-switch-properties .custom-switch-indicator:before {
+  height: 8px;
+  width: 8px;
+}
+
+.document-plugin .widget-table-switch-properties .custom-switch-input:checked~.custom-switch-indicator:before {
+  left: 12px;
+}

package/dist/basic-sdk/extension/plugins/seatable-tables/seatable-settings/custom-switch/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { DTableSwitch } from 'dtable-ui-component';
+import './index.css';
+function CustomSwitch(props) {
+  const {
+    isLocked,
+    checked,
+    title
+  } = props;
+  return /*#__PURE__*/React.createElement(DTableSwitch, {
+    checked: checked,
+    disabled: isLocked,
+    switchClassName: "widget-table-switch-properties w-100",
+    placeholder: title,
+    onChange: () => props.onPropertiesChanged(!checked)
+  });
+}
+export default CustomSwitch;

package/dist/basic-sdk/extension/plugins/seatable-tables/seatable-settings/filter-setter/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+export default function FilterSetter() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "setting-item-btn filters-setting"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "dtable-font dtable-icon-filter mr-2"
+  }), /*#__PURE__*/React.createElement("div", null, "FilterSetter"));
+}

package/dist/basic-sdk/extension/plugins/seatable-tables/seatable-settings/hide-column-setter/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+export default function HideColumnSetter() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "setting-item-btn columns-setting"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "dtable-font dtable-icon-hide mr-2"
+  }), /*#__PURE__*/React.createElement("div", null, "Hide column setter"));
+}

package/dist/basic-sdk/extension/plugins/seatable-tables/seatable-settings/index.css

@@ -0,0 +1,66 @@
+.document-seatable-settings-wrapper {
+  position: fixed;
+  right: 0;
+  top: 200px;
+  width: 300px;
+  bottom: 0;
+  background-color: #fff;
+  border-left: 1px solid #e4e4e4;
+  transition: width .25s ease-in-out 0s;
+  z-index: 4;
+  display: flex;
+}
+
+.document-seatable-settings-container {
+  display: flex;
+  flex: 1 1;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+}
+
+.document-seatable-settings-container .document-seatable-settings-header {
+  height: 48px;
+  line-height: 48px;
+  padding: 0 16px;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #e4e4e4;
+}
+
+.document-seatable-settings-container .document-seatable-settings-content {
+  height: calc(100% - 49px);
+  overflow: auto;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 16px 16px 50px;
+}
+
+.document-plugin .document-seatable-settings-container .setting-item {
+  margin: 0;
+  margin-bottom: 1rem;
+}
+
+.document-plugin .document-seatable-settings-container .setting-divide-line {
+  border-bottom: 1px solid #e2e2e2;
+  margin: 14px 0;
+}
+
+.document-plugin .document-seatable-settings-container .setting-item.table-setting {
+  margin-bottom: 0;
+}
+
+.document-plugin .document-seatable-settings-container .setting-item-btn {
+  display: flex;
+  border-radius: 4px;
+  cursor: pointer;
+  line-height: 22px;
+  padding: 3px 4px;
+  width: 100%;
+}
+
+.document-plugin .document-seatable-settings-container .setting-item-btn .dtable-font {
+  color: #666;
+  font-size: 14px;
+}

package/dist/basic-sdk/extension/plugins/seatable-tables/seatable-settings/index.js

@@ -0,0 +1,73 @@
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import CustomSwitch from './custom-switch';
+import './index.css';
+import TableSetting from './table-setting';
+import FilterSetter from './filter-setter';
+import SortSetter from './sort-setter';
+import HideColumnSetter from './hide-column-setter';
+export default function TableSettings(_ref) {
+  let {
+    editor,
+    element,
+    onHideSettings
+  } = _ref;
+  const [settings, updateSettings] = useState(element);
+  const {
+    t
+  } = useTranslation();
+  const onTableChange = useCallback(option => {
+    console.log(option);
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "document-seatable-settings-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "document-seatable-settings-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "document-seatable-settings-header"
+  }, /*#__PURE__*/React.createElement("span", null, t('SeaTable_settings')), /*#__PURE__*/React.createElement("span", {
+    className: "dtable-font dtable-icon-x",
+    onClick: onHideSettings
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "document-seatable-settings-content"
+  }, /*#__PURE__*/React.createElement(TableSetting, {
+    tables: editor.tables,
+    element: settings,
+    onTableChange: onTableChange
+  }), /*#__PURE__*/React.createElement("div", {
+    class: "setting-divide-line"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "setting-item"
+  }, "Data settings"), /*#__PURE__*/React.createElement("div", {
+    className: "setting-item filter-setter"
+  }, /*#__PURE__*/React.createElement(FilterSetter, null)), /*#__PURE__*/React.createElement("div", {
+    className: "setting-item sort-setter"
+  }, /*#__PURE__*/React.createElement(SortSetter, null)), /*#__PURE__*/React.createElement("div", {
+    className: "setting-item hide-column-setter"
+  }, /*#__PURE__*/React.createElement(HideColumnSetter, null)), /*#__PURE__*/React.createElement("div", {
+    class: "setting-divide-line"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "setting-item"
+  }, "Style Settings"), /*#__PURE__*/React.createElement("div", {
+    className: "setting-item"
+  }, /*#__PURE__*/React.createElement(CustomSwitch, {
+    checked: settings['show_record_numbers'],
+    isLocked: false,
+    title: t('Show_record_numbers'),
+    onPropertiesChanged: value => this.onSwitchPropertiesChanged('showRowNumber', value)
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "setting-item"
+  }, /*#__PURE__*/React.createElement(CustomSwitch, {
+    checked: settings['alternate_color'],
+    isLocked: false,
+    title: t('Alternate_color'),
+    onPropertiesChanged: value => this.onSwitchPropertiesChanged('applyBandedTableDesign', value)
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "setting-item"
+  }, /*#__PURE__*/React.createElement(CustomSwitch, {
+    checked: settings['select_column_display_option_color'] === false ? false : true,
+    isLocked: false,
+    title: t('Select_column_display_option_color_tip'),
+    onPropertiesChanged: value => this.onSwitchPropertiesChanged('select_column_display_option_color', value)
+  })))));
+}

package/dist/basic-sdk/extension/plugins/seatable-tables/seatable-settings/sort-setter/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+export default function SortSetter() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "setting-item-btn sorts-setting"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "dtable-font dtable-icon-sort mr-2"
+  }), /*#__PURE__*/React.createElement("div", null, "Sort setter"));
+}

package/dist/basic-sdk/extension/plugins/seatable-tables/seatable-settings/table-setting/index.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { withTranslation } from 'react-i18next';
+import { Label } from 'reactstrap';
+import { DTableSelect } from 'dtable-ui-component';
+class TableSetting extends React.Component {
+  render() {
+    const {
+      tables,
+      element,
+      t
+    } = this.props;
+    const {
+      table_id
+    } = element;
+    const options = tables.map(item => {
+      let value = item._id;
+      let label = item.name;
+      return {
+        value,
+        label
+      };
+    });
+    let selectedOption;
+    if (table_id) {
+      selectedOption = options.find(option => option.value === table_id);
+    }
+    if (!selectedOption) {
+      selectedOption = options[0];
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: "setting-item table-setting"
+    }, /*#__PURE__*/React.createElement(Label, null, t('Table')), /*#__PURE__*/React.createElement(DTableSelect, {
+      value: selectedOption,
+      options: options,
+      onChange: this.props.onTableChange,
+      menuPortalTarget: "element-settings"
+    }));
+  }
+}
+export default withTranslation('sdoc-editor')(TableSetting);

package/dist/basic-sdk/extension/plugins/table/menu/color-selector-popover/color-item.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { withTranslation } from 'react-i18next';
+import classnames from 'classnames';
+const ColorItem = _ref => {
+  let {
+    t,
+    color,
+    lastUsedColor
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames('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)
+  });
+};
+export default withTranslation('sdoc-editor')(ColorItem);

package/dist/basic-sdk/extension/plugins/table/menu/color-selector-popover/index.js

@@ -0,0 +1,171 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { UncontrolledPopover } from 'reactstrap';
+import classnames from 'classnames';
+import { ChromePicker } from 'react-color';
+import { LocalStorage } from '../../../../../../utils';
+import { DEFAULT_COLORS, DEFAULT_RECENT_USED_LIST, RECENT_USED_TABLE_CELL_BACKGROUND_COLORS_KEY, STANDARD_COLORS } from '../../../../constants';
+import ColorItem from './color-item';
+import { eventStopPropagation } from '../../../../../utils/mouse-event';
+import { setCellStyle } from '../../helpers';
+import { useColorContext } from '../../../../../hooks/use-color-context';
+import './style.css';
+const recentUsedColorsKey = RECENT_USED_TABLE_CELL_BACKGROUND_COLORS_KEY;
+const ColorSelectorPopover = _ref => {
+  let {
+    target,
+    editor,
+    readonly,
+    isRichEditor = true
+  } = _ref;
+  const {
+    t
+  } = useTranslation();
+  const {
+    lastUsedTableCellBackgroundColor: lastUsedColor,
+    updateLastUsedTableCellBackgroundColor: updateLastUsedColor
+  } = useColorContext();
+  const popoverRef = useRef(null);
+  const moreColorsPopoverRef = useRef(null);
+  const [recentUsedColors, setRecentUsedColors] = useState(LocalStorage.getItem(recentUsedColorsKey, DEFAULT_RECENT_USED_LIST));
+  const [isShowMenu, setMenuShow] = useState(false);
+  const [isPickerShow, setPickerShow] = useState(false);
+  const setColor = useCallback(color => {
+    setCellStyle(editor, {
+      background_color: color
+    });
+  }, [editor]);
+  const onSetColor = 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);
+      LocalStorage.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 = 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 = useCallback(() => {
+    if (isPickerShow) return;
+    popoverRef.current.toggle();
+    setMenuShow(!isShowMenu);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowMenu, isPickerShow]);
+  const moreColorsPopoverToggle = useCallback(() => {
+    moreColorsPopoverRef.current.toggle();
+    setPickerShow(!isPickerShow);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [moreColorsPopoverRef, isPickerShow]);
+  const onMouseDown = useCallback(event => {
+    eventStopPropagation(event);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onChange = useCallback(color => {
+    const validColor = color.hex;
+    onSetColor(validColor, false);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [readonly]);
+  return /*#__PURE__*/React.createElement(UncontrolledPopover, {
+    target: target,
+    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.createElement("div", {
+    className: "sdoc-dropdown-menu sdoc-color-dropdown-menu"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "p-3 d-flex flex-column"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-color-no-color-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-color-no-color-content",
+    onMouseDown: () => onSetColor()
+  }, t('No_color'))), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-color-default-colors-container",
+    onMouseDown: setColorProxy
+  }, DEFAULT_COLORS.map((color, index) => {
+    return /*#__PURE__*/React.createElement(ColorItem, {
+      key: "default-color-".concat(index),
+      color: color,
+      lastUsedColor: lastUsedColor
+    });
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-color-standard-colors-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-color-sub-title"
+  }, t('Standard_color')), /*#__PURE__*/React.createElement("div", {
+    className: "d-flex",
+    onMouseDown: setColorProxy
+  }, STANDARD_COLORS.map((color, index) => {
+    return /*#__PURE__*/React.createElement(ColorItem, {
+      key: "standard-color-".concat(index),
+      color: color,
+      lastUsedColor: lastUsedColor
+    });
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-color-recent-used-colors-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-color-sub-title"
+  }, t('Recently_used')), /*#__PURE__*/React.createElement("div", {
+    className: "d-flex",
+    onMouseDown: setColorProxy
+  }, recentUsedColors.map((color, index) => {
+    return /*#__PURE__*/React.createElement(ColorItem, {
+      key: "standard-color-".concat(index),
+      color: {
+        value: color,
+        name: color
+      }
+    });
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-colors-divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classnames('sdoc-more-colors pr-2', {
+      'show-pick': isPickerShow
+    }),
+    id: "sdoc-more-colors"
+  }, /*#__PURE__*/React.createElement("span", null, t('More_color')), /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-right-slide"
+  })), /*#__PURE__*/React.createElement(UncontrolledPopover, {
+    target: "sdoc-more-colors",
+    className: "sdoc-more-colors-popover sdoc-table-more-colors",
+    trigger: "hover",
+    placement: "right-end",
+    hideArrow: true,
+    fade: false,
+    toggle: moreColorsPopoverToggle,
+    ref: moreColorsPopoverRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-more-colors-container",
+    onMouseDown: onMouseDown
+  }, /*#__PURE__*/React.createElement(ChromePicker, {
+    disableAlpha: true,
+    color: lastUsedColor || '',
+    onChange: onChange
+  })))));
+};
+export default ColorSelectorPopover;

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

@@ -0,0 +1,169 @@
+.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 {
+  display: none;
+}
+
+.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;
+}
+
+.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/index.js

@@ -1,4 +1,3 @@
 import TableMenu from './table-menu';
-import ActiveTableMenu from './active-table-menu';
 import TableContextMenu from './table-context-menu';
-export { TableMenu, ActiveTableMenu, TableContextMenu };
+export { TableMenu, TableContextMenu };

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

@@ -13,6 +13,7 @@ import { INTERNAL_EVENT } from '../../../../../constants';
 import VerticalAlignPopover from '../vertical-align-popover';
 import HorizontalAlignPopover from '../horizontal-align-popover';
 import KebabToCamel from '../../../../../utils/Kebab-to-camel';
+import ColorSelectorPopover from '../color-selector-popover';
 import './index.css';
 class TableContextMenu extends React.Component {
   constructor(props) {
@@ -76,6 +77,7 @@ class TableContextMenu extends React.Component {
     this.eventBus = EventBus.getInstance();
     this.horizontalAlignRef = React.createRef();
     this.verticalAlignRef = React.createRef();
+    this.colorSelectorRef = React.createRef();
   }
   componentDidMount() {
     this.position = this.props.contextMenuPosition;
@@ -203,6 +205,15 @@ class TableContextMenu extends React.Component {
       editor: editor,
       readonly: readonly,
       verticalAlign: verticalAlign
+    }), /*#__PURE__*/React.createElement("button", {
+      ref: this.colorSelectorRef,
+      className: "dropdown-item side-extendable"
+    }, /*#__PURE__*/React.createElement("span", null, t('Background_color')), /*#__PURE__*/React.createElement("i", {
+      className: "sdocfont sdoc-right-slide"
+    })), /*#__PURE__*/React.createElement(ColorSelectorPopover, {
+      target: this.colorSelectorRef,
+      editor: editor,
+      readonly: readonly
     }), /*#__PURE__*/React.createElement("div", {
       className: 'seafile-divider dropdown-divider'
     }), /*#__PURE__*/React.createElement("button", {

package/dist/basic-sdk/extension/toolbar/header-toolbar/index.js

@@ -12,7 +12,6 @@ import ClearFormatMenu from '../../plugins/clear-format/menu';
 import HistoryMenu from './redo-undo';
 import Font from '../../plugins/font/menu';
 import InsertToolbar from './insert-toolbar';
-import ActiveTableMenu from '../../plugins/table/menu/active-table-menu';
 import CalloutMenu from '../../plugins/callout/menu';
 import SearchReplaceMenu from '../../plugins/search-replace/menu';
 import { getSelectedNodeByType } from '../../core';
@@ -63,10 +62,7 @@ const HeaderToolbar = _ref => {
   }), /*#__PURE__*/React.createElement(CalloutMenu, {
     editor: editor,
     readonly: readonly
-  })), /*#__PURE__*/React.createElement(ActiveTableMenu, {
-    editor: editor,
-    readonly: readonly
-  }), /*#__PURE__*/React.createElement(MenuGroup, {
+  })), /*#__PURE__*/React.createElement(MenuGroup, {
     className: "menu-group sdoc-editor-toolbar-right-menu"
   }, /*#__PURE__*/React.createElement(SearchReplaceMenu, {
     editor: editor,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",

package/public/locales/cs/sdoc-editor.json

@@ -464,5 +464,8 @@
   "SeaTable_column": "SeaTable column",
   "SeaTable_table": "SeaTable table",
   "And_x_more_records": "and {{count}} more records",
-  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed"
+  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed",
+  "Show_record_numbers": "Show record numbers",
+  "Alternate_color": "Alternate color",
+  "Select_column_display_option_color_tip": "Single-select and multi-select columns display option colors"
 }

package/public/locales/de/sdoc-editor.json

@@ -464,5 +464,8 @@
   "SeaTable_column": "SeaTable column",
   "SeaTable_table": "SeaTable table",
   "And_x_more_records": "and {{count}} more records",
-  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed"
+  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed",
+  "Show_record_numbers": "Show record numbers",
+  "Alternate_color": "Alternate color",
+  "Select_column_display_option_color_tip": "Single-select and multi-select columns display option colors"
 }

package/public/locales/en/sdoc-editor.json

@@ -464,5 +464,8 @@
   "SeaTable_column": "SeaTable column",
   "SeaTable_table": "SeaTable table",
   "And_x_more_records": "and {{count}} more records",
-  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed"
+  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed",
+  "Show_record_numbers": "Show record numbers",
+  "Alternate_color": "Alternate color",
+  "Select_column_display_option_color_tip": "Single-select and multi-select columns display option colors"
 }

package/public/locales/es/sdoc-editor.json

@@ -464,5 +464,8 @@
   "SeaTable_column": "SeaTable column",
   "SeaTable_table": "SeaTable table",
   "And_x_more_records": "and {{count}} more records",
-  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed"
+  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed",
+  "Show_record_numbers": "Show record numbers",
+  "Alternate_color": "Alternate color",
+  "Select_column_display_option_color_tip": "Single-select and multi-select columns display option colors"
 }

package/public/locales/es_AR/sdoc-editor.json

@@ -464,5 +464,8 @@
   "SeaTable_column": "SeaTable column",
   "SeaTable_table": "SeaTable table",
   "And_x_more_records": "and {{count}} more records",
-  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed"
+  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed",
+  "Show_record_numbers": "Show record numbers",
+  "Alternate_color": "Alternate color",
+  "Select_column_display_option_color_tip": "Single-select and multi-select columns display option colors"
 }

package/public/locales/es_MX/sdoc-editor.json

@@ -464,5 +464,8 @@
   "SeaTable_column": "SeaTable column",
   "SeaTable_table": "SeaTable table",
   "And_x_more_records": "and {{count}} more records",
-  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed"
+  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed",
+  "Show_record_numbers": "Show record numbers",
+  "Alternate_color": "Alternate color",
+  "Select_column_display_option_color_tip": "Single-select and multi-select columns display option colors"
 }

package/public/locales/fr/sdoc-editor.json

@@ -464,5 +464,8 @@
   "SeaTable_column": "SeaTable column",
   "SeaTable_table": "SeaTable table",
   "And_x_more_records": "and {{count}} more records",
-  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed"
+  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed",
+  "Show_record_numbers": "Show record numbers",
+  "Alternate_color": "Alternate color",
+  "Select_column_display_option_color_tip": "Single-select and multi-select columns display option colors"
 }

package/public/locales/it/sdoc-editor.json

@@ -464,5 +464,8 @@
   "SeaTable_column": "SeaTable column",
   "SeaTable_table": "SeaTable table",
   "And_x_more_records": "and {{count}} more records",
-  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed"
+  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed",
+  "Show_record_numbers": "Show record numbers",
+  "Alternate_color": "Alternate color",
+  "Select_column_display_option_color_tip": "Single-select and multi-select columns display option colors"
 }

package/public/locales/ru/sdoc-editor.json

@@ -463,6 +463,9 @@
   "Horizontal_align": "Горизонтальное выравнивание",
   "SeaTable_column": "Столбец SeaTable",
   "SeaTable_table": "Таблица SeaTable",
-  "And_x_more_records": "and {{count}} more records",
-  "Print_limit_exceeded": "Exceeding the print limit, only the first 200 lines will be printed"
+  "And_x_more_records": "и ещё {{count}} записей",
+  "Print_limit_exceeded": "При превышении лимита печати будут напечатаны только первые 200 строк",
+  "Show_record_numbers": "Show record numbers",
+  "Alternate_color": "Alternate color",
+  "Select_column_display_option_color_tip": "Single-select and multi-select columns display option colors"
 }

package/public/locales/zh_CN/sdoc-editor.json

@@ -464,5 +464,8 @@
   "SeaTable_column": "SeaTable 列",
   "SeaTable_table": "SeaTable 子表",
   "And_x_more_records": "以及另外 {{count}} 条记录",
-  "Print_limit_exceeded": "超过打印限制, 只会打印前 200 行"
+  "Print_limit_exceeded": "超过打印限制, 只会打印前 200 行",
+  "Show_record_numbers": "显示记录编号",
+  "Alternate_color": "单双行不同背景色",
+  "Select_column_display_option_color_tip": "单选列和多选列显示选项颜色"
 }

package/dist/basic-sdk/extension/plugins/table/menu/active-table-menu/cell-bg-color-menu.js

@@ -1,42 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React, { useCallback } from 'react';
-import { ColorMenu } from '../../../../commons';
-import { RECENT_USED_TABLE_CELL_BACKGROUND_COLORS_KEY } from '../../../../constants';
-import { setCellStyle } from '../../helpers';
-import { useColorContext } from '../../../../../hooks/use-color-context';
-const menuConfig = {
-  id: 'sdoc_background_color',
-  iconClass: 'sdocfont sdoc-bg-color',
-  text: 'Background_color'
-};
-const CellBackgroundColorMenu = _ref => {
-  let {
-    isRichEditor,
-    className,
-    editor
-  } = _ref;
-  const {
-    lastUsedTableCellBackgroundColor,
-    updateLastUsedTableCellBackgroundColor
-  } = useColorContext();
-  const setColor = useCallback(color => {
-    setCellStyle(editor, {
-      background_color: color
-    });
-  }, [editor]);
-  const props = _objectSpread(_objectSpread({
-    isRichEditor,
-    className,
-    disabled: false,
-    isActive: false
-  }, menuConfig), {}, {
-    onMouseDown: () => {},
-    setColor: setColor,
-    recentUsedColorsKey: RECENT_USED_TABLE_CELL_BACKGROUND_COLORS_KEY,
-    lastUsedColor: lastUsedTableCellBackgroundColor,
-    updateLastUsedColor: updateLastUsedTableCellBackgroundColor,
-    popoverClassName: 'sdoc-table-cell-bg-colors-popover'
-  });
-  return /*#__PURE__*/React.createElement(ColorMenu, props);
-};
-export default CellBackgroundColorMenu;

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

@@ -1,15 +0,0 @@
-.sdoc-table-menu-group .sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-icon {
-  width: 24px;
-}
-
-.sdoc-table-menu-group .sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-triangle {
-  width: 12px;
-}
-
-.sdoc-table-menu-group .sdoc-color-menu .last-used-color-container {
-  height: 100%;
-}
-
-.sdoc-table-menu-popover .sdoc-dropdown-menu-item {
-  font-size: 14px;
-}

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import { withTranslation } from 'react-i18next';
-import { MenuGroup } from '../../../../commons';
-import { isAllInTable } from '../../helpers';
-import CellBackgroundColorMenu from './cell-bg-color-menu';
-import './index.css';
-const ActiveTableMenu = _ref => {
-  let {
-    isRichEditor,
-    className,
-    editor,
-    readonly
-  } = _ref;
-  if (!isAllInTable(editor)) return null;
-  return /*#__PURE__*/React.createElement(MenuGroup, {
-    className: "menu-group sdoc-table-menu-group"
-  }, /*#__PURE__*/React.createElement(CellBackgroundColorMenu, {
-    editor: editor,
-    isRichEditor: isRichEditor,
-    className: className,
-    readonly: readonly
-  }));
-};
-export default withTranslation('sdoc-editor')(ActiveTableMenu);