@ctzhian/tiptap 1.6.2 → 1.6.4

package/dist/Editor/demo.js

@@ -5,7 +5,6 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 import { Editor, EditorThemeProvider, EditorToolbar, useTiptap } from "./..";
 import { Box } from '@mui/material';
 import React from 'react';
-import { AiGenerate2Icon } from "../component/Icons";
 import "../index.css";
 var Reader = function Reader() {
   var _useTiptap = useTiptap({
@@ -15,17 +14,13 @@ var Reader = function Reader() {
         console.log(editor.getHTML());
         editor.commands.setContent(editor.getHTML());
       },
-      onCreate: function onCreate(_ref) {
-        var currentEditor = _ref.editor;
-        currentEditor.commands.setAiWriting(true);
-      },
       onAiWritingGetSuggestion: function () {
-        var _onAiWritingGetSuggestion = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref2) {
+        var _onAiWritingGetSuggestion = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref) {
           var prefix, suffix;
           return _regeneratorRuntime().wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
-                prefix = _ref2.prefix, suffix = _ref2.suffix;
+                prefix = _ref.prefix, suffix = _ref.suffix;
                 console.log('onAiWritingGetSuggestion', prefix, suffix);
                 return _context.abrupt("return", new Promise(function (resolve) {
                   resolve(['this is a default suggestion.', 'we are good.', 'what is your name?', 'how are you?', 'what is your favorite color?', 'what is your favorite food?', 'what is your favorite animal?', 'what is your favorite book?', 'what is your favorite movie?', 'what is your favorite song?', 'what is your favorite artist?', 'what is your favorite band?', 'what is your favorite city?', 'what is your favorite country?', 'what is your favorite sport?'][Math.floor(Math.random() * 10)]);
@@ -43,12 +38,12 @@ var Reader = function Reader() {
       }(),
       // onTocUpdate: handleTocUpdate,
       onMentionFilter: function () {
-        var _onMentionFilter = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref3) {
+        var _onMentionFilter = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref2) {
           var query;
           return _regeneratorRuntime().wrap(function _callee2$(_context2) {
             while (1) switch (_context2.prev = _context2.next) {
               case 0:
-                query = _ref3.query;
+                query = _ref2.query;
                 return _context2.abrupt("return", new Promise(function (resolve) {
                   resolve(['Winona Ryder', 'Molly Ringwald', 'Ally Sheedy', 'Debbie Harry', 'Olivia Newton-John', 'Elton John', 'Michael J. Fox', 'Axl Rose', 'Emilio Estevez', 'Ralph Macchio', 'Rob Lowe', 'Jennifer Grey'].filter(function (item) {
                     return item.toLowerCase().startsWith(query.toLowerCase());
@@ -125,19 +120,7 @@ var Reader = function Reader() {
       marginBottom: '30px'
     }
   }, /*#__PURE__*/React.createElement(EditorToolbar, {
-    editor: editor,
-    menuInToolbarMore: [{
-      id: 'ai',
-      icon: /*#__PURE__*/React.createElement(AiGenerate2Icon, {
-        sx: {
-          fontSize: '1rem'
-        }
-      }),
-      onClick: function onClick() {
-        alert('ai');
-      },
-      label: 'AI 文本润色'
-    }]
+    editor: editor
   })), /*#__PURE__*/React.createElement(Box, {
     sx: {
       '.tiptap': {
@@ -149,31 +132,7 @@ var Reader = function Reader() {
       }
     }
   }, /*#__PURE__*/React.createElement(Editor, {
-    editor: editor,
-    menuInDragHandle: [{
-      label: '文本润色',
-      key: 'ai',
-      icon: /*#__PURE__*/React.createElement(AiGenerate2Icon, {
-        sx: {
-          fontSize: '1rem'
-        }
-      }),
-      onClick: function onClick() {
-        alert('ai');
-      }
-    }],
-    menuInBubbleMenu: [{
-      label: '文本润色',
-      key: 'ai',
-      icon: /*#__PURE__*/React.createElement(AiGenerate2Icon, {
-        sx: {
-          fontSize: '1rem'
-        }
-      }),
-      onClick: function onClick() {
-        alert('ai');
-      }
-    }]
+    editor: editor
   }))));
 };
 export default Reader;

package/dist/EditorToolbar/index.js

@@ -6,15 +6,15 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { Box, Divider, Stack } from '@mui/material';
 import React, { useEffect, useState } from 'react';
-import { ArrowGoBackLineIcon, ArrowGoForwardLineIcon, BoldIcon, DoubleQuotesLIcon, Information2LineIcon, ItalicIcon, LinkIcon, MenuFold2FillIcon, StrikethroughIcon, Table2Icon, UnderlineIcon, WindowFillIcon } from "../component/Icons";
-import { EditorAlignSelect, EditorCode, EditorFontBgColor, EditorFontColor, EditorFontSize, EditorHeading, EditorInsert, EditorListSelect, EditorMath, EditorMore, EditorScript, EditorVerticalAlignSelect, ToolbarItem } from "../component/Toolbar";
-import TableSizePicker from "../component/Toolbar/TableSizePicker";
+import { AiGenerate2Icon, ArrowGoBackLineIcon, ArrowGoForwardLineIcon, BoldIcon, EraserLineIcon, ItalicIcon, LinkIcon, StrikethroughIcon, SubscriptIcon, SuperscriptIcon, UnderlineIcon } from "../component/Icons";
+import { EditorAlignSelect, EditorFontBgColor, EditorFontColor, EditorFontSize, EditorHeading, EditorInsert, EditorListSelect, EditorMore, EditorVerticalAlignSelect, ToolbarItem } from "../component/Toolbar";
 var EditorToolbar = function EditorToolbar(_ref) {
   var editor = _ref.editor,
     menuInToolbarMore = _ref.menuInToolbarMore;
   var _useState = useState({
       undo: false,
       redo: false,
+      format: false,
       quote: false,
       bold: false,
       italic: false,
@@ -26,15 +26,18 @@ var EditorToolbar = function EditorToolbar(_ref) {
       table: false,
       link: false,
       alert: false,
-      iframe: false
+      iframe: false,
+      aiWriting: false
     }),
     _useState2 = _slicedToArray(_useState, 2),
     active = _useState2[0],
     setActive = _useState2[1];
   var updateSelection = function updateSelection() {
+    var _editor$can$chain$und, _editor$can$chain$red, _editor$can$chain$uns;
     setActive({
-      undo: editor.can().undo(),
-      redo: editor.can().redo(),
+      undo: (_editor$can$chain$und = editor.can().chain().undo().run()) !== null && _editor$can$chain$und !== void 0 ? _editor$can$chain$und : false,
+      redo: (_editor$can$chain$red = editor.can().chain().redo().run()) !== null && _editor$can$chain$red !== void 0 ? _editor$can$chain$red : false,
+      format: (_editor$can$chain$uns = editor.can().chain().unsetAllMarks().run()) !== null && _editor$can$chain$uns !== void 0 ? _editor$can$chain$uns : false,
       quote: editor.isActive('blockquote'),
       bold: editor.isActive('bold'),
       italic: editor.isActive('italic'),
@@ -46,7 +49,8 @@ var EditorToolbar = function EditorToolbar(_ref) {
       table: editor.isActive('table'),
       link: editor.isActive('link'),
       alert: editor.isActive('alert'),
-      iframe: editor.isActive('iframe')
+      iframe: editor.isActive('iframe'),
+      aiWriting: editor.storage.aiWriting.enabled
     });
   };
   useEffect(function () {
@@ -90,7 +94,30 @@ var EditorToolbar = function EditorToolbar(_ref) {
         }
       }
     }
-  }, /*#__PURE__*/React.createElement(ToolbarItem, {
+  }, /*#__PURE__*/React.createElement(EditorInsert, {
+    editor: editor
+  }), editor.options.extensions.find(function (it) {
+    return it.name === 'aiWriting';
+  }) && /*#__PURE__*/React.createElement(ToolbarItem, {
+    text: 'AI 伴写',
+    icon: /*#__PURE__*/React.createElement(AiGenerate2Icon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    }),
+    onClick: function onClick() {
+      return editor.chain().focus().setAiWriting(!active.aiWriting).run();
+    },
+    className: active.aiWriting ? 'tool-active' : ''
+  }), /*#__PURE__*/React.createElement(Divider, {
+    orientation: "vertical",
+    flexItem: true,
+    sx: {
+      mx: 0.5,
+      height: 20,
+      alignSelf: 'center'
+    }
+  }), /*#__PURE__*/React.createElement(ToolbarItem, {
     tip: '撤销',
     shortcutKey: ['ctrl', 'Z'],
     icon: /*#__PURE__*/React.createElement(ArrowGoBackLineIcon, {
@@ -114,6 +141,17 @@ var EditorToolbar = function EditorToolbar(_ref) {
       return editor.chain().focus().redo().run();
     },
     disabled: !active.redo
+  }), /*#__PURE__*/React.createElement(ToolbarItem, {
+    tip: '清除格式',
+    icon: /*#__PURE__*/React.createElement(EraserLineIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    }),
+    disabled: !active.format,
+    onClick: function onClick() {
+      return editor.chain().focus().unsetAllMarks().run();
+    }
   }), /*#__PURE__*/React.createElement(Divider, {
     orientation: "vertical",
     flexItem: true,
@@ -126,38 +164,6 @@ var EditorToolbar = function EditorToolbar(_ref) {
     editor: editor
   }), /*#__PURE__*/React.createElement(EditorFontSize, {
     editor: editor
-  }), /*#__PURE__*/React.createElement(EditorListSelect, {
-    editor: editor
-  }), /*#__PURE__*/React.createElement(EditorAlignSelect, {
-    editor: editor
-  }), /*#__PURE__*/React.createElement(EditorVerticalAlignSelect, {
-    editor: editor
-  }), /*#__PURE__*/React.createElement(ToolbarItem, {
-    tip: '引用块',
-    shortcutKey: ['ctrl', 'shift', 'B'],
-    icon: /*#__PURE__*/React.createElement(DoubleQuotesLIcon, {
-      sx: {
-        fontSize: '1rem'
-      }
-    }),
-    onClick: function onClick() {
-      return editor.chain().focus().toggleBlockquote().run();
-    },
-    className: active.quote ? 'tool-active' : ''
-  }), /*#__PURE__*/React.createElement(ToolbarItem, {
-    tip: '警告提示',
-    icon: /*#__PURE__*/React.createElement(Information2LineIcon, {
-      sx: {
-        fontSize: '1rem'
-      }
-    }),
-    onClick: function onClick() {
-      return editor.chain().focus().toggleAlert({
-        type: 'icon',
-        variant: 'info'
-      }).run();
-    },
-    className: active.alert ? 'tool-active' : ''
   }), /*#__PURE__*/React.createElement(Divider, {
     orientation: "vertical",
     flexItem: true,
@@ -214,16 +220,30 @@ var EditorToolbar = function EditorToolbar(_ref) {
       return editor.chain().focus().toggleUnderline().run();
     },
     className: active.underline ? 'tool-active' : ''
-  }), /*#__PURE__*/React.createElement(Divider, {
-    orientation: "vertical",
-    flexItem: true,
-    sx: {
-      mx: 0.5,
-      height: 20,
-      alignSelf: 'center'
-    }
-  }), /*#__PURE__*/React.createElement(EditorScript, {
-    editor: editor
+  }), /*#__PURE__*/React.createElement(ToolbarItem, {
+    tip: '上标',
+    shortcutKey: ['ctrl', '.'],
+    icon: /*#__PURE__*/React.createElement(SuperscriptIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    }),
+    onClick: function onClick() {
+      return editor.chain().focus().toggleSuperscript().run();
+    },
+    className: active.superscript ? 'tool-active' : ''
+  }), /*#__PURE__*/React.createElement(ToolbarItem, {
+    tip: '下标',
+    shortcutKey: ['ctrl', ','],
+    icon: /*#__PURE__*/React.createElement(SubscriptIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    }),
+    onClick: function onClick() {
+      return editor.chain().focus().toggleSubscript().run();
+    },
+    className: active.subscript ? 'tool-active' : ''
   }), /*#__PURE__*/React.createElement(EditorFontColor, {
     editor: editor
   }), /*#__PURE__*/React.createElement(EditorFontBgColor, {
@@ -236,6 +256,8 @@ var EditorToolbar = function EditorToolbar(_ref) {
       height: 20,
       alignSelf: 'center'
     }
+  }), /*#__PURE__*/React.createElement(EditorListSelect, {
+    editor: editor
   }), /*#__PURE__*/React.createElement(ToolbarItem, {
     tip: '链接',
     shortcutKey: ['ctrl', '1'],
@@ -255,59 +277,10 @@ var EditorToolbar = function EditorToolbar(_ref) {
       }).run();
     },
     className: active.link ? 'tool-active' : ''
-  }), /*#__PURE__*/React.createElement(ToolbarItem, {
-    tip: '折叠块',
-    shortcutKey: ['ctrl', '8'],
-    icon: /*#__PURE__*/React.createElement(MenuFold2FillIcon, {
-      sx: {
-        fontSize: '1rem'
-      }
-    }),
-    onClick: function onClick() {
-      if (!active.details) {
-        editor.chain().focus().setDetails().run();
-      } else {
-        editor.chain().focus().unsetDetails().run();
-      }
-    },
-    className: active.details ? 'tool-active' : ''
-  }), /*#__PURE__*/React.createElement(EditorCode, {
+  }), /*#__PURE__*/React.createElement(EditorAlignSelect, {
     editor: editor
-  }), /*#__PURE__*/React.createElement(EditorMath, {
+  }), /*#__PURE__*/React.createElement(EditorVerticalAlignSelect, {
     editor: editor
-  }), /*#__PURE__*/React.createElement(ToolbarItem, {
-    tip: '表格',
-    shortcutKey: ['ctrl', '9'],
-    icon: /*#__PURE__*/React.createElement(Table2Icon, {
-      sx: {
-        fontSize: '1rem'
-      }
-    }),
-    className: active.table ? 'tool-active' : '',
-    customComponent: /*#__PURE__*/React.createElement(TableSizePicker, {
-      onConfirm: function onConfirm(cols, rows) {
-        editor.chain().focus().insertTable({
-          rows: rows,
-          cols: cols,
-          withHeaderRow: true
-        }).run();
-      }
-    })
-  }), /*#__PURE__*/React.createElement(ToolbarItem, {
-    tip: 'iframe',
-    icon: /*#__PURE__*/React.createElement(WindowFillIcon, {
-      sx: {
-        fontSize: '1rem'
-      }
-    }),
-    onClick: function onClick() {
-      return editor.commands.setIframe({
-        src: '',
-        width: 760,
-        height: 400
-      });
-    },
-    className: active.iframe ? 'tool-active' : ''
   }), /*#__PURE__*/React.createElement(Divider, {
     orientation: "vertical",
     flexItem: true,
@@ -316,8 +289,6 @@ var EditorToolbar = function EditorToolbar(_ref) {
       height: 20,
       alignSelf: 'center'
     }
-  }), /*#__PURE__*/React.createElement(EditorInsert, {
-    editor: editor
   }), /*#__PURE__*/React.createElement(EditorMore, {
     more: menuInToolbarMore
   })));

package/dist/component/CustomDragHandle/index.js

@@ -17,15 +17,14 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { AddLineIcon, AlignBottomIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AlignTopIcon, ArrowDownSLineIcon, AttachmentLineIcon, BrushLineIcon, DeleteLineIcon, DownloadLineIcon, DraggableIcon, FontSizeIcon, FormatClearIcon, H1Icon, H2Icon, H3Icon, ImageLineIcon, IndentDecreaseIcon, IndentIncreaseIcon, Information2LineIcon, ListCheck3Icon, ListOrdered2Icon, ListUnorderedIcon, MovieLineIcon, Music2LineIcon, QuoteTextIcon, Repeat2LineIcon, ScissorsCutLineIcon, SeparatorIcon, TextIcon, TextWrapIcon } from "../Icons";
+import { AddLineIcon, AlignBottomIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AlignTopIcon, ArrowDownSLineIcon, AttachmentLineIcon, BrushLineIcon, DeleteLineIcon, DownloadLineIcon, DraggableIcon, EraserLineIcon, FileCopyLineIcon, FontSizeIcon, H1Icon, H2Icon, H3Icon, ImageLineIcon, IndentDecreaseIcon, IndentIncreaseIcon, Information2LineIcon, ListCheck3Icon, ListOrdered2Icon, ListUnorderedIcon, MovieLineIcon, Music2LineIcon, QuoteTextIcon, Repeat2LineIcon, ScissorsCutLineIcon, SeparatorIcon, TextIcon, TextWrapIcon } from "../Icons";
 import { NODE_TYPE_LABEL, NodeTypeEnum } from "../../contants/enums";
 import { Box, Divider, Stack, Typography, useTheme } from '@mui/material';
 import DragHandle from '@tiptap/extension-drag-handle-react';
 import { Fragment, Slice } from '@tiptap/pm/model';
 import { NodeSelection } from '@tiptap/pm/state';
 import React, { useCallback, useState } from 'react';
-import { convertNodeAt, downloadFiles, filterResourcesByType, getAllResources } from "../../util";
-import { FileCopyLineIcon } from "../Icons/file-copy-line-icon";
+import { convertNodeAt, downloadFiles, filterResourcesByType, getAllResources, getShortcutKeyText } from "../../util";
 import Menu from "../Menu";
 import { ToolbarItem } from "../Toolbar";
 var DragIcon = function DragIcon(_ref) {
@@ -259,7 +258,7 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
   var updateNodeChange = useCallback(function (data) {
     var _data$node, _current$node2;
     if ((data.pos !== current.pos || ((_data$node = data.node) === null || _data$node === void 0 ? void 0 : _data$node.type.name) !== ((_current$node2 = current.node) === null || _current$node2 === void 0 ? void 0 : _current$node2.type.name)) && data.pos !== -1 || data.node === null && data.pos >= 0) {
-      var _data$node2;
+      var _data$node2, _editor$can$chain$uns;
       var allResources = data.node ? getAllResources(data.node) : [];
       var videos = filterResourcesByType(allResources, [NodeTypeEnum.Video]);
       var audios = filterResourcesByType(allResources, [NodeTypeEnum.Audio]);
@@ -273,10 +272,7 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
         images: images,
         attachments: attachments
       });
-      setShowFormat(shouldShowButton({
-        editor: editor,
-        data: data
-      }));
+      setShowFormat((_editor$can$chain$uns = editor.can().chain().unsetAllMarks().run()) !== null && _editor$can$chain$uns !== void 0 ? _editor$can$chain$uns : false);
     }
   }, [current.pos, current.node]);
   return /*#__PURE__*/React.createElement(DragHandle, {
@@ -314,6 +310,7 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
       }
     }
   }), currentNode ? /*#__PURE__*/React.createElement(Menu, {
+    width: 224,
     context: /*#__PURE__*/React.createElement(DragIcon, null),
     anchorOrigin: {
       vertical: 'bottom',
@@ -569,6 +566,7 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
       key: 'color',
       label: '颜色',
       maxHeight: 400,
+      width: 160,
       icon: /*#__PURE__*/React.createElement(BrushLineIcon, {
         sx: {
           fontSize: '1rem'
@@ -654,6 +652,7 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
           fontSize: '1rem'
         }
       }),
+      width: 100,
       minWidth: 100,
       maxHeight: 200,
       children: _toConsumableArray([10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60].map(function (it) {
@@ -695,6 +694,12 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
         key: 'align-horizontal'
       }, {
         label: '左侧对齐',
+        extra: /*#__PURE__*/React.createElement(Typography, {
+          sx: {
+            fontSize: '12px',
+            color: 'text.disabled'
+          }
+        }, getShortcutKeyText(['ctrl', 'shift', 'L'], '+')),
         key: 'align-horizontal-left',
         icon: /*#__PURE__*/React.createElement(AlignLeftIcon, {
           sx: {
@@ -713,6 +718,12 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
         }
       }, {
         label: '居中对齐',
+        extra: /*#__PURE__*/React.createElement(Typography, {
+          sx: {
+            fontSize: '12px',
+            color: 'text.disabled'
+          }
+        }, getShortcutKeyText(['ctrl', 'shift', 'E'], '+')),
         key: 'align-horizontal-center',
         icon: /*#__PURE__*/React.createElement(AlignCenterIcon, {
           sx: {
@@ -731,6 +742,12 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
         }
       }, {
         label: '右侧对齐',
+        extra: /*#__PURE__*/React.createElement(Typography, {
+          sx: {
+            fontSize: '12px',
+            color: 'text.disabled'
+          }
+        }, getShortcutKeyText(['ctrl', 'shift', 'R'], '+')),
         key: 'align-horizontal-right',
         icon: /*#__PURE__*/React.createElement(AlignRightIcon, {
           sx: {
@@ -749,6 +766,12 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
         }
       }, {
         label: '两端对齐',
+        extra: /*#__PURE__*/React.createElement(Typography, {
+          sx: {
+            fontSize: '12px',
+            color: 'text.disabled'
+          }
+        }, getShortcutKeyText(['ctrl', 'shift', 'J'], '+')),
         key: 'align-horizontal-justify',
         icon: /*#__PURE__*/React.createElement(AlignJustifyIcon, {
           sx: {
@@ -777,6 +800,12 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
         key: 'align-vertical'
       }, {
         label: '顶部对齐',
+        extra: /*#__PURE__*/React.createElement(Typography, {
+          sx: {
+            fontSize: '12px',
+            color: 'text.disabled'
+          }
+        }, getShortcutKeyText(['ctrl', 'alt', 'T'], '+')),
         key: 'align-vertical-top',
         icon: /*#__PURE__*/React.createElement(AlignTopIcon, {
           sx: {
@@ -795,6 +824,12 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
         }
       }, {
         label: '居中对齐',
+        extra: /*#__PURE__*/React.createElement(Typography, {
+          sx: {
+            fontSize: '12px',
+            color: 'text.disabled'
+          }
+        }, getShortcutKeyText(['ctrl', 'alt', 'M'], '+')),
         key: 'align-vertical-center',
         icon: /*#__PURE__*/React.createElement(AlignCenterIcon, {
           sx: {
@@ -813,6 +848,12 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
         }
       }, {
         label: '底部对齐',
+        extra: /*#__PURE__*/React.createElement(Typography, {
+          sx: {
+            fontSize: '12px',
+            color: 'text.disabled'
+          }
+        }, getShortcutKeyText(['ctrl', 'alt', 'B'], '+')),
         key: 'align-vertical-bottom',
         icon: /*#__PURE__*/React.createElement(AlignBottomIcon, {
           sx: {
@@ -833,6 +874,7 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
     }] : []), _toConsumableArray(currentNode !== null && currentNode !== void 0 && currentNode.convert ? [{
       label: '转换',
       key: 'convert',
+      width: 160,
       maxHeight: 400,
       icon: /*#__PURE__*/React.createElement(Repeat2LineIcon, {
         sx: {
@@ -863,7 +905,7 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
           }
         }
       }, {
-        label: '一级标题',
+        label: '标题1',
         selected: ((_current$node4 = current.node) === null || _current$node4 === void 0 ? void 0 : _current$node4.type.name) === 'heading' && ((_current$node5 = current.node) === null || _current$node5 === void 0 ? void 0 : _current$node5.attrs.level) === 1,
         key: 'convert-to-heading-1',
         icon: /*#__PURE__*/React.createElement(H1Icon, {
@@ -889,7 +931,7 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
           }
         }
       }, {
-        label: '二级标题',
+        label: '标题2',
         selected: ((_current$node6 = current.node) === null || _current$node6 === void 0 ? void 0 : _current$node6.type.name) === 'heading' && ((_current$node7 = current.node) === null || _current$node7 === void 0 ? void 0 : _current$node7.attrs.level) === 2,
         key: 'convert-to-heading-2',
         icon: /*#__PURE__*/React.createElement(H2Icon, {
@@ -915,7 +957,7 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
           }
         }
       }, {
-        label: '三级标题',
+        label: '标题3',
         selected: ((_current$node8 = current.node) === null || _current$node8 === void 0 ? void 0 : _current$node8.type.name) === 'heading' && ((_current$node9 = current.node) === null || _current$node9 === void 0 ? void 0 : _current$node9.attrs.level) === 3,
         key: 'convert-to-heading-3',
         icon: /*#__PURE__*/React.createElement(H3Icon, {
@@ -1361,46 +1403,14 @@ var CustomDragHandle = function CustomDragHandle(_ref3) {
     }] : []))), _toConsumableArray(more ? more : []), _toConsumableArray(showFormat ? [{
       label: '文本格式化',
       key: 'format',
-      icon: /*#__PURE__*/React.createElement(FormatClearIcon, {
+      icon: /*#__PURE__*/React.createElement(EraserLineIcon, {
         sx: {
           fontSize: '1rem'
         }
       }),
-      onClick: function () {
-        var _onClick6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
-          var tr, _currentNode, empty, content;
-          return _regeneratorRuntime().wrap(function _callee8$(_context8) {
-            while (1) switch (_context8.prev = _context8.next) {
-              case 0:
-                if (current.node && current.pos !== undefined) {
-                  tr = current.editor.state.tr;
-                  _currentNode = current.node;
-                  empty = (_currentNode === null || _currentNode === void 0 ? void 0 : _currentNode.textContent) === '';
-                  if (!empty) {
-                    content = _currentNode === null || _currentNode === void 0 ? void 0 : _currentNode.content.content;
-                    if (content && content.length > 0) {
-                      tr.doc.nodesBetween(current.pos, current.pos + current.node.nodeSize, function (node, pos) {
-                        if (!node.isInline) return true;
-                        node.marks.forEach(function (mark) {
-                          tr.removeMark(pos, pos + node.nodeSize, mark.type);
-                        });
-                        return true;
-                      });
-                    }
-                  }
-                  editor.view.dispatch(tr);
-                }
-              case 1:
-              case "end":
-                return _context8.stop();
-            }
-          }, _callee8);
-        }));
-        function onClick() {
-          return _onClick6.apply(this, arguments);
-        }
-        return onClick;
-      }()
+      onClick: function onClick() {
+        current.editor.chain().focus().unsetAllMarks().run();
+      }
     }] : []))
   }) : /*#__PURE__*/React.createElement(DragIcon, null)));
 };

package/dist/component/Icons/add-circle-fill-icon.d.ts

@@ -0,0 +1,6 @@
+import { SvgIconProps } from "@mui/material";
+import * as React from "react";
+export declare const AddCircleFillIcon: {
+    (props: SvgIconProps): React.JSX.Element;
+    displayName: string;
+};

package/dist/component/Icons/add-circle-fill-icon.js

@@ -0,0 +1,13 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import { SvgIcon } from "@mui/material";
+import * as React from "react";
+export var AddCircleFillIcon = function AddCircleFillIcon(props) {
+  return /*#__PURE__*/React.createElement(SvgIcon, _extends({
+    viewBox: "0 0 24 24",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11 11H7V13H11V17H13V13H17V11H13V7H11V11Z"
+  }));
+};
+AddCircleFillIcon.displayName = 'icon-add-circle-fill';

package/dist/component/Icons/command-line-icon.d.ts

@@ -0,0 +1,6 @@
+import { SvgIconProps } from "@mui/material";
+import * as React from "react";
+export declare const CommandLineIcon: {
+    (props: SvgIconProps): React.JSX.Element;
+    displayName: string;
+};

package/dist/component/Icons/command-line-icon.js

@@ -0,0 +1,13 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import { SvgIcon } from "@mui/material";
+import * as React from "react";
+export var CommandLineIcon = function CommandLineIcon(props) {
+  return /*#__PURE__*/React.createElement(SvgIcon, _extends({
+    viewBox: "0 0 24 24",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M10 8H14V6.5C14 4.567 15.567 3 17.5 3C19.433 3 21 4.567 21 6.5C21 8.433 19.433 10 17.5 10H16V14H17.5C19.433 14 21 15.567 21 17.5C21 19.433 19.433 21 17.5 21C15.567 21 14 19.433 14 17.5V16H10V17.5C10 19.433 8.433 21 6.5 21C4.567 21 3 19.433 3 17.5C3 15.567 4.567 14 6.5 14H8V10H6.5C4.567 10 3 8.433 3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5V8ZM8 8V6.5C8 5.67157 7.32843 5 6.5 5C5.67157 5 5 5.67157 5 6.5C5 7.32843 5.67157 8 6.5 8H8ZM8 16H6.5C5.67157 16 5 16.6716 5 17.5C5 18.3284 5.67157 19 6.5 19C7.32843 19 8 18.3284 8 17.5V16ZM16 8H17.5C18.3284 8 19 7.32843 19 6.5C19 5.67157 18.3284 5 17.5 5C16.6716 5 16 5.67157 16 6.5V8ZM16 16V17.5C16 18.3284 16.6716 19 17.5 19C18.3284 19 19 18.3284 19 17.5C19 16.6716 18.3284 16 17.5 16H16ZM10 10V14H14V10H10Z"
+  }));
+};
+CommandLineIcon.displayName = 'icon-command-line';

package/dist/component/Icons/eraser-line-icon.d.ts

@@ -0,0 +1,6 @@
+import { SvgIconProps } from "@mui/material";
+import * as React from "react";
+export declare const EraserLineIcon: {
+    (props: SvgIconProps): React.JSX.Element;
+    displayName: string;
+};

package/dist/component/Icons/eraser-line-icon.js

@@ -0,0 +1,13 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import { SvgIcon } from "@mui/material";
+import * as React from "react";
+export var EraserLineIcon = function EraserLineIcon(props) {
+  return /*#__PURE__*/React.createElement(SvgIcon, _extends({
+    viewBox: "0 0 24 24",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M8.58564 8.85449L3.63589 13.8042L8.83021 18.9985L9.99985 18.9978V18.9966H11.1714L14.9496 15.2184L8.58564 8.85449ZM9.99985 7.44027L16.3638 13.8042L19.1922 10.9758L12.8283 4.61185L9.99985 7.44027ZM13.9999 18.9966H20.9999V20.9966H11.9999L8.00229 20.9991L1.51457 14.5113C1.12405 14.1208 1.12405 13.4877 1.51457 13.0971L12.1212 2.49053C12.5117 2.1 13.1449 2.1 13.5354 2.49053L21.3136 10.2687C21.7041 10.6592 21.7041 11.2924 21.3136 11.6829L13.9999 18.9966Z"
+  }));
+};
+EraserLineIcon.displayName = 'icon-eraser-line';

package/dist/component/Icons/folder-2-line-icon.d.ts

@@ -0,0 +1,6 @@
+import { SvgIconProps } from "@mui/material";
+import * as React from "react";
+export declare const Folder2LineIcon: {
+    (props: SvgIconProps): React.JSX.Element;
+    displayName: string;
+};