@ctzhian/tiptap 1.13.9 → 2.1.0

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

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

package/dist/component/Icons/delete-back-2-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 DeleteBack2LineIcon = function DeleteBack2LineIcon(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: "M6.53451 3H20.9993C21.5516 3 21.9993 3.44772 21.9993 4V20C21.9993 20.5523 21.5516 21 20.9993 21H6.53451C6.20015 21 5.88792 20.8329 5.70246 20.5547L0.369122 12.5547C0.145189 12.2188 0.145189 11.7812 0.369122 11.4453L5.70246 3.4453C5.88792 3.1671 6.20015 3 6.53451 3ZM7.06969 5L2.40302 12L7.06969 19H19.9993V5H7.06969ZM12.9993 10.5858L15.8277 7.75736L17.242 9.17157L14.4135 12L17.242 14.8284L15.8277 16.2426L12.9993 13.4142L10.1709 16.2426L8.75668 14.8284L11.5851 12L8.75668 9.17157L10.1709 7.75736L12.9993 10.5858Z"
+  }));
+};
+DeleteBack2LineIcon.displayName = 'icon-delete-back-2-line';

package/dist/component/Icons/{expand-horizontal-line.js → expand-horizontal-line-icon.js}

@@ -10,4 +10,4 @@ export var ExpandHorizontalLineIcon = function ExpandHorizontalLineIcon(props) {
     d: "M0.5 12L5.44975 7.05029L6.86396 8.46451L4.32843 11H10V13H4.32843L6.86148 15.5331L5.44727 16.9473L0.5 12ZM14 13H19.6708L17.1358 15.535L18.55 16.9493L23.5 11.9996L18.5503 7.0498L17.136 8.46402L19.6721 11H14V13Z"
   }));
 };
-ExpandHorizontalLineIcon.displayName = 'expand-horizontal-line';
+ExpandHorizontalLineIcon.displayName = 'icon-expand-horizontal-line';

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

@@ -29,10 +29,12 @@ export { CloseCircleFillIcon } from './close-circle-fill-icon';
 export { CodeBoxLineIcon } from './code-box-line-icon';
 export { CodeLineIcon } from './code-line-icon';
 export { CodeSSlashLineIcon } from './code-s-slash-line-icon';
+export { CollapseHorizontalLine } from './collapse-horizontal-line';
 export { CollapseIcon } from './collapse-icon';
 export { CommandLineIcon } from './command-line-icon';
 export { CopyIcon } from './copy-icon';
 export { CustomSizeIcon } from './custom-size-icon';
+export { DeleteBack2LineIcon } from './delete-back-2-line-icon';
 export { DeleteColumnIcon } from './delete-column-icon';
 export { DeleteLineIcon } from './delete-line-icon';
 export { DeleteRowIcon } from './delete-row-icon';
@@ -45,6 +47,7 @@ export { EditLineIcon } from './edit-line-icon';
 export { EmotionLineIcon } from './emotion-line-icon';
 export { EraserLineIcon } from './eraser-line-icon';
 export { ErrorWarningFillIcon } from './error-warning-fill-icon';
+export { ExpandHorizontalLineIcon } from './expand-horizontal-line-icon';
 export { ExpendIcon } from './expend-icon';
 export { ExportLineIcon } from './export-line-icon';
 export { FileCopyLineIcon } from './file-copy-line-icon';
@@ -134,5 +137,3 @@ export { UserSmileFillIcon } from './user-smile-fill-icon';
 export { VolumeMuteLineIcon } from './volume-mute-line-icon';
 export { VolumeUpLineIcon } from './volume-up-line-icon';
 export { WindowFillIcon } from './window-fill-icon';
-export { CollapseHorizontalLine } from './collapse-horizontal-line';
-export { ExpandHorizontalLineIcon } from './expand-horizontal-line';

package/dist/component/Icons/index.js

@@ -32,10 +32,12 @@ export { CloseCircleFillIcon } from "./close-circle-fill-icon";
 export { CodeBoxLineIcon } from "./code-box-line-icon";
 export { CodeLineIcon } from "./code-line-icon";
 export { CodeSSlashLineIcon } from "./code-s-slash-line-icon";
+export { CollapseHorizontalLine } from "./collapse-horizontal-line";
 export { CollapseIcon } from "./collapse-icon";
 export { CommandLineIcon } from "./command-line-icon";
 export { CopyIcon } from "./copy-icon";
 export { CustomSizeIcon } from "./custom-size-icon";
+export { DeleteBack2LineIcon } from "./delete-back-2-line-icon";
 export { DeleteColumnIcon } from "./delete-column-icon";
 export { DeleteLineIcon } from "./delete-line-icon";
 export { DeleteRowIcon } from "./delete-row-icon";
@@ -48,6 +50,7 @@ export { EditLineIcon } from "./edit-line-icon";
 export { EmotionLineIcon } from "./emotion-line-icon";
 export { EraserLineIcon } from "./eraser-line-icon";
 export { ErrorWarningFillIcon } from "./error-warning-fill-icon";
+export { ExpandHorizontalLineIcon } from "./expand-horizontal-line-icon";
 export { ExpendIcon } from "./expend-icon";
 export { ExportLineIcon } from "./export-line-icon";
 export { FileCopyLineIcon } from "./file-copy-line-icon";
@@ -136,6 +139,4 @@ export { UploadIcon } from "./upload-icon";
 export { UserSmileFillIcon } from "./user-smile-fill-icon";
 export { VolumeMuteLineIcon } from "./volume-mute-line-icon";
 export { VolumeUpLineIcon } from "./volume-up-line-icon";
-export { WindowFillIcon } from "./window-fill-icon";
-export { CollapseHorizontalLine } from "./collapse-horizontal-line";
-export { ExpandHorizontalLineIcon } from "./expand-horizontal-line";
+export { WindowFillIcon } from "./window-fill-icon";

package/dist/component/Menu/index.js

@@ -38,7 +38,9 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         horizontal: 'left'
       }
     } : _ref$childrenProps,
-    zIndex = _ref.zIndex;
+    zIndex = _ref.zIndex,
+    onOpen = _ref.onOpen,
+    onClose = _ref.onClose;
   var _React$useState = React.useState(null),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     anchorEl = _React$useState2[0],
@@ -49,9 +51,11 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       context.props.onClick(event);
     }
     setAnchorEl(event.currentTarget);
+    onOpen === null || onOpen === void 0 || onOpen();
   };
   var handleClose = function handleClose() {
     setAnchorEl(null);
+    onClose === null || onClose === void 0 || onClose();
   };
   React.useImperativeHandle(ref, function () {
     return {

package/dist/contants/enums.d.ts

@@ -1,3 +1,4 @@
+import { Theme } from "@mui/material";
 export declare enum NodeTypeEnum {
     Alert = "alert",
     BlockAttachment = "blockAttachment",
@@ -30,3 +31,11 @@ export declare const NODE_TYPE_LABEL: Record<NodeTypeEnum, {
     download?: boolean;
     [key: string]: any;
 }>;
+export declare const getThemeTextColor: (theme: Theme) => {
+    label: string;
+    value: string;
+}[];
+export declare const getThemeTextBgColor: (theme: Theme) => {
+    label: string;
+    value: string;
+}[];

package/dist/contants/enums.js

@@ -105,4 +105,64 @@ export var NODE_TYPE_LABEL = (_NODE_TYPE_LABEL = {}, _defineProperty(_defineProp
   label: '附件'
 }), _defineProperty(_NODE_TYPE_LABEL, NodeTypeEnum.HorizontalRule, {
   label: '分割线'
-}));
+}));
+export var getThemeTextColor = function getThemeTextColor(theme) {
+  return [{
+    label: '默认色',
+    value: theme.palette.text.primary
+  }, {
+    label: '主题色',
+    value: theme.palette.primary.main
+  }, {
+    label: '成功色',
+    value: theme.palette.success.main
+  }, {
+    label: '警告色',
+    value: theme.palette.warning.main
+  }, {
+    label: '错误色',
+    value: theme.palette.error.main
+  }, {
+    label: '黑色',
+    value: theme.palette.common.black
+  }, {
+    label: '灰色',
+    value: theme.palette.text.disabled
+  }, {
+    label: '白色',
+    value: theme.palette.common.white
+  }];
+};
+export var getThemeTextBgColor = function getThemeTextBgColor(theme) {
+  return [{
+    label: '默认背景',
+    value: theme.palette.background.paper
+  }, {
+    label: '灰色背景',
+    value: '#f8f8f7'
+  }, {
+    label: '棕色背景',
+    value: '#f4eeee'
+  }, {
+    label: '橙色背景',
+    value: '#fbecdd'
+  }, {
+    label: '黄色背景',
+    value: '#fef9c3'
+  }, {
+    label: '绿色背景',
+    value: '#dcfce7'
+  }, {
+    label: '蓝色背景',
+    value: '#e0f2fe'
+  }, {
+    label: '紫色背景',
+    value: '#f3e8ff'
+  }, {
+    label: '粉色背景',
+    value: '#fcf1f6'
+  }, {
+    label: '红色背景',
+    value: '#ffe4e6'
+  }];
+};

package/dist/extension/component/Alert/index.js

@@ -1,15 +1,15 @@
-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 "../../../component";
+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); }
+import { ActionDropdown, HoverPopover } from "../../../component";
 import { CheckboxCircleFillIcon, CloseCircleFillIcon, ErrorWarningFillIcon, Information2FillIcon, ScrollToBottomLineIcon, TextIcon, UserSmileFillIcon } from "../../../component/Icons";
 import { ToolbarItem } from "../../../component/Toolbar";
 import { Box, Divider, Stack } from '@mui/material';
 import { NodeViewContent, NodeViewWrapper } from '@tiptap/react';
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useMemo, useRef } from 'react';
 var VARIANT_DATA = {
   info: {
     icon: /*#__PURE__*/React.createElement(Information2FillIcon, {
@@ -53,17 +53,13 @@ var VARIANT_DATA = {
   }
 };
 var AlertView = function AlertView(_ref) {
-  var _node$attrs;
+  var _node$attrs, _node$attrs2;
   var editor = _ref.editor,
     node = _ref.node,
     updateAttributes = _ref.updateAttributes,
     selected = _ref.selected;
   var attrs = node.attrs;
   var containerRef = useRef(null);
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    anchorEl = _useState2[0],
-    setAnchorEl = _useState2[1];
   var showIcon = attrs.type !== 'text';
   var variantData = useMemo(function () {
     if (attrs.variant && VARIANT_DATA[attrs.variant]) {
@@ -71,31 +67,127 @@ var AlertView = function AlertView(_ref) {
     }
     return VARIANT_DATA['default'];
   }, [attrs.variant]);
-  var handleShowOperationPopover = function handleShowOperationPopover(event) {
-    return setAnchorEl(event.currentTarget);
-  };
-  var handleCloseOperationPopover = function handleCloseOperationPopover() {
-    return setAnchorEl(null);
+  var variantOptions = [{
+    key: 'info',
+    label: '信息',
+    icon: Information2FillIcon,
+    color: 'primary.main'
+  }, {
+    key: 'warning',
+    label: '警告',
+    icon: ErrorWarningFillIcon,
+    color: 'warning.main'
+  }, {
+    key: 'error',
+    label: '错误',
+    icon: CloseCircleFillIcon,
+    color: 'error.main'
+  }, {
+    key: 'success',
+    label: '成功',
+    icon: CheckboxCircleFillIcon,
+    color: 'success.main'
+  }, {
+    key: 'default',
+    label: '默认',
+    icon: UserSmileFillIcon,
+    color: 'text.disabled'
+  }];
+  var typeOptions = [{
+    key: 'text',
+    label: '纯文字',
+    icon: TextIcon,
+    onClick: function onClick() {
+      return updateAttributes({
+        type: 'text'
+      });
+    }
+  }, {
+    key: 'icon',
+    label: '图标文字',
+    icon: ScrollToBottomLineIcon,
+    iconTransform: 'rotate(90deg)',
+    onClick: function onClick() {
+      return updateAttributes({
+        type: 'icon'
+      });
+    }
+  }];
+  var renderOperationActions = function renderOperationActions() {
+    return /*#__PURE__*/React.createElement(Stack, {
+      direction: 'row',
+      alignItems: 'center',
+      sx: {
+        p: 0.5
+      }
+    }, variantOptions.map(function (option) {
+      var IconComponent = option.icon;
+      return /*#__PURE__*/React.createElement(ToolbarItem, {
+        key: option.key,
+        icon: /*#__PURE__*/React.createElement(IconComponent, {
+          sx: {
+            fontSize: '1rem',
+            color: option.color
+          }
+        }),
+        tip: option.label,
+        onClick: function onClick() {
+          return updateAttributes({
+            variant: option.key
+          });
+        },
+        className: attrs.variant === option.key ? 'tool-active' : ''
+      });
+    }), /*#__PURE__*/React.createElement(Divider, {
+      orientation: "vertical",
+      flexItem: true,
+      sx: {
+        height: '1rem',
+        mx: 0.5,
+        alignSelf: 'center',
+        borderColor: 'divider'
+      }
+    }), /*#__PURE__*/React.createElement(ActionDropdown, {
+      id: "alert-type-dropdown",
+      selected: attrs.type || 'icon',
+      list: typeOptions.map(function (option) {
+        var IconComponent = option.icon;
+        return {
+          key: option.key,
+          label: option.label,
+          icon: /*#__PURE__*/React.createElement(IconComponent, {
+            sx: _objectSpread({
+              fontSize: '1rem'
+            }, option.iconTransform ? {
+              transform: option.iconTransform
+            } : {})
+          }),
+          onClick: option.onClick
+        };
+      })
+    }));
   };
   return /*#__PURE__*/React.createElement(NodeViewWrapper, {
     ref: containerRef,
     className: "alert-wrapper ".concat(selected ? 'ProseMirror-selectednode' : ''),
     "data-drag-handle": true,
-    as: 'div',
-    style: {
+    as: 'div'
+  }, editor.isEditable ? /*#__PURE__*/React.createElement(HoverPopover, {
+    actions: renderOperationActions(),
+    placement: "top",
+    offset: 4
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
       marginLeft: (_node$attrs = node.attrs) !== null && _node$attrs !== void 0 && _node$attrs.indent ? node.attrs.indent * 32 : undefined,
       border: '1px solid',
       borderColor: variantData.color,
-      // color: attrs.variant === 'default' ? 'var(--mui-palette-text-primary)' : variantData.color,
-      borderRadius: '10px',
+      borderRadius: 'var(--mui-shape-borderRadius)',
       padding: '12px 16px',
-      lineHeight: 1.625,
       display: 'flex',
       alignItems: 'flex-start',
       gap: '16px',
       background: attrs.variant === 'default' ? 'var(--mui-palette-background-paper3)' : "color-mix(in srgb, ".concat(variantData.color, " 10%, transparent)")
-    },
-    onClick: handleShowOperationPopover
+    }
   }, showIcon && /*#__PURE__*/React.createElement(Box, {
     sx: {
       pt: '2px',
@@ -113,123 +205,35 @@ var AlertView = function AlertView(_ref) {
     }
   }, /*#__PURE__*/React.createElement(NodeViewContent, {
     as: 'div'
-  })), editor.isEditable && /*#__PURE__*/React.createElement(FloatingPopover, {
-    open: Boolean(anchorEl),
-    anchorEl: anchorEl,
-    onClose: handleCloseOperationPopover,
-    placement: "top"
-  }, /*#__PURE__*/React.createElement(Stack, {
-    direction: 'row',
-    alignItems: 'center',
+  })))) : /*#__PURE__*/React.createElement(Box, {
     sx: {
-      p: 0.5
+      marginLeft: (_node$attrs2 = node.attrs) !== null && _node$attrs2 !== void 0 && _node$attrs2.indent ? node.attrs.indent * 32 : undefined,
+      border: '1px solid',
+      borderColor: variantData.color,
+      borderRadius: 'var(--mui-shape-borderRadius)',
+      padding: '12px 16px',
+      display: 'flex',
+      alignItems: 'flex-start',
+      gap: '16px',
+      background: attrs.variant === 'default' ? 'var(--mui-palette-background-paper3)' : "color-mix(in srgb, ".concat(variantData.color, " 10%, transparent)")
     }
-  }, /*#__PURE__*/React.createElement(ToolbarItem, {
-    icon: /*#__PURE__*/React.createElement(Information2FillIcon, {
-      sx: {
-        fontSize: '1rem',
-        color: 'primary.main'
-      }
-    }),
-    tip: "\u4FE1\u606F",
-    onClick: function onClick() {
-      return updateAttributes({
-        variant: 'info'
-      });
-    },
-    className: attrs.variant === 'info' ? 'tool-active' : ''
-  }), /*#__PURE__*/React.createElement(ToolbarItem, {
-    icon: /*#__PURE__*/React.createElement(ErrorWarningFillIcon, {
-      sx: {
-        fontSize: '1rem',
-        color: 'warning.main'
-      }
-    }),
-    tip: "\u8B66\u544A",
-    onClick: function onClick() {
-      return updateAttributes({
-        variant: 'warning'
-      });
-    },
-    className: attrs.variant === 'warning' ? 'tool-active' : ''
-  }), /*#__PURE__*/React.createElement(ToolbarItem, {
-    icon: /*#__PURE__*/React.createElement(CloseCircleFillIcon, {
-      sx: {
-        fontSize: '1rem',
-        color: 'error.main'
-      }
-    }),
-    tip: "\u9519\u8BEF",
-    onClick: function onClick() {
-      return updateAttributes({
-        variant: 'error'
-      });
-    },
-    className: attrs.variant === 'error' ? 'tool-active' : ''
-  }), /*#__PURE__*/React.createElement(ToolbarItem, {
-    icon: /*#__PURE__*/React.createElement(CheckboxCircleFillIcon, {
-      sx: {
-        fontSize: '1rem',
-        color: 'success.main'
-      }
-    }),
-    tip: "\u6210\u529F",
-    onClick: function onClick() {
-      return updateAttributes({
-        variant: 'success'
-      });
-    },
-    className: attrs.variant === 'success' ? 'tool-active' : ''
-  }), /*#__PURE__*/React.createElement(ToolbarItem, {
-    icon: /*#__PURE__*/React.createElement(UserSmileFillIcon, {
-      sx: {
-        fontSize: '1rem',
-        color: 'text.disabled'
-      }
-    }),
-    tip: "\u9ED8\u8BA4",
-    onClick: function onClick() {
-      return updateAttributes({
-        variant: 'default'
-      });
-    },
-    className: attrs.variant === 'default' ? 'tool-active' : ''
-  }), /*#__PURE__*/React.createElement(Divider, {
-    orientation: "vertical",
-    flexItem: true,
+  }, showIcon && /*#__PURE__*/React.createElement(Box, {
     sx: {
-      height: '1rem',
-      mx: 0.5,
-      alignSelf: 'center',
-      borderColor: 'divider'
+      pt: '2px',
+      lineHeight: 1,
+      color: attrs.variant === 'default' ? 'text.disabled' : variantData.color
     }
-  }), /*#__PURE__*/React.createElement(ToolbarItem, {
-    icon: /*#__PURE__*/React.createElement(TextIcon, {
-      sx: {
-        fontSize: '1rem'
-      }
-    }),
-    tip: "\u7EAF\u6587\u5B57",
-    onClick: function onClick() {
-      return updateAttributes({
-        type: 'text'
-      });
-    },
-    className: attrs.type === 'text' ? 'tool-active' : ''
-  }), /*#__PURE__*/React.createElement(ToolbarItem, {
-    icon: /*#__PURE__*/React.createElement(ScrollToBottomLineIcon, {
-      sx: {
-        transform: 'rotate(90deg)',
-        fontSize: '1rem'
+  }, variantData.icon), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      flex: 1,
+      width: 0,
+      'code': {
+        borderColor: attrs.variant === 'default' ? '' : "color-mix(in srgb, ".concat(variantData.color, " 30%, transparent) !important"),
+        bgcolor: attrs.variant === 'default' ? '' : "color-mix(in srgb, ".concat(variantData.color, " 10%, transparent) !important")
       }
-    }),
-    tip: "\u56FE\u6807\u6587\u5B57",
-    onClick: function onClick() {
-      return updateAttributes({
-        type: 'icon'
-      });
-    },
-    className: attrs.type === 'icon' ? 'tool-active' : ''
+    }
+  }, /*#__PURE__*/React.createElement(NodeViewContent, {
+    as: 'div'
   }))));
 };
 export default AlertView;

package/dist/extension/component/Flow/Edit.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { FlowAttributes } from ".";
 type EditFlowProps = {
-    anchorEl: HTMLDivElement | null;
+    anchorEl: HTMLElement | null;
     attrs: FlowAttributes;
     updateAttributes: (attrs: FlowAttributes) => void;
     onCancel: () => void;

package/dist/extension/component/Flow/Edit.js

@@ -6,7 +6,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { FloatingPopover } from "../../../component/FloatingPopover";
 import { Button, Stack, TextField } from "@mui/material";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 var EditFlow = function EditFlow(_ref) {
   var anchorEl = _ref.anchorEl,
     attrs = _ref.attrs,
@@ -16,34 +16,9 @@ var EditFlow = function EditFlow(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     editCode = _useState2[0],
     setEditCode = _useState2[1];
-
-  // 当 attrs.code 更新时，同步更新 editCode
   useEffect(function () {
     setEditCode(attrs.code || '');
   }, [attrs.code]);
-
-  // 创建虚拟元素，表示 flow-wrapper 的中心点
-  var centerVirtualElement = useMemo(function () {
-    if (!anchorEl) return null;
-    return {
-      getBoundingClientRect: function getBoundingClientRect() {
-        // 每次调用时重新计算，确保位置实时更新
-        var rect = anchorEl.getBoundingClientRect();
-        var centerX = rect.left + rect.width / 2;
-        var centerY = rect.top + rect.height / 2;
-        return {
-          width: 0,
-          height: 0,
-          x: centerX,
-          y: centerY,
-          top: centerY,
-          left: centerX,
-          right: centerX,
-          bottom: centerY
-        };
-      }
-    };
-  }, [anchorEl]);
   var handleSaveFlow = function handleSaveFlow() {
     var trimmedCode = editCode.trim();
     if (!trimmedCode) return;
@@ -54,12 +29,9 @@ var EditFlow = function EditFlow(_ref) {
   };
   return /*#__PURE__*/React.createElement(FloatingPopover, {
     open: true,
-    anchorEl: centerVirtualElement,
+    anchorEl: anchorEl,
     onClose: onCancel,
-    placement: "top",
-    style: {
-      transform: 'translate(-50%, 0)'
-    }
+    placement: "bottom"
   }, /*#__PURE__*/React.createElement(Stack, {
     gap: 2,
     sx: {