@seafile/sea-email-editor 0.0.5 → 0.0.7

package/dist/assets/icons/divider.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1774854103046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2163" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M960 464v96H64v-96h896z" fill="#000000" p-id="2164"></path></svg>

package/dist/editor/index.js

@@ -17,6 +17,7 @@ const SeaEmailEditor = _ref => {
   let {
     value: initValue,
     options = {},
+    isHtmlValue = true,
     ...rest
   } = _ref;
   const [isLoading, setLoading] = (0, _react.useState)(true);
@@ -37,7 +38,7 @@ const SeaEmailEditor = _ref => {
     });
   }, [options.lang]);
   (0, _react.useEffect)(() => {
-    setValue((0, _slateConvert.deserializeHtml)(initValue));
+    setValue(isHtmlValue ? (0, _slateConvert.deserializeHtml)(initValue) : (0, _slateConvert.mdStringToSlate)(initValue));
     setLoading(false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

package/dist/editor/main/index.js

@@ -28,6 +28,7 @@ const Main = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     autoFocus = true,
     value,
     editorApi,
+    assetURLPrefix,
     onSave,
     onChange,
     onLinkClick
@@ -43,11 +44,12 @@ const Main = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       return editor;
     }, (0, _slateHistory.withHistory)((0, _slateReact.withReact)((0, _slate.createEditor)())));
     _editor._id = (0, _slugid.nice)();
+    _editor.assetURLPrefix = assetURLPrefix;
     return (0, _withPropsEditor.default)(_editor, {
       editorApi,
       onSave
     });
-  }, [editorApi, onSave]);
+  }, [editorApi, assetURLPrefix, onSave]);
   const eventProxy = (0, _react.useMemo)(() => {
     return new _eventHandler.default(editor);
   }, [editor]);

package/dist/extension/constants/element-default-style.js

@@ -8,10 +8,10 @@ exports.ELEMENT_DEFAULT_STYLE = void 0;
 var ElementTypes = _interopRequireWildcard(require("./element-types"));
 const ELEMENT_DEFAULT_STYLE = exports.ELEMENT_DEFAULT_STYLE = {
   [ElementTypes.BLOCKQUOTE]: {
-    borderLeft: '4px solid #ddd',
+    borderLeft: '2px solid rgba(0, 40, 100, .12)',
     color: '#666',
     margin: '1.2em 0',
-    padding: '0 15px'
+    padding: '0 16px'
   },
   [ElementTypes.CHECK_LIST_ITEM]: {
     margin: '0.5rem 0'
@@ -74,5 +74,12 @@ const ELEMENT_DEFAULT_STYLE = exports.ELEMENT_DEFAULT_STYLE = {
   },
   [ElementTypes.PARAGRAPH]: {
     lineHeight: 1.5
+  },
+  [ElementTypes.DIVIDER]: {
+    display: 'flex',
+    alignItems: 'center',
+    height: '13px',
+    width: '100%',
+    cursor: 'pointer'
   }
 };

package/dist/extension/constants/element-types.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UNORDERED_LIST = exports.TABLE_ROW = exports.TABLE_CELL = exports.TABLE = exports.PARAGRAPH = exports.P = exports.ORDERED_LIST = exports.LIST_ITEM = exports.LINK = exports.IMAGE = exports.HEADER6 = exports.HEADER5 = exports.HEADER4 = exports.HEADER3 = exports.HEADER2 = exports.HEADER1 = exports.HEADER = exports.FORMULA = exports.CODE_LINE = exports.CODE_BLOCK = exports.CODE = exports.CHECK_LIST_ITEM = exports.BR = exports.BLOCKQUOTE = void 0;
+exports.UNORDERED_LIST = exports.TABLE_ROW = exports.TABLE_CELL = exports.TABLE = exports.PARAGRAPH = exports.P = exports.ORDERED_LIST = exports.LIST_ITEM = exports.LINK = exports.IMAGE = exports.HEADER6 = exports.HEADER5 = exports.HEADER4 = exports.HEADER3 = exports.HEADER2 = exports.HEADER1 = exports.HEADER = exports.FORMULA = exports.DIVIDER = exports.CODE_LINE = exports.CODE_BLOCK = exports.CODE = exports.CHECK_LIST_ITEM = exports.BR = exports.BLOCKQUOTE = void 0;
 const BLOCKQUOTE = exports.BLOCKQUOTE = 'blockquote';
 const HEADER = exports.HEADER = 'header';
 // each header type should be start with HEADER, all of justices should based on HEADER
@@ -26,6 +26,7 @@ const TABLE_CELL = exports.TABLE_CELL = 'table_cell';
 const IMAGE = exports.IMAGE = 'image';
 const LINK = exports.LINK = 'link';
 const FORMULA = exports.FORMULA = 'formula';
+const DIVIDER = exports.DIVIDER = 'divider';
 const P = exports.P = 'p';
 const BR = exports.BR = 'br';
 

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

@@ -19,7 +19,11 @@ const TEXT_STYLE_MAP = exports.TEXT_STYLE_MAP = {
   CODE: CODE,
   DELETE: DELETE,
   ADD: ADD,
-  BOLD_ITALIC: `${BOLD}_${ITALIC}`
+  BOLD_ITALIC: `${BOLD}_${ITALIC}`,
+  FONT: 'font',
+  FONT_SIZE: 'font_size',
+  COLOR: 'color',
+  BG_COLOR: 'bg_color'
 };
 const TABLE_SUBMENU_MAP = exports.TABLE_SUBMENU_MAP = {
   TABLE_ALIGN_LEFT: 'table_align_left',
@@ -138,5 +142,10 @@ const MENUS_CONFIG_MAP = exports.MENUS_CONFIG_MAP = {
     id: `sea_email_${CLEAR_FORMAT}`,
     icon: 'clear-format',
     text: 'Clear format'
+  },
+  [_elementTypes.DIVIDER]: {
+    id: `sea_email_${_elementTypes.DIVIDER}`,
+    icon: 'divider',
+    text: 'Divider'
   }
 };

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

@@ -35,18 +35,21 @@ const CodeBlockMenu = _ref => {
     }),
     id: menuConfig.id,
     onClick: onClick,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
-      icon: menuConfig.icon,
-      className: "no-hover-bg sea-email-option-editor-option-icon",
-      style: {
-        marginLeft: 0,
-        marginRight: 8
-      },
-      size: 16
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: "text-truncate",
-      title: (0, _constants2.gettext)(menuConfig.text),
-      children: (0, _constants2.gettext)(menuConfig.text)
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "sea-email-option-editor-option-content",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
+        icon: menuConfig.icon,
+        className: "no-hover-bg sea-email-option-editor-option-icon",
+        style: {
+          marginLeft: 0,
+          marginRight: 8
+        },
+        size: 16
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "text-truncate",
+        title: (0, _constants2.gettext)(menuConfig.text),
+        children: (0, _constants2.gettext)(menuConfig.text)
+      })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
       icon: '',
       className: "sea-email-option-editor-option-check-btn no-hover-bg",

package/dist/extension/plugins/divider/helper.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transformToDivider = exports.isDisabled = exports.insertDivider = void 0;
+var _slate = require("slate");
+var _core = require("../../core");
+var _constants = require("../../constants");
+const isDisabled = (editor, readonly) => {
+  const {
+    selection
+  } = editor;
+  if (readonly || !selection) return true;
+  const disableTypes = [_constants.ElementTypes.TABLE, _constants.ElementTypes.TABLE_ROW, _constants.ElementTypes.TABLE_CELL, _constants.ElementTypes.FORMULA, _constants.ElementTypes.CODE_BLOCK, _constants.ElementTypes.BLOCKQUOTE, _constants.ElementTypes.UNORDERED_LIST, _constants.ElementTypes.ORDERED_LIST, _constants.ElementTypes.LIST_ITEM];
+  const [nodeEntry] = _slate.Editor.nodes(editor, {
+    match: n => disableTypes.includes(n.type),
+    mode: 'highest'
+  });
+  if (nodeEntry) return true;
+  return false;
+};
+exports.isDisabled = isDisabled;
+const transformToDivider = editor => {
+  if (!editor.selection) return;
+  _slate.Transforms.setNodes(editor, {
+    type: _constants.ElementTypes.DIVIDER
+  });
+  (0, _core.focusEditor)(editor);
+};
+exports.transformToDivider = transformToDivider;
+const insertDivider = editor => {
+  if (!editor.selection) return;
+  const dividerNode = (0, _core.generateElement)(_constants.ElementTypes.DIVIDER);
+  _slate.Transforms.insertNodes(editor, dividerNode);
+  (0, _core.focusEditor)(editor);
+};
+exports.insertDivider = insertDivider;

package/dist/extension/plugins/divider/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _elementTypes = require("../../constants/element-types");
+var _plugin = _interopRequireDefault(require("./plugin"));
+var _renderElem = _interopRequireDefault(require("./render-elem"));
+const DividerPlugin = {
+  type: _elementTypes.DIVIDER,
+  nodeType: 'element',
+  editorPlugin: _plugin.default,
+  renderElements: [_renderElem.default]
+};
+var _default = exports.default = DividerPlugin;

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

@@ -0,0 +1,61 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var _elementTypes = require("../../../constants/element-types");
+var _constants = require("../../../constants");
+var _components = require("../../../../components");
+var _constants2 = require("../../../../constants");
+var _helper = require("../helper");
+var _jsxRuntime = require("react/jsx-runtime");
+const menuConfig = _constants.MENUS_CONFIG_MAP[_elementTypes.DIVIDER];
+const DividerMenu = _ref => {
+  let {
+    readonly,
+    editor,
+    toggle
+  } = _ref;
+  const disabled = (0, _react.useMemo)(() => (0, _helper.isDisabled)(editor, readonly), [readonly, editor]);
+  const onClick = (0, _react.useCallback)(e => {
+    if (disabled) return;
+    e.preventDefault();
+    (0, _helper.insertDivider)(editor);
+    toggle && toggle();
+  }, [disabled, editor, toggle]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)('sea-email-option-editor-option', {
+      'disabled': disabled
+    }),
+    id: menuConfig.id,
+    onClick: onClick,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "sea-email-option-editor-option-content",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
+        icon: menuConfig.icon,
+        className: "no-hover-bg sea-email-option-editor-option-icon",
+        style: {
+          marginLeft: 0,
+          marginRight: 8
+        },
+        size: 16
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "text-truncate",
+        title: (0, _constants2.gettext)(menuConfig.text),
+        children: (0, _constants2.gettext)(menuConfig.text)
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
+      icon: '',
+      className: "sea-email-option-editor-option-check-btn no-hover-bg",
+      style: {
+        marginLeft: 12
+      }
+    })]
+  });
+};
+var _default = exports.default = DividerMenu;

package/dist/extension/plugins/divider/plugin.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slate = require("slate");
+var _constants = require("../../constants");
+var _core = require("../../core");
+var _elementTypes = require("../../constants/element-types");
+const HR_PATTERNS = ['---', '***', '___'];
+const withDivider = editor => {
+  const {
+    isVoid,
+    insertText,
+    normalizeNode
+  } = editor;
+  const newEditor = editor;
+  newEditor.isVoid = element => {
+    const {
+      type
+    } = element;
+    if (type === _constants.ElementTypes.DIVIDER) return true;
+    return isVoid(element);
+  };
+  newEditor.insertText = text => {
+    const {
+      selection
+    } = newEditor;
+    if (!selection || !_slate.Range.isCollapsed(selection)) {
+      insertText(text);
+      return;
+    }
+    const [blockEntry] = _slate.Editor.nodes(newEditor, {
+      at: selection,
+      match: n => _slate.Element.isElement(n) && (n.type === _constants.ElementTypes.PARAGRAPH || n.type === _constants.ElementTypes.P)
+    });
+    if (!blockEntry) {
+      insertText(text);
+      return;
+    }
+    const [blockNode, blockPath] = blockEntry;
+    const blockText = _slate.Node.string(blockNode);
+    const nextText = blockText + text;
+    if (HR_PATTERNS.includes(nextText)) {
+      _slate.Editor.withoutNormalizing(newEditor, () => {
+        _slate.Transforms.removeNodes(newEditor, {
+          at: blockPath
+        });
+        _slate.Transforms.insertNodes(newEditor, (0, _core.generateEmptyElement)(_constants.ElementTypes.DIVIDER), {
+          at: blockPath
+        });
+        const nextPath = _slate.Path.next(blockPath);
+        _slate.Transforms.insertNodes(newEditor, (0, _core.generateEmptyElement)(_constants.ElementTypes.PARAGRAPH), {
+          at: nextPath
+        });
+        _slate.Transforms.select(newEditor, _slate.Editor.start(newEditor, nextPath));
+      });
+      return;
+    }
+    return insertText(text);
+  };
+  newEditor.normalizeNode = _ref => {
+    let [node, path] = _ref;
+    if (node.type === _elementTypes.DIVIDER) {
+      const isLast = (0, _core.isLastNode)(newEditor, node);
+      if (isLast) {
+        const paragraph = (0, _core.generateEmptyElement)(_elementTypes.PARAGRAPH);
+        _slate.Transforms.insertNodes(newEditor, paragraph, {
+          at: [path[0] + 1]
+        });
+        return;
+      }
+      const isFirst = (0, _core.isFirstNode)(newEditor, node);
+      if (isFirst) {
+        const paragraph = (0, _core.generateEmptyElement)(_elementTypes.PARAGRAPH);
+        _slate.Transforms.insertNodes(newEditor, paragraph, {
+          at: [path[0]]
+        });
+        return;
+      }
+    }
+    return normalizeNode([node, path]);
+  };
+  return newEditor;
+};
+var _default = exports.default = withDivider;

package/dist/extension/plugins/divider/render-elem/index.css

@@ -0,0 +1,4 @@
+.sea-email-editor-divider-highlight {
+  border-radius: 4px;
+  background-color: Highlight;
+}

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

@@ -0,0 +1,44 @@
+"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 _slateReact = require("slate-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _constants = require("../../../constants");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+/* eslint-disable react-hooks/rules-of-hooks */
+
+const renderDivider = _ref => {
+  let {
+    attributes,
+    children,
+    element
+  } = _ref;
+  const isSelected = (0, _slateReact.useSelected)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    "data-id": element.id,
+    className: (0, _classnames.default)(element.className, {
+      'sea-email-editor-divider-highlight': isSelected
+    }),
+    ...attributes,
+    style: {
+      ...(_constants.ELEMENT_DEFAULT_STYLE[element.type] || {}),
+      ...((element === null || element === void 0 ? void 0 : element.style) || {})
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        width: '100%',
+        height: 1,
+        backgroundColor: '#ccc',
+        margin: '5px 0'
+      },
+      contentEditable: false
+    }), children]
+  });
+};
+var _default = exports.default = renderDivider;

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

@@ -47,18 +47,21 @@ const ImageMenu = _ref => {
       }),
       ref: domRef,
       id: menuConfig.id,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
-        icon: menuConfig.icon,
-        className: "no-hover-bg sea-email-option-editor-option-icon",
-        style: {
-          marginLeft: 0,
-          marginRight: 8
-        },
-        size: 16
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "text-truncate",
-        title: (0, _constants.gettext)(menuConfig.text),
-        children: (0, _constants.gettext)(menuConfig.text)
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "sea-email-option-editor-option-content",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
+          icon: menuConfig.icon,
+          className: "no-hover-bg sea-email-option-editor-option-icon",
+          style: {
+            marginLeft: 0,
+            marginRight: 8
+          },
+          size: 16
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "text-truncate",
+          title: (0, _constants.gettext)(menuConfig.text),
+          children: (0, _constants.gettext)(menuConfig.text)
+        })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
         icon: readonly ? '' : 'arrow-right',
         className: "sea-email-option-editor-option-check-btn no-hover-bg",

package/dist/extension/plugins/image/render-element/image-previewer.js

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _slateReact = require("slate-react");
 var _reactImageLightbox = _interopRequireDefault(require("@seafile/react-image-lightbox"));
 var _helper = require("../helper");
+var _constants = require("../../../../constants");
 require("@seafile/react-image-lightbox/style.css");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -56,7 +57,9 @@ const ImagePreviewer = _ref => {
       overlay: {
         zIndex: 1071
       }
-    }
+    },
+    zoomInTip: (0, _constants.gettext)('Zoom in'),
+    zoomOutTip: (0, _constants.gettext)('Zoom out')
   });
 };
 var _default = exports.default = ImagePreviewer;

package/dist/extension/plugins/image/render-element/index.js

@@ -13,6 +13,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _helper = require("../helper");
 var _imagePreviewer = _interopRequireDefault(require("./image-previewer"));
 var _components = require("../../../../components");
+var _common = require("../../../../utils/common");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable react-hooks/rules-of-hooks */
@@ -101,6 +102,10 @@ const renderImage = (_ref, editor) => {
     event.preventDefault();
     setIsFullScreening(false);
   }, []);
+  let src = (element === null || element === void 0 ? void 0 : (_element$data2 = element.data) === null || _element$data2 === void 0 ? void 0 : _element$data2.src) || '';
+  if (src && editor !== null && editor !== void 0 && editor.assetURLPrefix && !(0, _common.isUrl)(src) && !src.startsWith('data:image')) {
+    src = editor.assetURLPrefix + (src.startsWith('/') ? src.slice(1) : src);
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
     ...attributes,
     contentEditable: false,
@@ -113,8 +118,8 @@ const renderImage = (_ref, editor) => {
         'selected': isSelected,
         'error': isError
       }),
-      alt: (element === null || element === void 0 ? void 0 : (_element$data2 = element.data) === null || _element$data2 === void 0 ? void 0 : _element$data2.alt) || ' ' + (0, _constants.gettext)('Image loading failed'),
-      src: element === null || element === void 0 ? void 0 : (_element$data3 = element.data) === null || _element$data3 === void 0 ? void 0 : _element$data3.src,
+      alt: (element === null || element === void 0 ? void 0 : (_element$data3 = element.data) === null || _element$data3 === void 0 ? void 0 : _element$data3.alt) || ' ' + (0, _constants.gettext)('Image loading failed'),
+      src: src,
       width: element === null || element === void 0 ? void 0 : element.data.width,
       height: element === null || element === void 0 ? void 0 : element.data.height
     }), isSelected && !isLoadingImage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {

package/dist/extension/plugins/index.js

@@ -22,6 +22,12 @@ Object.defineProperty(exports, "CodeBlockPlugin", {
     return _codeBlock.default;
   }
 });
+Object.defineProperty(exports, "DividerPlugin", {
+  enumerable: true,
+  get: function () {
+    return _divider.default;
+  }
+});
 Object.defineProperty(exports, "FormulaPlugin", {
   enumerable: true,
   get: function () {
@@ -110,7 +116,8 @@ var _formula = _interopRequireDefault(require("./formula"));
 var _markdown = _interopRequireDefault(require("./markdown"));
 var _html = _interopRequireDefault(require("./html"));
 var _p = _interopRequireDefault(require("./p"));
-const Plugins = [_paragraph.default, _textStyle.default, _header.default, _image.default, _checkList.default, _list.default, _codeBlock.default, _table.default, _blockquote.default, _link.default, _formula.default, _markdown.default, _html.default, _p.default,
+var _divider = _interopRequireDefault(require("./divider"));
+const Plugins = [_paragraph.default, _textStyle.default, _header.default, _image.default, _checkList.default, _list.default, _codeBlock.default, _table.default, _blockquote.default, _link.default, _formula.default, _markdown.default, _html.default, _p.default, _divider.default,
 // put at the end
 _nodeId.default];
 var _default = exports.default = Plugins;

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

@@ -45,7 +45,6 @@ const insertTable = (editor, rowNum, columnNum) => {
     rowNum,
     columnNum
   });
-  console.log(table);
   const {
     selection
   } = editor;

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

@@ -32,18 +32,21 @@ const TableMenu = _ref => {
       }),
       ref: domRef,
       id: menuConfig.id,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
-        icon: menuConfig.icon,
-        className: "no-hover-bg sea-email-option-editor-option-icon",
-        style: {
-          marginLeft: 0,
-          marginRight: 8
-        },
-        size: 16
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "text-truncate",
-        title: (0, _constants2.gettext)(menuConfig.text),
-        children: (0, _constants2.gettext)(menuConfig.text)
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "sea-email-option-editor-option-content",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
+          icon: menuConfig.icon,
+          className: "no-hover-bg sea-email-option-editor-option-icon",
+          style: {
+            marginLeft: 0,
+            marginRight: 8
+          },
+          size: 16
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "text-truncate",
+          title: (0, _constants2.gettext)(menuConfig.text),
+          children: (0, _constants2.gettext)(menuConfig.text)
+        })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
         icon: disabled ? '' : 'arrow-right',
         className: "sea-email-option-editor-option-check-btn no-hover-bg",

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

@@ -23,15 +23,13 @@ const TextStyleMenu = _ref => {
   const onClick = (0, _react.useCallback)((e, toggleType) => {
     (0, _helpers.toggleTextStyle)(editor, type);
   }, [editor, type]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarItem, {
-      editor: editor,
-      disabled: isDisabled,
-      isActive: isActive,
-      className: className,
-      onClick: onClick,
-      ...config
-    })
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarItem, {
+    editor: editor,
+    disabled: isDisabled,
+    isActive: isActive,
+    className: className,
+    onClick: onClick,
+    ...config
   });
 };
 var _default = exports.default = TextStyleMenu;

package/dist/extension/render/render-element.js

@@ -100,6 +100,11 @@ const SlateElement = _ref => {
         const [renderP] = _plugins.PPlugin.renderElements;
         return renderP(props);
       }
+    case _constants.ElementTypes.DIVIDER:
+      {
+        const [renderDivider] = _plugins.DividerPlugin.renderElements;
+        return renderDivider(props);
+      }
     default:
       {
         const [renderParagraph] = _plugins.ParagraphPlugin.renderElements;

package/dist/extension/toolbar/insert-toolbar.js

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _menu = _interopRequireDefault(require("../plugins/image/menu"));
 var _menu2 = _interopRequireDefault(require("../plugins/table/menu"));
 var _menu3 = _interopRequireDefault(require("../plugins/code-block/menu"));
+var _menu4 = _interopRequireDefault(require("../plugins/divider/menu"));
 var _constants = require("../../constants");
 var _components = require("../../components");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -69,6 +70,8 @@ const InsertToolbar = _ref => {
             ...props
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_menu3.default, {
             ...props
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_menu4.default, {
+            ...props
           })]
         })
       })

package/dist/locale/lang/en.json

@@ -79,5 +79,7 @@
   "Underline": "Underline",
   "Row number": "Row number",
   "Column number": "Column number",
-  "Copy link": "Copy link"
+  "Copy link": "Copy link",
+  "Divider": "Divider",
+  "Close": "Close"
 }

package/dist/slate-convert/html-to-slate/constants.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "CODE_LINE", {
     return _elementTypes.CODE_LINE;
   }
 });
+Object.defineProperty(exports, "DIVIDER", {
+  enumerable: true,
+  get: function () {
+    return _elementTypes.DIVIDER;
+  }
+});
 Object.defineProperty(exports, "HEADER1", {
   enumerable: true,
   get: function () {
@@ -133,7 +139,7 @@ Object.defineProperty(exports, "UNORDERED_LIST", {
   }
 });
 var _elementTypes = require("../../extension/constants/element-types");
-const TOP_LEVEL_TYPES = exports.TOP_LEVEL_TYPES = [_elementTypes.BLOCKQUOTE, _elementTypes.HEADER1, _elementTypes.HEADER2, _elementTypes.HEADER3, _elementTypes.HEADER4, _elementTypes.HEADER5, _elementTypes.HEADER6, _elementTypes.ORDERED_LIST, _elementTypes.UNORDERED_LIST, _elementTypes.CHECK_LIST_ITEM, _elementTypes.PARAGRAPH, _elementTypes.CODE_BLOCK, _elementTypes.TABLE, _elementTypes.P, _elementTypes.BR];
+const TOP_LEVEL_TYPES = exports.TOP_LEVEL_TYPES = [_elementTypes.BLOCKQUOTE, _elementTypes.HEADER1, _elementTypes.HEADER2, _elementTypes.HEADER3, _elementTypes.HEADER4, _elementTypes.HEADER5, _elementTypes.HEADER6, _elementTypes.ORDERED_LIST, _elementTypes.UNORDERED_LIST, _elementTypes.CHECK_LIST_ITEM, _elementTypes.PARAGRAPH, _elementTypes.CODE_BLOCK, _elementTypes.TABLE, _elementTypes.P, _elementTypes.BR, _elementTypes.DIVIDER];
 const INLINE_LEVEL_TYPES = exports.INLINE_LEVEL_TYPES = [_elementTypes.IMAGE, _elementTypes.LINK];
 const HEADER_LIST = exports.HEADER_LIST = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'];
 const HEADER_TYPE_MAP = exports.HEADER_TYPE_MAP = {