@seafile/sdoc-editor 1.0.39 → 1.0.40

package/dist/basic-sdk/assets/css/dropdown-menu.css

@@ -4,6 +4,8 @@
 }
 
 .sdoc-dropdown-menu .sdoc-seatable-selected-table-list-wrapper {
+  position: absolute;
+  background-color: #ffff;
   max-height: 300px;
   overflow: auto;
 }

package/dist/basic-sdk/extension/plugins/callout/plugin.js

@@ -17,7 +17,8 @@ const withCallout = editor => {
     insertFragment,
     deleteBackward,
     onHotKeyDown,
-    insertData
+    insertData,
+    onCopy
   } = editor;
   const newEditor = editor;
   newEditor.deleteBackward = unit => {
@@ -105,6 +106,7 @@ const withCallout = editor => {
     if (getCalloutEntry(editor)) {
       event.stopPropagation();
     }
+    return onCopy(event);
   };
   return newEditor;
 };

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback, useRef, useEffect, useState } from 'react';
 import { COLUMNS_ICON_CONFIG } from '../constants/column';
 import { insertSeaTableColumn, getColumnType } from '../helpers';
 import { COLUMN } from '../../../constants/element-type';
@@ -9,7 +9,21 @@ export default function ColumnListMenu(_ref) {
     editor,
     insertPosition
   } = _ref;
-  const computedBottom = insertPosition ? '0px' : '';
+  const columnRef = useRef(null);
+  const [computedStyle, setComputedStyle] = useState({});
+  useEffect(() => {
+    if (insertPosition) {
+      setComputedStyle({
+        bottom: '0px'
+      });
+    }
+    if (!insertPosition && (columnRef === null || columnRef === void 0 ? void 0 : columnRef.current)) {
+      const centerPosition = parseInt(columnRef.current.getBoundingClientRect().height / 2);
+      setComputedStyle({
+        top: "-".concat(centerPosition, "px")
+      });
+    }
+  }, [insertPosition]);
   const columns = useMemo(() => {
     if (!editor.columns) return [];
     return editor.columns.filter(column => !NOT_SUPPORT_COLUMN_TYPES.includes(column.type));
@@ -32,10 +46,9 @@ export default function ColumnListMenu(_ref) {
     insertSeaTableColumn(editor, active, option, insertPosition);
   }, [editor, insertPosition]);
   return /*#__PURE__*/React.createElement("div", {
+    ref: columnRef,
     className: "column-list-menu",
-    style: {
-      bottom: computedBottom
-    }
+    style: computedStyle
   }, options.map(option => {
     return /*#__PURE__*/React.createElement("div", {
       key: option.value,

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

@@ -1,8 +1,9 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { UncontrolledPopover } from 'reactstrap';
 import { insertSeaTableTable, isInsertSeaTableTableDisabled } from '../helpers';
 import { MENUS_CONFIG_MAP, SEATABLE_TABLE } from '../../../constants';
 import DropdownMenuItem from '../../../commons/dropdown-menu-item';
+import SeaTableList from './seatable-list';
 import './index.css';
 const SeaTableTableMenu = _ref => {
   let {
@@ -10,10 +11,9 @@ const SeaTableTableMenu = _ref => {
     readonly,
     insertPosition
   } = _ref;
+  const seatableRef = useRef(null);
   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, insertPosition);
   }, [editor, insertPosition]);
@@ -29,18 +29,13 @@ const SeaTableTableMenu = _ref => {
     className: "sdoc-menu-popover sdoc-dropdown-menu sdoc-sub-dropdown-menu",
     placement: "right-start",
     hideArrow: true,
-    fade: false
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-dropdown-menu-container sdoc-seatable-selected-table-list-wrapper",
-    style: {
-      bottom: computedBottom
-    }
-  }, tables.map(item => {
-    return /*#__PURE__*/React.createElement("div", {
-      key: item._id,
-      className: "sdoc-dropdown-menu-item",
-      onClick: () => onViewClick(item)
-    }, item.name);
-  })))));
+    fade: false,
+    ref: seatableRef
+  }, /*#__PURE__*/React.createElement(SeaTableList, {
+    editor: editor,
+    readonly: readonly,
+    insertPosition: insertPosition,
+    onViewClick: onViewClick
+  }))));
 };
 export default SeaTableTableMenu;

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

@@ -0,0 +1,37 @@
+import React, { useState, useEffect, useRef } from 'react';
+const SeaTableList = _ref => {
+  let {
+    editor,
+    insertPosition,
+    onViewClick
+  } = _ref;
+  const seatableRef = useRef(null);
+  const [computedStyle, setComputedStyle] = useState({});
+  const tables = editor.tables;
+  useEffect(() => {
+    if (insertPosition) {
+      setComputedStyle({
+        bottom: '0px'
+      });
+    }
+    if (!insertPosition && (seatableRef === null || seatableRef === void 0 ? void 0 : seatableRef.current)) {
+      const centerPosition = parseInt(seatableRef.current.getBoundingClientRect().height / 2);
+      // 30 is seatable menu height
+      setComputedStyle({
+        top: "-".concat(centerPosition + 30, "px")
+      });
+    }
+  }, [insertPosition]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: seatableRef,
+    className: "sdoc-dropdown-menu-container sdoc-seatable-selected-table-list-wrapper",
+    style: computedStyle
+  }, tables.map(item => {
+    return /*#__PURE__*/React.createElement("div", {
+      key: item._id,
+      className: "sdoc-dropdown-menu-item",
+      onClick: () => onViewClick(item)
+    }, item.name);
+  }));
+};
+export default SeaTableList;

package/package.json

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