@seafile/seafile-editor 2.0.19 → 2.0.20-beta1

package/dist/extension/plugins/image/menu/index.css

@@ -0,0 +1,36 @@
+.sf-insert-image-menu-popover-container {
+  padding: 8px 0;
+}
+
+.sf-insert-video-menu-popover-container {
+  padding: 8px 0;
+}
+
+.sf-dropdown-menu .sf-dropdown-menu-container {
+  min-width: 12rem;
+  z-index: 1500;
+}
+
+.sf-sub-dropdown-menu .popover {
+  left: -8px !important;
+  z-index: 1070;
+}
+
+.sf-sub-dropdown-menu .bs-popover-auto[x-placement^="left"] {
+  left: 8px !important;
+}
+
+.sf-dropdown-menu .sf-dropdown-menu-item {
+  height: 30px;
+  width: 100%;
+  padding: 3px 12px;
+  user-select: none;
+  display: flex;
+  align-items: center;
+}
+
+.sf-sub-dropdown-menu:hover,
+.sf-dropdown-menu .sf-dropdown-menu-item:hover {
+  background-color: rgb(245, 245, 245);
+  cursor: pointer;
+}

package/dist/extension/plugins/image/menu/index.js

@@ -12,67 +12,72 @@ var _menusConfig = require("../../../constants/menus-config");
 var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
 var _eventTypes = require("../../../../constants/event-types");
 var _helper = require("../helper");
-var _commons = require("../../../commons");
-var _imageMenuPopover = _interopRequireDefault(require("./image-menu-popover"));
+var _dropdownMenuItem = _interopRequireDefault(require("../../../commons/dropdown-menu-item"));
+var _reactstrap = require("reactstrap");
+var _reactI18next = require("react-i18next");
+var _constants = require("../../../../constants");
+require("./index.css");
 const menuConfig = _menusConfig.MENUS_CONFIG_MAP[_elementTypes.IMAGE];
 const ImageMenu = _ref => {
   let {
-    isRichEditor,
-    className,
     readonly,
     editor,
-    isSupportInsertSeafileImage
+    toggle
   } = _ref;
-  const [isShowImagePopover, setIsShowImagePopover] = (0, _react.useState)(false);
-  const imagePopoverRef = (0, _react.useRef)(null);
-  const handleChangePopoverDisplayed = (0, _react.useCallback)(e => {
-    if (e) {
-      const menu = imagePopoverRef.current;
-      const clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target;
-      if (clickIsInMenu) return;
-    }
-    setIsShowImagePopover(false);
-    unregisterEventHandler();
-    setTimeout(() => {
-      const eventBus = _eventBus.default.getInstance();
-      eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.ON_TOGGLE_IMAGE_POPOVER, false);
-    }, 150);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const registerEventHandler = (0, _react.useCallback)(() => {
-    document.addEventListener('mousedown', handleChangePopoverDisplayed);
-  }, [handleChangePopoverDisplayed]);
-  const unregisterEventHandler = (0, _react.useCallback)(() => {
-    document.removeEventListener('mousedown', handleChangePopoverDisplayed);
-  }, [handleChangePopoverDisplayed]);
-  const onImageMenuToggle = (0, _react.useCallback)(e => {
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)(_constants.TRANSLATE_NAMESPACE);
+  const fileInputRef = (0, _react.useRef)(null);
+  const openFileDIalog = (0, _react.useCallback)(e => {
+    var _fileInputRef$current;
     e.stopPropagation();
+    toggle && toggle();
     e.nativeEvent.stopImmediatePropagation();
-    const state = !isShowImagePopover;
+    (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 ? void 0 : _fileInputRef$current.click();
+  }, [toggle]);
+  const handleInsertNetworkImage = () => {
+    toggle && toggle();
     const eventBus = _eventBus.default.getInstance();
-    if (state) {
-      setIsShowImagePopover(state);
-      registerEventHandler();
-    } else {
-      setIsShowImagePopover(state);
-      unregisterEventHandler();
-    }
-    eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.ON_TOGGLE_IMAGE_POPOVER, state);
-  }, [isShowImagePopover, registerEventHandler, unregisterEventHandler]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_commons.MenuItem, Object.assign({
-    type: Image,
-    isRichEditor: isRichEditor,
-    className: className,
-    disabled: (0, _helper.isMenuDisabled)(editor, readonly),
-    isActive: isShowImagePopover,
-    onMouseDown: onImageMenuToggle
-  }, menuConfig)), isShowImagePopover && /*#__PURE__*/_react.default.createElement(_imageMenuPopover.default, {
-    ref: imagePopoverRef,
-    editor: editor,
-    setIsShowImagePopover: setIsShowImagePopover,
-    unregisterEventHandler: unregisterEventHandler,
-    handelClosePopover: handleChangePopoverDisplayed,
-    isSupportInsertSeafileImage: isSupportInsertSeafileImage
+    eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.INSERT_ELEMENT, {
+      type: _elementTypes.IMAGE
+    });
+  };
+  const handleUploadLocalImage = (0, _react.useCallback)(async e => {
+    const file = e.target.files[0];
+    if (!file) return;
+    (0, _helper.handleUpdateImage)(editor, file);
+    e.target.value = null;
+  }, [editor]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    disabled: readonly,
+    menuConfig: menuConfig,
+    className: "pr-2"
+  }, !readonly && /*#__PURE__*/_react.default.createElement("i", {
+    className: "iconfont icon-sdoc-right-slide sf-dropdown-item-right-icon"
+  })), !readonly && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
+    target: menuConfig.id,
+    trigger: "hover",
+    className: "sf-menu-popover sf-dropdown-menu sf-sub-dropdown-menu sf-insert-image-menu-popover",
+    placement: "right-start",
+    hideArrow: true,
+    fade: false
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-insert-image-menu-popover-container sf-dropdown-menu-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-dropdown-menu-item",
+    onClick: openFileDIalog
+  }, t('Upload_local_image')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-dropdown-menu-item",
+    onClick: handleInsertNetworkImage
+  }, t('Insert_network_image')))), /*#__PURE__*/_react.default.createElement("input", {
+    ref: fileInputRef,
+    onClick: openFileDIalog,
+    onChange: handleUploadLocalImage,
+    style: {
+      display: 'none'
+    },
+    type: "file",
+    accept: "image/*"
   }));
 };
 var _default = exports.default = ImageMenu;

package/dist/extension/plugins/table/constant.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TABLE_ROW_NODE_NAME = exports.TABLE_MAX_ROWS = exports.TABLE_MAX_COLUMNS = exports.TABLE_ELEMENT_POSITION = exports.TABLE_ELEMENT = exports.TABLE_CELL_NODE_NAME = exports.TABLE_BODY_NODE_NAME = void 0;
+exports.TABLE_ROW_NODE_NAME = exports.TABLE_MAX_ROWS = exports.TABLE_MAX_COLUMNS = exports.TABLE_ELEMENT_POSITION = exports.TABLE_ELEMENT = exports.TABLE_CELL_STYLE = exports.TABLE_CELL_NODE_NAME = exports.TABLE_BODY_NODE_NAME = void 0;
 const TABLE_CELL_NODE_NAME = exports.TABLE_CELL_NODE_NAME = 'td';
 const TABLE_ROW_NODE_NAME = exports.TABLE_ROW_NODE_NAME = 'tr';
 const TABLE_BODY_NODE_NAME = exports.TABLE_BODY_NODE_NAME = 'tbody';
@@ -18,4 +18,7 @@ const TABLE_ELEMENT = exports.TABLE_ELEMENT = {
 const TABLE_ELEMENT_POSITION = exports.TABLE_ELEMENT_POSITION = {
   AFTER: 'after',
   BEFORE: 'before'
+};
+const TABLE_CELL_STYLE = exports.TABLE_CELL_STYLE = {
+  TEXT_ALIGN: 'textAlign'
 };

package/dist/extension/plugins/table/context-menu/horizontal-align-popover/index.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _core = require("../../../../core");
+var _constants = require("../../../../../constants");
+var _tableOperations = require("../../table-operations");
+require("./style.css");
+const HorizontalAlignPopover = _ref => {
+  let {
+    target,
+    editor,
+    readonly,
+    horizontalAlign
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)(_constants.TRANSLATE_NAMESPACE);
+  const setTextAlignStyle = (0, _react.useCallback)(textAlign => {
+    if (readonly) return;
+    (0, _tableOperations.changeColumnAlign)(editor, textAlign);
+    const focusPoint = editor.selection.focus;
+    // prevent select all text in the editor
+    (0, _core.focusEditor)(editor, focusPoint);
+    // Select last focus point
+    setTimeout(() => {
+      (0, _core.focusEditor)(editor, focusPoint);
+    }, 0);
+  }, [editor, readonly]);
+  return /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
+    target: target.current,
+    trigger: "hover",
+    placement: "right-start",
+    hideArrow: true,
+    fade: false
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-dropdown-menu sf-table-alignment-menu"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-dropdown-menu-item",
+    onMouseDown: () => setTextAlignStyle('left')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-checked"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: (0, _classnames.default)('iconfont icon-check-mark', {
+      active: !horizontalAlign || horizontalAlign === 'left'
+    })
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: "active"
+  }, t('Left'))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-dropdown-menu-item",
+    onMouseDown: () => setTextAlignStyle('center')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-checked"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: (0, _classnames.default)('iconfont icon-check-mark', {
+      active: horizontalAlign === 'center'
+    })
+  })), /*#__PURE__*/_react.default.createElement("span", null, t('Center'))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-dropdown-menu-item",
+    onMouseDown: () => setTextAlignStyle('right')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-checked"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: (0, _classnames.default)('iconfont icon-check-mark', {
+      active: horizontalAlign === 'right'
+    })
+  })), /*#__PURE__*/_react.default.createElement("span", null, t('Right')))));
+};
+var _default = exports.default = HorizontalAlignPopover;

package/dist/extension/plugins/table/context-menu/horizontal-align-popover/style.css

@@ -0,0 +1,24 @@
+.sf-context-menu .sf-dropdown-menu {
+  display: flex;
+  flex-direction: column;
+}
+
+.sf-table-alignment-menu .sf-dropdown-menu-item {
+  padding: 4px 50px 4px 10px !important;
+}
+
+.sf-table-alignment-menu .sf-dropdown-menu-item .sf-checked {
+  margin-right: 6px;
+  height: 21px;
+  line-height: 21px;
+  width: 12px;
+}
+
+.sf-table-alignment-menu .sf-dropdown-menu-item .icon-check-mark {
+  display: none;
+  font-size: 12px !important;
+}
+
+.sf-table-alignment-menu .sf-dropdown-menu-item .icon-check-mark.active {
+  display: inline;
+}

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

@@ -12,8 +12,12 @@ var _tableOperations = require("../table-operations");
 var _constants = require("../../../../constants");
 var _insertTableElement = _interopRequireDefault(require("./insert-table-element"));
 var _constant = require("../constant");
+var _core = require("../../../core");
+var _elementTypes = require("../../../constants/element-types");
+var _horizontalAlignPopover = _interopRequireDefault(require("./horizontal-align-popover"));
 require("./style.css");
 const ContextMenu = _ref => {
+  var _getSelectedNodeByTyp, _cellDom$style;
   let {
     element,
     position,
@@ -22,9 +26,13 @@ const ContextMenu = _ref => {
   } = _ref;
   const [contextMenuStyle, setContextMenuStyle] = (0, _react.useState)({});
   const contextMenuRef = (0, _react.useRef)(null);
+  const horizontalAlignRef = (0, _react.useRef)(null);
   const {
     t
   } = (0, _reactI18next.useTranslation)(_constants.TRANSLATE_NAMESPACE);
+  const tableCellNodeId = (_getSelectedNodeByTyp = (0, _core.getSelectedNodeByType)(editor, _elementTypes.TABLE_CELL)) === null || _getSelectedNodeByTyp === void 0 ? void 0 : _getSelectedNodeByTyp.id;
+  const cellDom = document.querySelector(`td[data-id="${tableCellNodeId}"]`);
+  const horizontalAlign = cellDom === null || cellDom === void 0 ? void 0 : (_cellDom$style = cellDom.style) === null || _cellDom$style === void 0 ? void 0 : _cellDom$style[_constant.TABLE_CELL_STYLE.TEXT_ALIGN];
   const currentRowsCount = (0, _react.useMemo)(() => {
     const rows = element.children;
     return rows.length;
@@ -100,6 +108,17 @@ const ContextMenu = _ref => {
   }, t('Delete_column')), /*#__PURE__*/_react.default.createElement("button", {
     onMouseDown: () => handleClickOperationBtn(_tableOperations.removeTable),
     className: 'sf-context-menu-item sf-dropdown-menu-item'
-  }, t('Delete_table'))));
+  }, t('Delete_table')), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'sf-divider dropdown-divider'
+  }), /*#__PURE__*/_react.default.createElement("button", {
+    ref: horizontalAlignRef,
+    className: "sf-context-menu-item sf-dropdown-menu-item side-extendable"
+  }, /*#__PURE__*/_react.default.createElement("span", null, t('Horizontal_align')), /*#__PURE__*/_react.default.createElement("i", {
+    className: "iconfont icon-sdoc-right-slide"
+  })), horizontalAlignRef.current && /*#__PURE__*/_react.default.createElement(_horizontalAlignPopover.default, {
+    target: horizontalAlignRef,
+    editor: editor,
+    horizontalAlign: horizontalAlign
+  })));
 };
 var _default = exports.default = ContextMenu;

package/dist/extension/plugins/table/context-menu/style.css

@@ -43,6 +43,10 @@
   cursor: default;
 }
 
+.sf-context-menu .sf-divider.dropdown-divider {
+  border-top: 1px solid rgba(0, 40, 100, .12);
+}
+
 .sf-context-menu .sf-context-menu-item .insert-number {
   margin-left: 50px;
   display: flex;
@@ -68,3 +72,18 @@
 .sf-context-menu .sf-context-menu-item:disabled .insert-number-input {
   color: #adb5bd;
 }
+
+.sf-context-menu .sf-context-menu-item.sf-dropdown-menu-item:disabled {
+  pointer-events: none;
+  color: #adb5bd;
+}
+
+.side-extendable .icon-sdoc-right-slide {
+  color: #fff;
+  transform: scale(.6);
+}
+
+.sf-context-menu .sf-dropdown-menu-item:hover {
+  color: #fff;
+  background-color: #20a0ff;
+}

package/dist/extension/plugins/table/menu/index.js

@@ -7,63 +7,39 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _menuItem = _interopRequireDefault(require("../../../commons/menu/menu-item"));
 var _constants = require("../../../constants");
 var _elementTypes = require("../../../constants/element-types");
 var _helper = require("../helper");
 var _tableSizeSelector = _interopRequireDefault(require("./table-size-selector"));
+var _dropdownMenuItem = _interopRequireDefault(require("../../../commons/dropdown-menu-item"));
 require("./style.css");
 const menuConfig = _constants.MENUS_CONFIG_MAP[_elementTypes.TABLE];
 const TableMenu = _ref => {
   let {
     editor,
     readonly,
-    className,
-    isRichEditor
+    toggle
   } = _ref;
   const [isOpenTableSizeSelector, setIsOpenTableSizeSelector] = (0, _react.useState)(false);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const disabled = (0, _react.useMemo)(() => (0, _helper.isDisabled)(editor, readonly), [editor.selection, readonly]);
-  const isActive = (0, _helper.isInTable)(editor);
   const tablePopoverRef = (0, _react.useRef)(null);
-  const onHideSelector = (0, _react.useCallback)(e => {
-    if (e) {
-      const menu = tablePopoverRef.current;
-      const clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target;
-      if (clickIsInMenu) return;
-    }
-    setIsOpenTableSizeSelector(false);
-    unregisterEvent();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const registerEvent = (0, _react.useCallback)(() => {
-    document.addEventListener('mousedown', onHideSelector);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const unregisterEvent = (0, _react.useCallback)(() => {
-    document.removeEventListener('mousedown', onHideSelector);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const onMouseDown = (0, _react.useCallback)(e => {
-    e.stopPropagation();
-    e.preventDefault();
-    const newState = !isOpenTableSizeSelector;
-    setIsOpenTableSizeSelector(newState);
-    newState ? registerEvent() : unregisterEvent();
-  }, [isOpenTableSizeSelector, registerEvent, unregisterEvent]);
+  const handleMouseEnter = () => setIsOpenTableSizeSelector(true);
+  const handleMouseLeave = () => setIsOpenTableSizeSelector(false);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "sf-table-menu-item"
-  }, /*#__PURE__*/_react.default.createElement(_menuItem.default, Object.assign({
-    isRichEditor: isRichEditor,
-    className: className,
+    className: "table-menu-container",
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
     disabled: disabled,
-    isActive: isActive,
-    onMouseDown: onMouseDown,
-    editor: editor
-  }, menuConfig)), isOpenTableSizeSelector && /*#__PURE__*/_react.default.createElement(_tableSizeSelector.default, {
+    menuConfig: menuConfig,
+    className: "pr-2"
+  }, !disabled && /*#__PURE__*/_react.default.createElement("i", {
+    className: "iconfont icon-sdoc-right-slide sf-dropdown-item-right-icon"
+  })), !disabled && isOpenTableSizeSelector && /*#__PURE__*/_react.default.createElement(_tableSizeSelector.default, {
     ref: tablePopoverRef,
     editor: editor,
-    onHideSelector: onHideSelector
+    onHideSelector: toggle
   }));
 };
 var _default = exports.default = TableMenu;

package/dist/extension/plugins/table/menu/style.css

@@ -9,6 +9,7 @@
   padding: 5px 12px;
   background-color: #fff;
   border: 1px solid #0028641f;
+  left: 100%;
 }
 
 .sf-table-size-selector-card .sf-table-grid-info {

package/dist/extension/plugins/table/render-elem/index.js

@@ -28,17 +28,17 @@ const RenderTableContainer = (_ref, editor) => {
     rowIndex: -1,
     colIndex: -1
   });
+  const [isShowContextMenu, setIsShowContextMenu] = (0, _react.useState)(false);
+  const [contextMenuPosition, setContextMenuPosition] = (0, _react.useState)({
+    top: 0,
+    left: 0
+  });
   const [, setSelectGridRange] = (0, _react.useState)({
     startRowIndex: -1,
     startColIndex: -1,
     endRowIndex: -1,
     endColIndex: -1
   });
-  const [isShowContextMenu, setIsShowContextMenu] = (0, _react.useState)(false);
-  const [contextMenuPosition, setContextMenuPosition] = (0, _react.useState)({
-    top: 0,
-    left: 0
-  });
   const isReadonly = (0, _slateReact.useReadOnly)();
   (0, _react.useEffect)(() => {
     if (isReadonly) return;
@@ -123,6 +123,7 @@ const RenderTableContainer = (_ref, editor) => {
     const maxColIndex = Math.max(startColIndex, endColIndex);
     // Select one cell
     if (minRowIndex === maxRowIndex && minColIndex === maxColIndex) return;
+
     // collapse selection
     window.getSelection().collapseToEnd();
     updateSelectedCellStyles(minRowIndex, maxRowIndex, minColIndex, maxColIndex);
@@ -206,7 +207,6 @@ const RenderTableCell = _ref3 => {
   const editor = (0, _slateReact.useSlateStatic)();
   const cellPath = (0, _core.findPath)(editor, element, [0, 0]);
   const pathLength = cellPath.length;
-  // const rowIndex = cellPath[pathLength - 2];
   const cellIndex = cellPath[pathLength - 1];
   const rowEntry = _slate.Editor.parent(editor, cellPath);
   const tableEntry = _slate.Editor.parent(editor, rowEntry[1]);

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

@@ -7,29 +7,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _eventTypes = require("../../../constants/event-types");
 var _useSelectionUpdate = _interopRequireDefault(require("../../../hooks/use-selection-update"));
-var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
 var _commons = require("../../commons");
 var _menu = _interopRequireDefault(require("../../plugins/blockquote/menu"));
 var _menu2 = _interopRequireDefault(require("../../plugins/header/menu"));
 var _menu3 = _interopRequireDefault(require("../../plugins/text-style/menu"));
 var _menu4 = _interopRequireDefault(require("../../plugins/link/menu"));
 var _constants = require("../../constants");
-var _menu5 = _interopRequireDefault(require("../../plugins/image/menu"));
-var _menu6 = _interopRequireDefault(require("../../plugins/code-block/menu"));
-var _menu7 = _interopRequireDefault(require("../../plugins/check-list/menu"));
-var _menu8 = _interopRequireDefault(require("../../plugins/list/menu"));
+var _menu5 = _interopRequireDefault(require("../../plugins/check-list/menu"));
+var _menu6 = _interopRequireDefault(require("../../plugins/list/menu"));
 var _elementTypes = require("../../constants/element-types");
-var _menu9 = _interopRequireDefault(require("../../plugins/table/menu"));
-var _tableOperator = require("../../plugins/table/menu/table-operator");
-var _helper = require("../../plugins/table/helper");
-var _menu10 = _interopRequireDefault(require("../../plugins/formula/menu"));
-var _menu11 = _interopRequireDefault(require("../../plugins/clear-format/menu"));
+var _menu7 = _interopRequireDefault(require("../../plugins/clear-format/menu"));
 var _shortcutDialog = _interopRequireDefault(require("../user-help/shortcut-dialog"));
-var _menu12 = _interopRequireDefault(require("../../plugins/column/menu"));
 var _insertElementDialog = _interopRequireDefault(require("../../commons/insert-element-dialog"));
+var _insertToolbar = _interopRequireDefault(require("./insert-toolbar"));
 require("./style.css");
 const Toolbar = _ref => {
   let {
@@ -41,35 +32,10 @@ const Toolbar = _ref => {
     isSupportColumn = false
   } = _ref;
   (0, _useSelectionUpdate.default)();
-  const [isShowArticleInfo, setIsShowArticleInfo] = (0, _react.useState)(false);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const isShowSubTableMenu = (0, _react.useMemo)(() => (0, _helper.isInTable)(editor), [editor.selection]);
-  const updateArticleInfoState = (0, _react.useCallback)(() => {
-    const newState = !isShowArticleInfo;
-    setIsShowArticleInfo(newState);
-    const eventBus = _eventBus.default.getInstance();
-    eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.ON_ARTICLE_INFO_TOGGLE, newState);
-  }, [isShowArticleInfo]);
-  const onHelpInfoToggle = (0, _react.useCallback)(state => {
-    if (state) setIsShowArticleInfo(false);
-  }, []);
-  (0, _react.useEffect)(() => {
-    const eventBus = _eventBus.default.getInstance();
-    // Trigger external events and close article info
-    const unsubscribeHelpInfo = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.ON_HELP_INFO_TOGGLE, onHelpInfoToggle);
-    return () => {
-      unsubscribeHelpInfo();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   const [isShowHelpModal, setIsShowHelpModal] = (0, _react.useState)(false);
   const onHelpIconToggle = (0, _react.useCallback)(() => {
     setIsShowHelpModal(!isShowHelpModal);
   }, [isShowHelpModal]);
-  const sideIconClass = (0, _classnames.default)('iconfont', {
-    'icon-angle-double-left': !isShowArticleInfo,
-    'icon-angle-double-right': isShowArticleInfo
-  });
   const commonProps = {
     editor,
     readonly,
@@ -77,21 +43,24 @@ const Toolbar = _ref => {
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-slate-editor-toolbar"
-  }, isRichEditor && /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu2.default, commonProps)), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu3.default, Object.assign({}, commonProps, {
+  }, isRichEditor && /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_insertToolbar.default, {
+    editor: editor,
+    readonly: readonly,
+    isSupportFormula: isSupportFormula,
+    isSupportColumn: isSupportColumn
+  })), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu2.default, commonProps)), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu3.default, Object.assign({}, commonProps, {
+    type: _constants.TEXT_STYLE_MAP.ITALIC
+  })), /*#__PURE__*/_react.default.createElement(_menu3.default, Object.assign({}, commonProps, {
     type: _constants.TEXT_STYLE_MAP.BOLD
   })), /*#__PURE__*/_react.default.createElement(_menu3.default, Object.assign({}, commonProps, {
-    type: _constants.TEXT_STYLE_MAP.ITALIC
+    type: _constants.TEXT_STYLE_MAP.UNDERLINE
   })), /*#__PURE__*/_react.default.createElement(_menu3.default, Object.assign({}, commonProps, {
     type: _constants.TEXT_STYLE_MAP.CODE
-  })), /*#__PURE__*/_react.default.createElement(_menu4.default, commonProps)), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu.default, commonProps), /*#__PURE__*/_react.default.createElement(_menu7.default, commonProps), /*#__PURE__*/_react.default.createElement(_menu8.default, Object.assign({}, commonProps, {
-    type: _elementTypes.ORDERED_LIST
-  })), /*#__PURE__*/_react.default.createElement(_menu8.default, Object.assign({}, commonProps, {
+  })), /*#__PURE__*/_react.default.createElement(_menu4.default, commonProps)), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu.default, commonProps), /*#__PURE__*/_react.default.createElement(_menu5.default, commonProps), /*#__PURE__*/_react.default.createElement(_menu6.default, Object.assign({}, commonProps, {
     type: _elementTypes.UNORDERED_LIST
-  }))), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu6.default, commonProps), /*#__PURE__*/_react.default.createElement(_menu9.default, commonProps), /*#__PURE__*/_react.default.createElement(_menu5.default, Object.assign({}, commonProps, {
-    isSupportInsertSeafileImage: isSupportInsertSeafileImage
-  })), isSupportFormula && /*#__PURE__*/_react.default.createElement(_menu10.default, commonProps), isSupportColumn && /*#__PURE__*/_react.default.createElement(_menu12.default, commonProps)), isShowSubTableMenu && /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, {
-    className: "sf-menu-group sf-table-operations-group"
-  }, /*#__PURE__*/_react.default.createElement(_tableOperator.AlignmentDropDown, commonProps), /*#__PURE__*/_react.default.createElement(_tableOperator.ColumnOperationDropDownList, commonProps), /*#__PURE__*/_react.default.createElement(_tableOperator.RowOperationDropDownList, commonProps), /*#__PURE__*/_react.default.createElement(_tableOperator.RemoveTableMenu, commonProps)), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu11.default, commonProps)), !isRichEditor && /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/_react.default.createElement(_menu6.default, Object.assign({}, commonProps, {
+    type: _elementTypes.ORDERED_LIST
+  }))), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu7.default, commonProps)), !isRichEditor && /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-slate-help-info-control",
     onClick: onHelpIconToggle
   }, /*#__PURE__*/_react.default.createElement("span", {