@ctzhian/tiptap 1.11.3 → 1.12.0

package/dist/Editor/demo.js

@@ -7,12 +7,10 @@ import { Box } from '@mui/material';
 import React from 'react';
 import "../index.css";
 var Reader = function Reader() {
-  var isMarkdown = true;
   var _useTiptap = useTiptap({
       editable: true,
       exclude: ['invisibleCharacters'],
       onError: function onError(error) {
-        console.error('Editor Error:', error);
         alert(error.message);
       },
       onValidateUrl: function () {
@@ -20,42 +18,39 @@ var Reader = function Reader() {
           return _regeneratorRuntime().wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
-                console.log("\u9A8C\u8BC1 ".concat(type, " \u94FE\u63A5:"), url);
-
-                // 拦截 base64 链接
                 if (!url.startsWith('data:')) {
-                  _context.next = 3;
+                  _context.next = 2;
                   break;
                 }
                 throw new Error("\u4E0D\u652F\u6301 base64 \u94FE\u63A5\uFF0C\u8BF7\u4F7F\u7528\u53EF\u8BBF\u95EE\u7684 ".concat(type, " URL"));
-              case 3:
+              case 2:
                 _context.t0 = type;
-                _context.next = _context.t0 === 'image' ? 6 : _context.t0 === 'video' ? 8 : _context.t0 === 'audio' ? 10 : _context.t0 === 'iframe' ? 12 : 14;
+                _context.next = _context.t0 === 'image' ? 5 : _context.t0 === 'video' ? 7 : _context.t0 === 'audio' ? 9 : _context.t0 === 'iframe' ? 11 : 13;
                 break;
-              case 6:
+              case 5:
                 if (!url.match(/\.(jpg|jpeg|png|gif|webp|svg)(\?.*)?$/i)) {
                   console.warn('图片链接可能不是有效的图片格式');
                 }
-                return _context.abrupt("break", 14);
-              case 8:
+                return _context.abrupt("break", 13);
+              case 7:
                 if (!url.match(/\.(mp4|webm|ogg|mov|avi|wmv|flv|mkv)(\?.*)?$/i)) {
                   console.warn('视频链接可能不是有效的视频格式');
                 }
-                return _context.abrupt("break", 14);
-              case 10:
+                return _context.abrupt("break", 13);
+              case 9:
                 if (!url.match(/\.(mp3|wav|ogg|m4a|flac|aac|wma)(\?.*)?$/i)) {
                   console.warn('音频链接可能不是有效的音频格式');
                 }
-                return _context.abrupt("break", 14);
-              case 12:
+                return _context.abrupt("break", 13);
+              case 11:
                 // iframe 可以嵌入任何 URL，但可以检查是否是 HTTPS
                 if (url.startsWith('http://') && !url.includes('localhost')) {
                   console.warn('建议使用 HTTPS 链接以确保安全性');
                 }
-                return _context.abrupt("break", 14);
-              case 14:
+                return _context.abrupt("break", 13);
+              case 13:
                 return _context.abrupt("return", url);
-              case 15:
+              case 14:
               case "end":
                 return _context.stop();
             }
@@ -67,10 +62,10 @@ var Reader = function Reader() {
         return onValidateUrl;
       }(),
       onSave: function onSave(editor) {
-        var value = isMarkdown ? editor.getMarkdown() : editor.getHTML();
+        var value = editor.getHTML();
         console.log(value);
         editor.chain().focus().setContent(value, {
-          contentType: isMarkdown ? 'markdown' : 'html'
+          contentType: 'html'
         }).run();
       },
       onAiWritingGetSuggestion: function () {
@@ -157,7 +152,7 @@ var Reader = function Reader() {
         }
         return onUpload;
       }(),
-      content: ''
+      content: "<p>\u8FD9\u91CC\u662F\u6B63\u6587\u90E8\u5206\uFF0C\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A\u554A</p><p></p><h1 id=\"b8f46431-15cc-4d9a-823f-3b99a5048e9d\">\u8FD9\u662F\u4E00\u7EA7\u6807\u9898</h1><h2 id=\"ef598fd2-24f8-472f-bedc-a5e4e39e5373\">\u4E8C\u7EA7\u6807\u9898</h2><h3 id=\"2ea03e39-c201-49ae-9236-3acf23b14965\">\u4E09\u7EA7\u6807\u9898</h3><h4 id=\"9a0dd00d-e0b8-4ae4-9371-b6f2e49ce0af\">\u56DB\u7EA7\u6807\u9898</h4><p></p><ol class=\"ordered-list\" data-type=\"orderedList\"><li><p>\u8FD9\u662F\u6709\u5E8F\u5217\u8868</p><ol class=\"ordered-list\" data-type=\"orderedList\"><li><p>\u8FD9\u662F\u6709\u5E8F\u5217\u8868</p></li><li><p>\u8FD9\u662F\u6709\u5E8F\u5217\u8868</p><ol class=\"ordered-list\" data-type=\"orderedList\"><li><p>\u8FD9\u662F\u6709\u5E8F\u5217\u8868</p></li><li><p>\u8FD9\u662F\u6709\u5E8F\u5217\u8868</p><ol class=\"ordered-list\" data-type=\"orderedList\"><li><p>\u8FD9\u662F\u6709\u5E8F\u5217\u8868</p></li><li><p>\u8FD9\u662F\u6709\u5E8F\u5217\u8868</p></li></ol></li></ol></li></ol></li><li><p>\u8FD9\u662F\u6709\u5E8F\u5217\u8868</p></li><li><p>\u8FD9\u662F\u6709\u5E8F\u5217\u8868</p></li></ol><p></p><ul class=\"bullet-list\" data-type=\"bulletList\"><li><p>\u8FD9\u662F\u65E0\u5E8F\u5217\u8868</p><ul class=\"bullet-list\" data-type=\"bulletList\"><li><p>\u8FD9\u662F\u65E0\u5E8F\u5217\u8868</p></li><li><p>\u8FD9\u662F\u65E0\u5E8F\u5217\u8868</p><ul class=\"bullet-list\" data-type=\"bulletList\"><li><p>\u8FD9\u662F\u65E0\u5E8F\u5217\u8868</p></li><li><p>\u8FD9\u662F\u65E0\u5E8F\u5217\u8868</p><ul class=\"bullet-list\" data-type=\"bulletList\"><li><p>\u8FD9\u662F\u65E0\u5E8F\u5217\u8868</p></li><li><p>\u8FD9\u662F\u65E0\u5E8F\u5217\u8868</p></li></ul></li></ul></li></ul></li><li><p>\u8FD9\u662F\u65E0\u5E8F\u5217\u8868</p></li><li><p>\u8FD9\u662F\u65E0\u5E8F\u5217\u8868</p></li></ul><p></p><ul data-type=\"taskList\"><li class=\"task-item\" data-type=\"taskItem\" data-checked=\"false\"><label><input type=\"checkbox\"><span></span></label><div><p>\u4EFB\u52A1\u5217\u8868</p><ul data-type=\"taskList\"><li class=\"task-item\" data-type=\"taskItem\" data-checked=\"true\"><label><input type=\"checkbox\" checked=\"checked\"><span></span></label><div><p>\u4EFB\u52A1\u5217\u8868</p></div></li><li class=\"task-item\" data-type=\"taskItem\" data-checked=\"false\"><label><input type=\"checkbox\"><span></span></label><div><p>\u4EFB\u52A1\u5217\u8868</p></div></li></ul></div></li><li class=\"task-item\" data-type=\"taskItem\" data-checked=\"false\"><label><input type=\"checkbox\"><span></span></label><div><p>\u4EFB\u52A1\u5217\u8868</p></div></li><li class=\"task-item\" data-type=\"taskItem\" data-checked=\"false\"><label><input type=\"checkbox\"><span></span></label><div><p>\u4EFB\u52A1\u5217\u8868</p></div></li></ul><p></p><blockquote><p>\u8FD9\u91CC\u662F\u5F15\u7528\u5185\u5BB9\uFF0C\u8FD9\u91CC\u662F\u5F15\u7528\u5185\u5BB9\uFF0C\u8FD9\u91CC\u662F\u5F15\u7528\u5185\u5BB9\uFF0C\u8FD9\u91CC\u662F\u5F15\u7528\u5185\u5BB9\uFF0C\u8FD9\u91CC\u662F\u5F15\u7528\u5185\u5BB9\uFF0C\u8FD9\u91CC\u662F\u5F15\u7528\u5185\u5BB9\uFF0C\u8FD9\u91CC\u662F\u5F15\u7528\u5185\u5BB9\uFF0C\u8FD9\u91CC\u662F\u5F15\u7528\u5185\u5BB9\uFF0C\u8FD9\u91CC\u662F\u5F15\u7528\u5185\u5BB9\uFF0C\u8FD9\u91CC\u662F\u5F15\u7528\u5185\u5BB9\uFF0C\u8FD9\u91CC\u662F\u5F15\u7528\u5185\u5BB9\uFF0C\u8FD9\u91CC\u662F\u5F15\u7528\u5185\u5BB9</p><p>\u6362\u4E00\u6BB5\uFF0C\u8FD9\u91CC\u662F\u5F15\u7528\u5185\u5BB9\uFF0C\u8FD9\u91CC\u662F\u5F15\u7528\u5185\u5BB9\uFF0C\u8FD9\u91CC\u662F\u5F15\u7528\u5185\u5BB9\uFF0C\u8FD9\u91CC\u662F\u5F15\u7528\u5185\u5BB9\uFF0C\u8FD9\u91CC\u662F\u5F15\u7528\u5185\u5BB9\uFF0C\u8FD9\u91CC\u662F\u5F15\u7528\u5185\u5BB9\uFF0C\u8FD9\u91CC\u662F\u5F15\u7528\u5185\u5BB9</p></blockquote><p></p><pre><code class=\"language-c\">#include &lt;stdio.h&gt;\n\nint main(int argc, char* argv[]) {\n    return 0;\n}</code></pre><p></p><div data-id=\"alert_d89jtsekma\" data-variant=\"warning\" data-type=\"icon\" data-node=\"alert\"><p>\u8FD9\u91CC\u662F\u9AD8\u4EAE\u5757</p></div><div data-id=\"alert_y52bknyrhp\" data-variant=\"default\" data-type=\"icon\" data-node=\"alert\"><p></p></div><div data-id=\"alert_8kccvrutm1b\" data-variant=\"error\" data-type=\"icon\" data-node=\"alert\"><p><span style=\"color: rgb(254, 69, 69);\">\u8FD9\u91CC\u662F\u9AD8\u4EAE\u5757</span></p></div><p></p><p><a target=\"_blank\" type=\"text\" href=\"\u641C\u7D22\" title=\"\u8FD9\u662F\u94FE\u63A5\">\u8FD9\u662F\u94FE\u63A5</a></p><p><a target=\"_blank\" type=\"text\" href=\"http://a123123\" title=\"http://a123123\">http://a123123</a></p><a target=\"_blank\" type=\"block\" href=\"http://localhost:8000/components/%E6%90%9C%E7%B4%A2\" title=\"\u8FD9\u662F\u94FE\u63A5\">\u8FD9\u662F\u94FE\u63A5</a><hr class=\"custom-horizontal-rule\"><p>\u8FD9\u662F\u5206\u5272\u7EBF</p><hr class=\"custom-horizontal-rule\"><p></p><p><span data-latex=\"a, b, c \neq { { a}, b, c}\" data-type=\"inline-math\"></span></p><div data-latex=\"\frac{int_{0}^{\frac{pi}{2}}}{sum_{i=1}^{n}} = 1\" data-type=\"block-math\"></div><p></p><p style=\"text-align: center;\"><img src=\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\" width=\"375\"></p><p style=\"text-align: left;\"></p><div data-tag=\"attachment\" url=\"\" title=\"\" size=\"0\" data-url=\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\" data-title=\"4174c1ae-6d06-4287-a184-0b24c7c698fd.png\" data-size=\"193.47 KB\"></div><div data-tag=\"attachment\" url=\"\" title=\"\" size=\"0\" data-url=\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\" data-title=\"\u9ED8\u8BA4\u77E5\u8BC6\u5E93222.lakebook\" data-size=\"170.5 KB\"></div><p style=\"text-align: left;\"></p><div class=\"tableWrapper\"><table style=\"min-width: 400px;\"><colgroup><col style=\"min-width: 100px;\"><col style=\"min-width: 100px;\"><col style=\"min-width: 100px;\"><col style=\"min-width: 100px;\"></colgroup><tbody><tr class=\"table-row\"><th class=\"table-header\" colspan=\"1\" rowspan=\"1\"><p>\u963F\u65AF\u987F</p></th><th class=\"table-header\" colspan=\"1\" rowspan=\"1\"><p>\u5F97\u5230\u7684</p></th><th class=\"table-header\" colspan=\"1\" rowspan=\"1\"><p>\u4E0A\u4E0A\u8272</p></th><th class=\"table-header\" colspan=\"1\" rowspan=\"1\"><p>\u53EF\u63A7\u54C7</p></th></tr><tr class=\"table-row\"><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p></p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p><img src=\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\" width=\"100\"></p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p></p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p></p></td></tr><tr class=\"table-row\"><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p></p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p></p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p></p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p></p></td></tr><tr class=\"table-row\"><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p></p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p></p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p></p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p></p></td></tr><tr class=\"table-row\"><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p></p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p></p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p></p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p></p></td></tr></tbody></table></div><p></p><p>\u4E30\u5C0F\u5B66\u6821\u56ED\u751F\u6D3B<strong>\u52A0\u918B\u52A0\u918B</strong><em>\u5199\u9898\u5199\u9898</em></p>"
     }),
     editor = _useTiptap.editor;
   return /*#__PURE__*/React.createElement(EditorThemeProvider, {

package/dist/EditorMarkdown/index.js

@@ -77,7 +77,7 @@ var EditorMarkdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
       top: 0,
       left: 0,
       right: 0,
-      zIndex: 1000
+      zIndex: 2000
     })
   }, /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
@@ -91,7 +91,7 @@ var EditorMarkdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
       borderRadius: '4px 4px 0 0',
       fontSize: 12,
       lineHeight: '20px',
-      color: 'text.tertiary',
+      color: 'text.auxiliary',
       '.md-display-mode-active': {
         color: 'primary.main',
         bgcolor: alpha(theme.palette.primary.main, 0.1)

package/dist/asset/css/index.css

@@ -25,6 +25,10 @@
   padding: 0.25rem;
 }
 
+.tiptap.ProseMirror a {
+  text-decoration: none;
+}
+
 .tiptap.ProseMirror label:has(input[type="checkbox"]) {
   line-height: 1;
   padding-top: 0.5rem;
@@ -36,7 +40,7 @@
   -moz-appearance: none;
   width: 1rem;
   height: 1rem;
-  border: 2px solid var(--mui-palette-divider);
+  border: 1px solid;
   border-radius: 4px;
   background-color: var(--mui-palette-background-default);
   cursor: pointer;
@@ -50,8 +54,8 @@
 
 .tiptap.ProseMirror input[type="checkbox"]:checked::after {
   content: "";
-  width: 100%;
-  height: 100%;
+  width: 70%;
+  height: 70%;
   position: absolute;
   left: 50%;
   top: 50%;
@@ -97,7 +101,7 @@
 .tiptap.ProseMirror .react-renderer.node-blockLink:has(.block-link-wrapper),
 .tiptap.ProseMirror .react-renderer.node-attachment:has(.block-attachment-wrapper) {
   display: block;
-  margin: 0 0 1rem 0;
+  margin: 1rem 0;
 }
 
 .tiptap.ProseMirror p :first-child:is(.react-renderer.node-image),
@@ -114,6 +118,13 @@
 .tiptap.ProseMirror .video-wrapper,
 .tiptap.ProseMirror .image-wrapper {
   display: inline-block;
+  box-sizing: border-box;
+  text-align: center;
+  line-height: 1;
+}
+
+.tiptap.ProseMirror .image-wrapper img {
+  line-height: 0;
 }
 
 .tiptap.ProseMirror .codeblock-wrapper.ProseMirror-selectednode>pre,
@@ -124,10 +135,6 @@
   background-color: color-mix(in srgb, var(--mui-palette-primary-main) 5%, transparent);
 }
 
-.tiptap.ProseMirror .image-wrapper img {
-  vertical-align: middle;
-}
-
 .tiptap.ProseMirror .custom-placeholder-node {
   position: relative;
 }
@@ -162,4 +169,8 @@
   height: 1.5rem;
   left: 32px;
   z-index: 1;
+}
+
+.tiptap.ProseMirror .custom-horizontal-rule {
+  margin: 20px 0;
 }

package/dist/component/ActionDropdown/index.d.ts

@@ -0,0 +1,25 @@
+import { MenuItem } from "../../type";
+import { PopoverOrigin } from '@mui/material';
+import React from 'react';
+export interface ActionDropdownProps {
+    /** 菜单列表 */
+    list: MenuItem[];
+    /** 当前选中项的 key */
+    selected: string | number;
+    /** 触发器提示 */
+    tip?: string;
+    /** Popover ID */
+    id?: string;
+    /** 菜单宽度 */
+    width?: number;
+    /** 菜单最小宽度 */
+    minWidth?: number;
+    /** 右侧箭头图标 */
+    arrowIcon?: React.ReactNode;
+    /** Popover 锚点位置 */
+    anchorOrigin?: PopoverOrigin;
+    /** Popover 变换位置 */
+    transformOrigin?: PopoverOrigin;
+}
+declare const ActionDropdown: React.FC<ActionDropdownProps>;
+export default ActionDropdown;

package/dist/component/ActionDropdown/index.js

@@ -0,0 +1,147 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+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 { ToolbarItem } from "../Toolbar";
+import { Box, Popover, Stack } from '@mui/material';
+import React from 'react';
+import { ArrowDownSLineIcon } from "../Icons";
+var ActionDropdown = function ActionDropdown(_ref) {
+  var list = _ref.list,
+    selected = _ref.selected,
+    tip = _ref.tip,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? 'action-dropdown' : _ref$id,
+    width = _ref.width,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? 160 : _ref$minWidth,
+    arrowIcon = _ref.arrowIcon,
+    _ref$anchorOrigin = _ref.anchorOrigin,
+    anchorOrigin = _ref$anchorOrigin === void 0 ? {
+      vertical: 'bottom',
+      horizontal: 'left'
+    } : _ref$anchorOrigin,
+    _ref$transformOrigin = _ref.transformOrigin,
+    transformOrigin = _ref$transformOrigin === void 0 ? {
+      vertical: 'top',
+      horizontal: 'left'
+    } : _ref$transformOrigin;
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    anchorEl = _React$useState2[0],
+    setAnchorEl = _React$useState2[1];
+
+  // 根据 selected 找到当前选中的项
+  var selectedItem = React.useMemo(function () {
+    return list.find(function (item) {
+      return item.key === selected;
+    });
+  }, [list, selected]);
+  var handleClick = function handleClick(event) {
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+  var handleClose = function handleClose() {
+    setAnchorEl(null);
+  };
+  var handleItemClick = function handleItemClick(event, item) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    // 立即执行回调
+    if (item.onClick) {
+      item.onClick();
+    }
+
+    // 然后关闭菜单
+    handleClose();
+  };
+  var open = Boolean(anchorEl);
+  var curId = open ? id : undefined;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolbarItem, {
+    icon: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon,
+    text: /*#__PURE__*/React.createElement(Stack, {
+      direction: "row",
+      alignItems: "center",
+      gap: 0.5
+    }, /*#__PURE__*/React.createElement(Box, {
+      component: "span"
+    }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label), /*#__PURE__*/React.createElement(ArrowDownSLineIcon, {
+      sx: {
+        fontSize: 16,
+        transition: 'transform 0.2s ease-in-out',
+        transform: open ? 'rotate(-180deg)' : 'rotate(0deg)'
+      }
+    })),
+    tip: tip,
+    onClick: handleClick,
+    "aria-describedby": curId
+  }), /*#__PURE__*/React.createElement(Popover, {
+    id: curId,
+    open: open,
+    anchorEl: anchorEl,
+    onClose: handleClose,
+    anchorOrigin: anchorOrigin,
+    transformOrigin: transformOrigin,
+    disableScrollLock: true,
+    disableAutoFocus: true,
+    disableEnforceFocus: true,
+    slotProps: {
+      root: {
+        slotProps: {
+          backdrop: {
+            invisible: true
+          }
+        }
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: _objectSpread({
+      p: 0.5,
+      minWidth: minWidth,
+      lineHeight: 1.625
+    }, width ? {
+      width: width
+    } : {})
+  }, list.map(function (item) {
+    var _item$children;
+    return item.customLabel ? /*#__PURE__*/React.createElement(Box, {
+      key: item.key
+    }, item.customLabel) : /*#__PURE__*/React.createElement(Box, {
+      key: item.key,
+      onMouseDown: function onMouseDown(e) {
+        return handleItemClick(e, item);
+      },
+      sx: _objectSpread({
+        cursor: 'pointer',
+        borderRadius: 1,
+        fontSize: 14,
+        p: 1,
+        userSelect: 'none',
+        ':hover': {
+          bgcolor: 'action.hover'
+        }
+      }, item.key === selected ? {
+        color: 'primary.main',
+        bgcolor: 'action.selected'
+      } : {})
+    }, /*#__PURE__*/React.createElement(Stack, {
+      alignItems: "center",
+      gap: 1.5,
+      direction: "row"
+    }, item.icon, /*#__PURE__*/React.createElement(Box, {
+      sx: _objectSpread({
+        flexGrow: 1
+      }, item.textSx)
+    }, item.label), item.extra, (_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length ? arrowIcon : null));
+  }))));
+};
+export default ActionDropdown;

package/dist/component/CustomDragHandle/index.js

@@ -40,7 +40,7 @@ var DragIcon = function DragIcon(_ref) {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
-      color: 'text.tertiary',
+      color: 'text.auxiliary',
       cursor: 'grab',
       borderColor: 'divider',
       bgcolor: 'background.paper',
@@ -72,7 +72,7 @@ var AddIcon = function AddIcon(_ref2) {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
-      color: 'text.tertiary',
+      color: 'text.auxiliary',
       cursor: 'grab',
       borderColor: 'divider',
       bgcolor: 'background.paper',

package/dist/component/FloatingPopover/index.d.ts

@@ -10,6 +10,8 @@ export interface FloatingPopoverProps {
     offset?: number;
     className?: string;
     style?: React.CSSProperties;
+    onMouseEnter?: (event: React.MouseEvent) => void;
+    onMouseLeave?: (event: React.MouseEvent) => void;
 }
 export declare const FloatingPopover: React.FC<FloatingPopoverProps>;
 export default FloatingPopover;

package/dist/component/FloatingPopover/index.js

@@ -26,7 +26,9 @@ export var FloatingPopover = function FloatingPopover(_ref) {
     _ref$offset = _ref.offset,
     offsetValue = _ref$offset === void 0 ? 8 : _ref$offset,
     className = _ref.className,
-    style = _ref.style;
+    style = _ref.style,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave;
   var popoverRef = useRef(null);
   var _useState = useState({
       x: 0,
@@ -87,6 +89,7 @@ export var FloatingPopover = function FloatingPopover(_ref) {
   }, [open, onClose, anchorEl]);
   if (!open) return null;
   return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    "aria-hidden": "true",
     style: {
       position: 'fixed',
       top: 0,
@@ -99,6 +102,9 @@ export var FloatingPopover = function FloatingPopover(_ref) {
   }), /*#__PURE__*/React.createElement(Paper, {
     ref: popoverRef,
     className: className,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    "aria-hidden": false,
     style: _objectSpread({
       position: strategy,
       left: position.x,

package/dist/component/HoverPopover/index.d.ts

@@ -0,0 +1,29 @@
+import React, { ReactNode } from "react";
+export interface HoverPopoverProps {
+    /** 被包裹的触发元素 */
+    children: ReactNode;
+    /** Popover 内部展示的内容 */
+    actions: ReactNode;
+    /** hover 延迟时间（毫秒），默认 500ms */
+    hoverDelay?: number;
+    /** 关闭延迟时间（毫秒），默认 300ms */
+    closeDelay?: number;
+    /** Popover 位置，默认 'top' */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /** Popover 与触发元素的距离（像素），默认 4 */
+    offset?: number;
+    /** 是否禁用 hover 效果 */
+    disabled?: boolean;
+    /** 自定义类名 */
+    className?: string;
+    /** 样式对象 */
+    style?: React.CSSProperties;
+}
+/**
+ * HoverPopover 组件
+ *
+ * 当鼠标悬停在 children 上超过指定时间后，显示 popover
+ * 支持鼠标移到 popover 上时保持打开状态
+ */
+export declare const HoverPopover: React.FC<HoverPopoverProps>;
+export default HoverPopover;

package/dist/component/HoverPopover/index.js

@@ -0,0 +1,143 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+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 { FloatingPopover } from "./..";
+import React, { useEffect, useRef, useState } from "react";
+/**
+ * HoverPopover 组件
+ * 
+ * 当鼠标悬停在 children 上超过指定时间后，显示 popover
+ * 支持鼠标移到 popover 上时保持打开状态
+ */
+export var HoverPopover = function HoverPopover(_ref) {
+  var children = _ref.children,
+    actions = _ref.actions,
+    _ref$hoverDelay = _ref.hoverDelay,
+    hoverDelay = _ref$hoverDelay === void 0 ? 500 : _ref$hoverDelay,
+    _ref$closeDelay = _ref.closeDelay,
+    closeDelay = _ref$closeDelay === void 0 ? 300 : _ref$closeDelay,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'top' : _ref$placement,
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? 4 : _ref$offset,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    className = _ref.className,
+    style = _ref.style;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    anchorEl = _useState2[0],
+    setAnchorEl = _useState2[1];
+  var hoverTimerRef = useRef(null);
+  var closeTimerRef = useRef(null);
+  var childRef = useRef(null);
+
+  // 清理定时器
+  useEffect(function () {
+    return function () {
+      if (hoverTimerRef.current) {
+        clearTimeout(hoverTimerRef.current);
+      }
+      if (closeTimerRef.current) {
+        clearTimeout(closeTimerRef.current);
+      }
+    };
+  }, []);
+  var handleMouseEnter = function handleMouseEnter(event) {
+    if (disabled) {
+      return;
+    }
+
+    // 清除关闭定时器
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+
+    // 清除之前的 hover 定时器
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+    }
+
+    // 保存 currentTarget 引用，因为 React 事件对象会被重用
+    var target = event.currentTarget;
+    var timer = setTimeout(function () {
+      setAnchorEl(target);
+      hoverTimerRef.current = null;
+    }, hoverDelay);
+    hoverTimerRef.current = timer;
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    if (disabled) {
+      return;
+    }
+
+    // 清除 hover 定时器
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+      hoverTimerRef.current = null;
+    }
+
+    // 清除之前的关闭定时器
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+    }
+
+    // 延迟关闭 popover
+    var timer = setTimeout(function () {
+      setAnchorEl(null);
+      closeTimerRef.current = null;
+    }, closeDelay);
+    closeTimerRef.current = timer;
+  };
+  var handlePopoverMouseEnter = function handlePopoverMouseEnter(event) {
+    event.stopPropagation();
+
+    // 鼠标进入 popover，取消关闭
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+      hoverTimerRef.current = null;
+    }
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  };
+  var handlePopoverMouseLeave = function handlePopoverMouseLeave(event) {
+    event.stopPropagation();
+
+    // 鼠标离开 popover，延迟关闭
+    handleMouseLeave();
+  };
+  var handleForceClose = function handleForceClose() {
+    // 强制关闭，清除所有定时器
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+      hoverTimerRef.current = null;
+    }
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+    setAnchorEl(null);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: childRef,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    className: className,
+    style: style
+  }, children), /*#__PURE__*/React.createElement(FloatingPopover, {
+    open: Boolean(anchorEl),
+    anchorEl: anchorEl,
+    onClose: handleForceClose,
+    placement: placement,
+    offset: offset,
+    onMouseEnter: handlePopoverMouseEnter,
+    onMouseLeave: handlePopoverMouseLeave
+  }, actions));
+};
+export default HoverPopover;

package/dist/component/Icons/chrome-icon.d.ts

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

package/dist/component/Icons/chrome-icon.js

@@ -0,0 +1,31 @@
+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 ChromeIcon = function ChromeIcon(props) {
+  return /*#__PURE__*/React.createElement(SvgIcon, _extends({
+    viewBox: "0 0 1024 1024",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M511.902596 511.902881m-511.902596 0a511.902596 511.902596 0 1 0 1023.805193 0 511.902596 511.902596 0 1 0-1023.805193 0Z",
+    fill: "#FFFFFF",
+    "p-id": "18082"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M123.624477 178.313022c237.94939-276.910866 679.209428-222.279483 844.098942 101.299836H571.340176c-71.381973 0-117.510085-1.621025-167.477467 24.656642-58.698164 30.913229-102.9493 88.217881-118.448573 155.476194L123.624477 178.341461v-0.056878z",
+    fill: "#EA4335",
+    "p-id": "18083"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M341.609666 511.902881a170.349808 170.349808 0 0 0 170.122296 170.179174A170.349808 170.349808 0 0 0 681.854258 511.902881a170.349808 170.349808 0 0 0-170.122296-170.207614A170.349808 170.349808 0 0 0 341.609666 511.902881z",
+    fill: "#4285F4",
+    "p-id": "18084"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M577.767397 734.694266c-95.526712 28.353716-207.235234-3.128294-268.464473-108.779301A152048.010865 152048.010865 0 0 1 83.041977 232.432502c-196.513719 301.169361-27.130838 711.658365 329.608394 781.703704l165.088587-279.44194h0.056878z",
+    fill: "#34A853",
+    "p-id": "18085"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M669.73923 341.666828a233.086316 233.086316 0 0 1 42.999818 286.580137c-40.5825 69.960021-170.122296 288.627747-232.915681 394.506268 367.574503 22.63747 635.61239-337.571323 514.518987-681.114844H669.73923v0.028439z",
+    fill: "#FBBC05",
+    "p-id": "18086"
+  }));
+};
+ChromeIcon.displayName = 'icon-chrome';

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

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