@seafile/sdoc-editor 1.0.52 → 1.0.53

package/dist/basic-sdk/extension/commons/dropdown-menu-item/index.css

@@ -6,3 +6,7 @@
 .sdoc-link-dropdown-menu-item .sdoc-dropdown-item-content{
   justify-content: space-between;
 }
+
+.sdoc-dropdown-menu-item-relative {
+  position: relative;
+}

package/dist/basic-sdk/extension/commons/dropdown-menu-item/index.js

@@ -1,17 +1,17 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import classnames from 'classnames';
 import MenuShortcutPrompt from '../menu-shortcut-indicator';
 import './index.css';
-const DropdownMenuItem = _ref => {
-  let {
+const DropdownMenuItem = forwardRef((props, ref) => {
+  const {
     disabled,
     onClick,
     menuConfig,
     children,
     className,
     shortcut
-  } = _ref;
+  } = props;
   const {
     t
   } = useTranslation();
@@ -32,7 +32,8 @@ const DropdownMenuItem = _ref => {
       'sdoc-link-dropdown-menu-item': shortcut
     }),
     id: menuConfig.id || '',
-    onClick: disabled ? () => {} : onClick || (() => {})
+    onClick: disabled ? () => {} : onClick || (() => {}),
+    ref: ref
   }, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-dropdown-item-content"
   }, /*#__PURE__*/React.createElement("div", {
@@ -42,5 +43,5 @@ const DropdownMenuItem = _ref => {
   }), /*#__PURE__*/React.createElement("span", null, t(menuConfig.text))), shortcut && /*#__PURE__*/React.createElement(MenuShortcutPrompt, {
     shortcuts: shortcut
   })), isShowChildren && children);
-};
+});
 export default DropdownMenuItem;

package/dist/basic-sdk/extension/plugins/code-block/hover-menu/index.js

@@ -181,6 +181,7 @@ const CodeBlockHoverMenu = _ref2 => {
   }, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-search-langs"
   }, /*#__PURE__*/React.createElement(Input, {
+    autoFocus: true,
     placeholder: t('Search_language'),
     onChange: onChange
   })), /*#__PURE__*/React.createElement(LangList, {

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

@@ -204,7 +204,7 @@ const Image = _ref => {
       ...style
     },
     onMouseOver: e => selectImageWhenSelectPartial(e, editor, element, isSelected),
-    contentEditable: "true",
+    contentEditable: "false",
     suppressContentEditableWarning: true
   }), /*#__PURE__*/React.createElement("img", {
     ref: imageRef,
@@ -220,7 +220,7 @@ const Image = _ref => {
       ...style
     },
     onMouseOver: e => selectImageWhenSelectPartial(e, editor, element, isSelected),
-    contentEditable: "true",
+    contentEditable: "false",
     suppressContentEditableWarning: true
   }), /*#__PURE__*/React.createElement("span", {
     className: "sdoc-image-inner"

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

@@ -2,28 +2,31 @@ 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';
+import { isOverflowPortByDirection } from '../../../utils';
 import './column-list-menu.css';
 const NOT_SUPPORT_COLUMN_TYPES = ['button', 'file'];
 export default function ColumnListMenu(_ref) {
   let {
     editor,
-    insertPosition
+    insertPosition,
+    toggle
   } = _ref;
   const columnRef = useRef(null);
   const [computedStyle, setComputedStyle] = useState({});
   useEffect(() => {
-    if (insertPosition) {
-      setComputedStyle({
-        bottom: '0px'
+    if (columnRef.current) {
+      // bottom overflow
+      if (isOverflowPortByDirection(columnRef.current, 'bottom')) {
+        return setComputedStyle({
+          bottom: '0px'
+        });
+      }
+      // default
+      return setComputedStyle({
+        top: '-20px'
       });
     }
-    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));
@@ -44,7 +47,8 @@ export default function ColumnListMenu(_ref) {
   const onMousedown = useCallback(option => {
     const active = isActive(editor);
     insertSeaTableColumn(editor, active, option, insertPosition);
-  }, [editor, insertPosition]);
+    toggle && toggle();
+  }, [editor, insertPosition, toggle]);
   return /*#__PURE__*/React.createElement("div", {
     ref: columnRef,
     className: "column-list-menu",

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { MENUS_CONFIG_MAP, ELEMENT_TYPE } from '../../../constants';
 import DropdownMenuItem from '../../../commons/dropdown-menu-item';
 import ColumnListMenu from './column-list-menu';
@@ -8,27 +8,31 @@ const SeaTableColumnMenu = _ref => {
   let {
     editor,
     readonly,
-    insertPosition
+    insertPosition,
+    toggle
   } = _ref;
+  const dropDownMenuRef = useRef(null);
   const disabled = isMenuDisabled(editor, readonly);
   const menuConfig = MENUS_CONFIG_MAP[ELEMENT_TYPE.COLUMN];
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropdownMenuItem, {
     disabled: disabled,
     menuConfig: menuConfig,
-    className: "pr-2"
+    className: "pr-2 sdoc-dropdown-menu-item-relative",
+    ref: dropDownMenuRef
   }, !disabled && /*#__PURE__*/React.createElement("i", {
     className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
   }), !disabled && /*#__PURE__*/React.createElement(UncontrolledPopover, {
     target: menuConfig.id,
-    trigger: "hover",
-    placement: "right-start",
     hideArrow: true,
+    trigger: "hover",
     fade: false,
-    popperClassName: "seatable-column-popover"
+    popperClassName: "seatable-column-popover",
+    container: dropDownMenuRef === null || dropDownMenuRef === void 0 ? void 0 : dropDownMenuRef.current
   }, /*#__PURE__*/React.createElement(ColumnListMenu, {
     editor: editor,
     readonly: readonly,
-    insertPosition: insertPosition
+    insertPosition: insertPosition,
+    toggle: toggle
   }))));
 };
 export default SeaTableColumnMenu;

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

@@ -9,28 +9,30 @@ const SeaTableTableMenu = _ref => {
   let {
     editor,
     readonly,
-    insertPosition
+    insertPosition,
+    toggle
   } = _ref;
-  const seatableRef = useRef(null);
+  const dropDownMenuRef = useRef(null);
   const disabled = isInsertSeaTableTableDisabled(editor, readonly);
   const menuConfig = MENUS_CONFIG_MAP[SEATABLE_TABLE];
   const onViewClick = useCallback(item => {
     insertSeaTableTable(editor, item, insertPosition);
-  }, [editor, insertPosition]);
+    toggle && toggle();
+  }, [editor, insertPosition, toggle]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropdownMenuItem, {
     disabled: disabled,
     menuConfig: menuConfig,
-    className: "pr-2"
+    className: "pr-2 sdoc-dropdown-menu-item-relative",
+    ref: dropDownMenuRef
   }, !disabled && /*#__PURE__*/React.createElement("i", {
     className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
   }), !disabled && /*#__PURE__*/React.createElement(UncontrolledPopover, {
     target: menuConfig.id,
     trigger: "hover",
-    className: "sdoc-menu-popover sdoc-dropdown-menu sdoc-sub-dropdown-menu",
-    placement: "right-start",
+    className: "sdoc-menu-popover sdoc-sub-dropdown-menu",
     hideArrow: true,
     fade: false,
-    ref: seatableRef
+    container: dropDownMenuRef === null || dropDownMenuRef === void 0 ? void 0 : dropDownMenuRef.current
   }, /*#__PURE__*/React.createElement(SeaTableList, {
     editor: editor,
     readonly: readonly,

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

@@ -1,27 +1,27 @@
 import React, { useState, useEffect, useRef } from 'react';
+import { isOverflowPortByDirection } from '../../../utils';
 const SeaTableList = _ref => {
   let {
     editor,
-    insertPosition,
     onViewClick
   } = _ref;
   const seatableRef = useRef(null);
   const [computedStyle, setComputedStyle] = useState({});
   const tables = editor.tables;
   useEffect(() => {
-    if (insertPosition) {
+    if (seatableRef.current) {
+      // bottom overflow
+      if (isOverflowPortByDirection(seatableRef.current, 'bottom')) {
+        return setComputedStyle({
+          bottom: '0px'
+        });
+      }
+      // default
       setComputedStyle({
-        bottom: '0px'
+        top: '-20px'
       });
     }
-    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",

package/dist/basic-sdk/extension/plugins/table/menu/table-context-menu/index.css

@@ -30,10 +30,11 @@
 .side-extendable {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   padding-right: 12px;
 }
 
 .side-extendable .sdoc-right-slide {
-  color: #999;
+  color: #fff;
   transform: scale(.6);
 }

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import { useSlateStatic } from '@seafile/slate-react';
 import { Transforms } from '@seafile/slate';
 import { insertElement } from './helpers';

package/dist/basic-sdk/extension/toolbar/side-toolbar/side-menu.css

@@ -17,7 +17,6 @@
 .sdoc-side-menu-insert-below-popover .popover {
   background-color: #fff;
   min-width: 150px;
-  min-height: 120px;
   border-radius: 2px;
   left: -6px !important;
   cursor: pointer;

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

@@ -98,7 +98,7 @@ const SideMenu = (_ref, ref) => {
       text: 'Insert_below',
       iconClass: 'sdocfont sdoc-insert'
     },
-    className: "pr-2"
+    className: "pr-2 sdoc-dropdown-menu-item-relative"
   }, /*#__PURE__*/React.createElement("i", {
     className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
   }), /*#__PURE__*/React.createElement(InsertBelowMenu, {

package/dist/basic-sdk/extension/utils/index.js

@@ -9,4 +9,26 @@ export const isImage = url => {
 };
 export const isSameDomain = (currentUrl, targetUrl) => {
   return String(currentUrl).split('/')[2] === String(targetUrl).split('/')[2];
+};
+export const isOverflowPortByDirection = (element, direction) => {
+  const viewWidth = window.innerWidth || document.documentElement.clientWidth;
+  const viewHeight = window.innerHeight || document.documentElement.clientHeight;
+  const {
+    top,
+    right,
+    bottom,
+    left
+  } = element.getBoundingClientRect();
+  if (direction === 'top') {
+    return top <= 0;
+  }
+  if (direction === 'bottom') {
+    return bottom >= viewHeight;
+  }
+  if (direction === 'left') {
+    return left <= 0;
+  }
+  if (direction === 'right') {
+    return right >= viewWidth;
+  }
 };

package/package.json

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