@ctzhian/tiptap 2.7.5 → 2.9.0

package/dist/component/Icons/tooltip-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 TooltipLineIcon = function TooltipLineIcon(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: "M14.45 19L12 22.5L9.55 19H3C2.73478 19 2.48043 18.8946 2.29289 18.7071C2.10536 18.5196 2 18.2652 2 18V4C2 3.73478 2.10536 3.48043 2.29289 3.29289C2.48043 3.10536 2.73478 3 3 3H21C21.2652 3 21.5196 3.10536 21.7071 3.29289C21.8946 3.48043 22 3.73478 22 4V18C22 18.2652 21.8946 18.5196 21.7071 18.7071C21.5196 18.8946 21.2652 19 21 19H14.45ZM13.409 17H20V5H4V17H10.591L12 19.012L13.409 17Z"
+  }));
+};
+TooltipLineIcon.displayName = 'icon-tooltip-line';

package/dist/component/Toolbar/EditorInsert/index.js

@@ -332,7 +332,7 @@ var EditorInsert = function EditorInsert(_ref) {
       }, "\u4E13\u4E1A"),
       key: 'programmer'
     }, {
-      label: '流程图',
+      label: 'Mermaid 流程图',
       key: 'flow',
       icon: /*#__PURE__*/React.createElement(FlowChartIcon, {
         sx: {

package/dist/contants/slash-commands.js

@@ -213,7 +213,7 @@ export var slashCommands = [{
     editor.chain().focus().deleteRange(range).setDetails().run();
   }
 }, {
-  title: '流程图',
+  title: 'Mermaid 流程图',
   icon: /*#__PURE__*/React.createElement(FlowChartIcon, {
     sx: {
       fontSize: '1rem'

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

@@ -1,5 +1,10 @@
 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); }
 var _excluded = ["className"];
+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 _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); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -12,7 +17,7 @@ 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 { ArrowDownSLineIcon, FileCopyLineIcon } from "../../../component/Icons";
+import { ArrowDownSLineIcon, CheckboxCircleLineIcon, FileCopyLineIcon } from "../../../component/Icons";
 import { languages } from "../../../contants/highlight";
 import { Box, Divider, ListSubheader, MenuItem, Select, Stack, TextField } from '@mui/material';
 import { NodeViewContent, NodeViewWrapper } from '@tiptap/react';
@@ -144,7 +149,8 @@ var CodeBlockView = function CodeBlockView(props) {
       right: 0,
       height: '1.25rem',
       lineHeight: '1.25rem',
-      px: 2.5,
+      pl: 2.5,
+      pr: 1,
       py: 2,
       zIndex: 1,
       color: 'text.tertiary',
@@ -330,15 +336,22 @@ var CodeBlockView = function CodeBlockView(props) {
       bgcolor: 'inherit',
       color: 'inherit'
     }
-  }, /*#__PURE__*/React.createElement(FileCopyLineIcon, {
+  }, copyText === '复制成功' ? /*#__PURE__*/React.createElement(CheckboxCircleLineIcon, {
+    sx: {
+      fontSize: '0.75rem',
+      color: 'success.main'
+    }
+  }) : /*#__PURE__*/React.createElement(FileCopyLineIcon, {
     sx: {
       fontSize: '0.75rem',
       color: 'inherit'
     }
   }), /*#__PURE__*/React.createElement(Box, {
-    sx: {
+    sx: _objectSpread({
       lineHeight: 1
-    }
+    }, copyText === '复制成功' ? {
+      color: 'success.main'
+    } : {})
   }, copyText)))), /*#__PURE__*/React.createElement(Box, {
     component: 'pre',
     sx: {

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

@@ -0,0 +1,7 @@
+import React from "react";
+interface FlowDiagramProps {
+    code: string;
+    onError?: (error: Error) => void;
+}
+declare const FlowDiagram: React.FC<FlowDiagramProps>;
+export default FlowDiagram;

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

@@ -0,0 +1,52 @@
+import { Box } from "@mui/material";
+import React from "react";
+import { useMermaidRender } from "./useMermaidRender";
+var FlowDiagram = function FlowDiagram(_ref) {
+  var code = _ref.code,
+    onError = _ref.onError;
+  var _useMermaidRender = useMermaidRender({
+      code: code,
+      onError: onError,
+      showLoading: true,
+      idPrefix: 'mermaid'
+    }),
+    svgContent = _useMermaidRender.svgContent,
+    error = _useMermaidRender.error,
+    loading = _useMermaidRender.loading;
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      width: '100%',
+      minHeight: loading ? '100px' : 'auto',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      '& svg': {
+        maxWidth: '100%',
+        height: 'auto'
+      }
+    }
+  }, loading && !error && /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      color: 'text.secondary',
+      fontSize: '14px'
+    }
+  }, "\u6B63\u5728\u6E32\u67D3..."), error && /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      color: 'error.main',
+      padding: '20px',
+      textAlign: 'center',
+      fontSize: '14px'
+    }
+  }, error), svgContent && !error && /*#__PURE__*/React.createElement(Box, {
+    dangerouslySetInnerHTML: {
+      __html: svgContent
+    },
+    sx: {
+      width: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }));
+};
+export default FlowDiagram;

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

@@ -73,7 +73,7 @@ var InsertFlow = function InsertFlow(_ref) {
       flexGrow: 1,
       textAlign: 'left'
     }
-  }, "\u70B9\u51FB\u6B64\u5904\u5D4C\u5165\u6216\u7C98\u8D34\u6D41\u7A0B\u56FE\u4EE3\u7801")), /*#__PURE__*/React.createElement(FloatingPopover, {
+  }, "\u70B9\u51FB\u6B64\u5904\u8F93\u5165\u6216\u7C98\u8D34 Mermaid \u6D41\u7A0B\u56FE\u4EE3\u7801")), /*#__PURE__*/React.createElement(FloatingPopover, {
     open: Boolean(anchorEl),
     anchorEl: anchorEl,
     onClose: handleClosePopover,

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

@@ -18,6 +18,10 @@ var ReadonlyFlow = function ReadonlyFlow(_ref) {
   }
   return /*#__PURE__*/React.createElement(NodeViewWrapper, {
     className: "flow-wrapper"
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      textAlign: attrs.align || undefined
+    }
   }, /*#__PURE__*/React.createElement(Box, {
     sx: {
       position: 'relative',
@@ -25,7 +29,7 @@ var ReadonlyFlow = function ReadonlyFlow(_ref) {
       border: '1px solid',
       borderColor: 'divider',
       borderRadius: 'var(--mui-shape-borderRadius)',
-      width: attrs.width || '100%',
+      width: typeof attrs.width === 'string' && attrs.width.endsWith('%') ? attrs.width : typeof attrs.width === 'number' ? "".concat(attrs.width, "px") : typeof attrs.width === 'string' && attrs.width && !isNaN(parseFloat(attrs.width)) ? "".concat(attrs.width, "px") : attrs.width || '100%',
       height: 'auto'
     }
   }, /*#__PURE__*/React.createElement(Box, {
@@ -60,6 +64,6 @@ var ReadonlyFlow = function ReadonlyFlow(_ref) {
         height: 'auto'
       }
     }
-  }))));
+  })))));
 };
 export default ReadonlyFlow;

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

@@ -4,6 +4,7 @@ import React from "react";
 export interface FlowAttributes {
     code: string;
     width?: string | number;
+    align?: 'left' | 'center' | 'right' | null;
 }
 declare const FlowViewWrapper: React.FC<NodeViewProps & EditorFnProps>;
 export default FlowViewWrapper;

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

@@ -4,16 +4,17 @@ 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 { DeleteLineIcon, EditLineIcon } from "../../../component/Icons";
+import { ActionDropdown } from "../../../component";
+import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon, DeleteLineIcon, EditLineIcon } from "../../../component/Icons";
 import { ToolbarItem } from "../../../component/Toolbar";
-import { alpha, Box, Stack, useTheme } from "@mui/material";
+import { alpha, Box, Divider, Stack, useTheme } from "@mui/material";
 import { NodeViewWrapper } from '@tiptap/react';
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { HoverPopover } from "../../../component/HoverPopover";
 import EditFlow from "./Edit";
+import FlowDiagram from "./FlowDiagram";
 import InsertFlow from "./Insert";
 import ReadonlyFlow from "./Readonly";
-import { useMermaidRender } from "./useMermaidRender";
 var FlowViewWrapper = function FlowViewWrapper(_ref) {
   var editor = _ref.editor,
     node = _ref.node,
@@ -48,6 +49,23 @@ var FlowViewWrapper = function FlowViewWrapper(_ref) {
   var flowWrapperRef = useRef(null);
   var flowContentRef = useRef(null);
   var editButtonRef = useRef(null);
+  var isPercentWidth = function isPercentWidth() {
+    if (!attrs.width) return true;
+    if (typeof attrs.width === 'string' && attrs.width.endsWith('%')) {
+      return true;
+    }
+    return false;
+  };
+  var getCurrentWidthPercent = function getCurrentWidthPercent() {
+    if (isPercentWidth()) {
+      if (!attrs.width) return '100';
+      if (typeof attrs.width === 'string' && attrs.width.endsWith('%')) {
+        return attrs.width.replace('%', '');
+      }
+      return '100';
+    }
+    return 'pixel';
+  };
   var getCurrentDisplayWidth = function getCurrentDisplayWidth() {
     if (flowWrapperRef.current) {
       return flowWrapperRef.current.offsetWidth;
@@ -71,18 +89,6 @@ var FlowViewWrapper = function FlowViewWrapper(_ref) {
     }
     return containerSize * (defaultPercent / 100);
   };
-
-  // 将像素值转换回字符串格式
-  var formatValue = function formatValue(pixels, original) {
-    if (typeof original === 'string' && original.endsWith('%')) {
-      var _flowWrapperRef$curre;
-      // 如果原来是百分比，保持百分比格式
-      var containerWidth = ((_flowWrapperRef$curre = flowWrapperRef.current) === null || _flowWrapperRef$curre === void 0 || (_flowWrapperRef$curre = _flowWrapperRef$curre.parentElement) === null || _flowWrapperRef$curre === void 0 ? void 0 : _flowWrapperRef$curre.clientWidth) || 800;
-      var percent = Math.round(pixels / containerWidth * 100);
-      return "".concat(percent, "%");
-    }
-    return "".concat(Math.round(pixels), "px");
-  };
   var handleMouseDown = function handleMouseDown(e, corner) {
     e.preventDefault();
     e.stopPropagation();
@@ -101,11 +107,13 @@ var FlowViewWrapper = function FlowViewWrapper(_ref) {
       newWidth = dragStartWidthRef.current - deltaX;
     }
     newWidth = Math.max(200, Math.min(1920, newWidth));
+    // 手动调整宽度时，改为固定宽度（像素值）
     _updateAttributes({
-      width: formatValue(newWidth, attrs.width),
-      code: attrs.code
+      width: Math.round(newWidth),
+      code: attrs.code,
+      align: attrs.align
     });
-  }, [isDragging, dragCorner, attrs.width, _updateAttributes]);
+  }, [isDragging, dragCorner, attrs.code, _updateAttributes]);
   var handleMouseUp = useCallback(function () {
     setIsDragging(false);
     setDragCorner(null);
@@ -144,7 +152,8 @@ var FlowViewWrapper = function FlowViewWrapper(_ref) {
   }, /*#__PURE__*/React.createElement(Box, {
     ref: flowContentRef,
     sx: {
-      position: 'relative'
+      position: 'relative',
+      textAlign: attrs.align || undefined
     },
     onMouseEnter: function onMouseEnter() {
       return setIsHovering(true);
@@ -157,10 +166,11 @@ var FlowViewWrapper = function FlowViewWrapper(_ref) {
     sx: {
       position: 'relative',
       border: '2px solid',
+      display: 'inline-block',
       borderColor: isHovering || isDragging ? alpha(theme.palette.primary.main, 0.3) : 'transparent',
       borderRadius: 'var(--mui-shape-borderRadius)',
       bgcolor: 'background.paper',
-      width: attrs.width || '100%',
+      width: typeof attrs.width === 'string' && attrs.width.endsWith('%') ? attrs.width : typeof attrs.width === 'number' ? "".concat(attrs.width, "px") : typeof attrs.width === 'string' && attrs.width && !isNaN(parseFloat(attrs.width)) ? "".concat(attrs.width, "px") : attrs.width || '100%',
       height: 'auto',
       transition: 'border-color 0.2s ease'
     }
@@ -184,6 +194,109 @@ var FlowViewWrapper = function FlowViewWrapper(_ref) {
       }),
       tip: "\u7F16\u8F91\u6D41\u7A0B\u56FE",
       onClick: handleShowPopover
+    }), /*#__PURE__*/React.createElement(Divider, {
+      orientation: "vertical",
+      flexItem: true,
+      sx: {
+        height: '1rem',
+        mx: 0.5,
+        alignSelf: 'center',
+        borderColor: 'divider'
+      }
+    }), /*#__PURE__*/React.createElement(ToolbarItem, {
+      icon: /*#__PURE__*/React.createElement(AlignLeftIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      tip: "\u5DE6\u4FA7\u5BF9\u9F50",
+      className: attrs.align === 'left' ? 'tool-active' : '',
+      onClick: function onClick() {
+        return _updateAttributes({
+          align: attrs.align === 'left' ? null : 'left',
+          code: attrs.code,
+          width: attrs.width
+        });
+      }
+    }), /*#__PURE__*/React.createElement(ToolbarItem, {
+      icon: /*#__PURE__*/React.createElement(AlignCenterIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      tip: "\u5C45\u4E2D\u5BF9\u9F50",
+      className: attrs.align === 'center' ? 'tool-active' : '',
+      onClick: function onClick() {
+        return _updateAttributes({
+          align: attrs.align === 'center' ? null : 'center',
+          code: attrs.code,
+          width: attrs.width
+        });
+      }
+    }), /*#__PURE__*/React.createElement(ToolbarItem, {
+      icon: /*#__PURE__*/React.createElement(AlignRightIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      tip: "\u53F3\u4FA7\u5BF9\u9F50",
+      className: attrs.align === 'right' ? 'tool-active' : '',
+      onClick: function onClick() {
+        return _updateAttributes({
+          align: attrs.align === 'right' ? null : 'right',
+          code: attrs.code,
+          width: attrs.width
+        });
+      }
+    }), /*#__PURE__*/React.createElement(Divider, {
+      orientation: "vertical",
+      flexItem: true,
+      sx: {
+        height: '1rem',
+        mx: 0.5,
+        alignSelf: 'center',
+        borderColor: 'divider'
+      }
+    }), /*#__PURE__*/React.createElement(ActionDropdown, {
+      id: "flow-width-dropdown",
+      selected: getCurrentWidthPercent(),
+      defaultDisplay: !isPercentWidth() ? {
+        label: '固定宽度'
+      } : undefined,
+      list: [{
+        key: '50',
+        label: '自适应宽度（50%）',
+        onClick: function onClick() {
+          return _updateAttributes({
+            width: '50%'
+          });
+        }
+      }, {
+        key: '75',
+        label: '自适应宽度（75%）',
+        onClick: function onClick() {
+          return _updateAttributes({
+            width: '75%'
+          });
+        }
+      }, {
+        key: '100',
+        label: '自适应宽度（100%）',
+        onClick: function onClick() {
+          return _updateAttributes({
+            width: '100%'
+          });
+        }
+      }]
+    }), /*#__PURE__*/React.createElement(Divider, {
+      orientation: "vertical",
+      flexItem: true,
+      sx: {
+        height: '1rem',
+        mx: 0.5,
+        alignSelf: 'center',
+        borderColor: 'divider'
+      }
     }), /*#__PURE__*/React.createElement(ToolbarItem, {
       icon: /*#__PURE__*/React.createElement(DeleteLineIcon, {
         sx: {
@@ -300,52 +413,4 @@ var FlowViewWrapper = function FlowViewWrapper(_ref) {
     onCancel: handleEditCancel
   }));
 };
-var FlowDiagram = function FlowDiagram(_ref2) {
-  var code = _ref2.code,
-    onError = _ref2.onError;
-  var _useMermaidRender = useMermaidRender({
-      code: code,
-      onError: onError,
-      showLoading: true,
-      idPrefix: 'mermaid'
-    }),
-    svgContent = _useMermaidRender.svgContent,
-    error = _useMermaidRender.error,
-    loading = _useMermaidRender.loading;
-  return /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      width: '100%',
-      minHeight: loading ? '100px' : 'auto',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      '& svg': {
-        maxWidth: '100%',
-        height: 'auto'
-      }
-    }
-  }, loading && !error && /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      color: 'text.secondary',
-      fontSize: '14px'
-    }
-  }, "\u6B63\u5728\u6E32\u67D3..."), error && /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      color: 'error.main',
-      padding: '20px',
-      textAlign: 'center',
-      fontSize: '14px'
-    }
-  }, error), svgContent && !error && /*#__PURE__*/React.createElement(Box, {
-    dangerouslySetInnerHTML: {
-      __html: svgContent
-    },
-    sx: {
-      width: '100%',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }
-  }));
-};
 export default FlowViewWrapper;

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

@@ -86,7 +86,7 @@ export var useMermaidRender = function useMermaidRender(_ref) {
               _context.next = 17;
               break;
             case 16:
-              throw new Error('渲染结果为空，请检查流程图代码是否正确');
+              throw new Error('Mermaid 流程图渲染结果为空，请检查流程图代码是否正确');
             case 17:
               _context.next = 28;
               break;
@@ -99,7 +99,7 @@ export var useMermaidRender = function useMermaidRender(_ref) {
               }
               return _context.abrupt("return");
             case 23:
-              errorMessage = _context.t0.message || '流程图渲染失败';
+              errorMessage = _context.t0.message || 'Mermaid 流程图渲染失败';
               setError(errorMessage);
               setLoading(false);
               setSvgContent('');

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

@@ -1,4 +1,13 @@
-export declare const initMermaid: () => void;
+import { type MermaidConfig } from 'mermaid';
+/**
+ * 初始化 mermaid（只执行一次）
+ * @param config 可选的 mermaid 配置，会与默认配置合并
+ */
+export declare const initMermaid: (config?: MermaidConfig) => void;
+/**
+ * 获取当前 mermaid 配置
+ */
+export declare const getMermaidConfig: () => MermaidConfig | null;
 /**
  * 生成唯一的 mermaid 渲染 ID
  */

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

@@ -1,27 +1,62 @@
+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 mermaid from 'mermaid';
+import { v4 as uuidv4 } from 'uuid';
+
+/**
+ * 默认 mermaid 配置
+ */
+var defaultMermaidConfig = {
+  startOnLoad: false,
+  theme: 'default',
+  securityLevel: 'loose',
+  look: 'handDrawn' // 启用手绘效果
+};
+
+/**
+ * 全局 mermaid 配置
+ */
+var globalMermaidConfig = null;
 
 /**
  * 初始化 mermaid（只执行一次）
+ * @param config 可选的 mermaid 配置，会与默认配置合并
  */
-var mermaidInitialized = false;
-export var initMermaid = function initMermaid() {
-  if (!mermaidInitialized) {
-    mermaid.initialize({
-      startOnLoad: false,
-      theme: 'default',
-      securityLevel: 'loose',
-      fontFamily: 'inherit'
+export var initMermaid = function initMermaid(config) {
+  if (!globalMermaidConfig) {
+    var mergedConfig = _objectSpread(_objectSpread(_objectSpread({}, defaultMermaidConfig), config), {}, {
+      // 深度合并 flowchart 配置
+      flowchart: _objectSpread(_objectSpread({}, defaultMermaidConfig.flowchart), config === null || config === void 0 ? void 0 : config.flowchart)
+    });
+    mermaid.initialize(mergedConfig);
+    globalMermaidConfig = mergedConfig;
+  } else if (config) {
+    // 如果已经初始化过，但传入了新配置，则更新配置
+    var _mergedConfig = _objectSpread(_objectSpread(_objectSpread({}, globalMermaidConfig), config), {}, {
+      flowchart: _objectSpread(_objectSpread({}, globalMermaidConfig.flowchart), config === null || config === void 0 ? void 0 : config.flowchart)
     });
-    mermaidInitialized = true;
+    mermaid.initialize(_mergedConfig);
+    globalMermaidConfig = _mergedConfig;
   }
 };
 
+/**
+ * 获取当前 mermaid 配置
+ */
+export var getMermaidConfig = function getMermaidConfig() {
+  return globalMermaidConfig;
+};
+
 /**
  * 生成唯一的 mermaid 渲染 ID
  */
 export var generateMermaidId = function generateMermaidId() {
   var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'mermaid';
-  return "".concat(prefix, "-").concat(Date.now(), "-").concat(Math.random().toString(36).substr(2, 9));
+  return "".concat(prefix, "-").concat(uuidv4());
 };
 
 /**