@seafile/sdoc-editor 0.1.125-beta → 0.1.126

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

@@ -17,64 +17,44 @@ import HistoryMenu from './redo-undo';
 import Font from '../../plugins/font/menu';
 import SdocLinkMenu from '../../plugins/sdoc-link/menu';
 var Toolbar = function Toolbar(_ref) {
-  var editor = _ref.editor,
-    readonly = _ref.readonly;
+  var editor = _ref.editor;
   useSelectionUpdate();
   return /*#__PURE__*/React.createElement("div", {
     className: "sdoc-editor-toolbar"
   }, /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(HistoryMenu, {
-    editor: editor,
-    readonly: readonly
+    editor: editor
   }), /*#__PURE__*/React.createElement(ClearFormatMenu, {
-    editor: editor,
-    readonly: readonly
+    editor: editor
   })), /*#__PURE__*/React.createElement(HeaderMenu, {
-    editor: editor,
-    readonly: readonly
+    editor: editor
   }), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(Font, {
-    editor: editor,
-    readonly: readonly
+    editor: editor
   }), /*#__PURE__*/React.createElement(TextStyleMenuList, {
-    editor: editor,
-    readonly: readonly
+    editor: editor
   })), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(QuoteMenu, {
-    editor: editor,
-    readonly: readonly
+    editor: editor
   }), /*#__PURE__*/React.createElement(ListMenu, {
     editor: editor,
-    type: UNORDERED_LIST,
-    readonly: readonly
+    type: UNORDERED_LIST
   }), /*#__PURE__*/React.createElement(ListMenu, {
     editor: editor,
-    type: ORDERED_LIST,
-    readonly: readonly
+    type: ORDERED_LIST
   }), /*#__PURE__*/React.createElement(CheckListMenu, {
-    editor: editor,
-    readonly: readonly
+    editor: editor
   }), /*#__PURE__*/React.createElement(TextAlignMenu, {
-    editor: editor,
-    readonly: readonly
+    editor: editor
   })), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(CodeBlockMenu, {
-    editor: editor,
-    readonly: readonly
+    editor: editor
   }), /*#__PURE__*/React.createElement(TableMenu, {
-    editor: editor,
-    readonly: readonly
+    editor: editor
   })), /*#__PURE__*/React.createElement(ActiveTableMenu, {
-    editor: editor,
-    readonly: readonly
+    editor: editor
   }), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(ImageMenu, {
-    editor: editor,
-    readonly: readonly
+    editor: editor
   }), /*#__PURE__*/React.createElement(LinkMenu, {
-    editor: editor,
-    readonly: readonly
+    editor: editor
   })), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(SdocLinkMenu, {
-    editor: editor,
-    readonly: readonly
+    editor: editor
   })));
 };
-Toolbar.defaultProps = {
-  readonly: false
-};
 export default Toolbar;

package/dist/basic-sdk/extension/toolbar/header-toolbar/redo-undo.js

@@ -17,10 +17,7 @@ var HistoryMenu = /*#__PURE__*/function (_React$Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _this.isDisabled = function (type) {
-      var _this$props = _this.props,
-        editor = _this$props.editor,
-        readonly = _this$props.readonly;
-      if (readonly) return true;
+      var editor = _this.props.editor;
       var history = editor.history;
       if (type === UNDO) {
         return history.undos.length === 0;
@@ -40,9 +37,9 @@ var HistoryMenu = /*#__PURE__*/function (_React$Component) {
   _createClass(HistoryMenu, [{
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-        isRichEditor = _this$props2.isRichEditor,
-        className = _this$props2.className;
+      var _this$props = this.props,
+        isRichEditor = _this$props.isRichEditor,
+        className = _this$props.className;
       var undoConfig = MENUS_CONFIG_MAP[UNDO];
       var redoConfig = MENUS_CONFIG_MAP[REDO];
       var undoProps = _objectSpread(_objectSpread({

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

@@ -1,3 +1,4 @@
 import Toolbar from './header-toolbar';
 import ContextToolbar from './context-toolbar';
-export { Toolbar, ContextToolbar };
+import SideToolbar from './side-toolbar';
+export { Toolbar, ContextToolbar, SideToolbar };

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

@@ -0,0 +1,121 @@
+import { Transforms, Editor } 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';
+export var onSetNodeType = function onSetNodeType(editor, element, type) {
+  if (!type) return;
+  if ([ORDERED_LIST, UNORDERED_LIST].includes(type)) {
+    toggleList(editor, type);
+    return;
+  }
+  if (type === CHECK_LIST_ITEM) {
+    var newType = element.type === CHECK_LIST_ITEM ? PARAGRAPH : CHECK_LIST_ITEM;
+    Transforms.setNodes(editor, {
+      type: newType
+    });
+    return;
+  }
+  if (['left', 'center', 'right'].includes(type)) {
+    Transforms.setNodes(editor, {
+      'align': type
+    });
+    return;
+  }
+  Transforms.setNodes(editor, {
+    type: type
+  });
+};
+export var setSelection = function setSelection(editor, element) {
+  if (element) {
+    var path = ReactEditor.findPath(editor, element);
+    Transforms.select(editor, path);
+  }
+};
+export var onCopyNode = function onCopyNode(editor) {
+  var newData = editor.setFragmentData(new DataTransfer());
+  copy('copy', {
+    onCopy: function onCopy(clipboardData) {
+      newData.types.forEach(function (type) {
+        var data = newData.getData(type);
+        clipboardData.setData(type, data);
+      });
+    }
+  });
+};
+export var onDeleteNode = function onDeleteNode(editor, element) {
+  var path = ReactEditor.findPath(editor, element);
+  Transforms.removeNodes(editor, {
+    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();
+  return rect.y - HEADER_HEIGHT;
+};

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

@@ -0,0 +1,24 @@
+.sdoc-side-toolbar-container {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+}
+
+.sdoc-side-toolbar-container .sdoc-side-op-icon {
+  border-radius: 3px;
+  padding: 0px 3px;
+  height: 24px;
+  color: #BDBDBD;
+  margin-right: 1px;
+  transform: rotate(180deg);
+  cursor: pointer;
+}
+
+.sdoc-side-toolbar-container .sdoc-side-op-icon :first-child {
+  font-size: 14px;
+}
+
+.sdoc-side-toolbar-container .side-op-icon-active {
+  background-color: #F2F2F2;
+  border-radius: 2px;
+}

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

@@ -0,0 +1,123 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import classnames from 'classnames';
+import { Node } from '@seafile/slate';
+import { ReactEditor, useSlateStatic } from '@seafile/slate-react';
+import EventBus from '../../../utils/event-bus';
+import { useScrollContext } from '../../../hooks/use-scroll-context';
+import { INTERNAL_EVENT } from '../../../constants';
+import { getDomTopHeight, setSelection } from './helpers';
+import SideMenu from './side-menu';
+import './index.css';
+var SideToolbar = function SideToolbar() {
+  var editor = useSlateStatic();
+  var scrollRef = useScrollContext();
+  var menuRef = useRef(null);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    slateNode = _useState2[0],
+    setSlateNode = _useState2[1];
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    sidePosition = _useState4[0],
+    setSidePosition = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isActive = _useState6[0],
+    setActive = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isNodeEmpty = _useState8[0],
+    setNodeEmpty = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isShowSideMenu = _useState10[0],
+    setShowSideMenu = _useState10[1];
+  var _useState11 = useState({}),
+    _useState12 = _slicedToArray(_useState11, 2),
+    menuPosition = _useState12[0],
+    setMenuPosition = _useState12[1];
+  var onReset = useCallback(function () {
+    setShowSideMenu(false);
+    setMenuPosition({});
+    setSlateNode(null);
+    setActive(false);
+  }, []);
+  useEffect(function () {
+    var observerRefValue;
+    if (isShowSideMenu) {
+      scrollRef.current.addEventListener('scroll', onReset);
+      observerRefValue = scrollRef.current;
+    } else {
+      scrollRef.current.removeEventListener('scroll', onReset);
+      observerRefValue = null;
+    }
+    return function () {
+      if (observerRefValue) {
+        observerRefValue.removeEventListener('scroll', onReset);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowSideMenu]);
+  useEffect(function () {
+    var handleMouseEnter = function handleMouseEnter(e) {
+      if (isShowSideMenu) return;
+      var dom = e.target;
+      while (((_dom = dom) === null || _dom === void 0 ? void 0 : (_dom$dataset = _dom.dataset) === null || _dom$dataset === void 0 ? void 0 : _dom$dataset.root) !== 'true') {
+        var _dom, _dom$dataset;
+        if (!dom.parentNode) return;
+        dom = dom.parentNode;
+      }
+      var top = getDomTopHeight(dom);
+      var node = ReactEditor.toSlateNode(editor, dom);
+      var isEmpty = Node.string(node) === '';
+      setSidePosition({
+        top: top + scrollRef.current.scrollTop,
+        left: 20
+      });
+      setSlateNode(node);
+      setNodeEmpty(isEmpty);
+    };
+    var eventBus = EventBus.getInstance();
+    var unSubscribeMouseEnter = eventBus.subscribe(INTERNAL_EVENT.ON_MOUSE_ENTER_BLOCK, handleMouseEnter);
+    return unSubscribeMouseEnter;
+  }, [editor, isShowSideMenu, scrollRef]);
+  var onActiveToggle = useCallback(function () {
+    if (isShowSideMenu) return;
+    setActive(!isActive);
+  }, [isActive, isShowSideMenu]);
+  var onShowSideMenuToggle = useCallback(function () {
+    setSelection(editor, slateNode);
+    var _menuRef$current$getB = menuRef.current.getBoundingClientRect(),
+      top = _menuRef$current$getB.top,
+      left = _menuRef$current$getB.left;
+    setShowSideMenu(!isShowSideMenu);
+    setMenuPosition({
+      top: top,
+      left: left
+    });
+  }, [editor, isShowSideMenu, slateNode]);
+  var iconClass = classnames('sdocfont', {
+    'sdoc-more-vertical': !isActive,
+    'sdoc-more-vertical-right': isActive && !isNodeEmpty,
+    'sdoc-append': isActive && isNodeEmpty
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-side-toolbar-container",
+    style: sidePosition
+  }, slateNode && /*#__PURE__*/React.createElement("div", {
+    ref: menuRef,
+    className: "sdoc-side-op-icon",
+    onMouseEnter: onActiveToggle,
+    onMouseLeave: onActiveToggle,
+    onClick: onShowSideMenuToggle
+  }, /*#__PURE__*/React.createElement("span", {
+    className: iconClass
+  })), isShowSideMenu && /*#__PURE__*/React.createElement(SideMenu, {
+    slateNode: slateNode,
+    isNodeEmpty: isNodeEmpty,
+    menuPosition: menuPosition,
+    onReset: onReset
+  }));
+};
+export default SideToolbar;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { UncontrolledPopover } from 'reactstrap';
+import { insertBelowImage, insertBelowTable, insertBelowLink, insertBelowCodeBlock } from './helpers';
+import InsertBlockMenu from './insert-block-menu';
+var InsertBelowMenu = function InsertBelowMenu(_ref) {
+  var target = _ref.target;
+  return /*#__PURE__*/React.createElement(UncontrolledPopover, {
+    target: target,
+    className: "sdoc-side-menu-insert-below-popover",
+    trigger: "hover",
+    placement: "right-start",
+    hideArrow: true,
+    fade: false
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-side-inner-menu"
+  }, /*#__PURE__*/React.createElement(InsertBlockMenu, {
+    insertImage: insertBelowImage,
+    insertTable: insertBelowTable,
+    insertLink: insertBelowLink,
+    insertCodeBlock: insertBelowCodeBlock
+  })));
+};
+export default InsertBelowMenu;

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

@@ -0,0 +1,95 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useCallback, useState } from 'react';
+import { withTranslation } from 'react-i18next';
+import { Transforms } from '@seafile/slate';
+import { useSlateStatic } from '@seafile/slate-react';
+import context from '../../../../context';
+import AddLinkDialog from '../../plugins/link/menu/add-link-dialog';
+import { insertImage } from '../../plugins/image/helpers';
+import { insertTable } from '../../plugins/table/helpers';
+import SideMenuItem from './side-menu-item';
+import TableSizePopover from '../../plugins/table/popover/table-size-popover';
+import { changeToCodeBlock } from '../../plugins/code-block/helpers';
+var InsertBlockMenu = function InsertBlockMenu(_ref) {
+  var propsInsertImage = _ref.insertImage,
+    propsInsertLink = _ref.insertLink,
+    propsInsertTable = _ref.insertTable,
+    propsInsertCodeBlock = _ref.insertCodeBlock,
+    t = _ref.t;
+  var inputRef = useRef(null);
+  var editor = useSlateStatic();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isShowLinkDialog = _useState2[0],
+    setShowLinkDialog = _useState2[1];
+  var onInsertImageToggle = useCallback(function () {
+    if (propsInsertImage) {
+      inputRef.current.click();
+      return;
+    }
+    Transforms.select(editor, editor.selection.focus);
+    inputRef.current.click();
+  }, [editor, propsInsertImage]);
+  var onFileChanged = useCallback(function (event) {
+    var file = event.target.files[0];
+    context.uploadLocalImage(file).then(function (fileUrl) {
+      if (propsInsertImage) {
+        propsInsertImage(editor, fileUrl, editor.selection);
+      } else {
+        insertImage(editor, fileUrl, editor.selection);
+      }
+    });
+  }, [editor, propsInsertImage]);
+  var createTable = useCallback(function (size) {
+    if (propsInsertTable) {
+      propsInsertTable(editor, size, editor.selection);
+    } else {
+      insertTable(editor, size, editor.selection);
+    }
+  }, [editor, propsInsertTable]);
+  var onLinkDialogToggle = useCallback(function () {
+    setShowLinkDialog(!isShowLinkDialog);
+  }, [isShowLinkDialog]);
+  var onInsertCodeBlock = useCallback(function () {
+    if (propsInsertCodeBlock) {
+      propsInsertCodeBlock(editor, 'plaintext');
+    } else {
+      changeToCodeBlock(editor, 'plaintext');
+    }
+  }, [editor, propsInsertCodeBlock]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SideMenuItem, {
+    iconClass: "sdocfont sdoc-image",
+    iconName: t('Image'),
+    onClick: onInsertImageToggle
+  }, /*#__PURE__*/React.createElement("input", {
+    ref: inputRef,
+    type: "file",
+    accept: "image/*",
+    className: "sdoc-upload-locale-image",
+    onChange: onFileChanged
+  })), /*#__PURE__*/React.createElement(SideMenuItem, {
+    menuId: "sdoc-side-menu-item-table",
+    iconClass: "sdocfont sdoc-table",
+    iconName: t('Table'),
+    hasRight: true
+  }, /*#__PURE__*/React.createElement(TableSizePopover, {
+    target: "sdoc-side-menu-item-table",
+    trigger: "hover",
+    placement: "right-start",
+    popperClassName: "sdoc-side-menu-table-size",
+    createTable: createTable
+  })), /*#__PURE__*/React.createElement(SideMenuItem, {
+    iconClass: "sdocfont sdoc-link",
+    iconName: t('Link'),
+    onClick: onLinkDialogToggle
+  }, isShowLinkDialog && /*#__PURE__*/React.createElement(AddLinkDialog, {
+    editor: editor,
+    insertLink: propsInsertLink,
+    onLinkDialogToggle: onLinkDialogToggle
+  })), /*#__PURE__*/React.createElement(SideMenuItem, {
+    iconClass: "sdocfont sdoc-code-block",
+    iconName: t('Code_block'),
+    onClick: onInsertCodeBlock
+  }));
+};
+export default withTranslation('sdoc-editor')(InsertBlockMenu);

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

@@ -0,0 +1,35 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useState } from 'react';
+var SideMenuItem = function SideMenuItem(_ref) {
+  var menuId = _ref.menuId,
+    iconClass = _ref.iconClass,
+    iconName = _ref.iconName,
+    _ref$hasRight = _ref.hasRight,
+    hasRight = _ref$hasRight === void 0 ? false : _ref$hasRight,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children,
+    onClick = _ref.onClick;
+  // onMount
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isShowChildren = _useState2[0],
+    setShowChildren = _useState2[1];
+  useEffect(function () {
+    setShowChildren(!isShowChildren);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: menuId,
+    className: "sdoc-side-menu-item",
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "sdoc-side-menu-item__left"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: iconClass
+  }), /*#__PURE__*/React.createElement("span", null, iconName)), hasRight && /*#__PURE__*/React.createElement("span", {
+    className: "sdoc-side-menu-item__right"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "sdocfont sdoc-right-slide"
+  })), isShowChildren && children);
+};
+export default React.memo(SideMenuItem);

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

@@ -0,0 +1,64 @@
+.sdoc-side-menu-popover {
+  position: absolute;
+}
+
+.sdoc-side-menu {
+  position: absolute;
+  width: 200px;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, .12);
+  border-radius: 4px;
+  transform: translateX(-200px);
+  padding: 8px 0px;
+  box-shadow: 0 2px 12px 2px rgba(68, 73, 77, .16);
+  z-index: 999;
+}
+
+.sdoc-side-menu .sdoc-side-menu-item:nth-child(2),
+.sdoc-side-inner-menu .sdoc-side-menu-item:nth-child(2) {
+  border-bottom: 1px solid var(--border-weak,rgba(0,0,0,.04));
+}
+
+.sdoc-side-menu .sdoc-side-menu-item,
+.sdoc-side-inner-menu .sdoc-side-menu-item {
+  padding: 6px 16px;
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+}
+
+.sdoc-side-menu .sdoc-upload-locale-image,
+.sdoc-side-inner-menu .sdoc-upload-locale-image {
+  display: none;
+}
+
+.sdoc-side-menu .sdoc-side-menu-item:hover,
+.sdoc-side-inner-menu .sdoc-side-menu-item:hover {
+  background-color: #F2F2F2;
+  border-radius: 2px;
+}
+
+.sdoc-side-menu .sdoc-side-menu-item :nth-child(2),
+.sdoc-side-inner-menu .sdoc-side-menu-item :nth-child(2) {
+  transform: scale(0.6);
+}
+
+.sdoc-side-menu .sdoc-side-menu-item :first-child,
+.sdoc-side-inner-menu .sdoc-side-menu-item :first-child {
+  padding-right: 5px;
+  font-size: 12px;
+}
+
+.sdoc-side-menu-insert-below-popover .popover {
+  background-color: #fff;
+  min-width: 150px;
+  min-height: 120px;
+  border-radius: 2px;
+  left: -6px !important;
+  cursor: pointer;
+}
+
+.sdoc-side-operation-translate-popover .popover,
+.sdoc-selected-table-size-popover .sdoc-side-menu-table-size {
+  left: -6px !important;
+}

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

@@ -0,0 +1,76 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { withTranslation } from 'react-i18next';
+import { useSlateStatic } from '@seafile/slate-react';
+import EventBus from '../../../utils/event-bus';
+import { ElementPopover } from '../../commons';
+import InsertBelowMenu from './insert-below-menu';
+import InsertBlockMenu from './insert-block-menu';
+import SideMenuItem from './side-menu-item';
+import { onCopyNode, onDeleteNode } from './helpers';
+import './side-menu.css';
+import TransformMenus from './transform-menus';
+var SideMenu = function SideMenu(_ref) {
+  var slateNode = _ref.slateNode,
+    isNodeEmpty = _ref.isNodeEmpty,
+    menuPosition = _ref.menuPosition,
+    onReset = _ref.onReset,
+    t = _ref.t;
+  var editor = useSlateStatic();
+  useEffect(function () {
+    var eventBus = EventBus.getInstance();
+    var unsubscribeChange = eventBus.subscribe('change', onReset);
+    return unsubscribeChange;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onCopy = useCallback(function () {
+    onCopyNode(editor);
+    onReset();
+  }, [editor, onReset]);
+  var onCut = useCallback(function () {
+    onCopyNode(editor);
+    onDeleteNode(editor, slateNode);
+    onReset();
+  }, [editor, onReset, slateNode]);
+  var onDelete = useCallback(function () {
+    onDeleteNode(editor, slateNode);
+    onReset();
+  }, [editor, onReset, slateNode]);
+  var menuStyle = useMemo(function () {
+    return "top: ".concat(menuPosition.top, "px; left: ").concat(menuPosition.left, "px");
+  }, [menuPosition]);
+  return /*#__PURE__*/React.createElement(ElementPopover, {
+    className: "sdoc-side-menu-popover",
+    style: menuStyle
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-side-menu"
+  }, /*#__PURE__*/React.createElement(SideMenuItem, {
+    menuId: "sdoc-side-menu-item__transform",
+    iconClass: "sdocfont sdoc-table-of-content",
+    iconName: t('Transform_to'),
+    hasRight: true
+  }, /*#__PURE__*/React.createElement(TransformMenus, {
+    target: "sdoc-side-menu-item__transform",
+    slateNode: slateNode,
+    onReset: onReset
+  })), isNodeEmpty && /*#__PURE__*/React.createElement(InsertBlockMenu, null), !isNodeEmpty && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SideMenuItem, {
+    menuId: "sdoc-side-menu-item__below",
+    iconClass: "sdocfont sdoc-insert",
+    iconName: t('Insert_below'),
+    hasRight: true
+  }, /*#__PURE__*/React.createElement(InsertBelowMenu, {
+    target: "sdoc-side-menu-item__below"
+  })), /*#__PURE__*/React.createElement(SideMenuItem, {
+    iconClass: "sdocfont sdoc-copy",
+    iconName: t('Copy'),
+    onClick: onCopy
+  }), /*#__PURE__*/React.createElement(SideMenuItem, {
+    iconClass: "sdocfont sdoc-cut",
+    iconName: t('Cut'),
+    onClick: onCut
+  }), /*#__PURE__*/React.createElement(SideMenuItem, {
+    iconClass: "sdocfont sdoc-delete",
+    iconName: t('Delete'),
+    onClick: onDelete
+  }))));
+};
+export default withTranslation('sdoc-editor')(SideMenu);