@ctzhian/tiptap 2.7.5 → 2.9.0

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

@@ -95,30 +95,37 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     isCropping = _useState6[0],
     setIsCropping = _useState6[1];
-  var _useState7 = useState(attrs.src),
+  var _useState7 = useState(attrs.src || ''),
     _useState8 = _slicedToArray(_useState7, 2),
     editSrc = _useState8[0],
     setEditSrc = _useState8[1];
-  var _useState9 = useState(null),
+  var _useState9 = useState(attrs.title || ''),
     _useState10 = _slicedToArray(_useState9, 2),
-    dragCorner = _useState10[0],
-    setDragCorner = _useState10[1];
+    editTitle = _useState10[0],
+    setEditTitle = _useState10[1];
+  var _useState11 = useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    dragCorner = _useState12[0],
+    setDragCorner = _useState12[1];
   var dragStartXRef = useRef(0);
   var dragStartWidthRef = useRef(0);
-  var _useState11 = useState(attrs.title || ''),
-    _useState12 = _slicedToArray(_useState11, 2),
-    editTitle = _useState12[0],
-    setEditTitle = _useState12[1];
   var _useState13 = useState(null),
     _useState14 = _slicedToArray(_useState13, 2),
     anchorEl = _useState14[0],
     setAnchorEl = _useState14[1];
   var imageContentRef = useRef(null);
+  var editButtonRef = useRef(null);
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    keepHoverPopoverOpen = _useState16[0],
+    setKeepHoverPopoverOpen = _useState16[1];
   var handleShowPopover = function handleShowPopover() {
-    return setAnchorEl(imageContentRef.current);
+    setKeepHoverPopoverOpen(true);
+    setAnchorEl(editButtonRef.current);
   };
   var handleClosePopover = function handleClosePopover() {
-    return setAnchorEl(null);
+    setAnchorEl(null);
+    setKeepHoverPopoverOpen(false);
   };
 
   // 获取当前实际显示的图片宽度
@@ -135,37 +142,6 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
     }
     return attrs.width;
   };
-  useEffect(function () {
-    if (attrs.src && (!attrs.width || attrs.width <= 0)) {
-      getImageDimensions(attrs.src).then(function (dimensions) {
-        try {
-          var pos = typeof getPos === 'function' ? getPos() : null;
-          if (pos === null || pos === undefined) return;
-          var currentNode = editor.state.doc.nodeAt(pos);
-          if (!currentNode || currentNode.type.name !== 'image') return;
-          updateAttributes({
-            src: attrs.src,
-            width: dimensions.width
-          });
-        } catch (error) {
-          // console.warn('Failed to update image dimensions:', error)
-        }
-      }).catch(function (error) {
-        try {
-          var pos = typeof getPos === 'function' ? getPos() : null;
-          if (pos === null || pos === undefined) return;
-          var currentNode = editor.state.doc.nodeAt(pos);
-          if (!currentNode || currentNode.type.name !== 'image') return;
-          updateAttributes({
-            src: attrs.src,
-            width: 400
-          });
-        } catch (updateError) {
-          // console.warn('Failed to update image attributes with fallback width:', updateError)
-        }
-      });
-    }
-  }, [attrs.src, attrs.width, updateAttributes, getPos, editor]);
   var handleMouseDown = function handleMouseDown(e, corner) {
     e.preventDefault();
     e.stopPropagation();
@@ -272,6 +248,39 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
     }
     chain.toggleTextAlign(align).run();
   };
+  useEffect(function () {
+    if (attrs.src && (!attrs.width || attrs.width <= 0)) {
+      getImageDimensions(attrs.src).then(function (dimensions) {
+        try {
+          var pos = typeof getPos === 'function' ? getPos() : null;
+          if (pos === null || pos === undefined) return;
+          var currentNode = editor.state.doc.nodeAt(pos);
+          if (!currentNode || currentNode.type.name !== 'image') return;
+          updateAttributes({
+            src: attrs.src,
+            title: attrs.title || '',
+            width: dimensions.width
+          });
+        } catch (error) {}
+      }).catch(function () {
+        try {
+          var pos = typeof getPos === 'function' ? getPos() : null;
+          if (pos === null || pos === undefined) return;
+          var currentNode = editor.state.doc.nodeAt(pos);
+          if (!currentNode || currentNode.type.name !== 'image') return;
+          updateAttributes({
+            src: attrs.src,
+            title: attrs.title || '',
+            width: 400
+          });
+        } catch (updateError) {}
+      });
+    }
+  }, [attrs, updateAttributes, getPos, editor]);
+  useEffect(function () {
+    setEditSrc(attrs.src || '');
+    setEditTitle(attrs.title || '');
+  }, [attrs.src, attrs.title]);
   useEffect(function () {
     if (isDragging) {
       document.addEventListener('mousemove', handleMouseMove);
@@ -315,6 +324,9 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
     as: 'span',
     'data-drag-handle': false
   }, /*#__PURE__*/React.createElement(HoverPopover, {
+    keepOpen: keepHoverPopoverOpen,
+    placement: "top",
+    offset: 4,
     actions: /*#__PURE__*/React.createElement(Stack, {
       direction: 'row',
       alignItems: 'center',
@@ -322,6 +334,7 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
         p: 0.5
       }
     }, /*#__PURE__*/React.createElement(ToolbarItem, {
+      ref: editButtonRef,
       icon: /*#__PURE__*/React.createElement(EditLineIcon, {
         sx: {
           fontSize: '1rem'
@@ -393,9 +406,7 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
       }),
       tip: "\u5220\u9664\u56FE\u7247",
       onClick: deleteNode
-    })),
-    placement: "top",
-    offset: 4
+    }))
   }, /*#__PURE__*/React.createElement(Box, {
     component: 'span',
     ref: imageContentRef,
@@ -518,7 +529,7 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
     open: Boolean(anchorEl),
     anchorEl: anchorEl,
     onClose: handleClosePopover,
-    placement: "top"
+    placement: "bottom"
   }, /*#__PURE__*/React.createElement(Stack, {
     sx: {
       p: 2,
@@ -544,7 +555,7 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
       fontSize: '0.75rem',
       color: 'text.secondary',
       lineHeight: '1.5',
-      mb: 1
+      my: 1
     }
   }, "\u56FE\u7247\u63CF\u8FF0"), /*#__PURE__*/React.createElement(TextField, {
     fullWidth: true,

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

@@ -0,0 +1,4 @@
+import { MarkViewProps } from "@tiptap/react";
+import React from "react";
+declare const TooltipView: React.FC<MarkViewProps>;
+export default TooltipView;

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

@@ -0,0 +1,19 @@
+import { Box, Tooltip } from "@mui/material";
+import { MarkViewContent } from "@tiptap/react";
+import React from "react";
+var TooltipView = function TooltipView(_ref) {
+  var mark = _ref.mark;
+  var tooltip = mark.attrs.tooltip;
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    arrow: true,
+    placement: "top",
+    title: /*#__PURE__*/React.createElement(Box, null, tooltip)
+  }, /*#__PURE__*/React.createElement(Box, {
+    component: "span",
+    sx: {
+      borderBottom: '1px dotted',
+      borderColor: 'text.secondary'
+    }
+  }, /*#__PURE__*/React.createElement(MarkViewContent, null)));
+};
+export default TooltipView;

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

@@ -14,6 +14,7 @@ import StarterKit from '@tiptap/starter-kit';
 import { PLACEHOLDER } from "../contants/placeholder";
 import { AiWritingExtension, ImeComposition, SlashCommands, StructuredDiffExtension } from "./extension";
 import { CodeExtension } from "./mark/Code";
+import Tooltip from "./mark/Tooltip";
 import { AlertExtension, AudioExtension, BlockAttachmentExtension, BlockLinkExtension, CodeBlockLowlightExtension, CustomBlockMathExtension, CustomHorizontalRule, CustomInlineMathExtension, CustomSubscript, CustomSuperscript, DetailsContentExtension, DetailsExtension, DetailsSummaryExtension, EmojiExtension, FileHandlerExtension, FlipGridColumnExtension, FlipGridExtension, FlowExtension, IframeExtension, ImageExtension, Indent, InlineAttachmentExtension, InlineLinkExtension, InlineUploadProgressExtension, ListExtension, MentionExtension, TableExtension, TableOfContents, UploadProgressExtension, VerticalAlign, VideoExtension, YamlFormat, YoutubeExtension } from "./node";
 export var getExtensions = function getExtensions(_ref) {
   var limit = _ref.limit,
@@ -30,6 +31,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,9 +48,11 @@ 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, Tooltip, ListExtension, EmojiExtension, AlertExtension, CustomSubscript, DetailsExtension, CustomSuperscript, FlipGridExtension, DetailsContentExtension, DetailsSummaryExtension, CodeBlockLowlightExtension, InlineUploadProgressExtension, CustomHorizontalRule, FlipGridColumnExtension].concat(_toConsumableArray(TableExtension({
     editable: editable
-  })), [FlipGridColumnExtension, FlipGridExtension, CustomBlockMathExtension({
+  })), [FlowExtension({
+    mermaidOptions: mermaidOptions
+  }), CustomBlockMathExtension({
     onError: onError
   }), CustomInlineMathExtension({
     onError: onError
@@ -172,11 +176,6 @@ export var getExtensions = function getExtensions(_ref) {
     var Youtube = YoutubeExtension(youtubeOptions);
     defaultExtensions.push(Youtube);
   }
-  if (!(exclude !== null && exclude !== void 0 && exclude.includes('flow'))) {
-    defaultExtensions.push(FlowExtension({
-      onError: onError
-    }));
-  }
   if (extensionsProps && extensionsProps.length > 0) {
     defaultExtensions.push.apply(defaultExtensions, _toConsumableArray(extensionsProps));
   }

package/dist/extension/mark/Tooltip.d.ts

@@ -0,0 +1,24 @@
+import { Mark } from '@tiptap/core';
+export interface TooltipOptions {
+    HTMLAttributes: Record<string, any>;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        tooltip: {
+            /**
+             * Set a tooltip mark
+             */
+            setTooltip: (tooltip: string) => ReturnType;
+            /**
+             * Toggle a tooltip mark
+             */
+            toggleTooltip: (tooltip?: string) => ReturnType;
+            /**
+             * Unset a tooltip mark
+             */
+            unsetTooltip: () => ReturnType;
+        };
+    }
+}
+export declare const Tooltip: Mark<TooltipOptions, any>;
+export default Tooltip;

package/dist/extension/mark/Tooltip.js

@@ -0,0 +1,141 @@
+import { Mark, mergeAttributes } from '@tiptap/core';
+import { Plugin } from '@tiptap/pm/state';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
+import { ReactMarkViewRenderer } from '@tiptap/react';
+import TooltipView from "../component/Tooltip";
+export var Tooltip = Mark.create({
+  name: 'tooltip',
+  addOptions: function addOptions() {
+    return {
+      HTMLAttributes: {}
+    };
+  },
+  addAttributes: function addAttributes() {
+    return {
+      tooltip: {
+        default: null,
+        parseHTML: function parseHTML(element) {
+          return element.getAttribute('data-tooltip');
+        },
+        renderHTML: function renderHTML(attributes) {
+          if (!attributes.tooltip) {
+            return {};
+          }
+          return {
+            'data-tooltip': attributes.tooltip,
+            'class': 'tooltip-mark'
+          };
+        }
+      }
+    };
+  },
+  parseHTML: function parseHTML() {
+    return [{
+      tag: 'span[data-tooltip]'
+    }];
+  },
+  renderHTML: function renderHTML(_ref) {
+    var HTMLAttributes = _ref.HTMLAttributes;
+    return ['span', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+  addCommands: function addCommands() {
+    var _this = this;
+    return {
+      setTooltip: function setTooltip(tooltip) {
+        return function (_ref2) {
+          var commands = _ref2.commands;
+          return commands.setMark(_this.name, {
+            tooltip: tooltip
+          });
+        };
+      },
+      toggleTooltip: function toggleTooltip(tooltip) {
+        return function (_ref3) {
+          var commands = _ref3.commands;
+          return commands.toggleMark(_this.name, {
+            tooltip: tooltip
+          });
+        };
+      },
+      unsetTooltip: function unsetTooltip() {
+        return function (_ref4) {
+          var commands = _ref4.commands;
+          return commands.unsetMark(_this.name);
+        };
+      }
+    };
+  },
+  addMarkView: function addMarkView() {
+    return ReactMarkViewRenderer(TooltipView);
+  },
+  addProseMirrorPlugins: function addProseMirrorPlugins() {
+    var _this2 = this;
+    return [new Plugin({
+      props: {
+        decorations: function decorations(state) {
+          var decorations = [];
+          state.doc.descendants(function (node, pos) {
+            var mark = node.marks.find(function (mark) {
+              return mark.type.name === _this2.name;
+            });
+            if (mark) {
+              var _tooltip = mark.attrs.tooltip;
+              if (_tooltip) {
+                decorations.push(Decoration.inline(pos, pos + node.nodeSize, {
+                  class: 'tooltip-mark',
+                  'data-tooltip': _tooltip
+                }));
+              }
+            }
+          });
+          return DecorationSet.create(state.doc, decorations);
+        }
+      }
+    })];
+  },
+  markdownTokenName: 'tooltip',
+  markdownTokenizer: {
+    name: 'tooltip',
+    level: 'inline',
+    start: function start(src) {
+      return src.indexOf('{');
+    },
+    tokenize: function tokenize(src, _tokens, helpers) {
+      var match = /^\{([^}]+)\}\(([^)]+)\)/.exec(src);
+      if (!match) {
+        return;
+      }
+      var text = match[1];
+      var tooltip = match[2];
+      return {
+        type: 'tooltip',
+        raw: match[0],
+        text: text,
+        tooltip: tooltip,
+        tokens: helpers.inlineTokens(text)
+      };
+    }
+  },
+  parseMarkdown: function parseMarkdown(token, helpers) {
+    var content = helpers.parseInline(token.tokens || []);
+    if (!Array.isArray(content)) {
+      content = content ? [content] : [];
+    }
+    if (content.length === 0 && token.text) {
+      content = [helpers.createTextNode(token.text)];
+    }
+    return helpers.applyMark('tooltip', content, {
+      tooltip: token.tooltip
+    });
+  },
+  renderMarkdown: function renderMarkdown(node, helpers) {
+    var _node$attrs;
+    var content = helpers.renderChildren(node);
+    var tooltip = ((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.tooltip) || '';
+    if (!tooltip) {
+      return content;
+    }
+    return "{".concat(content, "}(").concat(tooltip, ")");
+  }
+});
+export default Tooltip;

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/index.css

@@ -549,7 +549,7 @@
   display: none;
 }
 
-.text-ellipsis {
+.tiptap.ProseMirror .text-ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/dist/themes/index.d.ts

@@ -26,7 +26,7 @@ declare module '@mui/material/styles' {
         };
     }
 }
-export declare const theme: <T extends string = "dark" | "light">({ mode, colors, theme: customTheme, }: {
+export declare const theme: <T extends string = "light" | "dark">({ mode, colors, theme: customTheme, }: {
     mode: T;
     colors?: Record<T, any> | undefined;
     theme?: any;

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.5",
+  "version": "2.9.0",
   "description": "基于 Tiptap 二次开发的编辑器组件",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -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",