@ctzhian/tiptap 1.12.24 → 1.13.1

package/dist/Editor/demo.js

@@ -7,6 +7,9 @@ import { Box } from '@mui/material';
 import React from 'react';
 import "../index.css";
 var Reader = function Reader() {
+  var handleTocUpdate = function handleTocUpdate(toc) {
+    console.log('toc', toc);
+  };
   var _useTiptap = useTiptap({
       editable: true,
       exclude: ['invisibleCharacters'],
@@ -90,7 +93,7 @@ var Reader = function Reader() {
         }
         return onAiWritingGetSuggestion;
       }(),
-      // onTocUpdate: handleTocUpdate,
+      onTocUpdate: handleTocUpdate,
       // onMentionFilter: async ({ query }: { query: string }) => {
       //   return new Promise((resolve) => {
       //     resolve([
@@ -152,7 +155,7 @@ var Reader = function Reader() {
         }
         return onUpload;
       }(),
-      content: ':'
+      content: "<pre><code>$$ sflsa $$\n\n$fsjadl$</code></pre><p></p><p><span data-latex=\"x+y=1\" data-type=\"inline-math\"></span></p><div data-latex=\"ssss\" data-type=\"block-math\"></div><p></p><p>fadsjlfkas</p><div data-type=\"flow\" data-code=\"C4Context\n    title System Context diagram for Internet Banking System\n    Enterprise_Boundary(b0, &quot;BankBoundary0&quot;) {\n        Person(customerA, &quot;Banking Customer A&quot;, &quot;A customer of the bank, with personal bank accounts.&quot;)\n        Person(customerB, &quot;Banking Customer B&quot;)\n        Person_Ext(customerC, &quot;Banking Customer C&quot;, &quot;desc&quot;)\n\n        Person(customerD, &quot;Banking Customer D&quot;, &quot;A customer of the bank, &lt;br/&gt; with personal bank accounts.&quot;)\n\n        System(SystemAA, &quot;Internet Banking System&quot;, &quot;Allows customers to view information about their bank accounts, and make payments.&quot;)\n\n        Enterprise_Boundary(b1, &quot;BankBoundary&quot;) {\n            SystemDb_Ext(SystemE, &quot;Mainframe Banking System&quot;, &quot;Stores all of the core banking information about customers, accounts, transactions, etc.&quot;)\n\n            System_Boundary(b2, &quot;BankBoundary2&quot;) {\n                System(SystemA, &quot;Banking System A&quot;)\n                System(SystemB, &quot;Banking System B&quot;, &quot;A system of the bank, with personal bank accounts. next line.&quot;)\n            }\n\n            System_Ext(SystemC, &quot;E-mail system&quot;, &quot;The internal Microsoft Exchange e-mail system.&quot;)\n            SystemDb(SystemD, &quot;Banking System D Database&quot;, &quot;A system of the bank, with personal bank accounts.&quot;)\n\n            Boundary(b3, &quot;BankBoundary3&quot;, &quot;boundary&quot;) {\n                SystemQueue(SystemF, &quot;Banking System F Queue&quot;, &quot;A system of the bank.&quot;)\n                SystemQueue_Ext(SystemG, &quot;Banking System G Queue&quot;, &quot;A system of the bank, with personal bank accounts.&quot;)\n            }\n        }\n    }\n\n    BiRel(customerA, SystemAA, &quot;Uses&quot;)\n    BiRel(SystemAA, SystemE, &quot;Uses&quot;)\n    Rel(SystemAA, SystemC, &quot;Sends e-mails&quot;, &quot;SMTP&quot;)\n    Rel(SystemC, customerA, &quot;Sends e-mails to&quot;)\" data-width=\"100%\" data-height=\"auto\"></div><p>fsajdlkfjadsl</p>"
     }),
     editor = _useTiptap.editor;
   return /*#__PURE__*/React.createElement(EditorThemeProvider, {

package/dist/EditorMarkdown/demo.js

@@ -13,7 +13,7 @@ import { Box } from '@mui/material';
 import React, { useCallback, useEffect, useState } from 'react';
 import "../index.css";
 var Reader = function Reader() {
-  var _useState = useState(''),
+  var _useState = useState('![ss](/ss)'),
     _useState2 = _slicedToArray(_useState, 2),
     mdContent = _useState2[0],
     setMdContent = _useState2[1];
@@ -123,6 +123,9 @@ var Reader = function Reader() {
         //   contentType: 'markdown'
         // }).run()
       },
+      onTocUpdate: function onTocUpdate(toc) {
+        console.log('toc', toc);
+      },
       content: mdContent
     }),
     editor = _useTiptap.editor;

package/dist/EditorMarkdown/index.d.ts

@@ -13,6 +13,8 @@ interface EditorMarkdownProps {
     editor: Editor;
     value?: string;
     readOnly?: string;
+    showAutocomplete?: boolean;
+    highlightActiveLine?: boolean;
     placeholder?: string;
     height: number | string;
     onUpload?: UploadFunction;

package/dist/EditorMarkdown/index.js

@@ -37,6 +37,10 @@ var EditorMarkdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
     readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
     _ref$splitMode = _ref.splitMode,
     splitMode = _ref$splitMode === void 0 ? false : _ref$splitMode,
+    _ref$showAutocomplete = _ref.showAutocomplete,
+    showAutocomplete = _ref$showAutocomplete === void 0 ? true : _ref$showAutocomplete,
+    _ref$highlightActiveL = _ref.highlightActiveLine,
+    highlightActiveLine = _ref$highlightActiveL === void 0 ? true : _ref$highlightActiveL,
     _ref$defaultDisplayMo = _ref.defaultDisplayMode,
     defaultDisplayMode = _ref$defaultDisplayMo === void 0 ? 'edit' : _ref$defaultDisplayMo,
     _ref$showToolbar = _ref.showToolbar,
@@ -57,14 +61,18 @@ var EditorMarkdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     loading = _useState6[0],
     setLoading = _useState6[1];
-  var _useState7 = useState(0),
+  var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    progress = _useState8[0],
-    setProgress = _useState8[1];
-  var _useState9 = useState(''),
+    isComposing = _useState8[0],
+    setIsComposing = _useState8[1];
+  var _useState9 = useState(0),
     _useState10 = _slicedToArray(_useState9, 2),
-    fileName = _useState10[0],
-    setFileName = _useState10[1];
+    progress = _useState10[0],
+    setProgress = _useState10[1];
+  var _useState11 = useState(''),
+    _useState12 = _slicedToArray(_useState11, 2),
+    fileName = _useState12[0],
+    setFileName = _useState12[1];
   var EditorHeight = useMemo(function () {
     return isExpend ? 'calc(100vh - 45px)' : height;
   }, [isExpend, height]);
@@ -357,6 +365,25 @@ var EditorMarkdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
       editor.setEditable(false);
     }
   }, [editor]);
+  useEffect(function () {
+    var _aceEditor$textInput;
+    if (!aceEditorRef.current) return;
+    var aceEditor = aceEditorRef.current.editor;
+    var textarea = (_aceEditor$textInput = aceEditor.textInput) === null || _aceEditor$textInput === void 0 ? void 0 : _aceEditor$textInput.getElement();
+    if (!textarea) return;
+    var handleCompositionStart = function handleCompositionStart() {
+      setIsComposing(true);
+    };
+    var handleCompositionEnd = function handleCompositionEnd() {
+      setIsComposing(false);
+    };
+    textarea.addEventListener('compositionstart', handleCompositionStart);
+    textarea.addEventListener('compositionend', handleCompositionEnd);
+    return function () {
+      textarea.removeEventListener('compositionstart', handleCompositionStart);
+      textarea.removeEventListener('compositionend', handleCompositionEnd);
+    };
+  }, [displayMode]);
   return /*#__PURE__*/React.createElement(Box, {
     sx: _objectSpread({
       position: 'relative',
@@ -472,14 +499,15 @@ var EditorMarkdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onDrop: handleDrop,
     sx: {
       flex: 1,
-      fontFamily: 'monospace',
-      '.ace_placeholder': {
+      '.ace_placeholder': _objectSpread({
         transform: 'scale(1)',
         height: '100%',
         overflow: 'auto',
         width: '100%',
         fontStyle: 'normal'
-      }
+      }, isComposing && {
+        display: 'none'
+      })
     }
   }, /*#__PURE__*/React.createElement(AceEditor, {
     ref: aceEditorRef,
@@ -497,10 +525,12 @@ var EditorMarkdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
       $blockScrolling: true
     },
     setOptions: {
-      enableBasicAutocompletion: true,
-      enableLiveAutocompletion: true,
+      tabSize: 2,
+      showGutter: showLineNumbers,
       showLineNumbers: showLineNumbers,
-      tabSize: 2
+      enableBasicAutocompletion: showAutocomplete,
+      enableLiveAutocompletion: showAutocomplete,
+      highlightActiveLine: highlightActiveLine
     },
     style: {
       width: '100%',

package/dist/component/CustomBubbleMenu/index.js

@@ -84,7 +84,7 @@ var CustomBubbleMenu = function CustomBubbleMenu(_ref) {
       //     return cellSelection.$anchorCell.pos !== cellSelection.$headCell.pos;
       //   }
       // }
-      if (editor.state.selection.empty || editor.isActive('image') || editor.isActive('video') || editor.isActive('audio') || editor.isActive('emoji') || editor.isActive('codeBlock') || editor.isActive('blockMath') || editor.isActive('inlineMath') || editor.isActive('blockLink') || editor.isActive('inlineLink') || editor.isActive('blockAttachment') || editor.isActive('inlineAttachment') || editor.isActive('horizontalRule') || editor.isActive('iframe') || editor.isActive('yamlFormat')) {
+      if (editor.state.selection.empty || editor.isActive('image') || editor.isActive('video') || editor.isActive('audio') || editor.isActive('emoji') || editor.isActive('codeBlock') || editor.isActive('blockMath') || editor.isActive('inlineMath') || editor.isActive('blockLink') || editor.isActive('inlineLink') || editor.isActive('blockAttachment') || editor.isActive('inlineAttachment') || editor.isActive('horizontalRule') || editor.isActive('iframe') || editor.isActive('yamlFormat') || editor.isActive('flow')) {
         return false;
       }
       return true;

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

@@ -1,7 +1,7 @@
 import { getShortcutKeyText } from "../../../util";
 import { Typography } from '@mui/material';
 import React from 'react';
-import { AddCircleFillIcon, ArrowDownSLineIcon, AttachmentLineIcon, CheckboxCircleFillIcon, CloseCircleFillIcon, CodeBoxLineIcon, CodeLineIcon, CodeSSlashLineIcon, DoubleQuotesLIcon, EmotionLineIcon, ErrorWarningFillIcon, FormulaIcon, FunctionsIcon, ImageLineIcon, Information2FillIcon, Information2LineIcon, MenuFold2FillIcon, MovieLineIcon, Music2LineIcon, SeparatorIcon, SquareRootIcon, Table2Icon, UserSmileFillIcon, WindowFillIcon } from "../../Icons";
+import { AddCircleFillIcon, ArrowDownSLineIcon, AttachmentLineIcon, CheckboxCircleFillIcon, CloseCircleFillIcon, CodeBoxLineIcon, CodeLineIcon, CodeSSlashLineIcon, DoubleQuotesLIcon, EmotionLineIcon, ErrorWarningFillIcon, FlowChartIcon, FormulaIcon, FunctionsIcon, ImageLineIcon, Information2FillIcon, Information2LineIcon, MenuFold2FillIcon, MovieLineIcon, Music2LineIcon, SeparatorIcon, SquareRootIcon, Table2Icon, UserSmileFillIcon, WindowFillIcon } from "../../Icons";
 import Menu from "../../Menu";
 import ToolbarItem from "../Item";
 import TableSizePicker from "../TableSizePicker";
@@ -145,6 +145,17 @@ var EditorInsert = function EditorInsert(_ref) {
           size: '0'
         });
       }
+    }, {
+      label: '流程图',
+      key: 'flow',
+      icon: /*#__PURE__*/React.createElement(FlowChartIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      onClick: function onClick() {
+        return editor.commands.setFlow({});
+      }
     }, {
       label: '表格',
       key: 'table',

package/dist/contants/slash-commands.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AttachmentLineIcon, CodeBoxLineIcon, CodeLineIcon, DoubleQuotesLIcon, EmotionLineIcon, FunctionsIcon, H1Icon, H2Icon, H3Icon, H4Icon, H5Icon, H6Icon, ImageLineIcon, Information2LineIcon, LinkIcon, ListCheck2Icon, ListOrdered2Icon, ListUnorderedIcon, MenuFold2FillIcon, MovieLineIcon, Music2LineIcon, SeparatorIcon, SquareRootIcon, Table2Icon, TextWrapIcon, WindowFillIcon } from "../component/Icons";
+import { AttachmentLineIcon, CodeBoxLineIcon, CodeLineIcon, DoubleQuotesLIcon, EmotionLineIcon, FlowChartIcon, FunctionsIcon, H1Icon, H2Icon, H3Icon, H4Icon, H5Icon, H6Icon, ImageLineIcon, Information2LineIcon, LinkIcon, ListCheck2Icon, ListOrdered2Icon, ListUnorderedIcon, MenuFold2FillIcon, MovieLineIcon, Music2LineIcon, SeparatorIcon, SquareRootIcon, Table2Icon, WindowFillIcon } from "../component/Icons";
 export var slashCommands = [{
   title: '标题1',
   shortcutKey: ['ctrl', 'alt', '1'],
@@ -130,8 +130,8 @@ export var slashCommands = [{
     editor.chain().focus().deleteRange(range).toggleTaskList().run();
   }
 }, {
-  title: '换行',
-  icon: /*#__PURE__*/React.createElement(TextWrapIcon, {
+  title: '表情',
+  icon: /*#__PURE__*/React.createElement(EmotionLineIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -139,18 +139,6 @@ export var slashCommands = [{
   command: function command(_ref10) {
     var editor = _ref10.editor,
       range = _ref10.range;
-    editor.chain().focus().deleteRange(range).insertContent('<br />').run();
-  }
-}, {
-  title: '表情',
-  icon: /*#__PURE__*/React.createElement(EmotionLineIcon, {
-    sx: {
-      fontSize: '1rem'
-    }
-  }),
-  command: function command(_ref11) {
-    var editor = _ref11.editor,
-      range = _ref11.range;
     editor.chain().deleteRange(range).insertContentAt(range.from, ' : ').focus(range.from + 2).run();
   }
 }, {
@@ -160,9 +148,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref12) {
-    var editor = _ref12.editor,
-      range = _ref12.range;
+  command: function command(_ref11) {
+    var editor = _ref11.editor,
+      range = _ref11.range;
     editor.chain().focus().deleteRange(range).setHorizontalRule().run();
   }
 }, {
@@ -173,9 +161,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref13) {
-    var editor = _ref13.editor,
-      range = _ref13.range;
+  command: function command(_ref12) {
+    var editor = _ref12.editor,
+      range = _ref12.range;
     editor.chain().focus().deleteRange(range).toggleBlockquote().run();
   }
 }, {
@@ -186,9 +174,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref14) {
-    var editor = _ref14.editor,
-      range = _ref14.range;
+  command: function command(_ref13) {
+    var editor = _ref13.editor,
+      range = _ref13.range;
     editor.chain().focus().deleteRange(range).setMark('code').run();
   }
 }, {
@@ -199,9 +187,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref15) {
-    var editor = _ref15.editor,
-      range = _ref15.range;
+  command: function command(_ref14) {
+    var editor = _ref14.editor,
+      range = _ref14.range;
     editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
   }
 }, {
@@ -212,9 +200,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref16) {
-    var editor = _ref16.editor,
-      range = _ref16.range;
+  command: function command(_ref15) {
+    var editor = _ref15.editor,
+      range = _ref15.range;
     editor.chain().focus().deleteRange(range).setInlineLink({
       href: ''
     }).run();
@@ -227,10 +215,25 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
+  command: function command(_ref16) {
+    var editor = _ref16.editor,
+      range = _ref16.range;
+    editor.chain().focus().deleteRange(range).setDetails().run();
+  }
+}, {
+  title: '流程图',
+  icon: /*#__PURE__*/React.createElement(FlowChartIcon, {
+    sx: {
+      fontSize: '1rem'
+    }
+  }),
   command: function command(_ref17) {
     var editor = _ref17.editor,
       range = _ref17.range;
-    editor.chain().focus().deleteRange(range).setDetails().run();
+    editor.chain().focus().deleteRange(range).setFlow({
+      code: '',
+      width: '100%'
+    }).run();
   }
 }, {
   title: 'iframe',

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { FlowAttributes } from ".";
+type EditFlowProps = {
+    anchorEl: HTMLDivElement | null;
+    attrs: FlowAttributes;
+    updateAttributes: (attrs: FlowAttributes) => void;
+    onCancel: () => void;
+};
+declare const EditFlow: ({ anchorEl, attrs, updateAttributes, onCancel, }: EditFlowProps) => React.JSX.Element;
+export default EditFlow;

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

@@ -0,0 +1,97 @@
+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/FloatingPopover";
+import { Button, Stack, TextField } from "@mui/material";
+import React, { useEffect, useMemo, useState } from "react";
+var EditFlow = function EditFlow(_ref) {
+  var anchorEl = _ref.anchorEl,
+    attrs = _ref.attrs,
+    updateAttributes = _ref.updateAttributes,
+    onCancel = _ref.onCancel;
+  var _useState = useState(attrs.code || ''),
+    _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;
+    updateAttributes({
+      code: trimmedCode
+    });
+    onCancel();
+  };
+  return /*#__PURE__*/React.createElement(FloatingPopover, {
+    open: true,
+    anchorEl: centerVirtualElement,
+    onClose: onCancel,
+    placement: "top",
+    style: {
+      transform: 'translate(-50%, 0)'
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    gap: 2,
+    sx: {
+      p: 2,
+      width: 600
+    }
+  }, /*#__PURE__*/React.createElement(TextField, {
+    fullWidth: true,
+    multiline: true,
+    rows: 12,
+    value: editCode,
+    onChange: function onChange(e) {
+      return setEditCode(e.target.value);
+    },
+    placeholder: "\u8F93\u5165 Mermaid \u6D41\u7A0B\u56FE\u4EE3\u7801",
+    sx: {
+      '& .MuiInputBase-input': {
+        fontFamily: 'monospace',
+        fontSize: '0.875rem'
+      }
+    }
+  }), /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    gap: 1
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "outlined",
+    fullWidth: true,
+    onClick: onCancel
+  }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
+    variant: "contained",
+    fullWidth: true,
+    onClick: handleSaveFlow
+  }, "\u4FDD\u5B58"))));
+};
+export default EditFlow;

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { FlowAttributes } from ".";
+type InsertFlowProps = {
+    updateAttributes: (attrs: FlowAttributes) => void;
+};
+declare const InsertFlow: ({ updateAttributes, }: InsertFlowProps) => React.JSX.Element;
+export default InsertFlow;

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

@@ -0,0 +1,108 @@
+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/FloatingPopover";
+import { FlowChartIcon } from "../../../component/Icons";
+import { Box, Button, Stack, TextField } from "@mui/material";
+import { NodeViewWrapper } from "@tiptap/react";
+import React, { useState } from "react";
+var InsertFlow = function InsertFlow(_ref) {
+  var updateAttributes = _ref.updateAttributes;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    editCode = _useState2[0],
+    setEditCode = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    anchorEl = _useState4[0],
+    setAnchorEl = _useState4[1];
+  var handleShowPopover = function handleShowPopover(event) {
+    return setAnchorEl(event.currentTarget);
+  };
+  var handleClosePopover = function handleClosePopover() {
+    return setAnchorEl(null);
+  };
+  var handleInsertFlow = function handleInsertFlow() {
+    var trimmedCode = editCode.trim();
+    if (!trimmedCode) return;
+    updateAttributes({
+      code: trimmedCode,
+      width: '100%'
+    });
+    handleClosePopover();
+  };
+  return /*#__PURE__*/React.createElement(NodeViewWrapper, {
+    className: "flow-wrapper",
+    "data-drag-handle": true
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: 'row',
+    alignItems: 'center',
+    gap: 2,
+    onClick: handleShowPopover,
+    sx: {
+      border: '1px dashed',
+      borderColor: 'divider',
+      borderRadius: 'var(--mui-shape-borderRadius)',
+      px: 2,
+      py: 1.5,
+      minWidth: 200,
+      textAlign: 'center',
+      color: 'text.secondary',
+      bgcolor: 'action.default',
+      cursor: 'pointer',
+      '&:hover': {
+        bgcolor: 'action.hover'
+      },
+      '&:active': {
+        bgcolor: 'action.selected'
+      }
+    }
+  }, /*#__PURE__*/React.createElement(FlowChartIcon, {
+    sx: {
+      fontSize: '1rem',
+      position: 'relative',
+      flexShrink: 0
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      fontSize: '0.875rem',
+      position: 'relative',
+      flexGrow: 1,
+      textAlign: 'left'
+    }
+  }, "\u70B9\u51FB\u6B64\u5904\u5D4C\u5165\u6216\u7C98\u8D34\u6D41\u7A0B\u56FE\u4EE3\u7801")), /*#__PURE__*/React.createElement(FloatingPopover, {
+    open: Boolean(anchorEl),
+    anchorEl: anchorEl,
+    onClose: handleClosePopover,
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    gap: 2,
+    sx: {
+      p: 2,
+      width: 600
+    }
+  }, /*#__PURE__*/React.createElement(TextField, {
+    fullWidth: true,
+    multiline: true,
+    rows: 12,
+    value: editCode,
+    onChange: function onChange(e) {
+      return setEditCode(e.target.value);
+    },
+    placeholder: "\u8F93\u5165 Mermaid \u6D41\u7A0B\u56FE\u4EE3\u7801",
+    sx: {
+      '& .MuiInputBase-input': {
+        fontFamily: 'monospace',
+        fontSize: '0.875rem'
+      }
+    }
+  }), /*#__PURE__*/React.createElement(Button, {
+    variant: "contained",
+    fullWidth: true,
+    onClick: handleInsertFlow
+  }, "\u63D0\u4EA4"))));
+};
+export default InsertFlow;

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { FlowAttributes } from ".";
+interface ReadonlyFlowProps {
+    attrs: FlowAttributes;
+    onError?: (error: Error) => void;
+}
+declare const ReadonlyFlow: ({ attrs, onError }: ReadonlyFlowProps) => React.JSX.Element | null;
+export default ReadonlyFlow;

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

@@ -0,0 +1,65 @@
+import { Box } from "@mui/material";
+import { NodeViewWrapper } from "@tiptap/react";
+import React from "react";
+import { useMermaidRender } from "./useMermaidRender";
+var ReadonlyFlow = function ReadonlyFlow(_ref) {
+  var attrs = _ref.attrs,
+    onError = _ref.onError;
+  var _useMermaidRender = useMermaidRender({
+      code: attrs.code,
+      onError: onError,
+      showLoading: false,
+      idPrefix: 'mermaid-readonly'
+    }),
+    svgContent = _useMermaidRender.svgContent,
+    error = _useMermaidRender.error;
+  if (!attrs.code || attrs.code.trim() === '') {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(NodeViewWrapper, {
+    className: "flow-wrapper"
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      position: 'relative',
+      display: 'inline-block',
+      border: '1px solid',
+      borderColor: 'divider',
+      borderRadius: 'var(--mui-shape-borderRadius)',
+      width: attrs.width || '100%',
+      height: 'auto'
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      width: '100%',
+      height: '100%',
+      minHeight: '200px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      bgcolor: 'background.default',
+      borderRadius: 'var(--mui-shape-borderRadius)'
+    }
+  }, 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',
+      '& svg': {
+        maxWidth: '100%',
+        height: 'auto'
+      }
+    }
+  }))));
+};
+export default ReadonlyFlow;

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

@@ -0,0 +1,9 @@
+import { EditorFnProps } from "../../../type";
+import { NodeViewProps } from '@tiptap/react';
+import React from "react";
+export interface FlowAttributes {
+    code: string;
+    width?: string | number;
+}
+declare const FlowViewWrapper: React.FC<NodeViewProps & EditorFnProps>;
+export default FlowViewWrapper;