@ctzhian/tiptap 2.0.0 → 2.1.0

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: {

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

@@ -35,26 +35,26 @@ var FlowViewWrapper = function FlowViewWrapper(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     isDragging = _useState6[0],
     setIsDragging = _useState6[1];
-  var _useState7 = useState(null),
+  var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    dragCorner = _useState8[0],
-    setDragCorner = _useState8[1];
+    keepHoverPopoverOpen = _useState8[0],
+    setKeepHoverPopoverOpen = _useState8[1];
+  var _useState9 = useState(null),
+    _useState10 = _slicedToArray(_useState9, 2),
+    dragCorner = _useState10[0],
+    setDragCorner = _useState10[1];
   var dragStartXRef = useRef(0);
   var dragStartWidthRef = useRef(0);
   var flowWrapperRef = useRef(null);
   var flowContentRef = useRef(null);
-
-  // 获取当前实际显示的流程图宽度
+  var editButtonRef = useRef(null);
   var getCurrentDisplayWidth = function getCurrentDisplayWidth() {
     if (flowWrapperRef.current) {
       return flowWrapperRef.current.offsetWidth;
     }
-    // 如果 ref 不存在，使用容器宽度计算
     var containerWidth = 800;
     return getPixelValue(attrs.width, containerWidth);
   };
-
-  // 将 width 转换为像素值
   var getPixelValue = function getPixelValue(value, containerSize) {
     var defaultPercent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;
     if (!value) return containerSize * (defaultPercent / 100);
@@ -81,7 +81,7 @@ var FlowViewWrapper = function FlowViewWrapper(_ref) {
       var percent = Math.round(pixels / containerWidth * 100);
       return "".concat(percent, "%");
     }
-    return Math.round(pixels);
+    return "".concat(Math.round(pixels), "px");
   };
   var handleMouseDown = function handleMouseDown(e, corner) {
     e.preventDefault();
@@ -95,13 +95,9 @@ var FlowViewWrapper = function FlowViewWrapper(_ref) {
     if (!isDragging || !dragCorner) return;
     var deltaX = e.clientX - dragStartXRef.current;
     var newWidth;
-
-    // 根据不同的角计算宽度变化
     if (dragCorner === 'top-right' || dragCorner === 'bottom-right') {
-      // 右侧角：向右拉伸，宽度增加
       newWidth = dragStartWidthRef.current + deltaX;
     } else {
-      // 左侧角：向左拉伸，宽度增加（deltaX 为负时宽度增加）
       newWidth = dragStartWidthRef.current - deltaX;
     }
     newWidth = Math.max(200, Math.min(1920, newWidth));
@@ -125,7 +121,12 @@ var FlowViewWrapper = function FlowViewWrapper(_ref) {
     }
   }, [isDragging, handleMouseMove, handleMouseUp]);
   var handleShowPopover = function handleShowPopover() {
-    return setIsEditing(true);
+    setKeepHoverPopoverOpen(true);
+    setIsEditing(true);
+  };
+  var handleEditCancel = function handleEditCancel() {
+    setIsEditing(false);
+    setKeepHoverPopoverOpen(false);
   };
   if (!editor.isEditable) {
     return /*#__PURE__*/React.createElement(ReadonlyFlow, {
@@ -167,6 +168,7 @@ var FlowViewWrapper = function FlowViewWrapper(_ref) {
     style: {
       width: '100%'
     },
+    keepOpen: keepHoverPopoverOpen,
     actions: /*#__PURE__*/React.createElement(Stack, {
       direction: 'row',
       alignItems: 'center',
@@ -174,6 +176,7 @@ var FlowViewWrapper = function FlowViewWrapper(_ref) {
         p: 0.5
       }
     }, /*#__PURE__*/React.createElement(ToolbarItem, {
+      ref: editButtonRef,
       icon: /*#__PURE__*/React.createElement(EditLineIcon, {
         sx: {
           fontSize: '1rem'
@@ -292,15 +295,13 @@ var FlowViewWrapper = function FlowViewWrapper(_ref) {
       zIndex: 10
     }
   }))))), isEditing && /*#__PURE__*/React.createElement(EditFlow, {
-    anchorEl: flowContentRef.current,
+    anchorEl: editButtonRef.current,
     attrs: attrs,
     updateAttributes: function updateAttributes(newAttrs) {
       _updateAttributes(newAttrs);
-      setIsEditing(false);
+      handleEditCancel();
     },
-    onCancel: function onCancel() {
-      return setIsEditing(false);
-    }
+    onCancel: handleEditCancel
   }));
 };
 var FlowDiagram = function FlowDiagram(_ref2) {

package/dist/extension/component/Image/index.d.ts

@@ -1,6 +1,7 @@
 import { EditorFnProps } from "../../../type";
 import { NodeViewProps } from "@tiptap/react";
 import React from "react";
+import 'react-photo-view/dist/react-photo-view.css';
 export interface ImageAttributes {
     src: string;
     title?: string;

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

@@ -14,6 +14,8 @@ import { ToolbarItem } from "../../../component/Toolbar";
 import { alpha, Box, Button, Divider, Stack, TextField, useTheme } from "@mui/material";
 import { NodeViewWrapper } from "@tiptap/react";
 import React, { useCallback, useEffect, useRef, useState } from "react";
+import { PhotoView } from "react-photo-view";
+import 'react-photo-view/dist/react-photo-view.css';
 import { HoverPopover } from "../../../component/HoverPopover";
 import CropImage from "./Crop";
 import InsertImage from "./Insert";
@@ -157,6 +159,15 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
     dragStartXRef.current = e.clientX;
     dragStartWidthRef.current = getCurrentDisplayWidth();
   };
+  var handleImageClick = function handleImageClick(e) {
+    // 如果正在拖拽调整大小，阻止预览
+    if (isDragging || dragCorner) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    // 允许 PhotoView 处理点击事件进行预览
+  };
   var handleMouseMove = useCallback(function (e) {
     if (!isDragging || !dragCorner) return;
     var deltaX = e.clientX - dragStartXRef.current;
@@ -383,6 +394,8 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
     onMouseLeave: function onMouseLeave() {
       return setIsHovering(false);
     }
+  }, /*#__PURE__*/React.createElement(PhotoView, {
+    src: attrs.src
   }, /*#__PURE__*/React.createElement("img", {
     ref: imageRef,
     src: attrs.src,
@@ -390,14 +403,15 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
     style: {
       maxWidth: '100%',
       height: 'auto',
-      cursor: 'default',
+      cursor: isDragging ? 'default' : 'pointer',
       border: '2px solid',
       borderColor: isHovering || isDragging ? alpha(theme.palette.primary.main, 0.3) : 'transparent'
     },
+    onClick: handleImageClick,
     onError: function onError(e) {
       _onError === null || _onError === void 0 || _onError(e);
     }
-  }), (isHovering || isDragging) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+  })), (isHovering || isDragging) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
     onMouseDown: function onMouseDown(e) {
       return handleMouseDown(e, 'top-left');
     },

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

@@ -114,7 +114,7 @@ var LinkViewWrapper = function LinkViewWrapper(_ref) {
           fontSize: '1rem'
         }
       }),
-      tip: "\u590D\u5236",
+      tip: "\u590D\u5236\u94FE\u63A5",
       onClick: handleCopyLink
     }), /*#__PURE__*/React.createElement(ToolbarItem, {
       icon: /*#__PURE__*/React.createElement(LinkUnlinkIcon, {

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

@@ -18,6 +18,7 @@ import { DeleteBack2LineIcon } from "../../../component/Icons/delete-back-2-line
 import { getThemeTextBgColor, getThemeTextColor } from "../../../contants/enums";
 import { Box, Divider, Typography } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
+import { TextSelection } from '@tiptap/pm/state';
 import { CellSelection, cellAround, deleteCellSelection, mergeCells, splitCell } from '@tiptap/pm/tables';
 import { useEditorState } from '@tiptap/react';
 import React, { forwardRef, useCallback, useEffect, useState } from 'react';
@@ -147,10 +148,66 @@ export var TableCellHandleMenu = /*#__PURE__*/forwardRef(function (_ref, ref) {
             }
           }),
           onClick: function onClick() {
+            if (!editor) return;
+            if (editor.state.storedMarks) {
+              var textStyleMarkType = editor.schema.marks.textStyle;
+              if (textStyleMarkType) {
+                editor.view.dispatch(editor.state.tr.removeStoredMark(textStyleMarkType));
+              }
+            }
             setTimeout(function () {
-              editor.chain().focus().toggleMark('textStyle', {
-                color: it.value
-              }).run();
+              var _editor$state = editor.state,
+                selection = _editor$state.selection,
+                doc = _editor$state.doc;
+              var textStyleMark = editor.schema.marks.textStyle;
+              if (!textStyleMark) return;
+              if (selection instanceof CellSelection) {
+                var tr = editor.state.tr;
+                var hasContent = false;
+                selection.forEachCell(function (cellNode, cellPos) {
+                  if (cellNode.content.size > 0) {
+                    hasContent = true;
+                    var from = cellPos + 1;
+                    var to = cellPos + cellNode.nodeSize - 1;
+                    if (from < to) {
+                      var $from = doc.resolve(from);
+                      var $to = doc.resolve(to);
+                      var cellTextSelection = TextSelection.between($from, $to, 1);
+                      if (cellTextSelection) {
+                        var mark = textStyleMark.create({
+                          color: it.value
+                        });
+                        tr.addMark(from, to, mark);
+                      }
+                    }
+                  }
+                });
+                if (hasContent) {
+                  editor.view.dispatch(tr);
+                  editor.commands.focus();
+                }
+              } else {
+                var $anchor = selection.$anchor;
+                var cell = cellAround($anchor);
+                if (cell) {
+                  var cellNode = doc.nodeAt(cell.pos);
+                  if (cellNode && cellNode.content.size > 0) {
+                    var from = cell.pos + 1;
+                    var to = cell.pos + cellNode.nodeSize - 1;
+                    if (from < to) {
+                      var $from = doc.resolve(from);
+                      var $to = doc.resolve(to);
+                      var newSelection = TextSelection.between($from, $to, 1);
+                      if (newSelection) {
+                        editor.view.dispatch(editor.state.tr.setSelection(newSelection));
+                      }
+                    }
+                  }
+                }
+                editor.chain().focus().toggleMark('textStyle', {
+                  color: it.value
+                }).run();
+              }
             }, 0);
           }
         };

package/dist/extension/component/TableHandle/TableHandleMenu.js

@@ -534,7 +534,7 @@ export var TableHandleMenu = function TableHandleMenu(_ref) {
           my: 0.5
         }
       }),
-      key: 'divider2'
+      key: 'divider3'
     }, {
       key: 'duplicate',
       label: orientation === 'row' ? '复制当前行' : '复制当前列',