@seafile/sdoc-editor 1.0.39 → 1.0.41

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/dist/basic-sdk/extension/toolbar/side-toolbar/helpers.js

@@ -10,7 +10,7 @@ import { ORDERED_LIST, UNORDERED_LIST, PARAGRAPH, CHECK_LIST_ITEM, IMAGE, TABLE,
 import { EMPTY_SELECTED_RANGE } from '../../plugins/table/constants';
 import { unwrapCallout, wrapCallout } from '../../plugins/callout/helper';
 import { convertToCheck } from '../../plugins/check-list/helpers';
-import { getHeaderHeight } from '../../../utils/dom-utils';
+import { WIKI_EDITOR } from '../../../constants';
 export const onSetNodeType = (editor, element, type) => {
   if (!type) return;
   if (type === CALL_OUT) {
@@ -92,18 +92,29 @@ export const onDeleteNode = (editor, element) => {
     at: path
   });
 };
-export const getDomTopHeight = (editor, dom, slateNode) => {
-  const rect = dom.getBoundingClientRect();
+export const getTopValue = (editor, dom, containerDom, slateNode) => {
+  if (!dom) return 0;
+  if (!containerDom) return 0;
+  const currentRect = dom.getBoundingClientRect();
+  let containerRect = containerDom.getBoundingClientRect();
+  let headerHeight = 0;
+  if (editor.editorType === WIKI_EDITOR) {
+    const titleDom = document.getElementById('wiki-page-title');
+    const coverDom = document.getElementById('wiki-page-cover');
+    const titleHeight = (titleDom === null || titleDom === void 0 ? void 0 : titleDom.getBoundingClientRect().height) || 0;
+    const coverHeight = (coverDom === null || coverDom === void 0 ? void 0 : coverDom.getBoundingClientRect().height) || 0;
+    headerHeight = titleHeight + coverHeight;
+  }
+  const top = currentRect.y - containerRect.y + containerDom.scrollTop;
   let offsetY = 0;
-  const iconOffset = 4; // ensure icon is in the middle of the line
-  const headerHeight = getHeaderHeight(editor);
-  const paddingTop = parseFloat(window.getComputedStyle(dom).getPropertyValue('padding-top'));
+  let paddingTop = parseFloat(window.getComputedStyle(dom).getPropertyValue('padding-top'));
   const lineHeight = parseFloat(window.getComputedStyle(dom).getPropertyValue('line-height'));
-  const disToolBarHeight = 12; // side toolbar icon is 12 px
+  const disToolBarHeight = 21; // side toolbar icon line-height is 21
   if (ADD_POSITION_OFFSET_TYPE.includes(slateNode.type)) {
+    paddingTop = slateNode.type === CHECK_LIST_ITEM ? 5 : paddingTop;
     offsetY = lineHeight / 2 + paddingTop - disToolBarHeight / 2;
   }
-  return rect.y - headerHeight + offsetY - iconOffset;
+  return top + offsetY - headerHeight;
 };
 export const isVoidNode = node => {
   if (!node) return true;

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

@@ -6,7 +6,7 @@ import SideMenu from './side-menu';
 import EventBus from '../../../utils/event-bus';
 import { useScrollContext } from '../../../hooks/use-scroll-context';
 import { focusEditor } from '../../core';
-import { getDomTopHeight, setSelection, isVoidNode, getNodeEntry, isBlockquote, isList, onWrapListItem } from './helpers';
+import { setSelection, isVoidNode, getNodeEntry, isBlockquote, isList, onWrapListItem, getTopValue } from './helpers';
 import { insertImageFiles } from '../../plugins/image/helpers';
 import { INTERNAL_EVENT, WIKI_EDITOR } from '../../../constants';
 import { CODE_BLOCK, TABLE, BLOCKQUOTE, CHECK_LIST_ITEM, CALL_OUT, TABLE_DRAG_KEY } from '../../constants';
@@ -72,10 +72,9 @@ const SideToolbar = () => {
         dom = dom.parentNode;
       }
       const node = ReactEditor.toSlateNode(editor, dom);
-      const top = getDomTopHeight(editor, dom, node);
       const isEmpty = isVoidNode(node);
-      const offsetY = !editor.editorType ? -1 : 0; // editorType is undefined means sdoc editor
-      const topValue = top + scrollRef.current.scrollTop + offsetY;
+      const containerDom = scrollRef.current;
+      const topValue = getTopValue(editor, dom, containerDom, node);
       if (topValue !== sidePosition.top) setIsMoving(true);
       let left = 20;
       if (editor.editorType === WIKI_EDITOR) {

package/dist/basic-sdk/utils/dom-utils.js

@@ -1,4 +1,3 @@
-import { WIKI_EDITOR, DOCUMENT_PLUGIN_EDITOR } from '../constants';
 export const getDomHeight = dom => {
   const styles = window.getComputedStyle(dom);
   const rect = dom.getBoundingClientRect();
@@ -45,25 +44,4 @@ export const getCursorPosition = function () {
     x: x,
     y: y
   };
-};
-
-/**
- * Get the height of the header of the editor
- * @param {Editor} editor
- * @returns {Number} height of the header
- */
-export const getHeaderHeight = editor => {
-  const {
-    editorType
-  } = editor;
-  switch (editorType) {
-    case WIKI_EDITOR:
-      return (editor === null || editor === void 0 ? void 0 : editor.getHeaderHeight()) || 0;
-    case DOCUMENT_PLUGIN_EDITOR:
-      return 67 + 48 + 49 + 37;
-    default:
-      // sdoc-editor-page-header height = 56
-      // sdoc-editor-toolbar height = 37
-      return 56 + 37;
-  }
 };

package/dist/pages/sdoc-wiki-editor.js

@@ -14,7 +14,6 @@ const SdocWikiEditor = _ref => {
     document,
     docUuid,
     isWikiReadOnly,
-    getHeaderHeight,
     scrollRef
   } = _ref;
   context.initApi();
@@ -37,7 +36,6 @@ const SdocWikiEditor = _ref => {
     newEditor.cursors = cursors || {};
     newEditor.width = PAGE_EDIT_AREA_WIDTH; // default width
     newEditor.editorType = WIKI_EDITOR;
-    newEditor.getHeaderHeight = getHeaderHeight;
     return newEditor;
 
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/package.json

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