@seafile/seafile-editor 3.0.41 → 3.0.42

package/dist/extension/constants/menus-config.js

@@ -67,12 +67,12 @@ const MENUS_CONFIG_MAP = exports.MENUS_CONFIG_MAP = {
   [_elementTypes.IMAGE]: {
     id: "seafile_".concat(_elementTypes.IMAGE),
     iconClass: 'mdfont md-image',
-    text: 'Insert_image'
+    text: 'Image'
   },
   [_elementTypes.TABLE]: {
     id: "seafile_".concat(_elementTypes.TABLE),
     iconClass: 'mdfont md-table',
-    text: 'Insert_table'
+    text: 'Table'
   },
   [ITALIC]: {
     id: "seafile_".concat(ITALIC),
@@ -116,7 +116,7 @@ const MENUS_CONFIG_MAP = exports.MENUS_CONFIG_MAP = {
   [_elementTypes.FORMULA]: {
     id: "seafile_".concat(_elementTypes.FORMULA),
     iconClass: 'mdfont md-formula',
-    text: 'Insert_formula'
+    text: 'Formula'
   },
   [CLEAR_FORMAT]: {
     id: "seafile_".concat(CLEAR_FORMAT),
@@ -126,7 +126,7 @@ const MENUS_CONFIG_MAP = exports.MENUS_CONFIG_MAP = {
   [_elementTypes.COLUMN]: {
     id: "seafile_".concat(_elementTypes.COLUMN),
     iconClass: 'mdfont md-choose-column',
-    text: 'Insert_column'
+    text: 'Column'
   },
   [MORE_OPERATION]: {
     id: "seafile_".concat(MORE_OPERATION),

package/dist/extension/plugins/divider/helper.js

@@ -17,7 +17,51 @@ const transformToDivider = editor => {
 exports.transformToDivider = transformToDivider;
 const insertDivider = editor => {
   if (!editor.selection) return;
+  const blockEntry = _slate.Editor.above(editor, {
+    at: editor.selection,
+    match: n => _slate.Element.isElement(n) && _slate.Editor.isBlock(editor, n),
+    mode: 'highest'
+  });
   const dividerNode = (0, _core.generateElement)(_elementTypes.DIVIDER);
+  const paragraphNode = (0, _core.generateDefaultParagraph)();
+  const focusInsertedParagraph = () => {
+    const [paragraphEntry] = _slate.Editor.nodes(editor, {
+      at: [],
+      match: node => node.id === paragraphNode.id,
+      mode: 'highest'
+    });
+    if (paragraphEntry) {
+      (0, _core.focusEditor)(editor, _slate.Editor.start(editor, paragraphEntry[1]));
+      return;
+    }
+    (0, _core.focusEditor)(editor);
+  };
+  if (!blockEntry) {
+    _slate.Editor.withoutNormalizing(editor, () => {
+      _slate.Transforms.insertNodes(editor, [dividerNode, paragraphNode]);
+      focusInsertedParagraph();
+    });
+    return;
+  }
+  const [blockNode, blockPath] = blockEntry;
+  const isEmptyParagraph = blockNode.type === _elementTypes.PARAGRAPH && _slate.Node.string(blockNode) === '';
+  const insertPath = isEmptyParagraph ? blockPath : (0, _core.isSelectionAtBlockEnd)(editor, {
+    at: editor.selection
+  }) ? _slate.Path.next(blockPath) : null;
+  if (insertPath) {
+    _slate.Editor.withoutNormalizing(editor, () => {
+      if (isEmptyParagraph) {
+        _slate.Transforms.removeNodes(editor, {
+          at: blockPath
+        });
+      }
+      _slate.Transforms.insertNodes(editor, [dividerNode, paragraphNode], {
+        at: insertPath
+      });
+      focusInsertedParagraph();
+    });
+    return;
+  }
   _slate.Transforms.insertNodes(editor, dividerNode);
   (0, _core.focusEditor)(editor);
 };

package/dist/extension/plugins/divider/menu/index.js

@@ -28,7 +28,7 @@ const DividerMenu = _ref => {
     disabled: readonly,
     menuConfig: menuConfig,
     className: "pr-2",
-    onClick: onMousedown
+    onMousedown: onMousedown
   });
 };
 var _default = exports.default = DividerMenu;

package/dist/extension/plugins/table/context-menu/horizontal-align-popover/index.js

@@ -13,17 +13,21 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _core = require("../../../../core");
 var _constants = require("../../../../../constants");
 var _tableOperations = require("../../table-operations");
+var _helper = require("../../helper");
 require("./style.css");
 const HorizontalAlignPopover = _ref => {
   let {
     target,
     editor,
     readonly,
-    horizontalAlign
+    horizontalAlign,
+    handleCloseContextMenu
   } = _ref;
   const {
     t
   } = (0, _reactI18next.useTranslation)(_constants.TRANSLATE_NAMESPACE);
+  const popoverRef = (0, _react.useRef)(null);
+  const [popoverClassName, setPopoverClassName] = (0, _react.useState)('sf-table-alignment-popover');
   const setTextAlignStyle = (0, _react.useCallback)(textAlign => {
     if (readonly) return;
     (0, _tableOperations.changeColumnAlign)(editor, textAlign);
@@ -34,7 +38,40 @@ const HorizontalAlignPopover = _ref => {
     setTimeout(() => {
       (0, _core.focusEditor)(editor, focusPoint);
     }, 0);
-  }, [editor, readonly]);
+    handleCloseContextMenu();
+  }, [editor, handleCloseContextMenu, readonly]);
+  (0, _react.useEffect)(() => {
+    var _target$current;
+    const updatePlacement = () => {
+      var _popoverRef$current;
+      const popoverNode = (_popoverRef$current = popoverRef.current) === null || _popoverRef$current === void 0 ? void 0 : _popoverRef$current._element;
+      const targetNode = target === null || target === void 0 ? void 0 : target.current;
+      if (!popoverNode || !targetNode) return;
+      const boundaryRect = (0, _helper.getTableMenuBoundaryRect)(targetNode);
+      const targetRect = targetNode.getBoundingClientRect();
+      const popoverWidth = popoverNode.offsetWidth || 0;
+      const gap = 8;
+      const boundaryGap = 10;
+      const canShowRight = targetRect.right + gap + popoverWidth <= boundaryRect.right - boundaryGap;
+      const canShowLeft = targetRect.left - gap - popoverWidth >= boundaryRect.left + boundaryGap;
+      if (!canShowRight && canShowLeft) {
+        setPopoverClassName('sf-table-alignment-popover sf-table-alignment-popover-left');
+        return;
+      }
+      setPopoverClassName('sf-table-alignment-popover');
+    };
+    const handleMouseEnter = () => {
+      setTimeout(updatePlacement, 0);
+    };
+    updatePlacement();
+    target === null || target === void 0 ? void 0 : (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.addEventListener('mouseenter', handleMouseEnter);
+    window.addEventListener('resize', updatePlacement);
+    return () => {
+      var _target$current2;
+      target === null || target === void 0 ? void 0 : (_target$current2 = target.current) === null || _target$current2 === void 0 ? void 0 : _target$current2.removeEventListener('mouseenter', handleMouseEnter);
+      window.removeEventListener('resize', updatePlacement);
+    };
+  }, [target]);
   return /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
     target: target.current,
     trigger: "hover",
@@ -42,7 +79,8 @@ const HorizontalAlignPopover = _ref => {
     hideArrow: true,
     fade: false,
     offset: [0, 8],
-    popperClassName: "sf-table-alignment-popover sf-popover-box-shadow"
+    popperClassName: "".concat(popoverClassName, " sf-popover-box-shadow"),
+    innerRef: popoverRef
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-dropdown-menu sf-table-alignment-menu"
   }, /*#__PURE__*/_react.default.createElement("div", {

package/dist/extension/plugins/table/context-menu/horizontal-align-popover/style.css

@@ -5,7 +5,14 @@
 
 .sf-table-alignment-popover {
   z-index: 2000;
+}
+
+.sf-table-alignment-popover .popover {
+  left: 0 !important;
+}
 
+.sf-table-alignment-popover-left .popover {
+  transform: translateX(calc(-100% - 16px));
 }
 
 .sf-table-alignment-menu {

package/dist/extension/plugins/table/context-menu/index.js

@@ -118,7 +118,8 @@ const ContextMenu = _ref => {
   })), horizontalAlignRef.current && /*#__PURE__*/_react.default.createElement(_horizontalAlignPopover.default, {
     target: horizontalAlignRef,
     editor: editor,
-    horizontalAlign: horizontalAlign
+    horizontalAlign: horizontalAlign,
+    handleCloseContextMenu: handleCloseContextMenu
   })));
 };
 var _default = exports.default = ContextMenu;

package/dist/extension/plugins/table/helper.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectCellByGrid = exports.pasteContentIntoTable = exports.jumpOutTableInEditor = exports.isSelectingMultipleTables = exports.isInTable = exports.isDisabled = exports.insertTable = exports.getTableFocusingInfos = exports.getTableEntry = exports.getSelectedTableCells = exports.getSelectGrid = exports.getContextMenuPosition = void 0;
+exports.selectCellByGrid = exports.pasteContentIntoTable = exports.jumpOutTableInEditor = exports.isSelectingMultipleTables = exports.isInTable = exports.isDisabled = exports.insertTable = exports.getTableMenuBoundaryRect = exports.getTableFocusingInfos = exports.getTableEntry = exports.getSelectedTableCells = exports.getSelectGrid = exports.getContextMenuPosition = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _slate = require("slate");
 var _slateReact = require("slate-react");
@@ -17,6 +17,8 @@ var _deserializeHtml = require("../../../utils/deserialize-html");
 var _common = require("../../../utils/common");
 var _helper = require("../link/helper");
 var _helper2 = require("../image/helper");
+const TABLE_MENU_BOUNDARY_SELECTOR = '.longtext-dialog-container, .sf-long-text-inline-editor-container';
+const TABLE_MENU_BOUNDARY_GAP = 10;
 const isDisabled = (editor, readonly) => {
   const {
     selection
@@ -275,57 +277,38 @@ const isSelectingMultipleTables = editor => {
   return isSelectedMultiple;
 };
 exports.isSelectingMultipleTables = isSelectingMultipleTables;
+const getTableMenuBoundaryRect = targetNode => {
+  const boundaryContainer = targetNode === null || targetNode === void 0 ? void 0 : targetNode.closest(TABLE_MENU_BOUNDARY_SELECTOR);
+  if (boundaryContainer) {
+    return boundaryContainer.getBoundingClientRect();
+  }
+  return {
+    top: 0,
+    left: 0,
+    right: window.innerWidth,
+    bottom: window.innerHeight
+  };
+};
+exports.getTableMenuBoundaryRect = getTableMenuBoundaryRect;
 const getContextMenuPosition = (event, tableRef) => {
   const menuHeight = 240;
   const menuWidth = 350;
-  const {
-    clientHeight,
-    clientWidth
-  } = document.body; // page
-  const {
-    x,
-    y
-  } = tableRef.current.getBoundingClientRect(); // table
+  const boundaryRect = getTableMenuBoundaryRect(tableRef.current);
+  const tableRect = tableRef.current.getBoundingClientRect();
   const {
     clientY,
     clientX
   } = event; // cursor
 
-  const isBeyondBottom = clientY + menuHeight > clientHeight;
-  const isBeyondRight = clientX + menuWidth > clientWidth;
-  const defaultTop = clientY - y;
-  const defaultLeft = clientX - x;
-  let top = 0;
-  let left = 0;
-  if (isBeyondBottom) {
-    const hiddenHeight = menuHeight - (clientHeight - clientY);
-    top = defaultTop - hiddenHeight;
-  }
-  if (isBeyondRight) {
-    const hiddenWidth = menuWidth - (clientWidth - clientX);
-    left = defaultLeft - hiddenWidth;
-  }
-  if (!isBeyondBottom && !isBeyondRight) {
-    return {
-      top: defaultTop,
-      left: defaultLeft
-    };
-  }
-  if (isBeyondBottom && isBeyondRight) {
-    return {
-      top,
-      left
-    };
-  }
-  if (isBeyondBottom) {
-    return {
-      top,
-      left: defaultLeft
-    };
-  }
+  const minTop = Math.max(boundaryRect.top - tableRect.top, 0);
+  const minLeft = Math.max(boundaryRect.left - tableRect.left, 0);
+  const maxTop = Math.max(boundaryRect.bottom - tableRect.top - menuHeight, minTop);
+  const maxLeft = Math.max(boundaryRect.right - tableRect.left - menuWidth - TABLE_MENU_BOUNDARY_GAP, minLeft);
+  const defaultTop = clientY - tableRect.top;
+  const defaultLeft = clientX - tableRect.left;
   return {
-    top: defaultTop,
-    left
+    top: Math.min(Math.max(defaultTop, minTop), maxTop),
+    left: Math.min(Math.max(defaultLeft, minLeft), maxLeft)
   };
 };
 exports.getContextMenuPosition = getContextMenuPosition;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-editor",
-  "version": "3.0.41",
+  "version": "3.0.42",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/public/locales/en/seafile-editor.json

@@ -13,14 +13,13 @@
   "Ordered_list": "Ordered list",
   "Unordered_list": "Unordered list",
   "Check_list_item": "Check list item",
-  "Insert_image": "Insert image",
-  "Insert_formula": "Insert formula",
+  "Image": "Image",
   "Formula": "Formula",
   "Insert_file": "Insert file",
   "Code": "Inline code",
   "Code_block": "Code block",
   "Insert_link": "Insert link",
-  "Insert_table": "Insert table",
+  "Table": "Table",
   "Save": "Save",
   "More": "More",
   "Invalid_url": "Invalid URL",