@ctzhian/tiptap 2.7.4 → 2.8.0

package/dist/Editor/demo.js

@@ -137,7 +137,7 @@ var Reader = function Reader() {
   }();
   var _useTiptap = useTiptap({
       editable: EDITABLE,
-      content: content,
+      content: '<div data-type=\"flow\" data-code=\"mindmap\n  root((mindmap))\n    Origins\n      Long history\n      ::icon(fa fa-book)\n      Popularisation\n        British popular psychology author Tony Buzan\n    Research\n      On effectiveness&lt;br/&gt;and features\n      On Automatic creation\n        Uses\n            Creative techniques\n            Strategic planning\n            Argument mapping\n    Tools\n      Pen and paper\n      Mermaid\" data-width=\"600\" data-align=\"center\" class=\"flow-wrapper\"></div><p></p>',
       contentType: DEFAULT_CONTENT_TYPE,
       exclude: ['invisibleCharacters'],
       onError: handleError,

package/dist/EditorMarkdown/Toolbar.js

@@ -676,21 +676,6 @@ var EditorMarkdownToolbar = function EditorMarkdownToolbar(_ref) {
         }
       }, "\u4E13\u4E1A"),
       key: 'professional'
-    }, {
-      label: '流程图',
-      key: 'flowchart',
-      icon: /*#__PURE__*/React.createElement(FlowChartIcon, {
-        sx: {
-          fontSize: '1rem'
-        }
-      }),
-      onClick: function onClick() {
-        return handleInsertBlock({
-          text: '```mermaid\n\n```',
-          row: 1,
-          wrap: true
-        });
-      }
     }, {
       label: '代码',
       key: 'code',
@@ -765,6 +750,21 @@ var EditorMarkdownToolbar = function EditorMarkdownToolbar(_ref) {
           });
         }
       }]
+    }, {
+      label: 'Mermaid 流程图',
+      key: 'flowchart',
+      icon: /*#__PURE__*/React.createElement(FlowChartIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      onClick: function onClick() {
+        return handleInsertBlock({
+          text: '```mermaid\n\n```',
+          row: 1,
+          wrap: true
+        });
+      }
     }]
   }), /*#__PURE__*/React.createElement(Divider, {
     sx: {

package/dist/asset/css/index.css

@@ -115,6 +115,7 @@
 .tiptap.ProseMirror .react-renderer.node-codeBlock,
 .tiptap.ProseMirror .react-renderer.node-blockLink,
 .tiptap.ProseMirror .react-renderer.node-flipGrid,
+.tiptap.ProseMirror .react-renderer.node-flow,
 .tiptap.ProseMirror .react-renderer.node-blockAttachment {
   display: block;
   margin: 1rem 0;

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/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());
 };
 
 /**

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

@@ -148,7 +148,7 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
             width: dimensions.width
           });
         } catch (error) {
-          console.warn('Failed to update image dimensions:', error);
+          // console.warn('Failed to update image dimensions:', error)
         }
       }).catch(function (error) {
         try {
@@ -161,7 +161,7 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
             width: 400
           });
         } catch (updateError) {
-          console.warn('Failed to update image attributes with fallback width:', updateError);
+          // console.warn('Failed to update image attributes with fallback width:', updateError)
         }
       });
     }

package/dist/extension/index.d.ts

@@ -1,2 +1,2 @@
 import { GetExtensionsProps } from '../type';
-export declare const getExtensions: ({ limit, exclude, extensions: extensionsProps, editable, mentionItems, baseUrl, onMentionFilter, onUpload, onError, onTocUpdate, onAiWritingGetSuggestion, onValidateUrl, placeholder, youtubeOptions, tableOfContentsOptions, }: GetExtensionsProps) => any;
+export declare const getExtensions: ({ limit, exclude, extensions: extensionsProps, editable, mentionItems, baseUrl, onMentionFilter, onUpload, onError, onTocUpdate, onAiWritingGetSuggestion, onValidateUrl, placeholder, mermaidOptions, youtubeOptions, tableOfContentsOptions, }: GetExtensionsProps) => any;

package/dist/extension/index.js

@@ -30,6 +30,7 @@ export var getExtensions = function getExtensions(_ref) {
     onAiWritingGetSuggestion = _ref.onAiWritingGetSuggestion,
     onValidateUrl = _ref.onValidateUrl,
     _placeholder = _ref.placeholder,
+    mermaidOptions = _ref.mermaidOptions,
     youtubeOptions = _ref.youtubeOptions,
     tableOfContentsOptions = _ref.tableOfContentsOptions;
   var defaultExtensions = [ImeComposition, StarterKit.configure({
@@ -46,7 +47,9 @@ export var getExtensions = function getExtensions(_ref) {
       color: 'var(--mui-palette-primary-main)',
       width: 2
     }
-  }), YamlFormat, TextStyleKit, CodeExtension, ListExtension, EmojiExtension, AlertExtension, CustomSubscript, DetailsExtension, CustomSuperscript, DetailsContentExtension, DetailsSummaryExtension, CodeBlockLowlightExtension, InlineUploadProgressExtension, CustomHorizontalRule].concat(_toConsumableArray(TableExtension({
+  }), YamlFormat, TextStyleKit, CodeExtension, FlowExtension({
+    mermaidOptions: mermaidOptions
+  }), ListExtension, EmojiExtension, AlertExtension, CustomSubscript, DetailsExtension, CustomSuperscript, DetailsContentExtension, DetailsSummaryExtension, CodeBlockLowlightExtension, InlineUploadProgressExtension, CustomHorizontalRule].concat(_toConsumableArray(TableExtension({
     editable: editable
   })), [FlipGridColumnExtension, FlipGridExtension, CustomBlockMathExtension({
     onError: onError

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

@@ -1,15 +1,22 @@
 import { EditorFnProps } from "../../../type";
 import { Node } from '@tiptap/core';
+import { MermaidConfig } from 'mermaid';
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         flow: {
             setFlow: (options: {
                 code?: string;
                 width?: string | number;
+                align?: 'left' | 'center' | 'right' | null;
             }) => ReturnType;
         };
     }
 }
-export type FlowExtensionProps = EditorFnProps;
+export type FlowExtensionProps = EditorFnProps & {
+    /**
+     * Mermaid 配置选项
+     */
+    mermaidOptions?: MermaidConfig;
+};
 export declare const FlowExtension: (props: FlowExtensionProps) => Node<any, any>;
 export default FlowExtension;

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

@@ -7,7 +7,12 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { mergeAttributes, Node } from '@tiptap/core';
 import { ReactNodeViewRenderer } from '@tiptap/react';
 import FlowViewWrapper from "../../component/Flow";
+import { initMermaid } from "../../component/Flow/utils";
 export var FlowExtension = function FlowExtension(props) {
+  // 初始化 mermaid 配置（如果提供了配置）
+  if (props.mermaidOptions) {
+    initMermaid(props.mermaidOptions);
+  }
   return Node.create({
     name: 'flow',
     group: 'block',
@@ -34,7 +39,13 @@ export var FlowExtension = function FlowExtension(props) {
         width: {
           default: null,
           parseHTML: function parseHTML(element) {
-            return element.getAttribute('data-width') || null;
+            var width = element.getAttribute('data-width');
+            if (width) {
+              if (width.endsWith('%')) return width;
+              var numWidth = parseFloat(width);
+              return isNaN(numWidth) ? null : numWidth;
+            }
+            return null;
           },
           renderHTML: function renderHTML(attributes) {
             if (!attributes.width) return {};
@@ -42,6 +53,18 @@ export var FlowExtension = function FlowExtension(props) {
               'data-width': String(attributes.width)
             };
           }
+        },
+        align: {
+          default: null,
+          parseHTML: function parseHTML(element) {
+            return element.getAttribute('data-align') || null;
+          },
+          renderHTML: function renderHTML(attributes) {
+            if (!attributes.align) return {};
+            return {
+              'data-align': attributes.align
+            };
+          }
         }
       };
     },
@@ -51,10 +74,21 @@ export var FlowExtension = function FlowExtension(props) {
         getAttrs: function getAttrs(dom) {
           if (!(dom instanceof HTMLElement)) return false;
           var code = dom.getAttribute('data-code') || '';
-          var width = dom.getAttribute('data-width') || null;
+          var widthAttr = dom.getAttribute('data-width');
+          var width = null;
+          if (widthAttr) {
+            if (widthAttr.endsWith('%')) {
+              width = widthAttr;
+            } else {
+              var numWidth = parseFloat(widthAttr);
+              width = isNaN(numWidth) ? null : numWidth;
+            }
+          }
+          var align = dom.getAttribute('data-align') || null;
           return {
             code: code,
-            width: width
+            width: width,
+            align: align
           };
         }
       }];
@@ -69,6 +103,8 @@ export var FlowExtension = function FlowExtension(props) {
         'data-code': attrs.code
       } : {}, attrs.width ? {
         'data-width': String(attrs.width)
+      } : {}, attrs.align ? {
+        'data-align': attrs.align
       } : {}, this.options.HTMLAttributes, HTMLAttributes)];
     },
     renderMarkdown: function renderMarkdown(node) {
@@ -87,7 +123,8 @@ export var FlowExtension = function FlowExtension(props) {
               type: _this.name,
               attrs: {
                 code: options.code || '',
-                width: options.width || null
+                width: options.width || null,
+                align: options.align || null
               }
             });
           };

package/dist/type/index.d.ts

@@ -4,6 +4,7 @@ import { Editor, Extension } from '@tiptap/core';
 import { TableOfContentsOptions } from '@tiptap/extension-table-of-contents';
 import { YoutubeOptions } from '@tiptap/extension-youtube';
 import { UseEditorOptions } from '@tiptap/react';
+import { MermaidConfig } from 'mermaid';
 export type { Editor } from '@tiptap/react';
 export interface MenuItem {
     label?: React.ReactNode;
@@ -108,6 +109,7 @@ export type MentionExtensionProps = {
     }) => Promise<MentionItems>;
 };
 export type NodeOrMetaOrSuggestionOrExtensionOptions = {
+    mermaidOptions?: Partial<MermaidConfig>;
     youtubeOptions?: Partial<YoutubeOptions>;
     tableOfContentsOptions?: Partial<TableOfContentsOptions>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctzhian/tiptap",
-  "version": "2.7.4",
+  "version": "2.8.0",
   "description": "基于 Tiptap 二次开发的编辑器组件",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -82,37 +82,37 @@
   "dependencies": {
     "@floating-ui/dom": "^1.7.2",
     "@floating-ui/react": "^0.27.16",
-    "@tiptap/core": "3.11.1",
-    "@tiptap/extension-bubble-menu": "3.11.1",
-    "@tiptap/extension-code": "3.11.1",
-    "@tiptap/extension-code-block-lowlight": "3.11.1",
-    "@tiptap/extension-details": "3.11.1",
-    "@tiptap/extension-drag-handle-react": "3.11.1",
-    "@tiptap/extension-emoji": "3.11.1",
-    "@tiptap/extension-file-handler": "3.11.1",
-    "@tiptap/extension-highlight": "3.11.1",
-    "@tiptap/extension-horizontal-rule": "3.11.1",
-    "@tiptap/extension-image": "3.11.1",
-    "@tiptap/extension-invisible-characters": "3.11.1",
-    "@tiptap/extension-list": "3.11.1",
-    "@tiptap/extension-mathematics": "3.11.1",
-    "@tiptap/extension-mention": "3.11.1",
-    "@tiptap/extension-subscript": "3.11.1",
-    "@tiptap/extension-superscript": "3.11.1",
-    "@tiptap/extension-table": "3.11.1",
-    "@tiptap/extension-table-of-contents": "3.11.1",
-    "@tiptap/extension-text-align": "3.11.1",
-    "@tiptap/extension-text-style": "3.11.1",
-    "@tiptap/extension-unique-id": "3.11.1",
-    "@tiptap/extension-youtube": "3.11.1",
-    "@tiptap/extensions": "3.11.1",
-    "@tiptap/html": "3.11.1",
-    "@tiptap/markdown": "3.11.1",
-    "@tiptap/pm": "3.11.1",
-    "@tiptap/react": "3.11.1",
-    "@tiptap/starter-kit": "3.11.1",
-    "@tiptap/static-renderer": "3.11.1",
-    "@tiptap/suggestion": "3.11.1",
+    "@tiptap/core": "^3.13.0",
+    "@tiptap/extension-bubble-menu": "^3.13.0",
+    "@tiptap/extension-code": "^3.13.0",
+    "@tiptap/extension-code-block-lowlight": "^3.13.0",
+    "@tiptap/extension-details": "^3.13.0",
+    "@tiptap/extension-drag-handle-react": "^3.13.0",
+    "@tiptap/extension-emoji": "^3.13.0",
+    "@tiptap/extension-file-handler": "^3.13.0",
+    "@tiptap/extension-highlight": "^3.13.0",
+    "@tiptap/extension-horizontal-rule": "^3.13.0",
+    "@tiptap/extension-image": "^3.13.0",
+    "@tiptap/extension-invisible-characters": "^3.13.0",
+    "@tiptap/extension-list": "^3.13.0",
+    "@tiptap/extension-mathematics": "^3.13.0",
+    "@tiptap/extension-mention": "^3.13.0",
+    "@tiptap/extension-subscript": "^3.13.0",
+    "@tiptap/extension-superscript": "^3.13.0",
+    "@tiptap/extension-table": "^3.13.0",
+    "@tiptap/extension-table-of-contents": "^3.13.0",
+    "@tiptap/extension-text-align": "^3.13.0",
+    "@tiptap/extension-text-style": "^3.13.0",
+    "@tiptap/extension-unique-id": "^3.13.0",
+    "@tiptap/extension-youtube": "^3.13.0",
+    "@tiptap/extensions": "^3.13.0",
+    "@tiptap/html": "^3.13.0",
+    "@tiptap/markdown": "^3.13.0",
+    "@tiptap/pm": "^3.13.0",
+    "@tiptap/react": "^3.13.0",
+    "@tiptap/starter-kit": "^3.13.0",
+    "@tiptap/static-renderer": "^3.13.0",
+    "@tiptap/suggestion": "^3.13.0",
     "ace-builds": "^1.43.4",
     "core-js": "^3.46.0",
     "diff-match-patch": "^1.0.5",
@@ -121,7 +121,7 @@
     "katex": "^0.16.22",
     "linkifyjs": "^4.3.2",
     "lowlight": "^3.3.0",
-    "mermaid": "^10.9.5",
+    "mermaid": "^11.12.2",
     "react-ace": "^14.0.1",
     "react-colorful": "^5.6.1",
     "react-image-crop": "^11.0.10",