@seafile/seafile-editor 2.0.18 → 2.0.20-beta

package/dist/constants/event-types.js

@@ -12,12 +12,14 @@ const INTERNAL_EVENTS = exports.INTERNAL_EVENTS = {
   ON_SELECT_ALL_CELL: 'on_select_all_cell',
   ON_TOGGLE_IMAGE_POPOVER: 'on_toggle_image_popover',
   OUTLINE_STATE_CHANGED: 'outline_state_changed',
-  RESIZE_ARTICLE: 'resize_article'
+  RESIZE_ARTICLE: 'resize_article',
+  INSERT_ELEMENT: 'insert_element'
 };
 const EXTERNAL_EVENTS = exports.EXTERNAL_EVENTS = {
   ON_HELP_INFO_TOGGLE: 'on_help_info_toggle',
   ON_ARTICLE_INFO_TOGGLE: 'on_article_info_toggle',
   ON_LINK_CLICK: 'on_link_click',
   ON_INSERT_IMAGE: 'on_insert_image',
-  INSERT_IMAGE: 'insert_image'
+  INSERT_IMAGE: 'insert_image',
+  CLEAR_ARTICLE: 'clear_article'
 };

package/dist/editors/inline-editor/index.js

@@ -9,12 +9,15 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _slateReact = require("slate-react");
 var _slate = require("slate");
+var _slugid = _interopRequireDefault(require("slugid"));
 var _extension = require("../../extension");
 var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
 var _eventHandler = _interopRequireDefault(require("../../utils/event-handler"));
 var _withPropsEditor = _interopRequireDefault(require("./with-props-editor"));
 var _core = require("../../extension/core");
 var _common = require("../../utils/common");
+var _eventTypes = require("../../constants/event-types");
+var _elementTypes = require("../../extension/constants/element-types");
 require("./index.css");
 const isMacOS = (0, _common.isMac)();
 const InlineEditor = _ref => {
@@ -120,6 +123,37 @@ const InlineEditor = _ref => {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  const handleClear = (0, _react.useCallback)(() => {
+    editor.children = [{
+      type: _elementTypes.PARAGRAPH,
+      id: _slugid.default.nice(),
+      children: [{
+        id: _slugid.default.nice(),
+        text: ''
+      }]
+    }];
+    editor.selection = null;
+    editor.operations = [{
+      type: 'remove_text',
+      path: [0, 0],
+      offset: 0,
+      text: ''
+    }];
+    editor.onChange();
+    editor.operations = [];
+    editor.history = {
+      redos: [],
+      undos: []
+    };
+  }, [editor]);
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    const clearSubscribe = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.CLEAR_ARTICLE, handleClear);
+    return () => {
+      clearSubscribe();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   const onEditorClick = (0, _react.useCallback)(() => {
     if (!enableEdit) {
       focusRangeRef.current = editor.selection;

package/dist/extension/commons/dropdown-menu-item/index.css

@@ -0,0 +1,54 @@
+/* insert element dropdown item */
+.sf-dropdown-item-with-left-icon .sf-dropdown-item-content .sf-dropdown-item-content-icon {
+  color: #444;
+}
+
+.sf-link-dropdown-menu-item .sf-dropdown-item-content{
+  justify-content: space-between;
+}
+
+.sf-dropdown-menu-item-relative {
+  position: relative;
+}
+
+.sf-dropdown-menu .sf-dropdown-item-right-icon {
+  color: #999;
+  transform: scale(.8);
+}
+
+.sf-dropdown-menu .sf-dropdown-item-with-left-icon {
+  min-height:32px;
+  padding: 3px 12px;
+}
+
+.sf-dropdown-menu .sf-dropdown-menu-item {
+  align-items: center;
+  display: flex;
+  height: 30px;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 100%
+}
+
+.sf-dropdown-menu .sf-dropdown-menu-item .sf-dropdown-item-content {
+  align-items: center;
+  display: flex;
+  flex: 1 1;
+  font-size: 14px
+}
+
+.sf-dropdown-menu .sf-dropdown-menu-item .iconfont {
+  font-size: 12px;
+  line-height: 12px;
+}
+
+.sf-dropdown-menu .sf-dropdown-item-right-icon {
+  color: #999;
+  transform: scale(.8);
+}
+
+.sf-dropdown-menu .sf-dropdown-item-content .sf-dropdown-item-content-icon {
+  margin-right: 10px;
+  vertical-align: 1px;
+}

package/dist/extension/commons/dropdown-menu-item/index.js

@@ -0,0 +1,60 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var _constants = require("../../../constants");
+var _menuShortcutIndicator = _interopRequireDefault(require("../menu-shortcut-indicator"));
+require("./index.css");
+const DropdownMenuItem = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    disabled,
+    onClick,
+    menuConfig,
+    children,
+    className,
+    shortcut,
+    isHidden,
+    onMousedown
+  } = props;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)(_constants.TRANSLATE_NAMESPACE);
+  const {
+    iconClass
+  } = menuConfig;
+  const [isShowChildren, setShowChildren] = (0, _react.useState)(false);
+
+  // onMount
+  (0, _react.useEffect)(() => {
+    setShowChildren(!isShowChildren);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('sf-dropdown-menu-item', className, {
+      'disabled': disabled,
+      'sf-dropdown-item-with-left-icon': iconClass,
+      'sf-link-dropdown-menu-item': shortcut,
+      'sf-dropdown-menu-item-hidden': isHidden
+    }),
+    id: menuConfig.id || '',
+    onClick: disabled ? () => {} : onClick || (() => {}),
+    ref: ref,
+    onMouseDown: onMousedown
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-dropdown-item-content"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-dropdown-item-left"
+  }, iconClass && /*#__PURE__*/_react.default.createElement("i", {
+    className: (0, _classnames.default)(iconClass, 'sf-dropdown-item-content-icon')
+  }), /*#__PURE__*/_react.default.createElement("span", null, t(menuConfig.text))), shortcut && /*#__PURE__*/_react.default.createElement(_menuShortcutIndicator.default, {
+    shortcuts: shortcut
+  })), isShowChildren && children);
+});
+var _default = exports.default = DropdownMenuItem;

package/dist/extension/commons/insert-element-dialog/index.js

@@ -12,44 +12,65 @@ var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
 var _eventTypes = require("../../../constants/event-types");
 var _constants = require("../../constants");
 var _linkModal = _interopRequireDefault(require("../../plugins/link/menu/link-modal"));
+var _imageMenuDialog = _interopRequireDefault(require("../../plugins/image/menu/image-menu-dialog"));
+var _formulaModal = _interopRequireDefault(require("../../plugins/formula/menu/formula-modal"));
 const InsertElementDialog = _ref => {
   let {
     editor
   } = _ref;
   const [dialogType, setDialogType] = (0, _react.useState)('');
   const [isOpenLinkModal, setIsOpenLinkModal] = (0, _react.useState)(false);
+  const [formula, setFormula] = (0, _react.useState)('');
   const [linkInfo, setLinkInfo] = (0, _react.useState)({
     linkTitle: '',
     linkUrl: ''
   });
-  (0, _react.useEffect)(() => {
-    const eventBus = _eventBus.default.getInstance();
-    const toggleDialogSubscribe = eventBus.subscribe(_eventTypes.INTERNAL_EVENTS.INSERT_ELEMENT, toggleDialog);
-    return () => {
-      toggleDialogSubscribe();
-    };
-  }, []);
   const toggleDialog = (0, _react.useCallback)(_ref2 => {
     let {
       type
     } = _ref2;
     setDialogType(type);
     setIsOpenLinkModal(true);
-    if (editor.selection) {
-      const selectedText = _slate.Editor.string(editor, editor.selection);
-      setLinkInfo({
-        ...linkInfo,
-        linkTitle: selectedText
-      });
+    if (type === _constants.ELementTypes.LINK) {
+      if (editor.selection) {
+        const selectedText = _slate.Editor.string(editor, editor.selection);
+        setLinkInfo({
+          ...linkInfo,
+          linkTitle: selectedText
+        });
+      }
     }
   }, [editor, linkInfo]);
+  const handleOpenLinkModal = (0, _react.useCallback)(formulaElement => {
+    if (formulaElement) {
+      const {
+        formula
+      } = formulaElement.data || {};
+      setFormula(formula);
+      setIsOpenLinkModal(true);
+    }
+  }, []);
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    const toggleDialogSubscribe = eventBus.subscribe(_eventTypes.INTERNAL_EVENTS.INSERT_ELEMENT, toggleDialog);
+    const unsubscribe = eventBus.subscribe(_eventTypes.INTERNAL_EVENTS.ON_OPEN_FORMULA_DIALOG, handleOpenLinkModal);
+    return () => {
+      toggleDialogSubscribe();
+      unsubscribe();
+    };
+  }, [toggleDialog, handleOpenLinkModal]);
   const onCloseModal = (0, _react.useCallback)(() => {
     setIsOpenLinkModal(false);
-    setLinkInfo({
-      linkTitle: '',
-      linkUrl: ''
-    });
-  }, []);
+    if (dialogType === _constants.ELementTypes.LINK) {
+      setLinkInfo({
+        linkTitle: '',
+        linkUrl: ''
+      });
+    }
+    if (dialogType === _constants.ELementTypes.FORMULA) {
+      setFormula('');
+    }
+  }, [dialogType]);
   if (_constants.ELementTypes.LINK === dialogType) {
     return isOpenLinkModal && /*#__PURE__*/_react.default.createElement(_linkModal.default, {
       onCloseModal: onCloseModal,
@@ -57,6 +78,17 @@ const InsertElementDialog = _ref => {
       linkTitle: linkInfo.linkTitle,
       linkUrl: linkInfo.linkUrl
     });
+  } else if (_constants.ELementTypes.IMAGE === dialogType) {
+    return isOpenLinkModal && /*#__PURE__*/_react.default.createElement(_imageMenuDialog.default, {
+      closeDialog: onCloseModal,
+      editor: editor
+    });
+  } else if (_constants.ELementTypes.FORMULA === dialogType) {
+    return isOpenLinkModal && /*#__PURE__*/_react.default.createElement(_formulaModal.default, {
+      onCloseModal: onCloseModal,
+      editor: editor,
+      formula: formula
+    });
   } else {
     return null;
   }

package/dist/extension/commons/menu/menu-drop-down.js

@@ -65,7 +65,7 @@ const MenuDropDown = props => {
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-menu-with-dropdown-triangle"
   }, /*#__PURE__*/_react.default.createElement("i", {
-    className: `sf-menu-with-dropdown-triangle-icon iconfont icon-${isShowDropDown ? 'caret-up' : 'drop-down'}`
+    className: `sf-menu-with-dropdown-triangle-icon iconfont icon-${isShowDropDown ? 'drop-down' : 'caret-up'}`
   })), !!isShowDropDown && /*#__PURE__*/_react.default.createElement("div", {
     ref: menuDropdownRef,
     className: "sf-dropdown-list "

package/dist/extension/commons/menu-shortcut-indicator/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./style.css");
+const MenuShortcutPrompt = _ref => {
+  let {
+    shortcuts,
+    containerClassName = ''
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('sf-shortcut-prompt-container', containerClassName)
+  }, shortcuts.map((shortcut, index) => /*#__PURE__*/_react.default.createElement("kbd", {
+    key: `sf-shortcut-${shortcut}-${index}`
+  }, shortcut)));
+};
+var _default = exports.default = MenuShortcutPrompt;

package/dist/extension/commons/menu-shortcut-indicator/style.css

@@ -0,0 +1,18 @@
+.sf-shortcut-prompt-container kbd {
+  display: inline-block;
+  margin-bottom: 0px;
+  margin-left: 1px;
+  margin-right: 1px;
+  padding: 1px 3px;
+  min-width: 12px;
+  border: none;
+  font: inherit;
+  text-align: center;
+  color: #999;
+  background-color: transparent;
+}
+
+.sf-shortcut-prompt-container kbd:last-child {
+  margin-right: 0px;
+  padding-right: 0px;
+}

package/dist/extension/constants/menus-config.js

@@ -36,7 +36,7 @@ const TABLE_SUBMENU_MAP = exports.TABLE_SUBMENU_MAP = {
 const MENUS_CONFIG_MAP = exports.MENUS_CONFIG_MAP = {
   [_elementTypes.BLOCKQUOTE]: {
     id: `seafile_${_elementTypes.BLOCKQUOTE}`,
-    iconClass: 'iconfont icon-quote-left',
+    iconClass: 'iconfont icon-quote',
     text: 'Quote'
   },
   [_elementTypes.ORDERED_LIST]: {
@@ -86,6 +86,12 @@ const MENUS_CONFIG_MAP = exports.MENUS_CONFIG_MAP = {
     text: 'Bold',
     type: BOLD
   },
+  [UNDERLINE]: {
+    id: `seafile_${UNDERLINE}`,
+    iconClass: 'iconfont icon-underline',
+    text: 'Underline',
+    type: UNDERLINE
+  },
   [CODE]: {
     id: `seafile_${CODE}`,
     iconClass: 'iconfont icon-code',

package/dist/extension/plugins/code-block/menu/index.js

@@ -1,37 +1,36 @@
 "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 _commons = require("../../../commons");
 var _elementTypes = require("../../../constants/element-types");
 var _helpers = require("../helpers");
 var _constants = require("../../../constants");
+var _dropdownMenuItem = _interopRequireDefault(require("../../../commons/dropdown-menu-item"));
 const menuConfig = _constants.MENUS_CONFIG_MAP[_elementTypes.CODE_BLOCK];
 const CodeBlockMenu = _ref => {
   let {
-    isRichEditor,
-    className,
     readonly,
-    editor
+    editor,
+    toggle
   } = _ref;
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const isActive = (0, _react.useMemo)(() => (0, _helpers.isInCodeBlock)(editor), [editor.selection]);
   const onMousedown = (0, _react.useCallback)(e => {
     e.preventDefault();
     isActive ? (0, _helpers.unwrapCodeBlock)(editor) : (0, _helpers.transformToCodeBlock)(editor);
+    toggle && toggle();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isActive]);
-  return /*#__PURE__*/_react.default.createElement(_commons.MenuItem, Object.assign({
-    type: _elementTypes.CODE_BLOCK,
-    isRichEditor: isRichEditor,
-    className: className,
-    disabled: (0, _helpers.isMenuDisabled)(editor, readonly),
-    isActive: isActive,
-    onMouseDown: onMousedown
-  }, menuConfig));
+  return /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    disabled: readonly,
+    menuConfig: menuConfig,
+    className: "pr-2",
+    onClick: onMousedown
+  });
 };
 var _default = exports.default = CodeBlockMenu;

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

@@ -1,35 +1,36 @@
 "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 = ColumnMenu;
 var _react = _interopRequireWildcard(require("react"));
-var _commons = require("../../../commons");
 var _menusConfig = require("../../../constants/menus-config");
 var _elementTypes = require("../../../constants/element-types");
 var _helpers = require("../helpers");
+var _dropdownMenuItem = _interopRequireDefault(require("../../../commons/dropdown-menu-item"));
 const menuConfig = _menusConfig.MENUS_CONFIG_MAP[_elementTypes.COLUMN];
 const isActive = editor => {
   return (0, _helpers.getColumnType)(editor) === _elementTypes.COLUMN;
 };
 function ColumnMenu(_ref) {
   let {
-    isRichEditor,
-    className,
     readonly,
-    editor
+    editor,
+    toggle
   } = _ref;
-  const onMousedown = (0, _react.useCallback)(event => {
+  const insertColumn = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    toggle && toggle();
     const active = isActive(editor);
     (0, _helpers.insertSeaTableColumn)(editor, active);
-  }, [editor]);
-  return /*#__PURE__*/_react.default.createElement(_commons.MenuItem, Object.assign({
-    isRichEditor: isRichEditor,
-    className: className,
-    disabled: (0, _helpers.isMenuDisabled)(editor, readonly),
-    isActive: isActive(editor),
-    onMouseDown: onMousedown
-  }, menuConfig));
+  }, [editor, toggle]);
+  return /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    disabled: readonly,
+    menuConfig: menuConfig,
+    className: "pr-2",
+    onClick: insertColumn
+  });
 }

package/dist/extension/plugins/formula/menu/formula-modal.js

@@ -8,10 +8,10 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
 var _reactI18next = require("react-i18next");
+var _constants = require("../../../../constants");
+var _core = require("../../../core");
 var _components = require("../../../../components");
 var _helper = require("../helper");
-var _core = require("../../../core");
-var _constants = require("../../../../constants");
 const FormulaModal = _ref => {
   let {
     editor,

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

@@ -1,63 +1,34 @@
 "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 _react = _interopRequireDefault(require("react"));
 var _eventTypes = require("../../../../constants/event-types");
 var _menusConfig = require("../../../constants/menus-config");
 var _elementTypes = require("../../../constants/element-types");
-var _menuItem = _interopRequireDefault(require("../../../commons/menu/menu-item"));
-var _helper = require("../helper");
 var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
-var _formulaModal = _interopRequireDefault(require("./formula-modal"));
+var _dropdownMenuItem = _interopRequireDefault(require("../../../commons/dropdown-menu-item"));
 const menuConfig = _menusConfig.MENUS_CONFIG_MAP[_elementTypes.FORMULA];
 const FormulaMenu = _ref => {
   let {
-    isRichEditor,
-    className,
     readonly,
-    editor
+    toggle
   } = _ref;
-  const [isOpenFormulaModal, setIsOpenFormulaModal] = (0, _react.useState)(false);
-  const [formula, setFormula] = (0, _react.useState)('');
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const isMenuActive = (0, _react.useMemo)(() => (0, _helper.isFormulaActive)(editor), [editor.selection]);
-  (0, _react.useEffect)(() => {
+  const OpenFormulaModal = () => {
+    toggle && toggle();
     const eventBus = _eventBus.default.getInstance();
-    const unsubscribe = eventBus.subscribe(_eventTypes.INTERNAL_EVENTS.ON_OPEN_FORMULA_DIALOG, handleOpenLinkModal);
-    return () => unsubscribe();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const onMouseDown = (0, _react.useCallback)(() => {
-    setIsOpenFormulaModal(true);
-  }, []);
-  const handleOpenLinkModal = (0, _react.useCallback)(formulaElement => {
-    if (formulaElement) {
-      const {
-        formula
-      } = formulaElement.data || {};
-      setFormula(formula);
-      setIsOpenFormulaModal(true);
-    }
-  }, []);
-  const onCloseModal = (0, _react.useCallback)(() => {
-    setIsOpenFormulaModal(false);
-    setFormula('');
-  }, []);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_menuItem.default, Object.assign({
-    isRichEditor: isRichEditor,
-    className: className,
-    disabled: (0, _helper.isMenuDisabled)(editor, readonly),
-    isActive: isMenuActive,
-    onMouseDown: onMouseDown
-  }, menuConfig)), isOpenFormulaModal && /*#__PURE__*/_react.default.createElement(_formulaModal.default, {
-    editor: editor,
-    formula: formula,
-    onCloseModal: onCloseModal
-  }));
+    eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.INSERT_ELEMENT, {
+      type: _elementTypes.FORMULA
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    disabled: readonly,
+    menuConfig: menuConfig,
+    className: "pr-2",
+    onClick: OpenFormulaModal
+  });
 };
 var _default = exports.default = FormulaMenu;

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

@@ -57,14 +57,14 @@
 }
 
 .sf-header-menu .sf-header-toggle .iconfont {
-  color: #555;
+  color: #999;
   width: 12px;
   height: 24px;
   margin-left: 8px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  font-size: 12px;
+  font-size: 13px;
   cursor: pointer;
 }
 

package/dist/extension/plugins/image/menu/image-menu-dialog.js

@@ -16,7 +16,7 @@ var _constants = require("../../../../constants");
 const ImageMenuInsertInternetDialog = _ref => {
   let {
     editor,
-    onToggleImageDialog,
+    closeDialog,
     className = ''
   } = _ref;
   const [imageUrl, setSetImageUrl] = (0, _react.useState)('');
@@ -37,7 +37,7 @@ const ImageMenuInsertInternetDialog = _ref => {
     if (!(0, _isUrl.default)(imageUrl)) return false;
     if (imageUrl.length === 0) return;
     (0, _helper.insertImage)(editor, imageUrl);
-    onToggleImageDialog();
+    closeDialog();
   };
   const handleInputKeyDown = e => {
     if (e.key === 'Enter') {
@@ -51,13 +51,13 @@ const ImageMenuInsertInternetDialog = _ref => {
   return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
     onMouseDown: onModalContainerMouseDown,
     isOpen: true,
-    toggle: onToggleImageDialog,
+    toggle: closeDialog,
     className: className,
     zIndex: 1071,
     onOpened: onModalOpened,
-    onClosed: onToggleImageDialog
+    onClosed: closeDialog
   }, /*#__PURE__*/_react.default.createElement(_components.ModalHeader, {
-    toggle: onToggleImageDialog
+    toggle: closeDialog
   }, t('Insert_image')), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Form, null, /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
     for: "imageUrlInput"
   }, t('Image_address')), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
@@ -70,7 +70,7 @@ const ImageMenuInsertInternetDialog = _ref => {
     onChange: e => setSetImageUrl(e.target.value.trim())
   }), /*#__PURE__*/_react.default.createElement(_reactstrap.FormFeedback, null, t('Image_address_invalid'))))), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
     color: "secondary",
-    onClick: onToggleImageDialog
+    onClick: closeDialog
   }, t('Cancel')), /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
     color: "primary",
     disabled: isCommitBtnDisabled,

package/dist/extension/plugins/image/menu/image-menu-popover.js

@@ -13,7 +13,7 @@ var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
 var _eventTypes = require("../../../../constants/event-types");
 var _helper = require("../helper");
 var _constants = require("../../../../constants");
-require("./style.css");
+require("./image-menu-popover.css");
 const ImageMenuPopover = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   var _editor$api;
   let {

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;
+}