@seafile/sdoc-editor 0.1.138 → 0.1.140

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

@@ -6,7 +6,7 @@ import slugid from 'slugid';
 import { Editor, Range, Transforms, Point, Node } from '@seafile/slate';
 import { ReactEditor } from '@seafile/slate-react';
 import { getNodeType, getParentNode, getSelectedNodeByType, isTextNode, getSelectedElems, focusEditor, getNode, findPath, replaceNodeChildren } from '../../core';
-import { ELEMENT_TYPE, KEYBOARD, CLIPBOARD_FORMAT_KEY } from '../../constants';
+import { ELEMENT_TYPE, KEYBOARD, CLIPBOARD_FORMAT_KEY, INSERT_POSITION } from '../../constants';
 import { TABLE_MAX_ROWS, TABLE_MAX_COLUMNS, EMPTY_SELECTED_RANGE, TABLE_ROW_MIN_HEIGHT, TABLE_CELL_MIN_WIDTH, TABLE_ELEMENT, TABLE_ELEMENT_POSITION } from './constants';
 import EventBus from '../../../utils/event-bus';
 import { INTERNAL_EVENT, PAGE_EDIT_AREA_WIDTH } from '../../../constants';
@@ -93,10 +93,20 @@ export var generateEmptyTable = function generateEmptyTable(editor) {
   };
 };
 export var insertTable = function insertTable(editor, size, selection) {
+  var position = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : INSERT_POSITION.CURRENT;
   if (!size) return;
-  if (isTableMenuDisabled(editor)) return;
+  if (position !== INSERT_POSITION.AFTER) {
+    if (isTableMenuDisabled(editor)) return;
+  }
   var tableNode = generateEmptyTable(editor, size);
-  var path = Editor.path(editor, selection);
+  var validSelection = selection || editor.selection;
+  var path = Editor.path(editor, validSelection);
+  if (position === INSERT_POSITION.AFTER) {
+    Transforms.insertNodes(editor, tableNode, {
+      at: [path[0] + 1]
+    });
+    return;
+  }
   Transforms.insertNodes(editor, tableNode, {
     at: [path[0]]
   });

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

@@ -1,62 +1,36 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React from 'react';
+import React, { useCallback } from 'react';
 import { withTranslation } from 'react-i18next';
 import { insertTable, isTableMenuDisabled } from '../../helpers';
-import { TABLE, MENUS_CONFIG_MAP } from '../../../../constants';
-import { MenuItem } from '../../../../commons';
+import { MENUS_CONFIG_MAP, ELEMENT_TYPE, INSERT_POSITION } from '../../../../constants';
 import TableSizePopover from '../../popover/table-size-popover';
-var TableMenu = /*#__PURE__*/function (_React$Component) {
-  _inherits(TableMenu, _React$Component);
-  var _super = _createSuper(TableMenu);
-  function TableMenu() {
-    var _this;
-    _classCallCheck(this, TableMenu);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.isActive = function () {
-      return false;
-    };
-    _this.isDisabled = function () {
-      var _this$props = _this.props,
-        editor = _this$props.editor,
-        readonly = _this$props.readonly;
-      return isTableMenuDisabled(editor, readonly);
-    };
-    _this.createTable = function (size) {
-      var editor = _this.props.editor;
-      insertTable(editor, size, editor.selection);
-    };
-    return _this;
-  }
-  _createClass(TableMenu, [{
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        isRichEditor = _this$props2.isRichEditor,
-        className = _this$props2.className;
-      var menuConfig = MENUS_CONFIG_MAP[TABLE];
-      var props = _objectSpread(_objectSpread({
-        isRichEditor: isRichEditor,
-        className: className
-      }, menuConfig), {}, {
-        disabled: this.isDisabled(),
-        isActive: this.isActive(),
-        onMouseDown: function onMouseDown() {}
-      });
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: "table-menu"
-      }, /*#__PURE__*/React.createElement(MenuItem, props)), /*#__PURE__*/React.createElement(TableSizePopover, {
-        target: menuConfig.id,
-        createTable: this.createTable
-      }));
-    }
-  }]);
-  return TableMenu;
-}(React.Component);
+import ElementDropdownMenuItem from '../../../../commons/dropdown-menu-item';
+import { INTERNAL_EVENT } from '../../../../../constants';
+var TableMenu = function TableMenu(_ref) {
+  var editor = _ref.editor,
+    readonly = _ref.readonly,
+    eventBus = _ref.eventBus;
+  var disabled = isTableMenuDisabled(editor, readonly);
+  var menuConfig = MENUS_CONFIG_MAP[ELEMENT_TYPE.TABLE];
+  var createTable = useCallback(function (size) {
+    insertTable(editor, size, editor.selection, INSERT_POSITION.CURRENT);
+  }, [editor]);
+  var openDialog = useCallback(function () {
+    eventBus.dispatch(INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: ELEMENT_TYPE.TABLE
+    });
+  }, [eventBus]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ElementDropdownMenuItem, {
+    disabled: disabled,
+    menuConfig: menuConfig,
+    className: "pr-2"
+  }, !disabled && /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
+  })), !disabled && /*#__PURE__*/React.createElement(TableSizePopover, {
+    target: menuConfig.id,
+    trigger: "hover",
+    placement: "right-start",
+    createTable: createTable,
+    openDialog: openDialog
+  }));
+};
 export default withTranslation('sdoc-editor')(TableMenu);

package/dist/basic-sdk/extension/plugins/table/popover/table-size-popover/index.js

@@ -1,142 +1,106 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React, { Component } from 'react';
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useRef, useState } from 'react';
 import classnames from 'classnames';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { UncontrolledPopover } from 'reactstrap';
-import CustomTableSizeDialog from '../../dialog/custom-table-size-dialog';
 import './index.css';
-var TableSizePopover = /*#__PURE__*/function (_Component) {
-  _inherits(TableSizePopover, _Component);
-  var _super = _createSuper(TableSizePopover);
-  function TableSizePopover(props) {
-    var _this;
-    _classCallCheck(this, TableSizePopover);
-    _this = _super.call(this, props);
-    _this.createTable = function () {
-      var selectedSize = _this.state.selectedSize;
-      _this.props.createTable(selectedSize);
-      _this.ref && _this.ref.toggle();
-    };
-    _this.createCustomSizeTable = function () {
-      var customSize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0];
-      _this.props.createTable(customSize);
-      _this.closeCustomTableSizeDialog();
-    };
-    _this.onMouseEnter = function (event) {
-      var cellPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [1, 1];
-      var displaySize = _this.state.displaySize;
-      var cellPositionX = cellPosition[0];
-      var cellPositionY = cellPosition[1];
-      displaySize[0] = cellPositionX < _this.minSize[0] ? _this.minSize[0] : cellPositionX + 1;
-      displaySize[1] = cellPositionY < _this.minSize[1] ? _this.minSize[1] : cellPositionY + 1;
-      if (displaySize[0] > _this.maxSize[0]) {
-        displaySize[0] = _this.maxSize[0];
-      }
-      if (displaySize[1] > _this.maxSize[1]) {
-        displaySize[1] = _this.maxSize[1];
-      }
-      _this.setState({
-        selectedSize: cellPosition,
-        displaySize: displaySize
-      });
-    };
-    _this.openCustomTableSizeDialog = function () {
-      _this.setState({
-        isShowCustomSizeDialog: true
-      });
-      _this.ref && _this.ref.toggle();
-    };
-    _this.closeCustomTableSizeDialog = function () {
-      _this.setState({
-        isShowCustomSizeDialog: false
-      });
-    };
-    _this.setRef = function (ref) {
-      _this.ref = ref;
-    };
-    _this.renderTableSize = function () {
-      var _this$state = _this.state,
-        displaySize = _this$state.displaySize,
-        selectedSize = _this$state.selectedSize;
-      var tableSize = [];
-      var _loop = function _loop(i) {
-        var children = [];
-        var _loop2 = function _loop2(j) {
-          var isSelectedChild = i <= selectedSize[0] && selectedSize[0] !== 0 && j <= selectedSize[1] && selectedSize[1] !== 0;
-          var child = /*#__PURE__*/React.createElement("div", {
-            key: "sdoc-table-size-cell-".concat(i, "-").concat(j),
-            className: classnames('sdoc-table-size-cell', {
-              'active': isSelectedChild
-            }),
-            onClick: _this.createTable,
-            onMouseEnter: function onMouseEnter(event) {
-              return _this.onMouseEnter(event, [i, j]);
-            }
-          });
-          children.push(child);
-        };
-        for (var j = 1; j <= displaySize[1]; j++) {
-          _loop2(j);
-        }
-        tableSize.push( /*#__PURE__*/React.createElement("div", {
-          key: "sdoc-table-size-row-".concat(i),
-          className: "sdoc-table-size-row d-flex"
-        }, children));
+var TableSizePopover = function TableSizePopover(_ref) {
+  var target = _ref.target,
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? 'legacy' : _ref$trigger,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
+    popperClassName = _ref.popperClassName,
+    createTable = _ref.createTable,
+    openDialog = _ref.openDialog;
+  var minSize = [4, 4];
+  var maxSize = [10, 10];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState([4, 4]),
+    _useState2 = _slicedToArray(_useState, 2),
+    displaySize = _useState2[0],
+    setDisplaySize = _useState2[1];
+  var _useState3 = useState([0, 0]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedSize = _useState4[0],
+    setSelectedSize = _useState4[1];
+  var ref = useRef(null);
+  var _onMouseEnter = useCallback(function (event) {
+    var cellPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [1, 1];
+    var newDisplaySize = displaySize.slice(0);
+    var cellPositionX = cellPosition[0];
+    var cellPositionY = cellPosition[1];
+    newDisplaySize[0] = cellPositionX < minSize[0] ? minSize[0] : cellPositionX + 1;
+    newDisplaySize[1] = cellPositionY < minSize[1] ? minSize[1] : cellPositionY + 1;
+    if (newDisplaySize[0] > maxSize[0]) {
+      newDisplaySize[0] = maxSize[0];
+    }
+    if (newDisplaySize[1] > maxSize[1]) {
+      newDisplaySize[1] = maxSize[1];
+    }
+    setDisplaySize(newDisplaySize);
+    setSelectedSize(cellPosition);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [displaySize, selectedSize, maxSize, minSize]);
+  var onCreateTable = useCallback(function () {
+    createTable(selectedSize);
+    ref && ref.current && ref.current.toggle();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedSize, ref]);
+  var renderTableSize = useCallback(function () {
+    var tableSize = [];
+    var _loop = function _loop(i) {
+      var children = [];
+      var _loop2 = function _loop2(j) {
+        var isSelectedChild = i <= selectedSize[0] && selectedSize[0] !== 0 && j <= selectedSize[1] && selectedSize[1] !== 0;
+        var child = /*#__PURE__*/React.createElement("div", {
+          key: "sdoc-table-size-cell-".concat(i, "-").concat(j),
+          className: classnames('sdoc-table-size-cell', {
+            'active': isSelectedChild
+          }),
+          onClick: onCreateTable,
+          onMouseEnter: function onMouseEnter(event) {
+            return _onMouseEnter(event, [i, j]);
+          }
+        });
+        children.push(child);
       };
-      for (var i = 1; i <= displaySize[0]; i++) {
-        _loop(i);
+      for (var j = 1; j <= displaySize[1]; j++) {
+        _loop2(j);
       }
-      return tableSize;
-    };
-    _this.minSize = [4, 4];
-    _this.maxSize = [10, 10];
-    _this.state = {
-      displaySize: [4, 4],
-      selectedSize: [0, 0],
-      isShowCustomSizeDialog: false
+      tableSize.push( /*#__PURE__*/React.createElement("div", {
+        key: "sdoc-table-size-row-".concat(i),
+        className: "sdoc-table-size-row d-flex"
+      }, children));
     };
-    return _this;
-  }
-  _createClass(TableSizePopover, [{
-    key: "render",
-    value: function render() {
-      var _this$state2 = this.state,
-        selectedSize = _this$state2.selectedSize,
-        isShowCustomSizeDialog = _this$state2.isShowCustomSizeDialog;
-      var _this$props = this.props,
-        _this$props$trigger = _this$props.trigger,
-        trigger = _this$props$trigger === void 0 ? 'legacy' : _this$props$trigger,
-        _this$props$placement = _this$props.placement,
-        placement = _this$props$placement === void 0 ? 'bottom-start' : _this$props$placement,
-        popperClassName = _this$props.popperClassName,
-        t = _this$props.t;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UncontrolledPopover, {
-        target: this.props.target,
-        className: "sdoc-selected-table-size-popover",
-        trigger: trigger,
-        placement: placement,
-        hideArrow: true,
-        fade: false,
-        ref: this.setRef,
-        popperClassName: popperClassName
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-selected-table-size-container w-100 h-100 d-flex flex-column"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-selected-table-size-tip w-100 "
-      }, "".concat(selectedSize[0], " x ").concat(selectedSize[1])), /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-table-size-select"
-      }, this.renderTableSize()), /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-selected-table-size-custom",
-        onClick: this.openCustomTableSizeDialog
-      }, t('Customize_the_number_of_rows_and_columns')))), isShowCustomSizeDialog && /*#__PURE__*/React.createElement(CustomTableSizeDialog, {
-        toggle: this.closeCustomTableSizeDialog,
-        submit: this.createCustomSizeTable
-      }));
+    for (var i = 1; i <= displaySize[0]; i++) {
+      _loop(i);
     }
-  }]);
-  return TableSizePopover;
-}(Component);
-export default withTranslation('sdoc-editor')(TableSizePopover);
+    return tableSize;
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [displaySize, selectedSize]);
+  return /*#__PURE__*/React.createElement(UncontrolledPopover, {
+    target: target,
+    className: "sdoc-selected-table-size-popover sdoc-sub-dropdown-menu",
+    trigger: trigger,
+    placement: placement,
+    hideArrow: true,
+    fade: false,
+    ref: ref,
+    popperClassName: popperClassName
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-selected-table-size-container w-100 h-100 d-flex flex-column"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-selected-table-size-tip w-100 "
+  }, "".concat(selectedSize[0], " x ").concat(selectedSize[1])), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-table-size-select"
+  }, renderTableSize()), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-selected-table-size-custom",
+    onClick: openDialog
+  }, t('Customize_the_number_of_rows_and_columns'))));
+};
+export default TableSizePopover;

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

@@ -29,7 +29,7 @@ var renderText = function renderText(props, editor) {
   if (leaf['font-size']) {
     var fontSize = leaf['font-size'];
     if (typeof fontSize === 'number') {
-      style['fontSize'] = "".concat(fontSize, "px");
+      style['fontSize'] = "".concat(fontSize, "pt");
     }
   }
   var font = leaf['font'] || DEFAULT_FONT;

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

@@ -3,19 +3,15 @@ import useSelectionUpdate from '../../../hooks/use-selection-update';
 import { ORDERED_LIST, UNORDERED_LIST } from '../../constants';
 import { MenuGroup } from '../../commons';
 import QuoteMenu from '../../plugins/blockquote/menu';
-import LinkMenu from '../../plugins/link/menu';
 import ListMenu from '../../plugins/list/menu';
-import ImageMenu from '../../plugins/image/menu';
 import HeaderMenu from '../../plugins/header/menu';
 import CheckListMenu from '../../plugins/check-list/menu';
 import TextStyleMenuList from '../../plugins/text-style/menu';
-import CodeBlockMenu from '../../plugins/code-block/menu';
 import TextAlignMenu from '../../plugins/text-align/menu';
-import { TableMenu, ActiveTableMenu } from '../../plugins/table/menu';
 import ClearFormatMenu from '../../plugins/clear-format/menu';
 import HistoryMenu from './redo-undo';
 import Font from '../../plugins/font/menu';
-import SdocLinkMenu from '../../plugins/sdoc-link/menu';
+import InsertToolbar from './insert-toolbar';
 var Toolbar = function Toolbar(_ref) {
   var editor = _ref.editor,
     readonly = _ref.readonly;
@@ -28,6 +24,9 @@ var Toolbar = function Toolbar(_ref) {
   }), /*#__PURE__*/React.createElement(ClearFormatMenu, {
     editor: editor,
     readonly: readonly
+  })), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(InsertToolbar, {
+    editor: editor,
+    readonly: readonly
   })), /*#__PURE__*/React.createElement(HeaderMenu, {
     editor: editor,
     readonly: readonly
@@ -54,24 +53,6 @@ var Toolbar = function Toolbar(_ref) {
   }), /*#__PURE__*/React.createElement(TextAlignMenu, {
     editor: editor,
     readonly: readonly
-  })), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(CodeBlockMenu, {
-    editor: editor,
-    readonly: readonly
-  }), /*#__PURE__*/React.createElement(TableMenu, {
-    editor: editor,
-    readonly: readonly
-  })), /*#__PURE__*/React.createElement(ActiveTableMenu, {
-    editor: editor,
-    readonly: readonly
-  }), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(ImageMenu, {
-    editor: editor,
-    readonly: readonly
-  }), /*#__PURE__*/React.createElement(LinkMenu, {
-    editor: editor,
-    readonly: readonly
-  })), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(SdocLinkMenu, {
-    editor: editor,
-    readonly: readonly
   })));
 };
 Toolbar.defaultProps = {

package/dist/basic-sdk/extension/toolbar/header-toolbar/insert-toolbar/index.css

@@ -0,0 +1,18 @@
+.menu-group .menu-group-item.sdoc-insert-toolbar-btn {
+  width: 140px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.menu-group .sdoc-insert-toolbar-btn .sdoc-menu-with-dropdown-icon {
+  flex: 1;
+  justify-content: flex-start;
+  padding-left: 5px;
+  padding-right: 2px;
+  font-size: 14px;
+}
+
+.sdoc-insert-menu-popover .popover {
+  min-width: 200px;
+}

package/dist/basic-sdk/extension/toolbar/header-toolbar/insert-toolbar/index.js

@@ -0,0 +1,94 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useRef, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { UncontrolledPopover } from 'reactstrap';
+import classnames from 'classnames';
+import ImageMenu from '../../../plugins/image/menu';
+import TableMenu from '../../../plugins/table/menu/table-menu';
+import LinkMenu from '../../../plugins/link/menu';
+import CodeBlockMenu from '../../../plugins/code-block/menu';
+import SdocLinkMenu from '../../../plugins/sdoc-link/menu';
+import EventBus from '../../../../utils/event-bus';
+import './index.css';
+var InsertToolbar = function InsertToolbar(_ref) {
+  var isRichEditor = _ref.isRichEditor,
+    className = _ref.className,
+    editor = _ref.editor,
+    readonly = _ref.readonly;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isShowMenu = _useState2[0],
+    setMenuShow = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var popoverRef = useRef(null);
+  var disabled = readonly;
+  var insertButtonRef = useRef(null);
+  var insertToolbarId = 'sdoc-insert-toolbar-btn';
+  var eventBus = useMemo(function () {
+    return EventBus.getInstance();
+  }, []);
+  var toggle = useCallback(function (event) {
+    popoverRef.current && popoverRef.current.toggle();
+    setMenuShow(!isShowMenu);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowMenu]);
+  var validClassName = classnames(className, 'sdoc-menu-with-dropdown sdoc-insert-toolbar-btn', {
+    'menu-show': isShowMenu,
+    'disabled': disabled,
+    'rich-icon-btn d-flex': isRichEditor,
+    'rich-icon-btn-disabled': isRichEditor && disabled,
+    'rich-icon-btn-hover': isRichEditor && !disabled,
+    'btn btn-icon btn-secondary btn-active d-flex': !isRichEditor
+  });
+  var caretIconClass = "sdoc-menu-with-dropdown-triangle-icon sdocfont sdoc-".concat(isShowMenu ? 'caret-up' : 'drop-down');
+  var _ref2 = insertButtonRef.current ? insertButtonRef.current.getBoundingClientRect() : {
+      bottom: 92.5
+    },
+    bottom = _ref2.bottom;
+  var props = {
+    eventBus: eventBus,
+    editor: editor,
+    readonly: readonly,
+    toggle: toggle
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: validClassName,
+    id: insertToolbarId,
+    disabled: disabled,
+    ref: insertButtonRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-menu-with-dropdown-icon"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-insert mr-1"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "text-truncate"
+  }, t('Insert'))), !disabled && /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-menu-with-dropdown-triangle"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: caretIconClass
+  }))), !disabled && /*#__PURE__*/React.createElement(UncontrolledPopover, {
+    target: insertToolbarId,
+    className: "sdoc-menu-popover sdoc-dropdown-menu sdoc-insert-menu-popover",
+    trigger: "legacy",
+    placement: "bottom-start",
+    hideArrow: true,
+    toggle: toggle,
+    fade: false,
+    ref: popoverRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-insert-menu-container sdoc-dropdown-menu-container",
+    style: {
+      maxHeight: window.innerHeight - bottom - 100
+    }
+  }, /*#__PURE__*/React.createElement(ImageMenu, props), /*#__PURE__*/React.createElement(TableMenu, props), /*#__PURE__*/React.createElement(LinkMenu, props), /*#__PURE__*/React.createElement(CodeBlockMenu, props), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-dropdown-menu-divider"
+  }), /*#__PURE__*/React.createElement(SdocLinkMenu, props))));
+};
+InsertToolbar.defaultProps = {
+  isRichEditor: true,
+  className: 'menu-group-item'
+};
+export default InsertToolbar;

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

@@ -1,13 +1,8 @@
-import { Transforms, Editor } from '@seafile/slate';
+import { Transforms } from '@seafile/slate';
 import { ReactEditor } from '@seafile/slate-react';
 import copy from 'copy-to-clipboard';
-import slugid from 'slugid';
 import { toggleList } from '../../plugins/list/transforms';
-import { generateImageNode } from '../../plugins/image/helpers';
-import { generateEmptyTable } from '../../plugins/table/helpers';
-import { genLinkNode } from '../../plugins/link/helpers';
-import { generateEmptyElement } from '../../core';
-import { ORDERED_LIST, UNORDERED_LIST, PARAGRAPH, CHECK_LIST_ITEM, CODE_BLOCK, CODE_LINE } from '../../constants';
+import { ORDERED_LIST, UNORDERED_LIST, PARAGRAPH, CHECK_LIST_ITEM } from '../../constants';
 export var onSetNodeType = function onSetNodeType(editor, element, type) {
   if (!type) return;
   if ([ORDERED_LIST, UNORDERED_LIST].includes(type)) {
@@ -54,66 +49,6 @@ export var onDeleteNode = function onDeleteNode(editor, element) {
     at: path
   });
 };
-export var insertBelowImage = function insertBelowImage(editor, src, selection) {
-  if (!src) return;
-  var p = generateEmptyElement(PARAGRAPH);
-  var imageNode = generateImageNode(src);
-  p.children[0] = imageNode;
-  var path = Editor.path(editor, selection);
-  Transforms.insertNodes(editor, p, {
-    at: [path[0] + 1]
-  });
-};
-export var insertBelowCodeBlock = function insertBelowCodeBlock(editor, language) {
-  var newCodeBlockNode = {
-    id: slugid.nice(),
-    type: CODE_BLOCK,
-    language: language,
-    style: {
-      white_space: 'nowrap' // default nowrap
-    },
-
-    children: [{
-      id: slugid.nice(),
-      type: CODE_LINE,
-      children: [{
-        text: '',
-        id: slugid.nice()
-      }]
-    }]
-  };
-  var path = Editor.path(editor, editor.selection);
-  Transforms.insertNodes(editor, newCodeBlockNode, {
-    mode: 'highest',
-    at: [path[0] + 1]
-  });
-};
-export var insertBelowTable = function insertBelowTable(editor, size, selection) {
-  if (!size) return;
-  var tableNode = generateEmptyTable(editor, size);
-  var path = Editor.path(editor, selection);
-  Transforms.insertNodes(editor, tableNode, {
-    at: [path[0] + 1]
-  });
-};
-export var insertBelowLink = function insertBelowLink(editor, title, url) {
-  if (!title || !url) return;
-  var p = generateEmptyElement(PARAGRAPH);
-  var linkNode = genLinkNode(url, title);
-  p.children[0] = {
-    id: slugid.nice(),
-    text: ' '
-  };
-  p.children[1] = linkNode;
-  p.children[2] = {
-    id: slugid.nice(),
-    text: ' '
-  };
-  var path = Editor.path(editor, editor.selection);
-  Transforms.insertNodes(editor, p, {
-    at: [path[0] + 1]
-  });
-};
 export var getDomTopHeight = function getDomTopHeight(dom) {
   var HEADER_HEIGHT = 56 + 44;
   var rect = dom.getBoundingClientRect();

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

@@ -42,6 +42,8 @@ var SideToolbar = function SideToolbar() {
     setMenuPosition({});
     setSlateNode(null);
     setActive(false);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   useEffect(function () {
     var observerRefValue;
@@ -81,6 +83,8 @@ var SideToolbar = function SideToolbar() {
     var eventBus = EventBus.getInstance();
     var unSubscribeMouseEnter = eventBus.subscribe(INTERNAL_EVENT.ON_MOUSE_ENTER_BLOCK, handleMouseEnter);
     return unSubscribeMouseEnter;
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, isShowSideMenu, scrollRef]);
   var onActiveToggle = useCallback(function () {
     if (isShowSideMenu) return;