@seafile/sdoc-editor 1.0.28 → 1.0.30

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

@@ -2,6 +2,7 @@ import { Editor, Node, Path, Transforms } from '@seafile/slate';
 import { CALL_OUT, PARAGRAPH } from '../../constants/element-type';
 import { focusEditor, generateEmptyElement, getSelectedElems, isRangeAcrossBlocks } from '../../core';
 import { CALLOUT_ALLOWED_INSIDE_TYPES, CALLOUT_COLOR_MAP } from './constant';
+import { DOCUMENT_PLUGIN_EDITOR } from '../../../constants';
 export const isMenuActive = editor => {
   const {
     selection
@@ -124,4 +125,20 @@ export const insertElementAtNewLineInCallout = (editor, type, currentPath) => {
     at: insertPath
   });
   Transforms.select(editor, insertPath);
+};
+export const getCalloutMenuPosition = (element, editor) => {
+  const {
+    top,
+    left
+  } = element.getBoundingClientRect();
+  const menuTop = top - 42; // top = top distance - menu height
+  const newMenuPosition = {
+    top: menuTop,
+    left: left // left = callout left distance
+  };
+  // 201 is distance with browser top
+  if (editor.editorType === DOCUMENT_PLUGIN_EDITOR && menuTop < 201) {
+    newMenuPosition['display'] = 'none';
+  }
+  return newMenuPosition;
 };

package/dist/basic-sdk/extension/plugins/callout/render-elem/index.js

@@ -7,6 +7,7 @@ import { CALLOUT_COLOR_MAP, CALLOUT_ICON_MAP } from '../constant';
 import { INTERNAL_EVENT } from '../../../../constants';
 import EventBus from '../../../../utils/event-bus';
 import { useScrollContext } from '../../../../hooks/use-scroll-context';
+import { getCalloutMenuPosition } from '../helper';
 import CalloutHoverMenu from './callout-hover-menu';
 import './index.css';
 const renderCallout = (_ref, editor) => {
@@ -63,22 +64,10 @@ const renderCallout = (_ref, editor) => {
     if (readOnly) return;
     if (!isShowColorSelector) return;
     if (e.currentTarget.scrollTop) {
-      const {
-        top,
-        left
-      } = calloutRef.current.getBoundingClientRect();
-      const menuTop = top - 36; // top = top distance - menu height
-      const newMenuPosition = {
-        top: menuTop,
-        left: left // left = code-block left distance
-      };
-      // 165 is distance with browser top
-      if (menuTop < 165) {
-        newMenuPosition['display'] = 'none';
-      }
-      setPopoverPosition(newMenuPosition);
+      const menuPosition = getCalloutMenuPosition(calloutRef.current, editor);
+      setPopoverPosition(menuPosition);
     }
-  }, [isShowColorSelector, readOnly]);
+  }, [editor, isShowColorSelector, readOnly]);
   useEffect(() => {
     const eventBus = EventBus.getInstance();
     const unsubscribe = eventBus.subscribe(INTERNAL_EVENT.CLOSE_CALLOUT_COLOR_PICKER, handleCloseColorSelector);
@@ -102,22 +91,10 @@ const renderCallout = (_ref, editor) => {
   }, [isSelected]);
   const handleDisplayColorSelector = useCallback(() => {
     if (readOnly) return;
-    const {
-      top,
-      left
-    } = calloutRef.current.getBoundingClientRect();
-    const menuTop = top - 42; // top = top distance - menu height
-    const newMenuPosition = {
-      top: menuTop,
-      left: left // left = callout left distance
-    };
-    // 165 is distance with browser top
-    if (menuTop < 165) {
-      newMenuPosition['display'] = 'none';
-    }
-    setPopoverPosition(newMenuPosition);
+    const menuPosition = getCalloutMenuPosition(calloutRef.current, editor);
+    setPopoverPosition(menuPosition);
     setIsShowColorSelector(true);
-  }, [readOnly]);
+  }, [editor, readOnly]);
   const handleClick = useCallback(e => {
     handleDisplayColorSelector();
   }, [handleDisplayColorSelector]);

package/dist/basic-sdk/extension/plugins/link/helpers.js

@@ -183,4 +183,20 @@ export const isWeChat = () => {
   let isWeChat = ua.match(/MicroMessenger/i) === 'micromessenger';
   let isEnterpriseWeChat = ua.match(/MicroMessenger/i) === 'micromessenger' && ua.match(/wxwork/i) === 'wxwork';
   return isEnterpriseWeChat || isWeChat;
+};
+export const getMenuPosition = element => {
+  if (!element) return {};
+  const {
+    top,
+    left,
+    width
+  } = element.getBoundingClientRect();
+  // top = top distance - menu height
+  const menuTop = top - 42;
+  // left = left distance - (menu width / 2) + (link with / 2)
+  const menuLeft = left - 140 / 2 + width / 2;
+  return {
+    top: menuTop,
+    left: menuLeft
+  };
 };

package/dist/basic-sdk/{assets/css/textlink-hovermenu.css → extension/plugins/link/hover/index.css}

@@ -7,7 +7,7 @@
   border: 1px solid #e5e5e5;
   border-radius: 3px;
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
-  z-index: 1000;
+  z-index: 101;
 }
 
 .link-op-menu .link-op-menu-triangle {

package/dist/basic-sdk/extension/plugins/link/hover/index.js

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { useReadOnly } from '@seafile/slate-react';
 import { isWeChat } from '../helpers';
-import '../../../../assets/css/textlink-hovermenu.css';
+import './index.css';
 const LinkHover = _ref => {
   let {
     editor,

package/dist/basic-sdk/extension/plugins/link/render-elem.js

@@ -1,20 +1,33 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import React from 'react';
 import { Range } from '@seafile/slate';
-import { unWrapLinkNode } from './helpers';
+import { getMenuPosition, unWrapLinkNode } from './helpers';
 import LinkHover from './hover';
 import EventBus from '../../../utils/event-bus';
-import { INTERNAL_EVENT } from '../../../constants';
+import { DOCUMENT_PLUGIN_EDITOR, INTERNAL_EVENT } from '../../../constants';
 import { ELEMENT_TYPE } from '../../constants';
 import InlineBugFixer from '../../commons/Inline-bug-fix-wrapper';
-class LinkHoverMenuComponent extends React.Component {
+import { ScrollContext } from '../../../hooks/use-scroll-context';
+class Link extends React.Component {
   constructor(props) {
     super(props);
     _defineProperty(this, "registerEventHandle", () => {
       document.addEventListener('click', this.onHideLinkMenu);
+      const {
+        scrollRef
+      } = this.context;
+      if (scrollRef.current) {
+        scrollRef.current.addEventListener('scroll', this.onScroll);
+      }
     });
     _defineProperty(this, "unregisterEventHandle", () => {
       document.removeEventListener('click', this.onHideLinkMenu);
+      const {
+        scrollRef
+      } = this.context;
+      if (scrollRef.current) {
+        scrollRef.current.addEventListener('scroll', this.onScroll);
+      }
     });
     _defineProperty(this, "onHideLinkMenu", () => {
       this.setState({
@@ -23,22 +36,25 @@ class LinkHoverMenuComponent extends React.Component {
         this.unregisterEventHandle();
       });
     });
-    _defineProperty(this, "onLinkClick", e => {
+    _defineProperty(this, "onScroll", e => {
+      this.setPosition(this.linkRef);
+    });
+    _defineProperty(this, "setPosition", element => {
       const {
-        top,
-        left,
-        width
-      } = e.target.getBoundingClientRect();
-      // top = top distance - menu height
-      const menuTop = top - 42;
-      // left = left distance - (menu width / 2) + (link with / 2)
-      const menuLeft = left - 140 / 2 + width / 2;
+        editor
+      } = this.props;
+      const menuPosition = getMenuPosition(element);
+      if (editor.editorType === DOCUMENT_PLUGIN_EDITOR && menuPosition.top < 201) {
+        menuPosition['display'] = 'none';
+      }
       this.setState({
-        isShowLinkMenu: true,
-        menuPosition: {
-          top: menuTop,
-          left: menuLeft
-        }
+        menuPosition
+      });
+    });
+    _defineProperty(this, "onLinkClick", e => {
+      this.setPosition(e.target);
+      this.setState({
+        isShowLinkMenu: true
       });
       setTimeout(() => {
         this.registerEventHandle();
@@ -59,6 +75,9 @@ class LinkHoverMenuComponent extends React.Component {
         element
       });
     });
+    _defineProperty(this, "setRef", ref => {
+      this.linkRef = ref;
+    });
     this.state = {
       isShowLinkMenu: false,
       menuPosition: null
@@ -94,6 +113,7 @@ class LinkHoverMenuComponent extends React.Component {
     }, attributes, {
       onClick: this.onLinkClick
     }), /*#__PURE__*/React.createElement("span", {
+      ref: this.setRef,
       className: "virtual-link",
       title: element.title
     }, /*#__PURE__*/React.createElement(InlineBugFixer, null), children, /*#__PURE__*/React.createElement(InlineBugFixer, null))), isShowLinkMenu && (this.props.readonly || Range.isCollapsed(editor.selection)) && /*#__PURE__*/React.createElement(LinkHover, {
@@ -105,8 +125,9 @@ class LinkHoverMenuComponent extends React.Component {
     }));
   }
 }
+_defineProperty(Link, "contextType", ScrollContext);
 const renderLink = (props, editor, readonly) => {
-  return /*#__PURE__*/React.createElement(LinkHoverMenuComponent, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(Link, Object.assign({}, props, {
     editor: editor,
     readonly: readonly
   }));

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

@@ -135,8 +135,8 @@ function SeaTableTable(_ref) {
         top: menuTop,
         left: left // left = code-block left distance
       };
-      // 165 is distance with browser top
-      if (menuTop < 165) {
+      // 201 is distance with browser top
+      if (menuTop < 201) {
         newMenuPosition['display'] = 'none';
       }
       setMenuPosition(newMenuPosition);
@@ -169,8 +169,8 @@ function SeaTableTable(_ref) {
       top: menuTop,
       left: left // left = callout left distance
     };
-    // 165 is distance with browser top
-    if (menuTop < 165) {
+    // 201 is distance with browser top
+    if (menuTop <= 201) {
       newMenuPosition['display'] = 'none';
     }
     setMenuPosition(newMenuPosition);

package/package.json

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