@seafile/sdoc-editor 0.1.88 → 0.1.90

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

@@ -6,7 +6,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { MENUS_CONFIG_MAP, ORDERED_LIST, UNORDERED_LIST } from '../../../constants';
 import { focusEditor } from '../../../core';
-import { MenuItem } from '../../../menu';
+import { MenuItem } from '../../../commons';
 import { getListType, isMenuDisabled, setListType } from '../helpers';
 var ListMenu = /*#__PURE__*/function (_React$Component) {
   _inherits(ListMenu, _React$Component);

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

@@ -5,8 +5,8 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
 import { withTranslation } from 'react-i18next';
 import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Label } from 'reactstrap';
-import NumberInput from '../../number-input';
 import { TABLE_MAX_ROWS, TABLE_MAX_COLUMNS } from '../../constants';
+import NumberInput from './number-input';
 import './index.css';
 var CustomTableSizeDialog = /*#__PURE__*/function (_Component) {
   _inherits(CustomTableSizeDialog, _Component);

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

@@ -6,13 +6,12 @@ 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 } from '../../constants';
+import { ELEMENT_TYPE, KEYBOARD, CLIPBOARD_FORMAT_KEY } 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 { EXTERNAL_EVENT, PAGE_EDIT_AREA_WIDTH } from '../../../../constants';
 import ObjectUtils from '../../../utils/object-utils';
 import { replacePastedDataId } from '../../../node-id/helpers';
-import { CLIPBOARD_FORMAT_KEY } from '../../../constants';
 export var isTableMenuDisabled = function isTableMenuDisabled(editor) {
   var selection = editor.selection;
   if (selection === null) return true;

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

@@ -17,9 +17,9 @@ var CommonMenu = /*#__PURE__*/function (_Component) {
         className = _this$props.className,
         disabled = _this$props.disabled;
       var itemClass = 'btn btn-icon btn-secondary btn-active d-flex';
-      if (!isRichEditor) return itemClass + ' ' + className;
+      if (!isRichEditor) return itemClass + ' ' + className + ' sdoc-menu-with-dropdown';
       itemClass = "rich-icon-btn d-flex ".concat(disabled ? 'rich-icon-btn-disabled' : 'rich-icon-btn-hover');
-      return itemClass + ' ' + className;
+      return itemClass + ' ' + className + ' sdoc-menu-with-dropdown';
     };
     _this.hidePopover = function () {
       _this.ref && _this.ref.toggle && _this.ref.toggle();
@@ -53,11 +53,15 @@ var CommonMenu = /*#__PURE__*/function (_Component) {
         id: id,
         type: "button",
         className: className
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-menu-with-dropdown-icon"
       }, /*#__PURE__*/React.createElement("i", {
         className: iconClass
-      }), /*#__PURE__*/React.createElement("span", {
-        className: "sdocfont sdoc-".concat(isShowMenu ? 'caret-up' : 'drop-down')
-      })), /*#__PURE__*/React.createElement(UncontrolledPopover, {
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-menu-with-dropdown-triangle"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "sdoc-menu-with-dropdown-triangle-icon sdocfont sdoc-".concat(isShowMenu ? 'caret-up' : 'drop-down')
+      }))), /*#__PURE__*/React.createElement(UncontrolledPopover, {
         target: id,
         className: "sdoc-common-menu-popover",
         trigger: "legacy",

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

@@ -1,11 +1,20 @@
 .sdoc-table-menu-group.menu-group .menu-group-item:not(.sdoc-remove-table) {
-  width: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  width: 36px;
 }
 
-.sdoc-table-menu-group .sdoc-drop-down,
-.sdoc-table-menu-group .sdoc-caret-up {
-  transform: scale(.8);
+.sdoc-table-menu-group .sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-icon {
+  width: 24px;
+}
+
+.sdoc-table-menu-group .sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-triangle {
+  width: 12px;
+}
+
+.sdoc-table-menu-group .sdoc-color-menu .last-used-color-container {
+  height: 100%;
+  padding-top: 2px;
+}
+
+.sdoc-color-menu-popover.sdoc-table-cell-bg-colors-popover .popover {
+  left: -24px !important;
 }

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

@@ -7,12 +7,11 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
 import { withTranslation } from 'react-i18next';
 import classnames from 'classnames';
-import { MenuGroup, MenuItem } from '../../../../menu';
+import { ColorMenu, MenuGroup, MenuItem } from '../../../../commons';
 import CommonMenu from './common-menu';
 import { MENUS_CONFIG_MAP, REMOVE_TABLE, BG_COLOR } from '../../../../constants';
 import { setCellStyle, insertTableElement, removeTableElement, isAllInTable } from '../../helpers';
 import { TABLE_ELEMENT } from '../../constants';
-import ColorMenu from '../../../../menu/color-menu';
 import './index.css';
 var ActiveTableMenu = /*#__PURE__*/function (_Component) {
   _inherits(ActiveTableMenu, _Component);
@@ -57,7 +56,7 @@ var ActiveTableMenu = /*#__PURE__*/function (_Component) {
       var t = _this.props.t;
       return /*#__PURE__*/React.createElement(CommonMenu, {
         id: "text-align",
-        iconClass: "sdocfont sdoc-align-left mr-1",
+        iconClass: "sdocfont sdoc-align-left",
         ref: function ref(_ref) {
           return _this.textAlignRef = _ref;
         }
@@ -82,7 +81,7 @@ var ActiveTableMenu = /*#__PURE__*/function (_Component) {
       var t = _this.props.t;
       return /*#__PURE__*/React.createElement(CommonMenu, {
         id: "table-column",
-        iconClass: "sdocfont sdoc-column mr-1",
+        iconClass: "sdocfont sdoc-column",
         ref: function ref(_ref2) {
           return _this.tableColumnRef = _ref2;
         }
@@ -98,7 +97,7 @@ var ActiveTableMenu = /*#__PURE__*/function (_Component) {
       var t = _this.props.t;
       return /*#__PURE__*/React.createElement(CommonMenu, {
         id: "table-row",
-        iconClass: "sdocfont sdoc-row mr-1",
+        iconClass: "sdocfont sdoc-row",
         ref: function ref(_ref3) {
           return _this.tableRowRef = _ref3;
         }
@@ -144,7 +143,9 @@ var ActiveTableMenu = /*#__PURE__*/function (_Component) {
       }, menuConfig), {}, {
         onMouseDown: function onMouseDown() {},
         setColor: _this.setColor,
-        localStorageKey: 'sdoc-recent-used-bg-colors'
+        recentUsedColorsKey: 'sdoc-recent-used-bg-colors',
+        lastUsedColorKey: 'sdoc-last-used-bg-colors',
+        popoverClassName: 'sdoc-table-cell-bg-colors-popover'
       });
       return /*#__PURE__*/React.createElement(ColorMenu, props);
     };

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

@@ -6,12 +6,12 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { withTranslation } from 'react-i18next';
 import ObjectUtils from '../../../../../utils/object-utils';
+import { ElementPopover } from '../../../../commons';
 import { ELEMENT_TYPE } from '../../../../constants';
-import InsertTableElement from './insert-table-element';
 import { getSelectedNodeByType } from '../../../../core';
 import { TABLE_MAX_COLUMNS, TABLE_MAX_ROWS, TABLE_ELEMENT, TABLE_ELEMENT_POSITION } from '../../constants';
 import { insertTableElement, removeTableElement } from '../../helpers';
-import ModalPortal from '../../../../commons/modal-portal';
+import InsertTableElement from './insert-table-element';
 import './index.css';
 var TableContextMenu = /*#__PURE__*/function (_React$Component) {
   _inherits(TableContextMenu, _React$Component);
@@ -98,7 +98,7 @@ var TableContextMenu = /*#__PURE__*/function (_React$Component) {
       var selectedCols = tableSelectedRange.maxColIndex - tableSelectedRange.minColIndex + 1;
       var canAddRowsCount = currentRowsCount + selectedRows > TABLE_MAX_ROWS ? TABLE_MAX_ROWS - currentRowsCount : selectedRows;
       var canAddColsCount = currentColumnsCount + selectedCols > TABLE_MAX_COLUMNS ? TABLE_MAX_COLUMNS - currentColumnsCount : selectedCols;
-      return /*#__PURE__*/React.createElement(ModalPortal, {
+      return /*#__PURE__*/React.createElement(ElementPopover, {
         className: "sdoc-context-menu"
       }, /*#__PURE__*/React.createElement("div", {
         style: contextStyle,

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

@@ -7,7 +7,7 @@ import React from 'react';
 import { withTranslation } from 'react-i18next';
 import { insertTable, isTableMenuDisabled } from '../../helpers';
 import { TABLE, MENUS_CONFIG_MAP } from '../../../../constants';
-import { MenuItem } from '../../../../menu';
+import { MenuItem } from '../../../../commons';
 import TableSizePopover from '../../popover/table-size-popover';
 var TableMenu = /*#__PURE__*/function (_React$Component) {
   _inherits(TableMenu, _React$Component);

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

@@ -4,13 +4,12 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import isHotkey from 'is-hotkey';
 import { Editor, Transforms, Path } from '@seafile/slate';
 import { getNodeType, getParentNode, getSelectedNodeByType, isLastNode, generateEmptyElement } from '../../core';
-import { ELEMENT_TYPE, KEYBOARD, PARAGRAPH } from '../../constants';
+import { ELEMENT_TYPE, KEYBOARD, PARAGRAPH, CLIPBOARD_FORMAT_KEY } from '../../constants';
 import { TABLE_MAX_ROWS, EMPTY_SELECTED_RANGE, TABLE_ELEMENT, TABLE_ELEMENT_POSITION } from './constants';
 import ObjectUtils from '../../../utils/object-utils';
 import { getSelectedInfo, insertTableElement, removeTable, insertMultipleRowsAndColumns, setTableFragmentData, deleteTableRangeData, focusCell, deleteHandler, isTableLocation, isLastTableCell } from './helpers';
 import EventBus from '../../../utils/event-bus';
 import { EXTERNAL_EVENT } from '../../../../constants';
-import { CLIPBOARD_FORMAT_KEY } from '../../../constants';
 var withTable = function withTable(editor) {
   var insertBreak = editor.insertBreak,
     deleteBackward = editor.deleteBackward,

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

@@ -48,7 +48,7 @@ var TableCell = function TableCell(_ref) {
   }
   if (ObjectUtils.hasProperty(element.style, STYLE_KEY.BG_COLOR)) {
     var color = element.style[STYLE_KEY.BG_COLOR];
-    if (color && (color !== 'transparent' || color !== 'unset')) {
+    if (color && color !== 'transparent' && color !== 'unset') {
       style['backgroundColor'] = isSelected ? colorBlend(SELECTED_TABLE_CELL_BG_COLOR, color, 0.9) : color;
     }
   }
@@ -88,7 +88,7 @@ function renderTableCell(props) {
     if (ObjectUtils.hasProperty(element, STYLE_KEY.TEXT_ALIGN)) {
       style[STYLE_KEY.TEXT_ALIGN] = element[STYLE_KEY.TEXT_ALIGN];
     }
-    if (ObjectUtils.hasProperty(element.style, STYLE_KEY.BG_COLOR)) {
+    if (ObjectUtils.hasProperty(element.style, STYLE_KEY.BG_COLOR) && element.style[STYLE_KEY.BG_COLOR]) {
       style['backgroundColor'] = element.style[STYLE_KEY.BG_COLOR];
     }
     var column = getCellColumn(editor, element);

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

@@ -1,116 +1,87 @@
-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 _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useState, useCallback } from 'react';
+import { UncontrolledPopover } from 'reactstrap';
 import { withTranslation } from 'react-i18next';
 import classnames from 'classnames';
 import { getAlignType, isMenuDisabled, setAlignType } from '../helpers';
 import { TEXT_ALIGN, MENUS_CONFIG_MAP } from '../../../constants';
-import './style.css';
-var TextAlignMenu = /*#__PURE__*/function (_React$Component) {
-  _inherits(TextAlignMenu, _React$Component);
-  var _super = _createSuper(TextAlignMenu);
-  function TextAlignMenu(props) {
-    var _this;
-    _classCallCheck(this, TextAlignMenu);
-    _this = _super.call(this, props);
-    _this.registerEventHandler = function () {
-      document.addEventListener('click', _this.onHideTextAlignMenu, true);
-    };
-    _this.unregisterEventHandler = function () {
-      document.removeEventListener('click', _this.onHideTextAlignMenu, true);
-    };
-    _this.onHideTextAlignMenu = function (e) {
-      var menu = _this.menu;
-      var clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target;
-      if (clickIsInMenu) return;
-      _this.setState({
-        isDropdownMenuOpen: false
-      }, function () {
-        _this.unregisterEventHandler();
-      });
-    };
-    _this.getCurrentType = function () {
-      var editor = _this.props.editor;
-      return getAlignType(editor);
-    };
-    _this.isActive = function (type) {
-      return _this.getCurrentType() === type;
-    };
-    _this.isDisabled = function () {
-      var editor = _this.props.editor;
-      return isMenuDisabled(editor);
-    };
-    _this.onToggleClick = function (event) {
-      event.stopPropagation();
-      event.nativeEvent.stopImmediatePropagation();
-      var isDropdownMenuOpen = !_this.state.isDropdownMenuOpen;
-      if (isDropdownMenuOpen) {
-        _this.setState({
-          isDropdownMenuOpen: isDropdownMenuOpen
-        }, function () {
-          _this.registerEventHandler();
-        });
-      } else {
-        _this.setState({
-          isDropdownMenuOpen: isDropdownMenuOpen
-        }, function () {
-          _this.unregisterEventHandler();
-        });
+var TextAlignMenu = function TextAlignMenu(_ref) {
+  var isRichEditor = _ref.isRichEditor,
+    className = _ref.className,
+    editor = _ref.editor;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isShowMenu = _useState2[0],
+    setMenuShow = _useState2[1];
+  var popoverRef = useRef(null);
+  var disabled = isMenuDisabled(editor);
+  var buttonId = 'sdoc-button-text-align';
+  var toggle = useCallback(function (event) {
+    popoverRef.current.toggle();
+    setMenuShow(!isShowMenu);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowMenu]);
+  var getCurrentType = useCallback(function () {
+    return getAlignType(editor);
+  }, [editor]);
+  var setType = useCallback(function (type) {
+    setAlignType(editor, type);
+    toggle();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, isShowMenu]);
+  var validClassName = classnames(className, 'sdoc-menu-with-dropdown', {
+    '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 curType = getCurrentType();
+  var curIcon = MENUS_CONFIG_MAP[TEXT_ALIGN].filter(function (item) {
+    return item.type === curType;
+  })[0].iconClass;
+  var caretIconClass = "sdoc-menu-with-dropdown-triangle-icon sdocfont sdoc-".concat(isShowMenu ? 'caret-up' : 'drop-down');
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: validClassName,
+    id: buttonId,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-menu-with-dropdown-icon"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: curIcon
+  })), !disabled && /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-menu-with-dropdown-triangle"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: caretIconClass
+  }))), !disabled && /*#__PURE__*/React.createElement(UncontrolledPopover, {
+    target: buttonId,
+    className: "sdoc-menu-popover sdoc-dropdown-menu",
+    trigger: "legacy",
+    placement: "bottom-start",
+    hideArrow: true,
+    toggle: toggle,
+    fade: false,
+    ref: popoverRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pt-2 pb-2"
+  }, MENUS_CONFIG_MAP[TEXT_ALIGN].map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: "sdoc-dropdown-menu-item",
+      onClick: function onClick() {
+        return setType(item.type);
       }
-    };
-    _this.setType = function (type) {
-      var editor = _this.props.editor;
-      setAlignType(editor, type);
-      _this.setState({
-        isDropdownMenuOpen: false
-      }, function () {
-        _this.unregisterEventHandler();
-      });
-    };
-    _this.setMenuRef = function (ref) {
-      _this.menu = ref;
-    };
-    _this.state = {
-      isDropdownMenuOpen: false
-    };
-    return _this;
-  }
-  _createClass(TextAlignMenu, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var isDropdownMenuOpen = this.state.isDropdownMenuOpen;
-      var caretIconClass = "caret-icon sdocfont sdoc-".concat(isDropdownMenuOpen ? 'caret-up' : 'drop-down');
-      var curType = this.getCurrentType();
-      var curIcon = MENUS_CONFIG_MAP[TEXT_ALIGN].filter(function (item) {
-        return item.type == curType;
-      })[0].iconClass;
-      var disabled = this.isDisabled();
-      return /*#__PURE__*/React.createElement("div", {
-        className: "align-menu"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classnames('align-toggle px-2', {
-          'align-toggle-disabled': disabled
-        }),
-        onClick: disabled ? function () {} : this.onToggleClick
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "mr-1 ".concat(curIcon)
-      }), !disabled && /*#__PURE__*/React.createElement("span", {
-        className: caretIconClass
-      })), isDropdownMenuOpen && /*#__PURE__*/React.createElement("div", {
-        ref: this.setMenuRef,
-        className: "align-popover sdoc-dropdown-menu"
-      }, MENUS_CONFIG_MAP[TEXT_ALIGN].map(function (item, index) {
-        return /*#__PURE__*/React.createElement("span", {
-          key: index,
-          className: "sdoc-dropdown-menu-item ".concat(item.iconClass),
-          onClick: _this2.setType.bind(_this2, item.type)
-        });
-      })));
-    }
-  }]);
-  return TextAlignMenu;
-}(React.Component);
+    }, /*#__PURE__*/React.createElement("i", {
+      className: item.iconClass
+    }));
+  }))));
+};
+TextAlignMenu.defaultProps = {
+  isRichEditor: true,
+  className: 'menu-group-item'
+};
 export default withTranslation('sdoc-editor')(TextAlignMenu);

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

@@ -4,15 +4,14 @@ import { withTranslation } from 'react-i18next';
 import { Editor } from '@seafile/slate';
 import { TEXT_STYLE, TEXT_STYLE_MORE, MENUS_CONFIG_MAP, ELEMENT_TYPE } from '../../../constants';
 import { focusEditor } from '../../../core';
-import { MenuItem } from '../../../menu';
+import { MenuItem, ColorMenu, MoreDropdown } from '../../../commons';
 import { getValue, isMenuDisabled, addMark, removeMark } from '../helpers';
-import MoreDropdown from '../../../../../components/more-dropdown';
-import ColorMenu from '../../../menu/color-menu';
 var TextStyleMenuList = function TextStyleMenuList(_ref) {
   var editor = _ref.editor,
     t = _ref.t,
     isRichEditor = _ref.isRichEditor,
-    className = _ref.className;
+    className = _ref.className,
+    idPrefix = _ref.idPrefix;
   var isActive = useCallback(function (type) {
     var isMark = getValue(editor, type);
     return !!isMark;
@@ -59,7 +58,9 @@ var TextStyleMenuList = function TextStyleMenuList(_ref) {
         };
         itemProps['defaultColorTip'] = item.type === ELEMENT_TYPE.COLOR ? t('Default') : '';
       }
-      return _objectSpread(_objectSpread({}, itemProps), item);
+      return _objectSpread(_objectSpread(_objectSpread({}, itemProps), item), {}, {
+        id: idPrefix ? "".concat(idPrefix, "_").concat(item.id) : item.id
+      });
     });
 
     // eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -0,0 +1,10 @@
+.sdoc-context-toolbar {
+  position: absolute;
+  width: auto;
+  height: 42px;
+  z-index: 101;
+  background-color: #fff;
+  border: 1px solid #e8e8e8;
+  border-radius: 3px;
+  box-shadow: 0 2px 5px #0000001f;
+}

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

@@ -0,0 +1,56 @@
+import React, { useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { useFocused, useSlateStatic, useReadOnly } from '@seafile/slate-react';
+import { Editor, Range } from '@seafile/slate';
+import { MenuGroup } from '../../commons';
+import TextStyleMenuList from '../../plugins/text-style/menu';
+import { useScrollContext } from '../../../hooks/use-scroll-context';
+import { getSelectedNodeByType } from '../../core';
+import { CODE_BLOCK } from '../../constants';
+import './index.css';
+var ContextToolbar = function ContextToolbar() {
+  var ref = useRef(null);
+  var editor = useSlateStatic();
+  var scrollRef = useScrollContext();
+  var inFocus = useFocused();
+  var readOnly = useReadOnly();
+  var setContextToolbarPosition = useCallback(function () {
+    var el = ref.current;
+    var domSelection = window.getSelection();
+    var domRange = domSelection.getRangeAt(0);
+    var rect = domRange.getBoundingClientRect();
+    el.style.top = "".concat(rect.top - el.offsetHeight, "px");
+    el.style.left = "".concat(rect.left, "px");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onScroll = useCallback(function (e) {
+    setContextToolbarPosition();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(function () {
+    var el = ref.current;
+    var selection = editor.selection;
+    if (!el) {
+      return;
+    }
+    if (readOnly || !selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === '' || getSelectedNodeByType(editor, CODE_BLOCK)) {
+      scrollRef.current && scrollRef.current.removeEventListener('scroll', onScroll);
+      el.removeAttribute('style');
+      return;
+    }
+    scrollRef.current && scrollRef.current.addEventListener('scroll', onScroll);
+    setContextToolbarPosition();
+  });
+  var onMouseDown = useCallback(function (event) {
+    event.preventDefault(); // prevent toolbar from taking focus away from editor
+  }, []);
+  return createPortal( /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: "sdoc-context-toolbar",
+    onMouseDown: onMouseDown
+  }, /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(TextStyleMenuList, {
+    editor: editor,
+    idPrefix: 'sdoc_context_toolbar'
+  }))), document.body);
+};
+export default ContextToolbar;

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

@@ -0,0 +1,54 @@
+import React from 'react';
+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';
+var Toolbar = function Toolbar(_ref) {
+  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
+  }), /*#__PURE__*/React.createElement(ClearFormatMenu, {
+    editor: editor
+  })), /*#__PURE__*/React.createElement(HeaderMenu, {
+    editor: editor
+  }), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(TextStyleMenuList, {
+    editor: editor
+  })), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(QuoteMenu, {
+    editor: editor
+  }), /*#__PURE__*/React.createElement(ListMenu, {
+    editor: editor,
+    type: UNORDERED_LIST
+  }), /*#__PURE__*/React.createElement(ListMenu, {
+    editor: editor,
+    type: ORDERED_LIST
+  }), /*#__PURE__*/React.createElement(CheckListMenu, {
+    editor: editor
+  }), /*#__PURE__*/React.createElement(TextAlignMenu, {
+    editor: editor
+  })), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(CodeBlockMenu, {
+    editor: editor
+  }), /*#__PURE__*/React.createElement(TableMenu, {
+    editor: editor
+  })), /*#__PURE__*/React.createElement(ActiveTableMenu, {
+    editor: editor
+  }), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(ImageMenu, {
+    editor: editor
+  }), /*#__PURE__*/React.createElement(LinkMenu, {
+    editor: editor
+  })));
+};
+export default Toolbar;

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

@@ -4,8 +4,8 @@ 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 { MenuItem } from '../menu';
-import { MENUS_CONFIG_MAP, REDO, UNDO } from '../constants';
+import { MenuItem } from '../../commons';
+import { MENUS_CONFIG_MAP, REDO, UNDO } from '../../constants';
 var HistoryMenu = /*#__PURE__*/function (_React$Component) {
   _inherits(HistoryMenu, _React$Component);
   var _super = _createSuper(HistoryMenu);

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

@@ -1,54 +1,3 @@
-import React from 'react';
-import useSelectionUpdate from '../../hooks/use-selection-update';
-import { ORDERED_LIST, UNORDERED_LIST } from '../constants';
-import { MenuGroup } from '../menu';
-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 HistoryMenu from './redo-undo';
-import { TableMenu, ActiveTableMenu } from '../plugins/table/menu';
-import ClearFormatMenu from '../plugins/clear-format/menu';
-var Toolbar = function Toolbar(_ref) {
-  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
-  })), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(ClearFormatMenu, {
-    editor: editor
-  })), /*#__PURE__*/React.createElement(HeaderMenu, {
-    editor: editor
-  }), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(TextStyleMenuList, {
-    editor: editor
-  })), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(QuoteMenu, {
-    editor: editor
-  }), /*#__PURE__*/React.createElement(ListMenu, {
-    editor: editor,
-    type: UNORDERED_LIST
-  }), /*#__PURE__*/React.createElement(ListMenu, {
-    editor: editor,
-    type: ORDERED_LIST
-  }), /*#__PURE__*/React.createElement(CheckListMenu, {
-    editor: editor
-  }), /*#__PURE__*/React.createElement(TextAlignMenu, {
-    editor: editor
-  })), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(CodeBlockMenu, {
-    editor: editor
-  }), /*#__PURE__*/React.createElement(TableMenu, {
-    editor: editor
-  })), /*#__PURE__*/React.createElement(ActiveTableMenu, {
-    editor: editor
-  }), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(ImageMenu, {
-    editor: editor
-  }), /*#__PURE__*/React.createElement(LinkMenu, {
-    editor: editor
-  })));
-};
-export default Toolbar;
+import Toolbar from './header-toolbar';
+import ContextToolbar from './context-toolbar';
+export { Toolbar, ContextToolbar };