@seafile/sdoc-editor 0.1.138 → 0.1.140

package/dist/assets/css/simple-viewer.css

@@ -0,0 +1,6 @@
+.sdoc-share-permission {
+  font-size: 12px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  border: solid 1px rgba(0, 0, 0, 0.12);
+}

package/dist/basic-sdk/assets/css/default.css

@@ -8,3 +8,7 @@
   padding: 3px 0;
   margin: 0;
 }
+
+.element-icon {
+  color: #444 !important;
+}

package/dist/basic-sdk/assets/css/dropdown-menu.css

@@ -1,5 +1,7 @@
-.sdoc-dropdown-menu {
+.sdoc-dropdown-menu,
+.sdoc-dropdown-menu .sdoc-dropdown-menu-container {
   padding: 8px 0;
+  min-width: 12rem;
 }
 
 .sdoc-dropdown-menu .sdoc-dropdown-menu-divider {
@@ -11,7 +13,6 @@
 }
 
 .sdoc-dropdown-menu .sdoc-dropdown-menu-item {
-  cursor: pointer;
   height: 28px;
   width: 100%;
   padding: 4px 24px;
@@ -20,11 +21,55 @@
   align-items: center;
 }
 
+.sdoc-dropdown-menu .sdoc-dropdown-menu-item.disabled,
+.sdoc-dropdown-menu .sdoc-dropdown-menu-item.disabled .sdoc-dropdown-item-content-icon {
+  color: #c2c2c2 !important;
+}
+
 .sdoc-dropdown-menu .sdoc-dropdown-menu-item:hover {
   background-color: rgb(245, 245, 245);
+  cursor: pointer;
+}
+
+.sdoc-dropdown-menu .sdoc-dropdown-menu-item.disabled:hover {
+  background-color: unset;
+  cursor: default;
+  color: #c2c2c2;
 }
 
 .sdoc-dropdown-menu .sdoc-dropdown-menu-item .sdocfont {
   font-size: 12px;
   line-height: 12px;
 }
+
+.sdoc-dropdown-menu .sdoc-dropdown-menu-item .sdoc-dropdown-item-content {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex: 1;
+  font-size: 14px;
+}
+
+.sdoc-dropdown-menu .sdoc-dropdown-item-content .sdoc-dropdown-item-content-icon {
+  margin-right: 10px;
+}
+
+.sdoc-dropdown-menu .sdoc-dropdown-item-right-icon {
+  color: #999;
+  transform: scale(.6);
+}
+
+.sdoc-dropdown-menu .sdoc-dropdown-item-with-left-icon {
+  min-height: 32px;
+  padding: 3px 12px;
+}
+
+.sdoc-dropdown-menu .sdoc-check-mark {
+  transform: scale(.8);
+  color: #798d99;
+}
+
+/* sub menu */
+.sdoc-sub-dropdown-menu .popover {
+  left: -24px !important;
+}

package/dist/basic-sdk/comment/comment/comment-list.css

@@ -81,7 +81,7 @@
 .sdoc-comment-list-container .comment-header .comment-author__info {
   display: flex;
   flex-direction: column;
-  align-items: start;
+  align-items: flex-start;
   justify-content: center;
   padding-left: 10px;
   overflow: hidden;

package/dist/basic-sdk/constants/index.js

@@ -2,6 +2,7 @@ export var INTERNAL_EVENT = {
   CANCEL_TABLE_SELECT_RANGE: 'cancel_table_select_range',
   SET_TABLE_SELECT_RANGE: 'set_table_select_range',
   HIDDEN_CODE_BLOCK_HOVER_MENU: 'hidden_code_block_hover_menu',
-  ON_MOUSE_ENTER_BLOCK: 'on_mouse_enter_block'
+  ON_MOUSE_ENTER_BLOCK: 'on_mouse_enter_block',
+  INSERT_ELEMENT: 'insert_element'
 };
 export var PAGE_EDIT_AREA_WIDTH = 672; // 672 = 794 - 2[borderLeft + borderRight] - 120[paddingLeft + paddingRight]

package/dist/basic-sdk/editor.js

@@ -10,6 +10,7 @@ import { PAGE_EDIT_AREA_WIDTH } from './constants';
 import context from '../context';
 import { EditorContainer, EditorContent } from './layout';
 import SlateEditor from './slate-editor';
+import InsertElementDialog from './extension/commons/insert-element-dialog';
 var SDocEditor = forwardRef(function (_ref, ref) {
   var document = _ref.document,
     config = _ref.config;
@@ -88,7 +89,7 @@ var SDocEditor = forwardRef(function (_ref, ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React.createElement(EditorContainer, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorContainer, {
     editor: editor
   }, /*#__PURE__*/React.createElement(EditorContent, {
     docValue: slateValue,
@@ -97,6 +98,8 @@ var SDocEditor = forwardRef(function (_ref, ref) {
     editor: editor,
     slateValue: slateValue,
     setSlateValue: setSlateValue
-  })));
+  }))), /*#__PURE__*/React.createElement(InsertElementDialog, {
+    editor: editor
+  }));
 });
 export default SDocEditor;

package/dist/basic-sdk/extension/commons/color-menu/index.js

@@ -189,7 +189,7 @@ var ColorMenu = function ColorMenu(_ref) {
   })))), /*#__PURE__*/React.createElement("div", {
     className: "sdoc-colors-divider"
   }), /*#__PURE__*/React.createElement("div", {
-    className: classnames('sdoc-more-colors', {
+    className: classnames('sdoc-more-colors pr-2', {
       'show-pick': isPickerShow
     }),
     id: "sdoc-more-colors"

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

@@ -0,0 +1,4 @@
+/* insert element dropdown item */
+.sdoc-dropdown-item-with-left-icon .sdoc-dropdown-item-content .sdoc-dropdown-item-content-icon {
+  color: #444;
+}

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

@@ -0,0 +1,38 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import classnames from 'classnames';
+import './index.css';
+var DropdownMenuItem = function DropdownMenuItem(_ref) {
+  var disabled = _ref.disabled,
+    onClick = _ref.onClick,
+    menuConfig = _ref.menuConfig,
+    children = _ref.children,
+    className = _ref.className;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var iconClass = menuConfig.iconClass;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isShowChildren = _useState2[0],
+    setShowChildren = _useState2[1];
+
+  // onMount
+  useEffect(function () {
+    setShowChildren(!isShowChildren);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames('sdoc-dropdown-menu-item', className, {
+      'disabled': disabled,
+      'sdoc-dropdown-item-with-left-icon': iconClass
+    }),
+    id: menuConfig.id || '',
+    onClick: disabled ? function () {} : onClick || function () {}
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-dropdown-item-content"
+  }, iconClass && /*#__PURE__*/React.createElement("i", {
+    className: classnames(iconClass, 'sdoc-dropdown-item-content-icon')
+  }), /*#__PURE__*/React.createElement("span", null, t(menuConfig.text))), isShowChildren && children);
+};
+export default DropdownMenuItem;

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

@@ -0,0 +1,105 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useEffect, useState, useRef } from 'react';
+import InsertWebImageDialog from '../../plugins/image/dialogs/insert-web-image-dialog';
+import CustomTableSizeDialog from '../../plugins/table/dialog/custom-table-size-dialog';
+import AddLinkDialog from '../../plugins/link/dialog/add-link-dialog';
+import SelectSdocFileDialog from '../../plugins/sdoc-link/dialog/select-sdoc-file-dialog';
+import EventBus from '../../../utils/event-bus';
+import { INTERNAL_EVENT } from '../../../constants';
+import { ELEMENT_TYPE, INSERT_POSITION, INSERT_IMAGE_TYPE } from '../../constants';
+import context from '../../../../context';
+import { insertImage } from '../../plugins/image/helpers';
+var InsertElementDialog = function InsertElementDialog(_ref) {
+  var editor = _ref.editor;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    dialogType = _useState2[0],
+    setDialogType = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    element = _useState4[0],
+    setElement = _useState4[1];
+  var _useState5 = useState(INSERT_POSITION.CURRENT),
+    _useState6 = _slicedToArray(_useState5, 2),
+    insertPosition = _useState6[0],
+    setInsertPosition = _useState6[1];
+  var uploadLocalImageInputRef = useRef();
+  var onFileChanged = useCallback(function (event) {
+    var file = event.target.files[0];
+    context.uploadLocalImage(file).then(function (fileUrl) {
+      insertImage(editor, fileUrl, editor.selection, insertPosition);
+      if (uploadLocalImageInputRef.current) {
+        uploadLocalImageInputRef.current.value = '';
+      }
+    });
+  }, [editor, uploadLocalImageInputRef, insertPosition]);
+  useEffect(function () {
+    var eventBus = EventBus.getInstance();
+    var toggleDialogSubscribe = eventBus.subscribe(INTERNAL_EVENT.INSERT_ELEMENT, toggleDialog);
+    return function () {
+      toggleDialogSubscribe();
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var toggleDialog = useCallback(function (_ref2) {
+    var type = _ref2.type,
+      element = _ref2.element,
+      _ref2$insertPosition = _ref2.insertPosition,
+      insertPosition = _ref2$insertPosition === void 0 ? INSERT_POSITION.CURRENT : _ref2$insertPosition;
+    setInsertPosition(insertPosition);
+    setElement(element);
+    setDialogType(type);
+    if (type === INSERT_IMAGE_TYPE.LOCAL_IMAGE) {
+      setTimeout(function () {
+        uploadLocalImageInputRef.current && uploadLocalImageInputRef.current.click();
+      }, 0);
+    }
+  }, [uploadLocalImageInputRef]);
+  var closeDialog = useCallback(function () {
+    setInsertPosition(INSERT_POSITION.CURRENT);
+    setElement('');
+    setDialogType('');
+  }, []);
+  var props = {
+    insertPosition: insertPosition,
+    editor: editor,
+    element: element,
+    closeDialog: closeDialog
+  };
+  switch (dialogType) {
+    case ELEMENT_TYPE.TABLE:
+      {
+        return /*#__PURE__*/React.createElement(CustomTableSizeDialog, props);
+      }
+    case ELEMENT_TYPE.LINK:
+      {
+        return /*#__PURE__*/React.createElement(AddLinkDialog, props);
+      }
+    case ELEMENT_TYPE.SDOC_LINK:
+      {
+        return /*#__PURE__*/React.createElement(SelectSdocFileDialog, props);
+      }
+    case INSERT_IMAGE_TYPE.WEB_IMAGE:
+      {
+        return /*#__PURE__*/React.createElement(InsertWebImageDialog, props);
+      }
+    case INSERT_IMAGE_TYPE.LOCAL_IMAGE:
+      {
+        return /*#__PURE__*/React.createElement("input", {
+          ref: uploadLocalImageInputRef,
+          type: "file",
+          accept: "image/*",
+          style: {
+            display: 'none'
+          },
+          onChange: onFileChanged
+        });
+      }
+    default:
+      {
+        return null;
+      }
+  }
+};
+export default InsertElementDialog;

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

@@ -133,8 +133,8 @@ export var MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, _defineProperty(_MENUS_CO
   text: 'Clear_format'
 }), _defineProperty(_MENUS_CONFIG_MAP, SDOC_LINK, {
   id: "sdoc_".concat(SDOC_LINK),
-  iconClass: 'sdocfont sdoc-insert',
-  text: 'Insert'
+  iconClass: 'sdocfont sdoc-document',
+  text: 'Sdoc_document'
 }), _MENUS_CONFIG_MAP);
 export var HEADERS = [HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6];
 export var HEADER_TITLE_MAP = (_HEADER_TITLE_MAP = {}, _defineProperty(_HEADER_TITLE_MAP, TITLE, 'Title'), _defineProperty(_HEADER_TITLE_MAP, SUBTITLE, 'Subtitle'), _defineProperty(_HEADER_TITLE_MAP, HEADER1, 'Header_one'), _defineProperty(_HEADER_TITLE_MAP, HEADER2, 'Header_two'), _defineProperty(_HEADER_TITLE_MAP, HEADER3, 'Header_three'), _defineProperty(_HEADER_TITLE_MAP, HEADER4, 'Header_four'), _defineProperty(_HEADER_TITLE_MAP, HEADER5, 'Header_five'), _defineProperty(_HEADER_TITLE_MAP, HEADER6, 'Header_six'), _defineProperty(_HEADER_TITLE_MAP, PARAGRAPH, 'Paragraph'), _HEADER_TITLE_MAP);
@@ -164,71 +164,80 @@ export var SIDE_MENUS_CONFIG = [{
   id: PARAGRAPH,
   iconClass: 'sdocfont sdoc-text',
   type: PARAGRAPH,
-  title: 'Paragraph'
+  text: 'Paragraph'
 }, {
   id: HEADER1,
   iconClass: 'sdocfont sdoc-header1',
   type: HEADER1,
-  title: 'Header_one'
+  text: 'Header_one'
 }, {
   id: HEADER2,
   iconClass: 'sdocfont sdoc-header2',
   type: HEADER2,
-  title: 'Header_two'
+  text: 'Header_two'
 }, {
   id: HEADER3,
   iconClass: 'sdocfont sdoc-header3',
   type: HEADER3,
-  title: 'Header_three'
+  text: 'Header_three'
 }, {
   id: HEADER4,
   iconClass: 'sdocfont sdoc-header4',
   type: HEADER4,
-  title: 'Header_four'
+  text: 'Header_four'
 }, {
   id: HEADER5,
   iconClass: 'sdocfont sdoc-header5',
   type: HEADER5,
-  title: 'Header_five'
+  text: 'Header_five'
 }, {
   id: HEADER6,
   iconClass: 'sdocfont sdoc-header6',
   type: HEADER6,
-  title: 'Header_six'
+  text: 'Header_six'
 }, {
   id: UNORDERED_LIST,
   iconClass: 'sdocfont sdoc-list-ul',
   type: UNORDERED_LIST,
-  title: 'Unordered_list'
+  text: 'Unordered_list'
 }, {
   id: ORDERED_LIST,
   iconClass: 'sdocfont sdoc-list-ol',
   type: ORDERED_LIST,
-  title: 'Ordered_list'
+  text: 'Ordered_list'
 }, {
   id: CHECK_LIST_ITEM,
   iconClass: 'sdocfont sdoc-check-square',
   type: CHECK_LIST_ITEM,
-  title: 'Check_list_item'
+  text: 'Check_list_item'
 }, {
   id: ALIGN_LEFT,
   iconClass: 'sdocfont sdoc-align-left',
   type: 'left',
-  title: 'Left'
+  text: 'Left'
 }, {
   id: ALIGN_CENTER,
   iconClass: 'sdocfont sdoc-align-center',
   type: 'center',
-  title: 'Center'
+  text: 'Center'
 }, {
   id: ALIGN_RIGHT,
   iconClass: 'sdocfont sdoc-align-right',
   type: 'right',
-  title: 'Right'
+  text: 'Right'
 }, {
   id: BLOCKQUOTE,
   iconClass: 'sdocfont sdoc-quote1',
   type: BLOCKQUOTE,
-  title: 'Quote'
+  text: 'Quote'
 }];
+export var INSERT_POSITION = {
+  BEFORE: 'before',
+  CURRENT: 'current',
+  AFTER: 'after'
+};
+export var INSERT_IMAGE_TYPE = {
+  LOCAL_IMAGE: 'local-image',
+  WEB_IMAGE: 'web-image'
+};
 export { BLOCKQUOTE, HEADER, TITLE, SUBTITLE, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, SUPERSCRIPT, SUBSCRIPT, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, TEXT_STYLE_MORE, BOLD_ITALIC, TEXT_ALIGN, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_CENTER, ELEMENT_TYPE, KEYBOARD, MAC_HOTKEYS, WIN_HOTKEYS, DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_LIST, CLEAR_FORMAT, DEFAULT_FONT_COLOR, RECENT_USED_HIGHLIGHT_COLORS_KEY, RECENT_USED_FONT_COLORS_KEY, RECENT_USED_TABLE_CELL_BG_COLORS_KEY, DEFAULT_LAST_USED_FONT_COLOR, DEFAULT_LAST_USED_HIGHLIGHT_COLOR, DEFAULT_LAST_USED_TABLE_CELL_BG_COLOR, FONT_SIZE, DEFAULT_FONT, FONT, GOOGLE_FONT_CLASS, RECENT_USED_FONTS_KEY, SDOC_FONT_SIZE, SDOC_LINK };

package/dist/basic-sdk/extension/plugins/code-block/helpers.js

@@ -3,8 +3,9 @@ import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIt
 import copy from 'copy-to-clipboard';
 import { Transforms, Editor, Node } from '@seafile/slate';
 import slugid from 'slugid';
-import { CODE_BLOCK, CODE_LINE, PARAGRAPH } from '../../constants';
+import { CODE_BLOCK, CODE_LINE, INSERT_POSITION, PARAGRAPH } from '../../constants';
 import { getNodeType, getSelectedNodeByType, getSelectedElems } from '../../core';
+import { genCodeLangs } from './prismjs';
 export var isMenuDisabled = function isMenuDisabled(editor, readonly) {
   if (readonly) return true;
   var selection = editor.selection;
@@ -28,35 +29,42 @@ export var getSelectCodeElem = function getSelectCodeElem(editor) {
   if (codeNode == null) return null;
   return codeNode;
 };
-export var changeToCodeBlock = function changeToCodeBlock(editor, language) {
+export var changeToCodeBlock = function changeToCodeBlock(editor) {
+  var language = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INSERT_POSITION.CURRENT;
   // Summarizes the strings for the selected highest-level node
   var strArr = [];
-  var nodeEntries = Editor.nodes(editor, {
-    match: function match(n) {
-      return editor.children.includes(n);
-    },
-    // Matches the selected node at the highest level
-    universal: true
-  });
-  var _iterator = _createForOfIteratorHelper(nodeEntries),
-    _step;
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var nodeEntry = _step.value;
-      var _nodeEntry = _slicedToArray(nodeEntry, 1),
-        n = _nodeEntry[0];
-      if (n) strArr.push(Node.string(n));
-    }
+  if (position === INSERT_POSITION.AFTER) {
+    strArr = [''];
+  } else {
+    // Select the plain text of the node
+    var nodeEntries = Editor.nodes(editor, {
+      match: function match(n) {
+        return editor.children.includes(n);
+      },
+      // Matches the selected node at the highest level
+      universal: true
+    });
+    var _iterator = _createForOfIteratorHelper(nodeEntries),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var nodeEntry = _step.value;
+        var _nodeEntry = _slicedToArray(nodeEntry, 1),
+          n = _nodeEntry[0];
+        if (n) strArr.push(Node.string(n));
+      }
 
-    // Deletes the selected node at the highest level
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
+      // Deletes the selected node at the highest level
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    Transforms.removeNodes(editor, {
+      mode: 'highest'
+    });
   }
-  Transforms.removeNodes(editor, {
-    mode: 'highest'
-  });
 
   // Insert the codeBlockNode node
   var newCodeBlockNode = {
@@ -73,12 +81,17 @@ export var changeToCodeBlock = function changeToCodeBlock(editor, language) {
       children: [{
         text: strArr.join('\n'),
         id: slugid.nice()
-      } // Select the plain text of the node
-      ]
+      }]
     }]
   };
-
   var path = Editor.path(editor, editor.selection);
+  if (position === INSERT_POSITION.AFTER) {
+    Transforms.insertNodes(editor, newCodeBlockNode, {
+      mode: 'highest',
+      at: [path[0] + 1]
+    });
+    return;
+  }
   var atPath = path ? [path[0]] : editor.selection;
   Transforms.insertNodes(editor, newCodeBlockNode, {
     mode: 'highest',
@@ -131,4 +144,15 @@ export var deleteBackwardByLength = function deleteBackwardByLength(editor, len)
     Editor.deleteBackward(editor, 'word');
     i--;
   }
+};
+export var getSelectedLangOption = function getSelectedLangOption(lang) {
+  var langs = genCodeLangs();
+  var selectedLangOption = langs.find(function (item) {
+    return item.value === lang;
+  });
+  return selectedLangOption || langs[0];
+};
+export var getValidLang = function getValidLang(lang) {
+  var langOption = getSelectedLangOption(lang);
+  return langOption.value;
 };

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

@@ -4,6 +4,7 @@ import { Input } from 'reactstrap';
 import { withTranslation } from 'react-i18next';
 import { ElementPopover } from '../../../commons/';
 import { genCodeLangs } from '../prismjs';
+import { getSelectedLangOption } from '../helpers';
 import './index.css';
 var CodeBlockHoverMenu = function CodeBlockHoverMenu(_ref) {
   var style = _ref.style,
@@ -70,10 +71,8 @@ var CodeBlockHoverMenu = function CodeBlockHoverMenu(_ref) {
     if (language === 'text') {
       selectedLanguage = 'plaintext';
     }
-    var selectedLanguageText = genCodeLangs().find(function (item) {
-      return item.value === selectedLanguage;
-    }).text;
-    setSelectedLanguageText(selectedLanguageText);
+    var selectedLanguageOption = getSelectedLangOption(selectedLanguage);
+    setSelectedLanguageText(selectedLanguageOption.text);
   }, [language]);
   var onChange = useCallback(function (e) {
     var filterData = [];

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

@@ -1,68 +1,25 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-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 React, { useCallback } from 'react';
 import { focusEditor } from '../../../core';
-import { CODE_BLOCK, MENUS_CONFIG_MAP } from '../../../constants';
-import { MenuItem } from '../../../commons';
-import { getSelectCodeElem, isMenuDisabled, changeToCodeBlock, changeToPlainText } from '../helpers';
-var CodeBlockMenu = /*#__PURE__*/function (_React$Component) {
-  _inherits(CodeBlockMenu, _React$Component);
-  var _super = _createSuper(CodeBlockMenu);
-  function CodeBlockMenu() {
-    var _this;
-    _classCallCheck(this, CodeBlockMenu);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.isActive = function () {
-      var editor = _this.props.editor;
-      var elem = getSelectCodeElem(editor);
-      return !!elem;
-    };
-    _this.isDisabled = function () {
-      var _this$props = _this.props,
-        editor = _this$props.editor,
-        readonly = _this$props.readonly;
-      return isMenuDisabled(editor, readonly);
-    };
-    _this.onMouseDown = function (e) {
-      e.preventDefault();
-      e.stopPropagation();
-      var editor = _this.props.editor;
-      var active = _this.isActive(editor);
-      if (active) {
-        // It is currently in a code-block and needs to be converted to plain text
-        changeToPlainText(editor);
-      } else {
-        // It is not currently in code-block, so it needs to be converted to code-block
-        changeToCodeBlock(editor, 'plaintext');
-      }
-      focusEditor(editor);
-    };
-    return _this;
-  }
-  _createClass(CodeBlockMenu, [{
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        isRichEditor = _this$props2.isRichEditor,
-        className = _this$props2.className;
-      var menuConfig = MENUS_CONFIG_MAP[CODE_BLOCK];
-      var props = _objectSpread(_objectSpread({
-        isRichEditor: isRichEditor,
-        className: className
-      }, menuConfig), {}, {
-        disabled: this.isDisabled(),
-        isActive: this.isActive(),
-        onMouseDown: this.onMouseDown
-      });
-      return /*#__PURE__*/React.createElement(MenuItem, props);
-    }
-  }]);
-  return CodeBlockMenu;
-}(React.Component);
+import { MENUS_CONFIG_MAP, ELEMENT_TYPE, INSERT_POSITION } from '../../../constants';
+import { isMenuDisabled, changeToCodeBlock } from '../helpers';
+import DropdownMenuItem from '../../../commons/dropdown-menu-item';
+var CodeBlockMenu = function CodeBlockMenu(_ref) {
+  var editor = _ref.editor,
+    readonly = _ref.readonly,
+    toggle = _ref.toggle;
+  var disabled = isMenuDisabled(editor, readonly);
+  var menuConfig = MENUS_CONFIG_MAP[ELEMENT_TYPE.CODE_BLOCK];
+  var insertCodeBlock = useCallback(function () {
+    changeToCodeBlock(editor, 'plaintext', INSERT_POSITION.CURRENT);
+    toggle && toggle();
+    focusEditor(editor);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, toggle]);
+  return /*#__PURE__*/React.createElement(DropdownMenuItem, {
+    disabled: disabled,
+    menuConfig: menuConfig,
+    onClick: insertCodeBlock
+  });
+};
 export default CodeBlockMenu;