@seafile/sdoc-editor 1.0.30 → 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;
+}