@seafile/sdoc-editor 1.0.31 → 1.0.32

package/dist/basic-sdk/extension/plugins/seatable-column/helpers.js

@@ -2,6 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { Editor, Transforms, Range } from '@seafile/slate';
 import slugid from 'slugid';
 import { BLOCKQUOTE, CHECK_LIST_ITEM, COLUMN, IMAGE, ORDERED_LIST, PARAGRAPH, TABLE_CELL, UNORDERED_LIST } from '../../constants/element-type';
+import { INSERT_POSITION } from '../../constants';
 import { focusEditor, getNodeType } from '../../core';
 import Column from './model';
 import * as CellType from './constants/cell-types';
@@ -46,10 +47,19 @@ export const getColumnType = editor => {
   const [n] = match;
   return getNodeType(n);
 };
-export const insertSeaTableColumn = (editor, active, option) => {
+export const insertSeaTableColumn = function (editor, active, option) {
+  let insertPosition = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : INSERT_POSITION.CURRENT;
   if (!active) {
     const column = new Column(option);
     column.id = slugid.nice();
+    if (insertPosition === INSERT_POSITION.AFTER) {
+      const path = Editor.path(editor, editor.selection);
+      path && Transforms.insertNodes(editor, _objectSpread({}, column), {
+        at: [path[0] + 1]
+      });
+      focusEditor(editor);
+      return;
+    }
     Transforms.insertNodes(editor, _objectSpread({}, column));
   }
   focusEditor(editor);

package/dist/basic-sdk/extension/plugins/seatable-column/menu/column-list-menu.js

@@ -6,8 +6,10 @@ import './column-list-menu.css';
 const NOT_SUPPORT_COLUMN_TYPES = ['button', 'file'];
 export default function ColumnListMenu(_ref) {
   let {
-    editor
+    editor,
+    insertPosition
   } = _ref;
+  const computedBottom = insertPosition ? '0px' : '';
   const columns = useMemo(() => {
     if (!editor.columns) return [];
     return editor.columns.filter(column => !NOT_SUPPORT_COLUMN_TYPES.includes(column.type));
@@ -27,10 +29,13 @@ export default function ColumnListMenu(_ref) {
   };
   const onMousedown = useCallback(option => {
     const active = isActive(editor);
-    insertSeaTableColumn(editor, active, option);
-  }, [editor]);
+    insertSeaTableColumn(editor, active, option, insertPosition);
+  }, [editor, insertPosition]);
   return /*#__PURE__*/React.createElement("div", {
-    className: "column-list-menu"
+    className: "column-list-menu",
+    style: {
+      bottom: computedBottom
+    }
   }, options.map(option => {
     return /*#__PURE__*/React.createElement("div", {
       key: option.value,

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

@@ -7,7 +7,8 @@ import { isMenuDisabled } from '../helpers';
 const SeaTableColumnMenu = _ref => {
   let {
     editor,
-    readonly
+    readonly,
+    insertPosition
   } = _ref;
   const disabled = isMenuDisabled(editor, readonly);
   const menuConfig = MENUS_CONFIG_MAP[ELEMENT_TYPE.COLUMN];
@@ -17,16 +18,17 @@ const SeaTableColumnMenu = _ref => {
     className: "pr-2"
   }, !disabled && /*#__PURE__*/React.createElement("i", {
     className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
-  })), !disabled && /*#__PURE__*/React.createElement(UncontrolledPopover, {
+  }), !disabled && /*#__PURE__*/React.createElement(UncontrolledPopover, {
     target: menuConfig.id,
-    className: "sdoc-menu-popover sdoc-dropdown-menu sdoc-sub-dropdown-menu",
     trigger: "hover",
     placement: "right-start",
     hideArrow: true,
-    fade: false
+    fade: false,
+    popperClassName: "seatable-column-popover"
   }, /*#__PURE__*/React.createElement(ColumnListMenu, {
     editor: editor,
-    readonly: readonly
-  })));
+    readonly: readonly,
+    insertPosition: insertPosition
+  }))));
 };
 export default SeaTableColumnMenu;

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

@@ -2,7 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { Editor, Transforms } from '@seafile/slate';
 import slugId from 'slugid';
 import { getNodeType, isTextNode, getParentNode, generateDefaultText } from '../../core';
-import { ELEMENT_TYPE, SEATABLE_TABLE } from '../../constants';
+import { ELEMENT_TYPE, SEATABLE_TABLE, INSERT_POSITION } from '../../constants';
 export const isInsertSeaTableTableDisabled = (editor, readonly) => {
   if (readonly) return true;
   const {
@@ -51,8 +51,16 @@ export const generateSeaTableTable = (table_id, editor) => {
     children: [generateDefaultText()]
   };
 };
-export const insertSeaTableTable = (editor, item) => {
+export const insertSeaTableTable = function (editor, item) {
+  let insertPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INSERT_POSITION.CURRENT;
   const node = generateSeaTableTable(item._id, editor);
+  if (insertPosition === INSERT_POSITION.AFTER) {
+    const path = Editor.path(editor, editor.selection);
+    path && Transforms.insertNodes(editor, node, {
+      at: [path[0] + 1]
+    });
+    return;
+  }
   Transforms.setNodes(editor, node);
 };
 export const updateSeaTableTable = (editor, props) => {

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

@@ -7,21 +7,23 @@ import './index.css';
 const SeaTableTableMenu = _ref => {
   let {
     editor,
-    readonly
+    readonly,
+    insertPosition
   } = _ref;
   const disabled = isInsertSeaTableTableDisabled(editor, readonly);
   const menuConfig = MENUS_CONFIG_MAP[SEATABLE_TABLE];
+  const computedBottom = insertPosition ? '0px' : '';
   const tables = editor.tables;
   const onViewClick = useCallback(item => {
-    insertSeaTableTable(editor, item);
-  }, [editor]);
+    insertSeaTableTable(editor, item, insertPosition);
+  }, [editor, insertPosition]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropdownMenuItem, {
     disabled: disabled,
     menuConfig: menuConfig,
     className: "pr-2"
   }, !disabled && /*#__PURE__*/React.createElement("i", {
     className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
-  })), !disabled && /*#__PURE__*/React.createElement(UncontrolledPopover, {
+  }), !disabled && /*#__PURE__*/React.createElement(UncontrolledPopover, {
     target: menuConfig.id,
     trigger: "hover",
     className: "sdoc-menu-popover sdoc-dropdown-menu sdoc-sub-dropdown-menu",
@@ -29,13 +31,16 @@ const SeaTableTableMenu = _ref => {
     hideArrow: true,
     fade: false
   }, /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-dropdown-menu-container table-list-menu"
+    className: "sdoc-dropdown-menu-container",
+    style: {
+      bottom: computedBottom
+    }
   }, tables.map(item => {
     return /*#__PURE__*/React.createElement("div", {
       key: item._id,
       className: "sdoc-dropdown-menu-item",
       onClick: () => onViewClick(item)
     }, item.name);
-  }))));
+  })))));
 };
 export default SeaTableTableMenu;

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

@@ -1,16 +1,181 @@
-.seatable-op-menu {
+.sdoc-seatable-hover-menu-container {
   position: absolute;
-  padding: 7px;
+  height: 42px;
+  z-index: 101;
+  width: fit-content;
+  max-width: 250px;
+}
+
+.sdoc-seatable-hover-menu-container .hover-menu-container {
   height: 36px;
+  width: 100%;
+  padding: 7px 8px;
   background-color: #fff;
-  border: 1px solid #eee;
-  border-radius: 3px;
-  z-index: 100;
   display: flex;
+  justify-content: space-around;
+  align-items: center;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
+  border: 1px solid #e8e8e8;
 }
 
-.seatable-op-menu .sdocfont {
+.sdoc-seatable-hover-menu-container .hover-menu-container .active {
+  color: #212529;
+  text-decoration: none;
+  background: #f2f2f2;
+}
+
+.sdoc-seatable-hover-menu-container .hover-menu-container .op-item {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  font-size: 12px;
+  color: #212529;
+  border-radius: 2px;
+  text-align: center;
+  line-height: 20px;
+}
+
+.sdoc-seatable-hover-menu-container .sdoc-seatable-hover-operation-item.sdoc-seatable-hover-operation-lang .op-item {
+  padding: 0 5px;
+}
+
+.sdoc-seatable-hover-menu-container .hover-menu-container .sdoc-seatable-hover-operation-lang .icon-font {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 8px;
+}
+
+.sdoc-seatable-hover-menu-container .sdoc-seatable-hover-operation-item {
+  height: 20px;
+  width: 20px;
+  text-align: center;
+  justify-content: center;
+}
+
+.sdoc-seatable-hover-menu-container .sdoc-seatable-hover-operation-item.sdoc-seatable-hover-operation-lang {
+  width: fit-content;
+}
+
+.sdoc-seatable-hover-menu-container .sdoc-seatable-hover-operation-lang .icon-font {
+  color: #999;
+}
+
+.sdoc-seatable-hover-menu-container .sdoc-seatable-hover-operation-divider {
+  height: 20px;
+  width: 1px;
+  background-color: #e5e5e5;
+  margin: 0 8px;
+}
+
+.sdoc-seatable-hover-menu-container .hover-menu-container .op-item:hover {
+  color: #212529;
+  text-decoration: none;
+  background: #f2f2f2;
+}
+
+.sdoc-seatable-hover-menu-container .icon-font {
   font-size: 12px;
   color: #444;
+}
+
+.sdoc-seatable-hover-menu-container .hover-menu-container .sdoc-seatable-setting-popver {
+  position: absolute;
+  top: 38px;
+  left: 0px;
+  width: 200px;
+  overflow-y: hidden;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 0 5px #ccc;
+  border: 1px solid #dedede;
+}
+
+.sdoc-seatable-hover-menu-container .hover-menu-container .sdoc-seatable-setting-right-popver {
+  left: 200px;
+  width: 300px;
+}
+
+.sdoc-seatable-hover-menu-container .hover-menu-container .sdoc-seatable-setting-popver .tables-list-empty {
+  padding: 10px;
+  width: 100%;
+  font-size: 13px;
+  text-align: center;
+  line-height: 30px;
+  vertical-align: middle;
+}
+
+.sdoc-seatable-hover-menu-container .hover-menu-container .sdoc-seatable-setting-popver .seatable-setting-container {
+  list-style: none;
+  overflow-y: auto;
+  max-height: 280px;
+  min-height: 80px;
+  padding: 8px 0px;
+}
+
+.sdoc-seatable-hover-menu-container .hover-menu-container .sdoc-seatable-setting-popver .seatable-setting-container .seatable-setting-item {
+  position: relative;
+  white-space: nowrap;
+  cursor: pointer;
+  line-height: 32px;
+  height: 32px;
+  font-size: 14px;
+  padding: 0px 16px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.sdoc-seatable-hover-menu-container .hover-menu-container .sdoc-seatable-setting-popver .seatable-setting-container .seatable-custom-switch-item .custom-switch-description {
+  margin-left: 0px;
+}
+
+.sdoc-seatable-hover-menu-container .hover-menu-container .sdoc-seatable-setting-popver .seatable-setting-container .seatable-custom-switch-item .custom-switch {
+  padding-left: 0px;
+}
+
+.sdoc-seatable-hover-menu-container .hover-menu-container .sdoc-seatable-setting-popver .seatable-setting-container .seatable-custom-switch-item .custom-switch-indicator {
+  position: absolute;
+  right: 0px;
   cursor: pointer;
 }
+
+.sdoc-seatable-hover-menu-container .hover-menu-container .sdoc-seatable-setting-popver .seatable-setting-container .seatable-setting-item:hover {
+  background-color: #f5f5f5;;
+}
+
+.sdoc-seatable-hover-menu-container .hover-menu-container .sdoc-seatable-setting-popver .seatable-setting-container .seatable-setting-item .active {
+  background-color: #f5f5f5;;
+}
+
+.sdoc-seatable-hover-menu-container .hover-menu-container .sdoc-seatable-setting-popver .seatable-setting-container .seatable-setting-item .check-mark {
+  opacity: 0;
+  padding: 0 10px;
+}
+
+.sdoc-seatable-hover-menu-container .hover-menu-container .sdoc-seatable-setting-popver .seatable-setting-container .seatable-setting-item .checked {
+  opacity: 1;
+}
+
+.sdoc-seatable-setting-filter-popver-wrapper {
+  top: 38px !important;
+  left: 83px !important;
+  transform: unset !important;
+  margin-top: 0px !important;
+}
+
+.sdoc-seatable-setting-sort-popver-wrapper {
+  top: 38px !important;
+  left: 122px !important;
+  transform: unset !important;
+  margin-top: 0px !important;
+}
+
+.sdoc-seatable-setting-hide-column-popver-wrapper {
+  top: 38px !important;
+  left: 158px !important;
+  transform: unset !important;
+  max-height: 350px;
+  overflow: auto;
+  margin-top: 0px !important;
+}

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

@@ -1,29 +1,324 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { ElementPopover } from '../../../commons';
-import TableSettings from '../seatable-settings';
+import Tooltip from '../../../../../components/tooltip';
+import CustomSwitch from '../seatable-settings/custom-switch';
+import FilterSetter from '../seatable-settings/filter-setter';
+import SortSetter from '../seatable-settings/sort-setter';
+import HideColumnSetter from '../seatable-settings/hide-column-setter';
+import { useScrollContext } from '../../../../hooks/use-scroll-context';
+import { updateSeaTableTable } from '../helpers';
 import './index.css';
-export default function OpMenu(_ref) {
+const TablesList = _ref => {
+  let {
+    tablesData,
+    onSelectTable,
+    selectedTableText
+  } = _ref;
+  const {
+    t
+  } = useTranslation();
+  if (!tablesData.length) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "tables-list-empty"
+    }, /*#__PURE__*/React.createElement("span", null, t('Search_not_found')));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "seatable-setting-container"
+  }, tablesData.map(item => {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "seatable-setting-item ".concat(selectedTableText === item.name ? 'active' : ''),
+      id: item._id,
+      key: item._id,
+      onClick: () => {
+        onSelectTable(item);
+      }
+    }, item.name, /*#__PURE__*/React.createElement("span", {
+      className: "check-mark ".concat(selectedTableText === item.name ? 'checked' : '')
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "sdocfont sdoc-check-mark icon-font"
+    })));
+  }));
+};
+const TablesSettings = _ref2 => {
+  let {
+    settings,
+    updatePageSettings
+  } = _ref2;
+  const {
+    t
+  } = useTranslation();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "seatable-setting-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "seatable-setting-item seatable-custom-switch-item"
+  }, /*#__PURE__*/React.createElement(CustomSwitch, {
+    checked: settings['show_record_numbers'] === true ? true : false,
+    isLocked: false,
+    title: t('Show_record_numbers'),
+    onPropertiesChanged: value => {
+      updatePageSettings({
+        show_record_numbers: value
+      });
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "seatable-setting-item seatable-custom-switch-item"
+  }, /*#__PURE__*/React.createElement(CustomSwitch, {
+    checked: settings['alternate_color'] === false ? false : true,
+    isLocked: false,
+    title: t('Alternate_color'),
+    onPropertiesChanged: value => {
+      updatePageSettings({
+        alternate_color: value
+      });
+    }
+  })));
+};
+export default function OpMenu(_ref3) {
   let {
     editor,
     element,
-    menuPosition
-  } = _ref;
+    menuPosition,
+    seaTableRef
+  } = _ref3;
+  const {
+    t
+  } = useTranslation();
+  const scrollRef = useScrollContext();
+  const timer = useRef(null);
+  const tablesData = editor.tables;
+  const [isShowTooltip, setIsShowTooltip] = useState(false);
+  const [selectedTable, setSelectedTable] = useState({});
+  const [selectedTableText, setSelectedTableText] = useState('');
+  const [isShowTableList, setIsShowTablesList] = useState(false);
+  const [isShowFilter, setIsShowFilter] = useState(false);
+  const [isShowSort, setIsShowSort] = useState(false);
+  const [isShowHideColumn, setIsShowHideColumn] = useState(false);
   const [isShowSeaTableSetting, setIsShowSeaTableSetting] = useState(false);
-  const onShowSettings = useCallback(() => {
-    setIsShowSeaTableSetting(true);
+  const onCloseOther = useCallback(closeList => {
+    closeList.forEach(item => {
+      item === 'tableList' && setIsShowTablesList(false);
+      item === 'tableFilter' && setIsShowFilter(false);
+      item === 'tableSort' && setIsShowSort(false);
+      item === 'tableColumnHidden' && setIsShowHideColumn(false);
+      item === 'tableSetting' && setIsShowSeaTableSetting(false);
+    });
   }, []);
-  const onHideSettings = useCallback(() => {
-    setIsShowSeaTableSetting(false);
+  const onClickOutside = useCallback(e => {
+    if (seaTableRef === null || seaTableRef === void 0 ? void 0 : seaTableRef.current.contains(e.target)) {
+      onCloseOther(['tableList', 'tableFilter', 'tableSort', 'tableColumnHidden', 'tableSetting']);
+    }
+  }, [onCloseOther, seaTableRef]);
+  const handleScroll = useCallback(e => {
+    onCloseOther(['tableList', 'tableFilter', 'tableSort', 'tableColumnHidden', 'tableSetting']);
+  }, [onCloseOther]);
+  useEffect(() => {
+    setIsShowTooltip(true);
+    document.addEventListener('click', onClickOutside);
+    let observerRefValue = null;
+    if (scrollRef.current) {
+      scrollRef.current.addEventListener('scroll', handleScroll);
+      observerRefValue = scrollRef.current;
+    }
+    return () => {
+      document.removeEventListener('click', onClickOutside);
+      observerRefValue.removeEventListener('scroll', handleScroll);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  useEffect(() => {
+    const {
+      table_id
+    } = element;
+    const table = editor.tables.find(item => item._id === table_id);
+    if (table) {
+      setSelectedTable(table);
+      setSelectedTableText(table.name);
+    }
+  }, [editor.tables, element]);
+  const updatePageSettings = useCallback(updateProperties => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+    timer.current = setTimeout(() => {
+      updateSeaTableTable(editor, updateProperties);
+    }, 300);
+  }, [editor]);
+  const onShowTables = useCallback(() => {
+    setIsShowTablesList(!isShowTableList);
+    onCloseOther(['tableFilter', 'tableSort', 'tableColumnHidden', 'tableSetting']);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowTableList]);
+  const onSelectTable = useCallback(item => {
+    const {
+      name,
+      _id
+    } = item;
+    setSelectedTableText(name);
+    const table = editor.tables.find(item => item._id === _id);
+    updatePageSettings({
+      table_id: _id,
+      filters: [],
+      filter_conjunction: 'And',
+      sorts: [],
+      shown_column_keys: table.columns.map(item => item.key),
+      show_record_numbers: false,
+      alternate_color: true,
+      select_column_display_option_color: true
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  const onFilter = useCallback(() => {
+    setIsShowFilter(!isShowFilter);
+    onCloseOther(['tableList', 'tableSort', 'tableColumnHidden', 'tableSetting']);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowFilter]);
+  const onFiltersChange = useCallback((filters, filter_conjunction) => {
+    updatePageSettings({
+      filters,
+      filter_conjunction
+    });
+  }, [updatePageSettings]);
+  const onSort = useCallback(() => {
+    setIsShowSort(!isShowSort);
+    onCloseOther(['tableList', 'tableFilter', 'tableColumnHidden', 'tableSetting']);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowSort]);
+  const onSortsChange = useCallback(sorts => {
+    updatePageSettings({
+      sorts
+    });
+  }, [updatePageSettings]);
+  const onHiddenColumn = useCallback(() => {
+    setIsShowHideColumn(!isShowHideColumn);
+    onCloseOther(['tableList', 'tableSort', 'tableFilter', 'tableSetting']);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowHideColumn]);
+  const onHideColumnChange = useCallback(shownColumnKeys => {
+    updatePageSettings({
+      shown_column_keys: shownColumnKeys
+    });
+  }, [updatePageSettings]);
+  const onSettings = useCallback(() => {
+    setIsShowSeaTableSetting(!isShowSeaTableSetting);
+    onCloseOther(['tableList', 'tableSort', 'tableColumnHidden', 'tableFilter']);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowSeaTableSetting]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ElementPopover, null, /*#__PURE__*/React.createElement("div", {
-    className: "seatable-op-menu",
+    id: "sdoc-seatable-hover-menu-container",
+    className: "sdoc-seatable-hover-menu-container",
     style: menuPosition
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "sdocfont sdoc-settings",
-    onClick: onShowSettings
-  }))), isShowSeaTableSetting && /*#__PURE__*/React.createElement(TableSettings, {
-    editor: editor,
-    element: element,
-    onHideSettings: onHideSettings
-  }));
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "hover-menu-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-seatable-hover-operation-item sdoc-seatable-hover-operation-lang"
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "button",
+    className: "op-item ".concat(isShowTableList ? 'active' : ''),
+    onClick: onShowTables
+  }, /*#__PURE__*/React.createElement("span", null, selectedTableText), /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-drop-down icon-font"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-seatable-hover-operation-divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    id: "sdoc_seatable_filter",
+    className: "sdoc-seatable-hover-operation-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "button",
+    className: "op-item",
+    onClick: onFilter
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-filter1 icon-font"
+  })), isShowTooltip && /*#__PURE__*/React.createElement(Tooltip, {
+    target: "sdoc_seatable_filter",
+    placement: "top",
+    fade: true
+  }, t('Filter'))), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-seatable-hover-operation-divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    id: "sdoc_seatable_sort",
+    className: "sdoc-seatable-hover-operation-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "button",
+    className: "op-item",
+    onClick: onSort
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-sort icon-font"
+  })), isShowTooltip && /*#__PURE__*/React.createElement(Tooltip, {
+    target: "sdoc_seatable_sort",
+    placement: "top",
+    fade: true
+  }, t('Sort'))), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-seatable-hover-operation-divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    id: "sdoc_seatable_hidden_column",
+    className: "sdoc-seatable-hover-operation-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "button",
+    className: "op-item",
+    onClick: onHiddenColumn
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-eye-slash icon-font"
+  })), isShowTooltip && /*#__PURE__*/React.createElement(Tooltip, {
+    target: "sdoc_seatable_hidden_column",
+    placement: "top",
+    fade: true
+  }, t('Hide_columns'))), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-seatable-hover-operation-divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    id: "sdoc_seatable_settings",
+    className: "sdoc-seatable-hover-operation-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "button",
+    className: "op-item",
+    onClick: onSettings
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-set-up icon-font"
+  })), isShowTooltip && /*#__PURE__*/React.createElement(Tooltip, {
+    target: "sdoc_seatable_settings",
+    placement: "top",
+    fade: true
+  }, t('Style_settings'))), isShowTableList && /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-seatable-setting-popver"
+  }, /*#__PURE__*/React.createElement(TablesList, {
+    tablesData: tablesData,
+    onSelectTable: onSelectTable,
+    selectedTableText: selectedTableText
+  })), /*#__PURE__*/React.createElement(FilterSetter, {
+    target: "sdoc_seatable_filter",
+    container: document.getElementById('sdoc-seatable-hover-menu-container'),
+    popperClassName: "sdoc-seatable-setting-filter-popver-wrapper",
+    columns: selectedTable.columns,
+    filterConjunction: element.filter_conjunction || 'And',
+    filters: element.filters || [],
+    collaborators: [],
+    isNeedSubmit: true,
+    isShowFilterPopover: isShowFilter,
+    onFiltersChange: onFiltersChange,
+    hidePopover: onFilter
+  }), /*#__PURE__*/React.createElement(SortSetter, {
+    target: "sdoc_seatable_sort",
+    container: document.getElementById('sdoc-seatable-hover-menu-container'),
+    popperClassName: "sdoc-seatable-setting-sort-popver-wrapper",
+    columns: selectedTable.columns,
+    sorts: element.sorts || [],
+    isShowSortPopover: isShowSort,
+    isNeedSubmit: true,
+    onSortsChange: onSortsChange,
+    onSortToggle: onSort
+  }), /*#__PURE__*/React.createElement(HideColumnSetter, {
+    target: "sdoc_seatable_hidden_column",
+    container: document.getElementById('sdoc-seatable-hover-menu-container'),
+    popperClassName: "sdoc-seatable-setting-hide-column-popver-wrapper",
+    columns: selectedTable.columns,
+    shownColumnKeys: element.shown_column_keys || [],
+    isShowHideColumnSetter: isShowHideColumn,
+    onSettingUpdate: onHideColumnChange,
+    onPopoverToggle: onHiddenColumn
+  }), isShowSeaTableSetting && /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-seatable-setting-popver sdoc-seatable-setting-right-popver"
+  }, /*#__PURE__*/React.createElement(TablesSettings, {
+    settings: element,
+    updatePageSettings: updatePageSettings
+  }))))));
 }

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

@@ -6,7 +6,7 @@
 }
 
 .seatable-view-container.selected {
-  border: 1px solid red;
+  border: 2px solid #007BFF;
 }
 
 .seatable-view-container .seatable-view-records {

package/dist/basic-sdk/extension/plugins/seatable-tables/render-element/seatable-table.js

@@ -130,7 +130,7 @@ function SeaTableTable(_ref) {
         top,
         left
       } = seaTableRef.current.getBoundingClientRect();
-      const menuTop = top - 36; // top = top distance - menu height
+      const menuTop = top - 42; // top = top distance - menu height
       const newMenuPosition = {
         top: menuTop,
         left: left // left = code-block left distance
@@ -164,7 +164,7 @@ function SeaTableTable(_ref) {
       top,
       left
     } = seaTableRef.current.getBoundingClientRect();
-    const menuTop = top - 36; // top = top distance - menu height
+    const menuTop = top - 42; // top = top distance - menu height
     const newMenuPosition = {
       top: menuTop,
       left: left // left = callout left distance
@@ -189,7 +189,8 @@ function SeaTableTable(_ref) {
   }, isShowMenu && /*#__PURE__*/React.createElement(OpMenu, {
     editor: editor,
     element: element,
-    menuPosition: menuPosition
+    menuPosition: menuPosition,
+    seaTableRef: seaTableRef
   }), isLoading && /*#__PURE__*/React.createElement(Loading, null), !isLoading && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("table", {
     className: classNames('seatable-view-records', {
       'no_alternate_color': !element.alternate_color

package/dist/basic-sdk/extension/plugins/seatable-tables/seatable-settings/filter-setter/filter-popover-widgets/filters-list.css

@@ -42,6 +42,7 @@
 
 .filters-list .filter-item .filter-term {
   max-width: 300px;
+  min-width: 150px;
 }
 
 .filters-list .filter-item .filter-term .option-group-content .option.option-active .dtable-font {

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

@@ -5,7 +5,6 @@ import { Button, UncontrolledPopover } from 'reactstrap';
 import { withTranslation } from 'react-i18next';
 import { FILTER_COLUMN_OPTIONS, getValidFilters } from 'dtable-utils';
 import CommonAddTool from '../common-add-tool';
-import { getEventClassName } from '../utils/utils';
 import FiltersList from './filter-popover-widgets/filters-list';
 import { getFilterByColumn } from './filters-utils';
 import './filter-popover.css';
@@ -27,14 +26,6 @@ class FilterPopover extends Component {
         this.props.hidePopover();
       }
     });
-    _defineProperty(this, "hideDTablePopover", e => {
-      if (this.dtablePopoverRef && !getEventClassName(e).includes('popover') && !this.dtablePopoverRef.contains(e.target)) {
-        this.props.hidePopover(e);
-        e.preventDefault();
-        e.stopPropagation();
-        return false;
-      }
-    });
     _defineProperty(this, "isNeedSubmit", () => {
       return this.props.isNeedSubmit;
     });
@@ -130,17 +121,17 @@ class FilterPopover extends Component {
     };
   }
   componentDidMount() {
-    document.addEventListener('mousedown', this.hideDTablePopover, true);
     document.addEventListener('keydown', this.onHotKey);
   }
   componentWillUnmount() {
-    document.removeEventListener('mousedown', this.hideDTablePopover, true);
     document.removeEventListener('keydown', this.onHotKey);
   }
   render() {
     const {
       target,
       columns,
+      container,
+      popperClassName,
       t
     } = this.props;
     const {
@@ -149,7 +140,9 @@ class FilterPopover extends Component {
     } = this.state;
     const canAddFilter = columns.length > 0;
     return /*#__PURE__*/React.createElement(UncontrolledPopover, {
-      placement: "auto-start",
+      container: container,
+      popperClassName: popperClassName,
+      placement: "bottom-start",
       isOpen: true,
       target: target,
       fade: false,

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

@@ -7,11 +7,6 @@ import FilterPopover from './filter-popover';
 class FilterSetter extends React.Component {
   constructor(props) {
     super(props);
-    _defineProperty(this, "onFilterSetterToggle", () => {
-      this.setState({
-        isShowFilterPopover: !this.state.isShowFilterPopover
-      });
-    });
     _defineProperty(this, "update", update => {
       const {
         filters,
@@ -29,47 +24,29 @@ class FilterSetter extends React.Component {
   }
   render() {
     const {
-      wrapperClass,
       filtersClassName,
+      popperClassName,
       filterConjunction,
       filters,
       columns,
       collaborators,
       isNeedSubmit,
-      t
+      isShowFilterPopover,
+      container
     } = this.props;
     if (!columns) return null;
-    const {
-      isShowFilterPopover
-    } = this.state;
     const validFilters = deepCopy(getValidFilters(filters || [], columns));
-    const filtersLength = validFilters ? validFilters.length : 0;
-    let filterMessage = t('Filter');
-    if (filtersLength === 1) {
-      filterMessage = t('1 Filter');
-    } else if (filtersLength > 1) {
-      filterMessage = t('Filters');
-      filterMessage = filtersLength + ' ' + filterMessage;
-    }
-    let labelClass = wrapperClass || '';
-    labelClass = labelClass && filtersLength > 0 ? labelClass + ' active' : labelClass;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: "setting-item ".concat(labelClass ? 'mr-2' : 'mb-1')
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "setting-item-btn filters-setting-btn ".concat(labelClass),
-      onClick: this.onFilterSetterToggle
-    }, /*#__PURE__*/React.createElement("i", {
-      className: "dtable-font dtable-icon-filter mr-2",
-      id: this.props.target
-    }), /*#__PURE__*/React.createElement("span", null, filterMessage))), isShowFilterPopover && /*#__PURE__*/React.createElement(FilterPopover, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isShowFilterPopover && /*#__PURE__*/React.createElement(FilterPopover, {
+      container: container,
       filtersClassName: filtersClassName,
+      popperClassName: popperClassName,
       target: this.props.target,
       isNeedSubmit: isNeedSubmit,
       columns: columns,
       collaborators: collaborators,
       filterConjunction: filterConjunction,
       filters: validFilters,
-      hidePopover: this.onFilterSetterToggle,
+      hidePopover: this.props.hidePopover,
       update: this.update,
       isPre: this.props.isPre
     }));

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

@@ -4,19 +4,10 @@ import { UncontrolledPopover } from 'reactstrap';
 import { withTranslation } from 'react-i18next';
 import isHotkey from 'is-hotkey';
 import { COLUMNS_ICON_CONFIG } from 'dtable-utils';
-import { getEventClassName } from '../utils/utils';
 import HideColumnItem from './hide-column-item';
 class HideColumnPopover extends React.Component {
   constructor(props) {
     super(props);
-    _defineProperty(this, "hidePopover", e => {
-      if (this.popoverRef && !getEventClassName(e).includes('popover') && !this.popoverRef.contains(e.target)) {
-        this.props.onPopoverToggle(e);
-        e.preventDefault();
-        e.stopPropagation();
-        return false;
-      }
-    });
     _defineProperty(this, "onHotKey", e => {
       if (isHotkey('esc', e)) {
         e.preventDefault();
@@ -120,11 +111,9 @@ class HideColumnPopover extends React.Component {
     };
   }
   componentDidMount() {
-    document.addEventListener('click', this.hidePopover, true);
     document.addEventListener('keydown', this.onHotKey);
   }
   componentWillUnmount() {
-    document.removeEventListener('click', this.hidePopover, true);
     document.removeEventListener('keydown', this.onHotKey);
   }
   static getDerivedStateFromProps(nextProps, preState) {
@@ -149,12 +138,16 @@ class HideColumnPopover extends React.Component {
   render() {
     const {
       target,
+      container,
+      popperClassName,
       t
     } = this.props;
     const fieldSettings = this.getFilteredColumns();
     const isEmpty = fieldSettings.length === 0 ? true : false;
     return /*#__PURE__*/React.createElement(UncontrolledPopover, {
-      placement: "auto-start",
+      placement: "bottom-start",
+      container: container,
+      popperClassName: popperClassName,
       isOpen: true,
       target: target,
       fade: false,

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

@@ -1,85 +1,41 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import React, { Component } from 'react';
 import { withTranslation } from 'react-i18next';
-import isEqual from 'lodash.isequal';
 import HideColumnPopover from './hide-column-popover';
 import './index.css';
 class HideColumnSetter extends Component {
   constructor(props) {
     super(props);
-    _defineProperty(this, "onHideColumnToggle", () => {
-      const {
-        isShowHideColumnSetter
-      } = this.state;
-      if (isShowHideColumnSetter) {
-        const {
-          shownColumnKeys
-        } = this.state;
-        this.props.onSettingUpdate(shownColumnKeys);
-      }
-      this.setState({
-        isShowHideColumnSetter: !isShowHideColumnSetter
-      });
-    });
     _defineProperty(this, "modifyHiddenColumns", shownColumnKeys => {
       this.setState({
         shownColumnKeys
       });
+      this.props.onSettingUpdate(shownColumnKeys);
     });
     this.state = {
-      isShowHideColumnSetter: false,
       shownColumnKeys: props.shownColumnKeys || []
     };
   }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      shownColumnKeys: oldShownColumnKeys
-    } = this.props;
-    const {
-      shownColumnKeys: newShownColumnKeys
-    } = nextProps;
-    if (!isEqual(oldShownColumnKeys, newShownColumnKeys)) {
-      this.setState({
-        isShowHideColumnSetter: false,
-        shownColumnKeys: newShownColumnKeys
-      });
-    }
-  }
   render() {
     const {
       target,
       columns,
-      wrapperClass,
-      t
+      isShowHideColumnSetter,
+      container,
+      popperClassName
     } = this.props;
     const {
       shownColumnKeys
     } = this.state;
     if (!columns) return null;
-    let message = t('Hide_columns');
-    const hiddenColumns = columns.filter(column => !shownColumnKeys.includes(column.key));
-    const hiddenColumnsLength = hiddenColumns.length;
-    if (hiddenColumnsLength === 1) {
-      message = t('1_hidden_column');
-    } else if (hiddenColumnsLength > 1) {
-      message = hiddenColumnsLength + ' ' + t('hidden_columns');
-    }
-    let labelClass = wrapperClass || '';
-    labelClass = labelClass && hiddenColumnsLength > 0 ? labelClass + ' active' : labelClass;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: "setting-item ".concat(labelClass ? '' : 'mb-1')
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "mr-2 setting-item-btn filters-setting-btn ".concat(labelClass),
-      onClick: this.onHideColumnToggle
-    }, /*#__PURE__*/React.createElement("i", {
-      className: "dtable-font dtable-icon-hide mr-2",
-      id: target
-    }), /*#__PURE__*/React.createElement("span", null, message))), this.state.isShowHideColumnSetter && /*#__PURE__*/React.createElement(HideColumnPopover, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isShowHideColumnSetter && /*#__PURE__*/React.createElement(HideColumnPopover, {
+      container: container,
       target: target,
+      popperClassName: popperClassName,
       columns: columns,
       shownColumnKeys: shownColumnKeys,
       modifyHiddenColumns: this.modifyHiddenColumns,
-      onPopoverToggle: this.onHideColumnToggle
+      onPopoverToggle: this.props.onPopoverToggle
     }));
   }
 }

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

@@ -1,60 +1,36 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import React, { Component } from 'react';
 import { withTranslation } from 'react-i18next';
-import { getValidSorts } from 'dtable-utils';
 import SortPopover from './sort-popover';
 import './index.css';
 class SortSetter extends Component {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "onSortToggle", () => {
-      this.setState({
-        isShowSortPopover: !this.state.isShowSortPopover
-      });
-    });
+  constructor() {
+    super(...arguments);
     _defineProperty(this, "update", update => {
       const {
         sorts
       } = update || {};
       this.props.onSortsChange(sorts);
     });
-    this.state = {
-      isShowSortPopover: false
-    };
   }
   render() {
     const {
       sorts,
       columns,
       isNeedSubmit,
-      wrapperClass,
-      t
+      isShowSortPopover,
+      container,
+      popperClassName,
+      onSortToggle
     } = this.props;
     if (!columns) return null;
-    const validSorts = getValidSorts(sorts || [], columns);
-    const sortsLength = validSorts ? validSorts.length : 0;
-    let sortMessage = t('Sort');
-    if (sortsLength === 1) {
-      sortMessage = t('1 Sort');
-    } else if (sortsLength > 1) {
-      sortMessage = t('Sorts');
-      sortMessage = sortsLength + ' ' + sortMessage;
-    }
-    let labelClass = wrapperClass || '';
-    labelClass = labelClass && sortsLength > 0 ? labelClass + ' active' : labelClass;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: "setting-item ".concat(labelClass ? '' : 'mb-1')
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "mr-2 setting-item-btn filters-setting-btn ".concat(labelClass),
-      onClick: this.onSortToggle
-    }, /*#__PURE__*/React.createElement("i", {
-      className: "dtable-font dtable-icon-sort mr-2",
-      id: this.props.target
-    }), /*#__PURE__*/React.createElement("span", null, sortMessage))), this.state.isShowSortPopover && /*#__PURE__*/React.createElement(SortPopover, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isShowSortPopover && /*#__PURE__*/React.createElement(SortPopover, {
       target: this.props.target,
+      popperClassName: popperClassName,
+      container: container,
       isNeedSubmit: isNeedSubmit,
       columns: columns,
-      onSortComponentToggle: this.onSortToggle,
+      onSortComponentToggle: onSortToggle,
       update: this.update,
       sorts: sorts
     }));

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

@@ -4,7 +4,7 @@ import React, { Component, Fragment } from 'react';
 import isHotkey from 'is-hotkey';
 import { Button, UncontrolledPopover } from 'reactstrap';
 import { COLUMNS_ICON_CONFIG, SORT_COLUMN_OPTIONS, SORT_TYPE } from 'dtable-utils';
-import { getEventClassName, getColumnByKey } from '../utils/utils';
+import { getColumnByKey } from '../utils/utils';
 import CommonAddTool from '../common-add-tool';
 import { execSortsOperation, getDisplaySorts, isSortsEmpty, SORT_OPERATION } from './sort-utils';
 import { withTranslation } from 'react-i18next';
@@ -12,14 +12,6 @@ const SORT_TYPES = [SORT_TYPE.UP, SORT_TYPE.DOWN];
 class SortPopover extends Component {
   constructor(props) {
     super(props);
-    _defineProperty(this, "hideDTablePopover", e => {
-      if (this.sortPopoverRef && !getEventClassName(e).includes('popover') && !this.sortPopoverRef.contains(e.target)) {
-        this.props.onSortComponentToggle(e);
-        e.preventDefault();
-        e.stopPropagation();
-        return false;
-      }
-    });
     _defineProperty(this, "isNeedSubmit", () => {
       return this.props.isNeedSubmit;
     });
@@ -222,11 +214,9 @@ class SortPopover extends Component {
     };
   }
   componentDidMount() {
-    document.addEventListener('click', this.hideDTablePopover, true);
     document.addEventListener('keydown', this.onHotKey);
   }
   componentWillUnmount() {
-    document.removeEventListener('click', this.hideDTablePopover, true);
     document.removeEventListener('keydown', this.onHotKey);
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -238,6 +228,8 @@ class SortPopover extends Component {
   render() {
     const {
       target,
+      container,
+      popperClassName,
       t
     } = this.props;
     const {
@@ -245,12 +237,14 @@ class SortPopover extends Component {
     } = this.state;
     const isEmpty = isSortsEmpty(sorts);
     return /*#__PURE__*/React.createElement(UncontrolledPopover, {
-      placement: "auto-start",
+      placement: "bottom-start",
       isOpen: true,
       target: target,
       fade: false,
       hideArrow: true,
       className: "sort-popover",
+      popperClassName: popperClassName,
+      container: container,
       boundariesElement: document.body
     }, /*#__PURE__*/React.createElement("div", {
       ref: ref => this.sortPopoverRef = ref,

package/dist/basic-sdk/extension/toolbar/side-toolbar/insert-block-menu.js

@@ -1,5 +1,5 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useSlateStatic } from '@seafile/slate-react';
 import { Transforms } from '@seafile/slate';
 import { insertElement } from './helpers';
@@ -12,6 +12,8 @@ import { ELEMENT_TYPE, INSERT_POSITION, LOCAL_IMAGE, PARAGRAPH, SIDE_INSERT_MENU
 import EventBus from '../../../utils/event-bus';
 import { INTERNAL_EVENT } from '../../../constants';
 import DropdownMenuItem from '../../commons/dropdown-menu-item';
+import SeaTableColumnMenu from '../../plugins/seatable-column/menu';
+import SeaTableTableMenu from '../../plugins/seatable-tables/menu';
 import { wrapCallout } from '../../plugins/callout/helper';
 const InsertBlockMenu = _ref => {
   let {
@@ -119,6 +121,14 @@ const InsertBlockMenu = _ref => {
       menuConfig: item,
       onClick: () => onInsert(item.type)
     });
+  }), editor.columns && /*#__PURE__*/React.createElement(SeaTableColumnMenu, {
+    editor: editor,
+    readonly: editor.readonly,
+    insertPosition: insertPosition
+  }), editor.tables && /*#__PURE__*/React.createElement(SeaTableTableMenu, {
+    editor: editor,
+    readonly: editor.readonly,
+    insertPosition: insertPosition
   }));
 };
 InsertBlockMenu.defaultProps = {

package/package.json

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

package/public/media/sdoc-editor-font/iconfont.svg

@@ -14,6 +14,14 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="sdoc-sort" unicode="&#58996;" d="M294.4 790.4l201.6-204.8c19.2-19.2 19.2-51.2 0-73.6-19.2-19.2-51.2-19.2-70.4 0L320 620.8v-604.8c0-25.6-22.4-48-48-48S224-9.6 224 16V620.8L118.4 512c-19.2-19.2-48-19.2-67.2-3.2l-3.2 3.2c-19.2 19.2-19.2 51.2 0 73.6l201.6 204.8c12.8 12.8 32 12.8 44.8 0zM752 800c25.6 0 48-22.4 48-48v-604.8l105.6 108.8c19.2 19.2 51.2 19.2 70.4 0 19.2-19.2 19.2-51.2 0-73.6l-201.6-204.8c-12.8-12.8-32-12.8-44.8 0l-201.6 204.8c-19.2 19.2-19.2 51.2 0 73.6l3.2 3.2c19.2 16 48 16 67.2-3.2l105.6-108.8V752c0 25.6 22.4 48 48 48z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="sdoc-set-up" unicode="&#58997;" d="M598.52384 809.6l12.8-92.8 6.4-38.4 35.2-16c12.8-6.4 28.8-16 41.6-25.6l32-19.2 35.2 12.8 92.8 35.2 86.4-140.8-76.8-54.4-32-25.6 3.2-38.4v-44.8l-3.2-38.4 32-25.6 76.8-57.6-83.2-140.8-92.8 35.2-35.2 12.8-32-19.2c-12.8-9.6-28.8-19.2-41.6-25.6l-35.2-16-6.4-38.4-12.8-92.8h-172.8l-12.8 92.8-6.4 38.4-35.2 16c-12.8 6.4-28.8 16-41.6 25.6l-32 19.2-35.2-12.8-92.8-35.2-86.4 140.8L160.12384 297.6l32 25.6-3.2 38.4V384v22.4l3.2 38.4-32 25.6-76.8 57.6 83.2 140.8 92.8-35.2 35.2-12.8 32 19.2c12.8 9.6 28.8 19.2 41.6 25.6l35.2 16 6.4 38.4 12.8 92.8h176m12.8 83.2H416.12384c-32 0-57.6-22.4-60.8-51.2l-16-105.6c-19.2-9.6-35.2-19.2-54.4-32L182.52384 748.8c-9.6 3.2-16 3.2-22.4 3.2-22.4 0-41.6-9.6-54.4-28.8L6.52384 560c-12.8-28.8-6.4-60.8 16-80l86.4-67.2c0-9.6-3.2-22.4-3.2-28.8 0-9.6 0-19.2 3.2-28.8L22.52384 288c-22.4-19.2-28.8-51.2-16-76.8l96-163.2c9.6-19.2 32-32 54.4-32 6.4 0 12.8 0 22.4 3.2l102.4 41.6c16-12.8 35.2-22.4 54.4-28.8l16-105.6c3.2-28.8 28.8-51.2 60.8-51.2H608.12384c32 0 57.6 22.4 60.8 51.2l16 105.6c19.2 9.6 35.2 19.2 54.4 28.8l102.4-41.6c6.4-3.2 16-3.2 22.4-3.2 22.4 0 41.6 9.6 54.4 28.8l99.2 166.4c16 25.6 9.6 57.6-16 76.8l-86.4 67.2c0 9.6 3.2 19.2 3.2 28.8s0 22.4-3.2 28.8l86.4 67.2c22.4 19.2 28.8 51.2 16 76.8l-96 163.2c-9.6 19.2-32 32-54.4 32-6.4 0-12.8 0-22.4-3.2l-102.4-41.6c-16 12.8-35.2 22.4-54.4 28.8L672.12384 844.8C665.72384 873.6 640.12384 896 611.32384 896zM512.12384 512c70.4 0 128-57.6 128-128s-57.6-128-128-128-128 57.6-128 128 57.6 128 128 128m0 86.4a214.4 214.4 0 1 1 0-428.8 214.4 214.4 0 0 1 0 428.8z"  horiz-adv-x="1026" />
+      
+      <glyph glyph-name="sdoc-filter1" unicode="&#58994;" d="M617.6 160c28.8 0 54.4-22.4 54.4-48s-22.4-48-54.4-48h-214.4c-28.8 0-54.4 22.4-54.4 48s22.4 48 54.4 48h214.4z m169.6 272c25.6 0 44.8-22.4 44.8-48s-19.2-48-44.8-48H236.8c-25.6 0-44.8 22.4-44.8 48s19.2 48 44.8 48h550.4z m236.8 224c0-25.6-22.4-48-48-48h-928C22.4 608 0 630.4 0 656S22.4 704 48 704h931.2c22.4 0 44.8-22.4 44.8-48z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="sdoc-eye-slash" unicode="&#58995;" d="M83.84448 790.4l156.8-124.8c73.6 57.6 166.4 99.2 275.2 99.2 134.4 0 243.2-64 320-137.6 76.8-73.6 131.2-163.2 153.6-224 6.4-12.8 6.4-28.8 0-41.6-22.4-51.2-64-124.8-124.8-192l140.8-112c19.2-16 22.4-44.8 6.4-67.2-16-19.2-48-22.4-67.2-6.4l-928 736C-2.55552 736-5.75552 764.8 10.24448 787.2s51.2 19.2 73.6 3.2z m32-256l73.6-60.8c-25.6-35.2-44.8-70.4-57.6-96 22.4-51.2 64-121.6 128-179.2 67.2-64 153.6-112 256-112 44.8 0 86.4 9.6 124.8 22.4l76.8-64c-57.6-32-124.8-51.2-201.6-51.2-134.4 0-243.2 64-320 137.6-76.8 73.6-131.2 163.2-153.6 224-6.4 12.8-6.4 28.8 0 41.6 12.8 41.6 38.4 89.6 73.6 137.6z m185.6-153.6l112-89.6c12.8-16 25.6-25.6 44.8-35.2l112-89.6c-19.2-3.2-35.2-6.4-54.4-6.4-118.4 0-214.4 99.2-214.4 220.8z m214.4 288c-76.8 0-144-25.6-198.4-64l67.2-51.2c35.2 28.8 80 44.8 131.2 44.8 118.4 0 214.4-99.2 214.4-220.8 0-32-6.4-60.8-19.2-89.6l86.4-70.4c48 54.4 83.2 112 102.4 153.6-22.4 51.2-64 121.6-128 179.2-64 67.2-150.4 118.4-256 118.4z m0-153.6h-3.2c3.2-9.6 3.2-19.2 3.2-28.8 0-12.8-3.2-25.6-6.4-38.4l134.4-108.8c3.2 12.8 3.2 22.4 3.2 35.2 3.2 80-57.6 140.8-131.2 140.8z"  horiz-adv-x="1027" />
+      
       <glyph glyph-name="sdoc-settings" unicode="&#58993;" d="M976 467.2c3.2-3.2 3.2-3.2 3.2-9.6L976 326.4c0-3.2-3.2-12.8-9.6-12.8l-108.8-38.4c-3.2-12.8-12.8-28.8-19.2-41.6l51.2-102.4c0-3.2 0-12.8-3.2-19.2l-96-96c-3.2-3.2-12.8-9.6-19.2-3.2L668.8 64c-12.8-9.6-28.8-12.8-41.6-19.2L588.8-64c0-3.2-3.2-9.6-12.8-9.6H444.8c-3.2 0-12.8 3.2-12.8 9.6l-38.4 108.8c-12.8 3.2-28.8 12.8-41.6 19.2l-102.4-51.2c-3.2 0-12.8 0-19.2 3.2l-96 96c-6.4 0-12.8 9.6-6.4 16l51.2 102.4c-9.6 12.8-12.8 28.8-19.2 41.6L51.2 310.4c-3.2 0-9.6 3.2-9.6 12.8V454.4c0 3.2 3.2 12.8 9.6 12.8L160 508.8c3.2 12.8 9.6 28.8 19.2 41.6L128 656c-6.4 6.4-6.4 12.8 0 12.8l96 96c3.2 9.6 9.6 9.6 16 3.2l102.4-51.2c12.8 9.6 28.8 12.8 41.6 19.2l38.4 112c0 3.2 3.2 9.6 12.8 9.6h128c3.2 0 12.8-3.2 12.8-9.6l38.4-108.8c12.8-3.2 28.8-12.8 41.6-19.2l102.4 51.2c3.2 0 12.8 0 19.2-3.2l96-96c3.2-3.2 9.6-12.8 3.2-19.2l-51.2-102.4c9.6-12.8 12.8-28.8 19.2-41.6L976 467.2zM566.4 614.4c-176 48-329.6-108.8-288-288 19.2-76.8 86.4-140.8 160-160 176-48 329.6 108.8 288 288-19.2 80-80 140.8-160 160z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="sdoc-seatable-table" unicode="&#58991;" d="M384 896c35.2 0 64-28.8 64-64v-320c0-35.2-28.8-64-64-64H64c-35.2 0-64 28.8-64 64V832C0 867.2 28.8 896 64 896h320z m-32-96H96v-256h256V800z m608 96c35.2 0 64-28.8 64-64v-320c0-35.2-28.8-64-64-64H640c-35.2 0-64 28.8-64 64V832c0 35.2 28.8 64 64 64h320z m-32-96h-256v-256h256V800zM384 320c35.2 0 64-28.8 64-64v-320c0-35.2-28.8-64-64-64H64c-35.2 0-64 28.8-64 64V256c0 35.2 28.8 64 64 64h320z m-32-96H96v-256h256v256z m608 96c35.2 0 64-28.8 64-64v-320c0-35.2-28.8-64-64-64H640c-35.2 0-64 28.8-64 64V256c0 35.2 28.8 64 64 64h320z m-32-96h-256v-256h256v256z"  horiz-adv-x="1024" />

package/public/media/sdoc-editor-font.css

@@ -1,14 +1,11 @@
 @font-face {
-  font-family: "sdocfont";
-  /* Project id 4097705 */
-  src: url('./sdoc-editor-font/iconfont.eot?t=1719382079268');
-  /* IE9 */
-  src: url('./sdoc-editor-font/iconfont.eot?t=1719382079268#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */
-    url('./sdoc-editor-font/iconfont.woff2?t=1719382079268') format('woff2'),
-    url('./sdoc-editor-font/iconfont.woff?t=1719382079268') format('woff'),
-    url('./sdoc-editor-font/iconfont.ttf?t=1719382079268') format('truetype'),
-    url('./sdoc-editor-font/iconfont.svg?t=1719382079268#sdocfont') format('svg');
+  font-family: "sdocfont"; /* Project id 4097705 */
+  src: url('./sdoc-editor-font/iconfont.eot?t=1721201136436'); /* IE9 */
+  src: url('./sdoc-editor-font/iconfont.eot?t=1721201136436#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('./sdoc-editor-font/iconfont.woff2?t=1721201136436') format('woff2'),
+       url('./sdoc-editor-font/iconfont.woff?t=1721201136436') format('woff'),
+       url('./sdoc-editor-font/iconfont.ttf?t=1721201136436') format('truetype'),
+       url('./sdoc-editor-font/iconfont.svg?t=1721201136436#sdocfont') format('svg');
 }
 
 .sdocfont {
@@ -19,6 +16,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.sdoc-sort:before {
+  content: "\e674";
+}
+
+.sdoc-set-up:before {
+  content: "\e675";
+}
+
+.sdoc-filter1:before {
+  content: "\e672";
+}
+
+.sdoc-eye-slash:before {
+  content: "\e673";
+}
+
 .sdoc-settings:before {
   content: "\e671";
 }
@@ -466,3 +479,4 @@
 .sdoc-user:before {
   content: "\e629";
 }
+