@seafile/sdoc-editor 0.1.96 → 0.1.97

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

@@ -25,5 +25,6 @@
 }
 
 .sdoc-dropdown-menu .sdoc-dropdown-menu-item .sdocfont {
-  font-size: 14px;
+  font-size: 12px;
+  line-height: 12px;
 }

package/dist/basic-sdk/assets/css/textlink-hovermenu.css

@@ -28,6 +28,7 @@
   color: #212529;
   padding: 0 5px;
   border-radius: 2px;
+  line-height: 20px;
 }
 
 .link-op-menu-link:hover {
@@ -51,11 +52,12 @@
 }
 
 .link-op-icon .sdocfont {
-  font-size: 14px;
+  font-size: 12px;
+  color: #444;
 }
 
 .link-op-icon:hover {
-  background: #f1f1f1;
+  background: #f2f2f2;
 }
 
 .seafile-ed-hovermenu-mouseclick {

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

@@ -24,7 +24,7 @@
 
 .menu-group .sdoc-color-menu .sdoc-color-toggle:hover,
 .menu-group .sdoc-color-menu .last-used-color-container:not(.disabled):hover {
-  background-color: rgba(0, 0, 0, 0.08);
+  background-color: #E5E5E5;
 }
 
 .menu-group .sdoc-color-menu.disabled .sdoc-color-toggle {
@@ -32,9 +32,9 @@
 }
 
 .sdoc-color-menu .sdoc-color-icon {
-  font-size: 12px !important;
   height: 12px;
   width: 12px;
+  transform: scale(.85);
   line-height: 12px;
 }
 
@@ -42,7 +42,7 @@
   width: 14px;
   height: 3px;
   border-radius: 1px;
-  margin-top: 2px;
+  margin-top: 1px;
   border: 1px solid rgba(0, 0, 0, .08);
 }
 

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

@@ -2,12 +2,13 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useRef, useState } from 'react';
 import { withTranslation } from 'react-i18next';
 import classnames from 'classnames';
-import { UncontrolledPopover, UncontrolledTooltip } from 'reactstrap';
+import { UncontrolledPopover } from 'reactstrap';
 import { ChromePicker } from 'react-color';
 import { DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_COLORS } from '../../constants';
 import { LocalStorage } from '../../../../utils';
 import { eventStopPropagation } from '../../../utils/mouse-event';
 import ColorItem from './color-item';
+import Tooltip from '../tooltip';
 import './index.css';
 var ColorMenu = function ColorMenu(_ref) {
   var iconClass = _ref.iconClass,
@@ -126,11 +127,8 @@ var ColorMenu = function ColorMenu(_ref) {
     className: "sdoc-color-toggle sdoc-menu-with-dropdown-triangle"
   }, /*#__PURE__*/React.createElement("i", {
     className: "sdoc-menu-with-dropdown-triangle-icon sdocfont sdoc-".concat(isShowMenu ? 'caret-up' : 'drop-down')
-  }))), text && /*#__PURE__*/React.createElement(UncontrolledTooltip, {
-    target: buttonId,
-    fade: false,
-    placement: "bottom",
-    delay: 0
+  }))), text && /*#__PURE__*/React.createElement(Tooltip, {
+    target: buttonId
   }, t(text)), !disabled && /*#__PURE__*/React.createElement(UncontrolledPopover, {
     target: id,
     className: classnames('sdoc-color-menu-popover', popoverClassName),

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

@@ -1,83 +1,47 @@
-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 { Tooltip } from 'reactstrap';
-import { withTranslation } from 'react-i18next';
-var MenuItem = /*#__PURE__*/function (_React$Component) {
-  _inherits(MenuItem, _React$Component);
-  var _super = _createSuper(MenuItem);
-  function MenuItem(props) {
-    var _this;
-    _classCallCheck(this, MenuItem);
-    _this = _super.call(this, props);
-    _this.onMouseDown = function (event) {
-      if (_this.props.disabled) return;
-      _this.props.onMouseDown(event, _this.props.type);
-    };
-    // onClick = (event) => {
-    //   event.stopPropagation();
-    // }
-    _this.toggle = function () {
-      _this.setState({
-        isShowToolTip: !_this.state.isShowToolTip
-      });
-    };
-    _this.getClassName = function () {
-      var _this$props = _this.props,
-        isRichEditor = _this$props.isRichEditor,
-        className = _this$props.className,
-        disabled = _this$props.disabled;
-      var itemClass = 'btn btn-icon btn-secondary btn-active';
-      if (!isRichEditor) return itemClass + ' ' + className;
-      itemClass = "rich-icon-btn ".concat(disabled ? 'rich-icon-btn-disabled' : 'rich-icon-btn-hover');
-      return itemClass + ' ' + className;
-    };
-    _this.state = {
-      isShowToolTip: false
-    };
-    return _this;
-  }
-  _createClass(MenuItem, [{
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        disabled = _this$props2.disabled,
-        isActive = _this$props2.isActive,
-        id = _this$props2.id,
-        iconClass = _this$props2.iconClass,
-        text = _this$props2.text,
-        t = _this$props2.t;
-      var isShowToolTip = this.state.isShowToolTip;
-      var className = this.getClassName();
-      var delay = {
-        show: 0,
-        hide: 0
-      };
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
-        id: id,
-        type: "button",
-        className: className,
-        disabled: disabled,
-        "data-active": isActive,
-        onClick: this.onMouseDown
-      }, /*#__PURE__*/React.createElement("i", {
-        className: iconClass
-      })), /*#__PURE__*/React.createElement(Tooltip, {
-        target: id,
-        isOpen: isShowToolTip,
-        delay: delay,
-        fade: false,
-        placement: "bottom",
-        toggle: this.toggle
-      }, t(text)));
-    }
-  }]);
-  return MenuItem;
-}(React.Component);
+var _this = this;
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import Tooltip from '../tooltip';
+import classnames from 'classnames';
+var MenuItem = function MenuItem(_ref) {
+  var disabled = _ref.disabled,
+    isActive = _ref.isActive,
+    isRichEditor = _ref.isRichEditor,
+    type = _ref.type,
+    onMouseDown = _ref.onMouseDown,
+    className = _ref.className,
+    iconClass = _ref.iconClass,
+    id = _ref.id,
+    text = _ref.text;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var onClick = useCallback(function (event) {
+    if (disabled) return;
+    onMouseDown(event, _this.props.type);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [disabled, type]);
+  var validClassName = classnames('', className, {
+    'btn btn-icon btn-secondary btn-active': !isRichEditor,
+    'rich-icon-btn': isRichEditor,
+    'rich-icon-btn-disabled': isRichEditor && disabled,
+    'rich-icon-btn-hover': isRichEditor && !disabled
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    id: id,
+    type: "button",
+    className: validClassName,
+    disabled: disabled,
+    "data-active": isActive,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement("i", {
+    className: iconClass
+  })), /*#__PURE__*/React.createElement(Tooltip, {
+    target: id
+  }, t(text)));
+};
 MenuItem.defaultProps = {
   isRichEditor: true,
   className: 'menu-group-item'
 };
-export default withTranslation('sdoc-editor')(MenuItem);
+export default MenuItem;

package/dist/basic-sdk/extension/commons/menu/menu.css

@@ -1,30 +1,30 @@
 .menu-group {
   height: 100%;
-  padding: 6px 0 6px 10px;
+  padding: 6px 0 6px 8px;
   font-size: 0.75rem;
   border-right: 1px solid #e5e6e8;
-  color: #555555;
+  color: #444;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .menu-group .menu-group-item {
-  width: 30px;
-  height: 30px;
-  line-height: 30px;
-  margin-right: 10px;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  margin-right: 8px;
   border: none !important;
-  color: #555555;
+  color: #444;
   background-color: #fff;
 }
 
 .menu-group .menu-group-item:disabled {
-  color: #999;
+  color: #BDBDBD;
 }
 
 .menu-group .menu-group-item:hover {
-  background-color: #e5e5e5;
+  background-color: #F2F2F2;
   border-radius: 2px;
 }
 
@@ -32,14 +32,15 @@
   color: #eb8205;
 }
 
-.menu-group .menu-group-item .sdocfont {
-  font-size: 14px;
+.menu-group .menu-group-item .sdocfont,
+.sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-icon .sdocfont {
+  font-size: 12px;
 }
 
 /* sdoc-menu-with-dropdown */
 .menu-group .menu-group-item.sdoc-menu-with-dropdown {
   width: 36px;
-  height: 30px;
+  height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -55,31 +56,27 @@
 }
 
 .sdoc-menu-with-dropdown:not(.disabled):hover {
-  background: #e5e5e5;
+  background: #F2F2F2;
   border-radius: 2px;
 }
 
 .sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-icon {
   width: 24px;
-  height: 30px;
+  height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-icon .sdocfont {
-  font-size: 14px;
-}
-
 .sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-triangle {
   width: 12px;
-  height: 30px;
+  height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-triangle .sdoc-menu-with-dropdown-triangle-icon {
-  font-size: 14px;
-  transform: scale(.8);
+  font-size: 12px;
+  color: #999;
 }

package/dist/basic-sdk/extension/commons/tooltip/index.css

@@ -0,0 +1,10 @@
+.sdoc-tooltip .tooltip-inner {
+  font-weight: lighter;
+  text-align: start;
+  background-color: #303133;
+}
+
+.bs-tooltip-bottom.sdoc-tooltip .arrow::before,
+.sdoc-tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
+  border-bottom-color: #303133;
+}

package/dist/basic-sdk/extension/commons/tooltip/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { UncontrolledTooltip } from 'reactstrap';
+import classnames from 'classnames';
+import './index.css';
+var Tooltip = function Tooltip(_ref) {
+  var target = _ref.target,
+    children = _ref.children,
+    className = _ref.className,
+    placement = _ref.placement;
+  var popperClassName = classnames('sdoc-tooltip', className);
+  return /*#__PURE__*/React.createElement(UncontrolledTooltip, {
+    popperClassName: popperClassName,
+    target: target,
+    fade: false,
+    placement: placement || 'bottom',
+    delay: 0
+  }, children);
+};
+export default Tooltip;

package/dist/basic-sdk/extension/constants/element-type.js

@@ -38,4 +38,9 @@ export var TEXT_ALIGN = 'text-align';
 export var ALIGN_LEFT = 'align-left';
 export var ALIGN_RIGHT = 'align-right';
 export var ALIGN_CENTER = 'align-center';
-export var CLEAR_FORMAT = 'clear-format';
+export var CLEAR_FORMAT = 'clear-format';
+
+// font
+export var FONT_SIZE = 'font-size';
+export var FONT_SIZE_INCREASE = 'font-size-increase';
+export var FONT_SIZE_REDUCE = 'font-size-reduce';

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

@@ -0,0 +1,99 @@
+export var SPECIAL_FONT_SIZE_NAME = ['初号', '小初', '一号', '小一', '二号', '小二', '三号', '小三', '四号', '小四', '五号', '小五'];
+export var DEFAULT_COMMON_FONT_SIZE = 14;
+export var FONT_SIZE = [{
+  name: '初号',
+  value: 42,
+  lang: 'zh-cn'
+}, {
+  name: '小初',
+  value: 36,
+  lang: 'zh-cn'
+}, {
+  name: '一号',
+  value: 26,
+  lang: 'zh-cn'
+}, {
+  name: '小一',
+  value: 24,
+  lang: 'zh-cn'
+}, {
+  name: '二号',
+  value: 22,
+  lang: 'zh-cn'
+}, {
+  name: '小二',
+  value: 18,
+  lang: 'zh-cn'
+}, {
+  name: '三号',
+  value: 16,
+  lang: 'zh-cn'
+}, {
+  name: '小三',
+  value: 15,
+  lang: 'zh-cn'
+}, {
+  name: '四号',
+  value: 14,
+  lang: 'zh-cn'
+}, {
+  name: '小四',
+  value: 12,
+  lang: 'zh-cn'
+}, {
+  name: '五号',
+  value: 10.5,
+  lang: 'zh-cn'
+}, {
+  name: '小五',
+  value: 9,
+  lang: 'zh-cn'
+}, {
+  name: '9',
+  value: 9
+}, {
+  name: '10',
+  value: 10
+}, {
+  name: '11',
+  value: 11
+}, {
+  name: '12',
+  value: 12
+}, {
+  name: '14',
+  value: 14
+}, {
+  name: '16',
+  value: 16
+}, {
+  name: '18',
+  value: 18
+}, {
+  name: '20',
+  value: 20
+}, {
+  name: '22',
+  value: 22
+}, {
+  name: '24',
+  value: 24
+}, {
+  name: '26',
+  value: 26
+}, {
+  name: '28',
+  value: 28
+}, {
+  name: '36',
+  value: 36
+}, {
+  name: '42',
+  value: 42
+}, {
+  name: '48',
+  value: 48
+}, {
+  name: '72',
+  value: 72
+}];

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

@@ -5,6 +5,7 @@ import * as ELEMENT_TYPE from './element-type';
 import { BLOCKQUOTE, HEADER, 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, CLEAR_FORMAT, COLOR, HIGHLIGHT_COLOR } from './element-type';
 import KEYBOARD from './keyboard';
 import { DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_COLORS, 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 } from './color';
+import { SPECIAL_FONT_SIZE_NAME, DEFAULT_COMMON_FONT_SIZE, FONT_SIZE } from './font';
 
 // history
 export var UNDO = 'undo';
@@ -83,19 +84,21 @@ export var MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, _defineProperty(_MENUS_CO
   isColor: true,
   recentUsedColorsKey: RECENT_USED_FONT_COLORS_KEY,
   defaultLastUsedColor: DEFAULT_LAST_USED_FONT_COLOR
-}]), _defineProperty(_MENUS_CONFIG_MAP, TEXT_STYLE_MORE, [{
+}]), _defineProperty(_MENUS_CONFIG_MAP, TEXT_STYLE_MORE, [
+//
+{
   id: STRIKETHROUGH,
   iconClass: 'sdocfont sdoc-strikethrough',
   text: 'Strikethrough',
   type: 'STRIKETHROUGH'
 }, {
   id: SUPERSCRIPT,
-  iconClass: 'sdocfont sdoc-superscript',
+  iconClass: 'sdocfont sdoc-subscripts',
   text: 'Superscript',
   type: 'SUPERSCRIPT'
 }, {
   id: SUBSCRIPT,
-  iconClass: 'sdocfont sdoc-subscript',
+  iconClass: 'sdocfont sdoc-subscripts',
   text: 'Subscript',
   type: 'SUBSCRIPT'
 }]), _defineProperty(_MENUS_CONFIG_MAP, TEXT_ALIGN, [{
@@ -152,4 +155,4 @@ export var HEADER_TYPE_ARRAY = ['header1', 'header2', 'header3', 'header4', 'hea
 export var LIST_TYPE_ARRAY = ['unordered_list', 'ordered_list'];
 export var TRANSPARENT = 'transparent';
 export var CLIPBOARD_FORMAT_KEY = 'x-slate-fragment';
-export { BLOCKQUOTE, HEADER, 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, DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_COLORS, 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 };
+export { BLOCKQUOTE, HEADER, 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, DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_COLORS, 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, SPECIAL_FONT_SIZE_NAME, DEFAULT_COMMON_FONT_SIZE, FONT_SIZE };

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

@@ -2,11 +2,13 @@
   position: absolute;
   height: 42px;
   z-index: 101;
-  width: 250px;
+  width: fit-content;
+  max-width: 250px;
 }
 
 .sdoc-code-block-hover-menu-container .hover-menu-container {
   height: 36px;
+  width: 100%;
   padding: 7px 8px;
   background-color: #fff;
   display: flex;
@@ -20,26 +22,57 @@
 .sdoc-code-block-hover-menu-container .hover-menu-container .active {
   color: #212529;
   text-decoration: none;
-  background: #f1f1f1;
-}
-
-.sdoc-code-block-hover-menu-container .hover-menu-container > span:not(:last-of-type) {
-  padding-right: 12px;
-  border-right: 1px solid #e5e5e5;
+  background: #f2f2f2;
 }
 
 .sdoc-code-block-hover-menu-container .hover-menu-container .op-item {
   position: relative;
+  height: 100%;
+  width: 100%;
   font-size: 12px;
   color: #212529;
-  padding: 5px;
   border-radius: 2px;
+  text-align: center;
+  line-height: 20px;
+}
+
+.sdoc-code-block-hover-menu-container .sdoc-code-block-hover-operation-item.sdoc-code-block-hover-operation-lang .op-item {
+  padding: 0 5px;
+}
+
+.sdoc-code-block-hover-menu-container .hover-menu-container .sdoc-code-block-hover-operation-lang .icon-font {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 8px;
+}
+
+.sdoc-code-block-hover-menu-container .sdoc-code-block-hover-operation-item {
+  height: 20px;
+  width: 20px;
+  text-align: center;
+  justify-content: center;
+}
+
+.sdoc-code-block-hover-menu-container .sdoc-code-block-hover-operation-item.sdoc-code-block-hover-operation-lang {
+  width: fit-content;
+}
+
+.sdoc-code-block-hover-menu-container .sdoc-code-block-hover-operation-lang .icon-font {
+  color: #999;
+}
+
+.sdoc-code-block-hover-menu-container .sdoc-code-block-hover-operation-divider {
+  height: 20px;
+  width: 1px;
+  background-color: #e5e5e5;
+  margin: 0 8px;
 }
 
 .sdoc-code-block-hover-menu-container .hover-menu-container .op-item:hover {
   color: #212529;
   text-decoration: none;
-  background: #f1f1f1;
+  background: #f2f2f2;
 }
 
 .sdoc-code-block-hover-menu-container .hover-menu-container .op-tooltip:hover::after {
@@ -60,9 +93,9 @@
   box-shadow: 0 0 5px #ccc;
 }
 
-.sdoc-code-block-hover-menu-container .hover-menu-container .icon-font {
-  font-size: 14px;
-  color: #999999;
+.sdoc-code-block-hover-menu-container .icon-font {
+  font-size: 12px;
+  color: #444;
 }
 
 .sdoc-langs-list-container {

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

@@ -93,37 +93,43 @@ var CodeBlockHoverMenu = function CodeBlockHoverMenu(_ref) {
     style: menuPosition
   }, /*#__PURE__*/React.createElement("div", {
     className: "hover-menu-container"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "op-group-item"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-code-block-hover-operation-item sdoc-code-block-hover-operation-lang"
+  }, /*#__PURE__*/React.createElement("div", {
     role: "button",
     className: "op-item ".concat(isShowlangsList ? 'active' : ''),
     onClick: onShowLangs
   }, /*#__PURE__*/React.createElement("span", null, selectedLanguageText), /*#__PURE__*/React.createElement("i", {
-    className: "sdocfont sdoc-drop-down ml-1 icon-font"
-  }))), /*#__PURE__*/React.createElement("span", {
-    className: "op-group-item"
-  }, /*#__PURE__*/React.createElement("span", {
+    className: "sdocfont sdoc-drop-down icon-font"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-code-block-hover-operation-divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-code-block-hover-operation-item"
+  }, /*#__PURE__*/React.createElement("div", {
     role: "button",
     className: "op-item ".concat(white_space === 'normal' ? 'active' : '', " op-tooltip"),
     "op-item-tooltip": t('Auto_wrap'),
     onClick: onAutoLineWrap
   }, /*#__PURE__*/React.createElement("i", {
-    className: "sdocfont sdoc-auto-linefeed ml-r icon-font"
-  }))), /*#__PURE__*/React.createElement("span", {
-    className: "op-group-item"
-  }, /*#__PURE__*/React.createElement("span", {
+    className: "sdocfont sdoc-auto-linefeed icon-font"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-code-block-hover-operation-divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-code-block-hover-operation-item"
+  }, /*#__PURE__*/React.createElement("div", {
     role: "button",
     className: "op-item op-tooltip",
     "op-item-tooltip": t('Copy'),
     onClick: onCopyCodeBlock
   }, /*#__PURE__*/React.createElement("i", {
-    className: "sdocfont sdoc-copy ml-r icon-font"
-  }))), /*#__PURE__*/React.createElement("span", {
-    className: "op-group-item"
-  }, /*#__PURE__*/React.createElement("span", {
+    className: "sdocfont sdoc-copy icon-font"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-code-block-hover-operation-divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-code-block-hover-operation-item"
+  }, /*#__PURE__*/React.createElement("div", {
     role: "button",
-    className: 'op-item op-tooltip',
+    className: "op-item op-tooltip",
     "op-item-tooltip": t('Delete'),
     onClick: onDelete
   }, /*#__PURE__*/React.createElement("i", {