@seafile/sdoc-editor 0.1.125 → 0.1.127

package/dist/basic-sdk/extension/plugins/sdoc-link/{menu/local-files.js → dialogs/select-sdoc-file-dialog/local-files/index.js}

@@ -2,12 +2,13 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useState, useRef, useEffect } from 'react';
 import { withTranslation } from 'react-i18next';
+import classnames from 'classnames';
 import slugid from 'slugid';
-import context from '../../../../../context';
-import { getErrorMsg } from '../../../../../utils';
-import toaster from '../../../../../components/toast';
-import { getParentPathNameArr, getNewFileListData } from '../helpers';
-import './local-files.css';
+import context from '../../../../../../../context';
+import { getErrorMsg } from '../../../../../../../utils';
+import toaster from '../../../../../../../components/toast';
+import { getParentPathNameArr, getNewFileListData } from '../../../helpers';
+import './index.css';
 var LocalFiles = function LocalFiles(_ref) {
   var onSelectedFile = _ref.onSelectedFile,
     toggle = _ref.toggle,
@@ -72,6 +73,7 @@ var LocalFiles = function LocalFiles(_ref) {
       getFileData(p, item.indexId, fileListData);
       expandedFolder.add(item.indexId);
     }
+    onSelectedFile(null);
     setCurrentActiveItem(item);
     setExpandedFolder(new Set(Array.from(expandedFolder)));
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -83,51 +85,59 @@ var LocalFiles = function LocalFiles(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   var renderFileTree = useCallback(function (data) {
-    if (!Array.isArray(data)) {
-      return null;
-    }
+    if (!Array.isArray(data) || data.length === 0) return null;
     return data.map(function (item) {
       var _item$children, _item$children2;
+      if (!item) return null;
+      var type = item.type,
+        indexId = item.indexId,
+        name = item.name;
+      var selected = (currentActiveItem === null || currentActiveItem === void 0 ? void 0 : currentActiveItem.indexId) === indexId;
       return /*#__PURE__*/React.createElement("div", {
-        key: item.indexId,
-        className: "sdoc-local-folder-container"
-      }, item.type === 'dir' && /*#__PURE__*/React.createElement("div", {
+        key: indexId,
+        className: "sdoc-folder-container"
+      }, type === 'dir' && /*#__PURE__*/React.createElement("div", {
         ref: folderRef,
-        className: "sdoc-local-folder",
+        className: "sdoc-folder"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classnames('sdoc-folder-info sdoc-file-info', {
+          'active': selected,
+          'expanded': expandedFolder.has(indexId)
+        }),
         onClick: function onClick(e) {
-          onToggle(e, item, fileListData);
+          return onToggle(e, item, fileListData);
         }
       }, /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-local-folder-info ".concat((currentActiveItem === null || currentActiveItem === void 0 ? void 0 : currentActiveItem.indexId) === item.indexId ? 'active' : 'inactive')
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "".concat(expandedFolder.has(item.indexId) ? 'icon-drop-down-scale' : '')
+        className: "sdoc-file-icon-container"
       }, /*#__PURE__*/React.createElement("i", {
-        className: "sdocfont ".concat(expandedFolder.has(item.indexId) ? 'sdoc-drop-down' : 'sdoc-right-slide')
-      })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("i", {
-        className: "sdocfont sdoc-file"
+        className: "sdoc-file-icon sdoc-file-icon-toggle sdocfont sdoc-right-slide"
+      }), /*#__PURE__*/React.createElement("i", {
+        className: "sdoc-file-icon sdocfont sdoc-file sdoc-folder-icon"
       })), /*#__PURE__*/React.createElement("span", {
-        className: "sdoc-folder-name"
-      }, item.name)), /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-local-folder-children"
-      }, (item === null || item === void 0 ? void 0 : (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) === 0 && /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-local-folder-children-empty"
-      }, t('Empty')), (item === null || item === void 0 ? void 0 : (_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length) > 0 && renderFileTree(item.children))), item.type === 'file' && /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-local-file-item ".concat((currentActiveItem === null || currentActiveItem === void 0 ? void 0 : currentActiveItem.indexId) === item.indexId ? 'active' : 'inactive'),
+        className: "sdoc-folder-name sdoc-file-name"
+      }, name)), /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-folder-children"
+      }, ((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) === 0 && /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-folder-children-empty"
+      }, "(".concat(t('Empty'), ")")), ((_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length) > 0 && renderFileTree(item.children))), type === 'file' && /*#__PURE__*/React.createElement("div", {
+        className: classnames('sdoc-file-info', {
+          'active': selected
+        }),
         onClick: function onClick(e) {
           onSelectFile(e, item);
         }
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "sdoc-local-file-icon"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-file-icon-container"
       }, /*#__PURE__*/React.createElement("i", {
-        className: "sdocfont sdoc-document"
+        className: "sdoc-file-icon sdocfont sdoc-document"
       })), /*#__PURE__*/React.createElement("span", {
-        className: "sdoc-local-file-name"
-      }, item.name)));
+        className: "sdoc-file-name"
+      }, name)));
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fileListData, currentActiveItem, expandedFolder]);
   return /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-local-files-library"
+    className: "sdoc-files-tree"
   }, renderFileTree(fileListData));
 };
 export default withTranslation('sdoc-editor')(LocalFiles);

package/dist/basic-sdk/extension/plugins/sdoc-link/{menu/sdoc-link-hover-menu.js → hover-menu/index.js}

@@ -6,7 +6,7 @@ import { withTranslation } from 'react-i18next';
 import { ElementPopover } from '../../../commons';
 import toaster from '../../../../../components/toast';
 import { getUrl, onCopySdocLinkNode } from '../helpers';
-import './sdoc-link-hover-menu.css';
+import './index.css';
 var SdocLinkHoverMenu = function SdocLinkHoverMenu(_ref) {
   var editor = _ref.editor,
     menuPosition = _ref.menuPosition,

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

@@ -5,7 +5,7 @@ import { withTranslation } from 'react-i18next';
 import { SDOC_LINK, MENUS_CONFIG_MAP } from '../../../constants';
 import { MenuItem } from '../../../commons';
 import { getType, isMenuDisabled } from '../helpers';
-import InsertSdocFileDialog from './sdoc-link-file-dialog';
+import SelectSdocFileDialog from '../dialogs/select-sdoc-file-dialog';
 import './index.css';
 var SdocLinkMenu = function SdocLinkMenu(_ref) {
   var isRichEditor = _ref.isRichEditor,
@@ -77,9 +77,9 @@ var SdocLinkMenu = function SdocLinkMenu(_ref) {
     onMouseDown: onInsertSdocFile
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("i", {
     className: "sdocfont sdoc-document"
-  })), /*#__PURE__*/React.createElement("span", null, t('Sdoc_document')))), showInsertDialog && /*#__PURE__*/React.createElement(InsertSdocFileDialog, {
+  })), /*#__PURE__*/React.createElement("span", null, t('Sdoc_document')))), showInsertDialog && /*#__PURE__*/React.createElement(SelectSdocFileDialog, {
     editor: editor,
-    onDialogToggle: onDialogToggle
+    toggle: onDialogToggle
   }));
 };
 export default withTranslation('sdoc-editor')(SdocLinkMenu);

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

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useState, useRef } from 'react';
 import { Range } from '@seafile/slate';
 import { useScrollContext } from '../../../hooks/use-scroll-context';
 import { unwrapLinkNode, getUrl } from './helpers';
-import InsertHoverMenu from './menu/sdoc-link-hover-menu';
+import HoverMenu from './hover-menu';
 import './render-elem.css';
 var SdocFileLink = function SdocFileLink(_ref) {
   var editor = _ref.editor,
@@ -104,7 +104,7 @@ var SdocFileLink = function SdocFileLink(_ref) {
       e.preventDefault();
     },
     title: element.title
-  }, children))), isShowInsertHoverMenu && Range.isCollapsed(editor.selection) && /*#__PURE__*/React.createElement(InsertHoverMenu, {
+  }, children))), isShowInsertHoverMenu && Range.isCollapsed(editor.selection) && /*#__PURE__*/React.createElement(HoverMenu, {
     editor: editor,
     menuPosition: menuPosition,
     element: element,

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

@@ -106,15 +106,22 @@ var TableSizePopover = /*#__PURE__*/function (_Component) {
       var _this$state2 = this.state,
         selectedSize = _this$state2.selectedSize,
         isShowCustomSizeDialog = _this$state2.isShowCustomSizeDialog;
-      var t = this.props.t;
+      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: "legacy",
-        placement: "bottom-start",
+        trigger: trigger,
+        placement: placement,
         hideArrow: true,
         fade: false,
-        ref: this.setRef
+        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", {

package/dist/basic-sdk/extension/plugins/table/render/table-root.js

@@ -34,6 +34,7 @@ var TableRoot = function TableRoot(_ref) {
     className: classnames('sdoc-table-wrapper position-relative', attributes.className, {
       'scroll': allWidth > editor.width
     }),
+    "data-root": "true",
     style: _objectSpread(_objectSpread({}, attributes.style), {}, {
       maxWidth: editor.width ? editor.width : '100%'
     })

package/dist/basic-sdk/extension/render/render-element.js

@@ -1,14 +1,23 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useSlateStatic } from '@seafile/slate-react';
 import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, LIST_LIC, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, CODE_LINE, IMAGE, ELEMENT_TYPE, SDOC_LINK } from '../constants';
 import { BlockquotePlugin, LinkPlugin, CheckListPlugin, HeaderPlugin, ListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, SdocLinkPlugin, ParagraphPlugin } from '../plugins';
+import EventBus from '../../utils/event-bus';
+import { INTERNAL_EVENT } from '../../constants';
 var CustomElement = function CustomElement(props) {
   var editor = useSlateStatic();
-  var element = props.element;
+  var element = props.element,
+    attributes = props.attributes;
+  var onMouseEnter = useCallback(function (event) {
+    event.stopPropagation();
+    var eventBus = EventBus.getInstance();
+    eventBus.dispatch(INTERNAL_EVENT.ON_MOUSE_ENTER_BLOCK, event);
+  }, []);
   switch (element.type) {
     case PARAGRAPH:
       {
+        attributes['onMouseEnter'] = onMouseEnter;
         var _ParagraphPlugin$rend = _slicedToArray(ParagraphPlugin.renderElements, 1),
           renderParagraph = _ParagraphPlugin$rend[0];
         return renderParagraph(props);
@@ -20,6 +29,7 @@ var CustomElement = function CustomElement(props) {
     case HEADER5:
     case HEADER6:
       {
+        attributes['onMouseEnter'] = onMouseEnter;
         var _HeaderPlugin$renderE = _slicedToArray(HeaderPlugin.renderElements, 1),
           renderHeader = _HeaderPlugin$renderE[0];
         return renderHeader(props, editor);
@@ -32,6 +42,7 @@ var CustomElement = function CustomElement(props) {
       }
     case BLOCKQUOTE:
       {
+        attributes['onMouseEnter'] = onMouseEnter;
         var _BlockquotePlugin$ren = _slicedToArray(BlockquotePlugin.renderElements, 1),
           renderBlockquote = _BlockquotePlugin$ren[0];
         return renderBlockquote(props, editor);
@@ -45,6 +56,7 @@ var CustomElement = function CustomElement(props) {
       }
     case LIST_ITEM:
       {
+        attributes['onMouseEnter'] = onMouseEnter;
         var _ListPlugin$renderEle2 = _slicedToArray(ListPlugin.renderElements, 2),
           renderListItem = _ListPlugin$renderEle2[1];
         return renderListItem(props, editor);
@@ -57,14 +69,14 @@ var CustomElement = function CustomElement(props) {
       }
     case CHECK_LIST_ITEM:
       {
-        var _CheckListPlugin$rend = _slicedToArray(CheckListPlugin.renderElements, 2),
-          CheckListItem = _CheckListPlugin$rend[1];
-        return /*#__PURE__*/React.createElement(CheckListItem, Object.assign({}, props, {
-          editor: editor
-        }));
+        attributes['onMouseEnter'] = onMouseEnter;
+        var _CheckListPlugin$rend = _slicedToArray(CheckListPlugin.renderElements, 1),
+          renderCheckListItem = _CheckListPlugin$rend[0];
+        return renderCheckListItem(props, editor);
       }
     case CODE_BLOCK:
       {
+        attributes['onMouseEnter'] = onMouseEnter;
         var _CodeBlockPlugin$rend = _slicedToArray(CodeBlockPlugin.renderElements, 1),
           renderCodeBlock = _CodeBlockPlugin$rend[0];
         return renderCodeBlock(props, editor);
@@ -83,6 +95,7 @@ var CustomElement = function CustomElement(props) {
       }
     case ELEMENT_TYPE.TABLE:
       {
+        attributes['onMouseEnter'] = onMouseEnter;
         var _TablePlugin$renderEl = _slicedToArray(TablePlugin.renderElements, 1),
           renderTable = _TablePlugin$renderEl[0];
         return renderTable(props, editor);

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;