@seafile/sdoc-editor 0.1.131 → 0.1.133

package/dist/basic-sdk/extension/commons/element-popover/index.js

@@ -28,6 +28,19 @@ var ElementPopover = /*#__PURE__*/function (_React$Component) {
     value: function componentDidMount() {
       document.body.appendChild(this.el);
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      var _this$props = this.props,
+        className = _this$props.className,
+        style = _this$props.style;
+      if (className) {
+        this.el.className = className;
+      }
+      if (style) {
+        this.el.style = style;
+      }
+    }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {

package/dist/basic-sdk/extension/plugins/code-block/helpers.js

@@ -78,8 +78,11 @@ export var changeToCodeBlock = function changeToCodeBlock(editor, language) {
     }]
   };
 
+  var path = Editor.path(editor, editor.selection);
+  var atPath = path ? [path[0]] : editor.selection;
   Transforms.insertNodes(editor, newCodeBlockNode, {
-    mode: 'highest'
+    mode: 'highest',
+    at: atPath
   });
 };
 export var changeToPlainText = function changeToPlainText(editor) {

package/dist/basic-sdk/extension/plugins/font/menu/font-size/index.js

@@ -6,8 +6,6 @@ import classnames from 'classnames';
 import { isMenuDisabled, getFontSize, setFontSize } from '../../helpers';
 import { DEFAULT_COMMON_FONT_SIZE, FONT_SIZE, SPECIAL_FONT_SIZE_NAME } from '../../../../constants';
 import context from '../../../../../../context';
-import { eventStopPropagation } from '../../../../../utils/mouse-event';
-import FontSizeScale from './font-size-scale';
 import Tooltip from '../../../../commons/tooltip';
 import './index.css';
 var FontSize = function FontSize(_ref) {
@@ -25,7 +23,6 @@ var FontSize = function FontSize(_ref) {
   var disabled = isMenuDisabled(editor, readonly);
   var fontSizeButtonId = 'sdoc-button-font-size';
   var selectedFontSize = getFontSize(editor);
-  var selectedFontSizeValue = selectedFontSize;
   var lang = (context.getSetting('lang') || '').toLowerCase();
   if (SPECIAL_FONT_SIZE_NAME.includes(selectedFontSize)) {
     var fontItem = FONT_SIZE.find(function (item) {
@@ -34,7 +31,6 @@ var FontSize = function FontSize(_ref) {
     if (lang !== 'zh-cn') {
       selectedFontSize = fontItem ? fontItem.value : DEFAULT_COMMON_FONT_SIZE;
     }
-    selectedFontSizeValue = fontItem ? fontItem.value : DEFAULT_COMMON_FONT_SIZE;
   }
   var fontSizeRef = useRef(null);
   var toggle = useCallback(function (event) {
@@ -50,20 +46,6 @@ var FontSize = function FontSize(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, selectedFontSize, isShowMenu]);
-  var increaseFontSize = useCallback(function (event) {
-    eventStopPropagation(event);
-    setFontSize(editor, selectedFontSizeValue + 1);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editor, selectedFontSize, selectedFontSizeValue]);
-  var reduceFontSize = useCallback(function (event) {
-    eventStopPropagation(event);
-    var nextFontSize = selectedFontSizeValue - 1;
-    if (nextFontSize < 1) return;
-    setFontSize(editor, nextFontSize);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editor, selectedFontSize, selectedFontSizeValue]);
   var validClassName = classnames(className, 'sdoc-menu-with-dropdown sdoc-font-size-menu', {
     'menu-show': isShowMenu,
     'disabled': disabled,
@@ -96,21 +78,7 @@ var FontSize = function FontSize(_ref) {
     className: caretIconClass
   }))), /*#__PURE__*/React.createElement(Tooltip, {
     target: fontSizeButtonId
-  }, t('Font_size')), /*#__PURE__*/React.createElement(FontSizeScale, {
-    disabled: disabled,
-    onClick: increaseFontSize,
-    id: "sdoc-increase-font-size",
-    tipMessage: t('Increase_font_size')
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "sdocfont sdoc-increase-font-size"
-  })), /*#__PURE__*/React.createElement(FontSizeScale, {
-    disabled: disabled,
-    onClick: reduceFontSize,
-    id: "sdoc-reduce-font-size",
-    tipMessage: t('Reduce_font_size')
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "sdocfont sdoc-reduce-font-size"
-  })), !disabled && /*#__PURE__*/React.createElement(UncontrolledPopover, {
+  }, t('Font_size')), !disabled && /*#__PURE__*/React.createElement(UncontrolledPopover, {
     target: fontSizeButtonId,
     className: "sdoc-menu-popover sdoc-dropdown-menu sdoc-font-size-menu-popover",
     trigger: "legacy",

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

@@ -96,8 +96,9 @@ export var insertTable = function insertTable(editor, size, selection) {
   if (!size) return;
   if (isTableMenuDisabled(editor)) return;
   var tableNode = generateEmptyTable(editor, size);
+  var path = Editor.path(editor, selection);
   Transforms.insertNodes(editor, tableNode, {
-    at: selection
+    at: [path[0]]
   });
 };
 export var getSelectedInfo = function getSelectedInfo(editor) {

package/dist/basic-sdk/extension/plugins/text-style/menu/index.js

@@ -5,8 +5,13 @@ import { Editor } from '@seafile/slate';
 import { TEXT_STYLE, TEXT_STYLE_MORE, MENUS_CONFIG_MAP, ELEMENT_TYPE } from '../../../constants';
 import { focusEditor } from '../../../core';
 import { MenuItem, ColorMenu, MoreDropdown } from '../../../commons';
+import { getFontSize, setFontSize } from '../../font/helpers';
+import context from '../../../../../context';
+import FontSizeScale from '../../font/menu/font-size/font-size-scale';
 import { getValue, isMenuDisabled, addMark, removeMark } from '../helpers';
 import { useColorContext } from '../../../../hooks/use-color-context';
+import { eventStopPropagation } from '../../../../utils/mouse-event';
+import { DEFAULT_COMMON_FONT_SIZE, FONT_SIZE, SPECIAL_FONT_SIZE_NAME } from '../../../constants';
 var TextStyleMenuList = function TextStyleMenuList(_ref) {
   var editor = _ref.editor,
     t = _ref.t,
@@ -14,6 +19,18 @@ var TextStyleMenuList = function TextStyleMenuList(_ref) {
     className = _ref.className,
     idPrefix = _ref.idPrefix,
     readonly = _ref.readonly;
+  var selectedFontSize = getFontSize(editor);
+  var selectedFontSizeValue = selectedFontSize;
+  var lang = (context.getSetting('lang') || '').toLowerCase();
+  if (SPECIAL_FONT_SIZE_NAME.includes(selectedFontSize)) {
+    var fontItem = FONT_SIZE.find(function (item) {
+      return item.name === selectedFontSize;
+    });
+    if (lang !== 'zh-cn') {
+      selectedFontSize = fontItem ? fontItem.value : DEFAULT_COMMON_FONT_SIZE;
+    }
+    selectedFontSizeValue = fontItem ? fontItem.value : DEFAULT_COMMON_FONT_SIZE;
+  }
   var _useColorContext = useColorContext(),
     lastUsedFontColor = _useColorContext.lastUsedFontColor,
     updateLastUsedFontColor = _useColorContext.updateLastUsedFontColor,
@@ -50,6 +67,20 @@ var TextStyleMenuList = function TextStyleMenuList(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor]);
+  var increaseFontSize = useCallback(function (event) {
+    eventStopPropagation(event);
+    setFontSize(editor, selectedFontSizeValue + 1);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, selectedFontSize, selectedFontSizeValue]);
+  var reduceFontSize = useCallback(function (event) {
+    eventStopPropagation(event);
+    var nextFontSize = selectedFontSizeValue - 1;
+    if (nextFontSize < 1) return;
+    setFontSize(editor, nextFontSize);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, selectedFontSize, selectedFontSizeValue]);
   var getTextStyleList = useCallback(function (key) {
     return MENUS_CONFIG_MAP[key].map(function (item) {
       var itemProps = {
@@ -85,6 +116,20 @@ var TextStyleMenuList = function TextStyleMenuList(_ref) {
     return /*#__PURE__*/React.createElement(MenuItem, Object.assign({
       key: index
     }, itemProps));
-  })));
+  }), /*#__PURE__*/React.createElement(FontSizeScale, {
+    disabled: isDisabled(),
+    onClick: increaseFontSize,
+    id: "sdoc-increase-font-size",
+    tipMessage: t('Increase_font_size')
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-increase-font-size"
+  })), /*#__PURE__*/React.createElement(FontSizeScale, {
+    disabled: isDisabled(),
+    onClick: reduceFontSize,
+    id: "sdoc-reduce-font-size",
+    tipMessage: t('Reduce_font_size')
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-reduce-font-size"
+  }))));
 };
 export default withTranslation('sdoc-editor')(TextStyleMenuList);

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

@@ -117,5 +117,6 @@ export var insertBelowLink = function insertBelowLink(editor, title, url) {
 export var getDomTopHeight = function getDomTopHeight(dom) {
   var HEADER_HEIGHT = 56 + 44;
   var rect = dom.getBoundingClientRect();
-  return rect.y - HEADER_HEIGHT;
+  var HightCenter = (rect.height - 24) / 2;
+  return rect.y - HEADER_HEIGHT + HightCenter;
 };

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

@@ -98,9 +98,9 @@ var SideToolbar = function SideToolbar() {
     });
   }, [editor, isShowSideMenu, slateNode]);
   var iconClass = classnames('sdocfont', {
-    'sdoc-more-vertical': !isActive,
+    'sdoc-more-vertical': !isActive && !isNodeEmpty,
     'sdoc-more-vertical-right': isActive && !isNodeEmpty,
-    'sdoc-append': isActive && isNodeEmpty
+    'sdoc-append': isNodeEmpty
   });
   return /*#__PURE__*/React.createElement("div", {
     className: "sdoc-side-toolbar-container",

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

@@ -1,4 +1,5 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { withTranslation } from 'react-i18next';
 import { useSlateStatic } from '@seafile/slate-react';
 import EventBus from '../../../utils/event-bus';
@@ -15,6 +16,11 @@ var SideMenu = function SideMenu(_ref) {
     menuPosition = _ref.menuPosition,
     onReset = _ref.onReset,
     t = _ref.t;
+  var sideMenuRef = useRef(null);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    menuStyle = _useState2[0],
+    setMenuStyle = _useState2[1];
   var editor = useSlateStatic();
   useEffect(function () {
     var eventBus = EventBus.getInstance();
@@ -35,14 +41,23 @@ var SideMenu = function SideMenu(_ref) {
     onDeleteNode(editor, slateNode);
     onReset();
   }, [editor, onReset, slateNode]);
-  var menuStyle = useMemo(function () {
-    return "top: ".concat(menuPosition.top, "px; left: ").concat(menuPosition.left, "px");
-  }, [menuPosition]);
+  useEffect(function () {
+    var top = menuPosition.top;
+    if (sideMenuRef.current) {
+      var overflowY = menuPosition.top + sideMenuRef.current.offsetHeight - document.body.clientHeight;
+      if (overflowY > 0) {
+        top = menuPosition.top - overflowY - 10;
+      }
+    }
+    setMenuStyle("top: ".concat(top, "px; left: ").concat(menuPosition.left, "px"));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [menuPosition, sideMenuRef.current]);
   return /*#__PURE__*/React.createElement(ElementPopover, {
     className: "sdoc-side-menu-popover",
     style: menuStyle
   }, /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-side-menu"
+    className: "sdoc-side-menu",
+    ref: sideMenuRef
   }, /*#__PURE__*/React.createElement(SideMenuItem, {
     menuId: "sdoc-side-menu-item__transform",
     iconClass: "sdocfont sdoc-table-of-content",

package/package.json

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