@ctzhian/tiptap 2.9.0 → 2.9.2

package/dist/EditorToolbar/index.js

@@ -13,7 +13,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { Box, Divider, Stack } from '@mui/material';
 import { useEditorState } from '@tiptap/react';
 import React from 'react';
-import { AiGenerate2Icon, ArrowGoBackLineIcon, ArrowGoForwardLineIcon, BoldIcon, CodeBoxLineIcon, CollapseHorizontalLine, EraserLineIcon, ExpandHorizontalLineIcon, ItalicIcon, LinkIcon, MarkPenLineIcon, StrikethroughIcon, SubscriptIcon, SuperscriptIcon, UnderlineIcon } from "../component/Icons";
+import { AiGenerate2Icon, ArrowGoBackLineIcon, ArrowGoForwardLineIcon, BoldIcon, CodeBoxLineIcon, CollapseHorizontalLine, EraserLineIcon, ExpandHorizontalLineIcon, ItalicIcon, LinkIcon, MarkPenLineIcon, StrikethroughIcon, SubscriptIcon, SuperscriptIcon, TooltipLineIcon, UnderlineIcon } from "../component/Icons";
 import { EditorAlignSelect, EditorFontBgColor, EditorFontColor, EditorFontSize, EditorHeading, EditorInsert, EditorListSelect, EditorMore, EditorVerticalAlignSelect, ToolbarItem } from "../component/Toolbar";
 import { getLinkAttributesWithSelectedText, hasMarksInSelection } from "../util";
 var EditorToolbar = function EditorToolbar(_ref) {
@@ -55,7 +55,8 @@ var EditorToolbar = function EditorToolbar(_ref) {
           isLink: ctx.editor.isActive('link'),
           isHighlight: ctx.editor.isActive('highlight'),
           isAiWriting: !!((_ctx$editor$storage = ctx.editor.storage) !== null && _ctx$editor$storage !== void 0 && (_ctx$editor$storage = _ctx$editor$storage.aiWriting) !== null && _ctx$editor$storage !== void 0 && _ctx$editor$storage.enabled),
-          isCodeBlock: ctx.editor.isActive('codeBlock')
+          isCodeBlock: ctx.editor.isActive('codeBlock'),
+          isTooltip: ctx.editor.isActive('tooltip')
         };
       }
     }),
@@ -71,7 +72,8 @@ var EditorToolbar = function EditorToolbar(_ref) {
     isLink = _useEditorState.isLink,
     isAiWriting = _useEditorState.isAiWriting,
     isHighlight = _useEditorState.isHighlight,
-    isCodeBlock = _useEditorState.isCodeBlock;
+    isCodeBlock = _useEditorState.isCodeBlock,
+    isTooltip = _useEditorState.isTooltip;
   return /*#__PURE__*/React.createElement(Box, {
     className: "editor-toolbar"
   }, /*#__PURE__*/React.createElement(Stack, {
@@ -82,7 +84,7 @@ var EditorToolbar = function EditorToolbar(_ref) {
     sx: {
       minHeight: '44px',
       overflowX: isSimpleMode ? 'auto' : 'visible',
-      columnGap: 0.5,
+      columnGap: '1px',
       '.MuiSelect-root': {
         minWidth: '36px',
         bgcolor: 'background.paper',
@@ -127,7 +129,7 @@ var EditorToolbar = function EditorToolbar(_ref) {
     orientation: "vertical",
     flexItem: true,
     sx: {
-      mx: 0.5,
+      mx: 0.25,
       height: 20,
       alignSelf: 'center'
     }
@@ -170,19 +172,23 @@ var EditorToolbar = function EditorToolbar(_ref) {
     orientation: "vertical",
     flexItem: true,
     sx: {
-      mx: 0.5,
+      mx: 0.25,
       height: 20,
       alignSelf: 'center'
     }
   }), /*#__PURE__*/React.createElement(EditorHeading, {
     editor: editor
-  }), !isSimpleMode && /*#__PURE__*/React.createElement(EditorFontSize, {
+  }), !isSimpleMode && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorFontSize, {
     editor: editor
-  }), /*#__PURE__*/React.createElement(Divider, {
+  }), /*#__PURE__*/React.createElement(EditorFontColor, {
+    editor: editor
+  }), /*#__PURE__*/React.createElement(EditorFontBgColor, {
+    editor: editor
+  })), /*#__PURE__*/React.createElement(Divider, {
     orientation: "vertical",
     flexItem: true,
     sx: {
-      mx: 0.5,
+      mx: 0.25,
       height: 20,
       alignSelf: 'center'
     }
@@ -234,7 +240,7 @@ var EditorToolbar = function EditorToolbar(_ref) {
       return editor.chain().focus().toggleUnderline().run();
     },
     className: isUnderline ? 'tool-active' : ''
-  })), !isSimpleMode && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolbarItem, {
+  }), /*#__PURE__*/React.createElement(ToolbarItem, {
     tip: '高亮',
     shortcutKey: ['ctrl', 'shift', 'H'],
     icon: /*#__PURE__*/React.createElement(MarkPenLineIcon, {
@@ -246,6 +252,21 @@ var EditorToolbar = function EditorToolbar(_ref) {
       return editor.chain().focus().toggleHighlight().run();
     },
     className: isHighlight ? 'tool-active' : ''
+  }), /*#__PURE__*/React.createElement(ToolbarItem, {
+    tip: '文本提示',
+    icon: /*#__PURE__*/React.createElement(TooltipLineIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    }),
+    onClick: function onClick() {
+      if (isTooltip) {
+        editor.chain().focus().unsetTooltip().run();
+      } else {
+        editor.chain().focus().toggleTooltip().run();
+      }
+    },
+    className: isTooltip ? 'tool-active' : ''
   }), /*#__PURE__*/React.createElement(ToolbarItem, {
     tip: '上标',
     shortcutKey: ['ctrl', '.'],
@@ -270,15 +291,11 @@ var EditorToolbar = function EditorToolbar(_ref) {
       return editor.chain().focus().toggleSubscript().run();
     },
     className: isSubscript ? 'tool-active' : ''
-  }), /*#__PURE__*/React.createElement(EditorFontColor, {
-    editor: editor
-  }), /*#__PURE__*/React.createElement(EditorFontBgColor, {
-    editor: editor
   }), /*#__PURE__*/React.createElement(Divider, {
     orientation: "vertical",
     flexItem: true,
     sx: {
-      mx: 0.5,
+      mx: 0.25,
       height: 20,
       alignSelf: 'center'
     }
@@ -319,7 +336,7 @@ var EditorToolbar = function EditorToolbar(_ref) {
     orientation: "vertical",
     flexItem: true,
     sx: {
-      mx: 0.5,
+      mx: 0.25,
       height: 20,
       alignSelf: 'center'
     }

package/dist/component/CustomBubbleMenu/index.js

@@ -1,28 +1,16 @@
-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 { BoldIcon, CodeLineIcon, EraserLineIcon, ItalicIcon, MarkPenLineIcon, StrikethroughIcon, TooltipLineIcon, UnderlineIcon } from "../Icons";
 import { hasMarksInSelection } from "../../util";
 import { Divider, Paper, Stack } from '@mui/material';
 import { useEditorState } from '@tiptap/react';
 import { BubbleMenu } from '@tiptap/react/menus';
-import React, { useState } from 'react';
+import React from 'react';
 import { ToolbarItem } from "../Toolbar";
-import TooltipInputPopover from "./TooltipInputPopover";
 var CustomBubbleMenu = function CustomBubbleMenu(_ref) {
   var editor = _ref.editor,
     more = _ref.more;
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    tooltipAnchorEl = _useState2[0],
-    setTooltipAnchorEl = _useState2[1];
   var _useEditorState = useEditorState({
       editor: editor,
       selector: function selector(ctx) {
-        var _ctx$editor$getAttrib;
         return {
           isBold: ctx.editor.isActive('bold'),
           isItalic: ctx.editor.isActive('italic'),
@@ -31,7 +19,6 @@ var CustomBubbleMenu = function CustomBubbleMenu(_ref) {
           isCode: ctx.editor.isActive('code'),
           isHighlight: ctx.editor.isActive('highlight'),
           isTooltip: ctx.editor.isActive('tooltip'),
-          currentTooltip: ((_ctx$editor$getAttrib = ctx.editor.getAttributes('tooltip')) === null || _ctx$editor$getAttrib === void 0 ? void 0 : _ctx$editor$getAttrib.tooltip) || '',
           hasAnyMarks: hasMarksInSelection(ctx.editor.state)
         };
       }
@@ -43,12 +30,11 @@ var CustomBubbleMenu = function CustomBubbleMenu(_ref) {
     isCode = _useEditorState.isCode,
     isHighlight = _useEditorState.isHighlight,
     isTooltip = _useEditorState.isTooltip,
-    currentTooltip = _useEditorState.currentTooltip,
     hasAnyMarks = _useEditorState.hasAnyMarks;
   if (editor && !editor.isEditable) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BubbleMenu, {
+  return /*#__PURE__*/React.createElement(BubbleMenu, {
     editor: editor,
     pluginKey: 'bubble-menu',
     updateDelay: 750,
@@ -139,11 +125,14 @@ var CustomBubbleMenu = function CustomBubbleMenu(_ref) {
         fontSize: '1rem'
       }
     }),
-    onClick: function onClick(event) {
-      return setTooltipAnchorEl(event.currentTarget);
+    onClick: function onClick() {
+      if (isTooltip) {
+        editor.chain().focus().unsetTooltip().run();
+      } else {
+        editor.chain().focus().toggleTooltip().run();
+      }
     },
-    className: isTooltip ? "tool-active" : "",
-    tip: "\u6DFB\u52A0\u63D0\u793A\u6587\u672C"
+    className: isTooltip ? "tool-active" : ""
   }), /*#__PURE__*/React.createElement(Divider, {
     orientation: "vertical",
     flexItem: true,
@@ -170,14 +159,6 @@ var CustomBubbleMenu = function CustomBubbleMenu(_ref) {
       icon: item.icon || /*#__PURE__*/React.createElement(React.Fragment, null),
       onClick: item.onClick
     });
-  })))), /*#__PURE__*/React.createElement(TooltipInputPopover, {
-    open: Boolean(tooltipAnchorEl),
-    anchorEl: tooltipAnchorEl,
-    onClose: function onClose() {
-      return setTooltipAnchorEl(null);
-    },
-    editor: editor,
-    currentTooltip: currentTooltip
-  }));
+  }))));
 };
 export default CustomBubbleMenu;

package/dist/component/FloatingPopover/index.js

@@ -111,7 +111,8 @@ export var FloatingPopover = function FloatingPopover(_ref) {
       top: position.y,
       zIndex: 1300,
       boxShadow: 'var(--mui-shadows-1)',
-      borderRadius: 'var(--mui-shape-borderRadius)'
+      borderRadius: 'var(--mui-shape-borderRadius)',
+      opacity: position.x === 0 && position.y === 0 ? 0 : 1
     }, style),
     elevation: 8
   }, children)), document.body);

package/dist/component/Toolbar/EditorHeading.js

@@ -125,7 +125,7 @@ var EditorHeading = function EditorHeading(_ref) {
       })[0].label), /*#__PURE__*/React.createElement(ArrowDownSLineIcon, {
         sx: {
           position: 'absolute',
-          right: -6,
+          right: -2,
           top: '50%',
           transform: 'translateY(-50%)',
           flexSelf: 'center',

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

@@ -60,10 +60,7 @@ var EditorMore = function EditorMore(_ref) {
         icon: /*#__PURE__*/React.createElement(Stack, {
           direction: 'row',
           alignItems: 'center',
-          justifyContent: "center",
-          sx: {
-            mr: 0.5
-          }
+          justifyContent: "center"
         }, /*#__PURE__*/React.createElement(MoreLineIcon, {
           sx: {
             fontSize: '1rem'

package/dist/component/Toolbar/Item.js

@@ -61,7 +61,7 @@ var ToolbarItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, rest), /*#__PURE__*/React.createElement(Stack, {
     direction: 'row',
     alignItems: 'center',
-    gap: 1,
+    gap: 0.5,
     sx: {
       lineHeight: 1,
       flexShrink: 0

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

@@ -162,7 +162,7 @@ var InsertLink = function InsertLink(_ref) {
   }, /*#__PURE__*/React.createElement(Stack, {
     direction: 'row',
     gap: 2,
-    alignItems: 'flex-start',
+    alignItems: 'center',
     sx: {
       '.MuiFormControlLabel-label': {
         fontSize: '0.875rem'
@@ -203,7 +203,7 @@ var InsertLink = function InsertLink(_ref) {
   }, /*#__PURE__*/React.createElement(Stack, {
     direction: 'row',
     gap: 2,
-    alignItems: 'flex-start',
+    alignItems: 'center',
     sx: {
       '.MuiFormControlLabel-label': {
         fontSize: '0.875rem'

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

@@ -0,0 +1,11 @@
+import { Editor } from "@tiptap/react";
+import React from "react";
+interface EditPopoverProps {
+    open: boolean;
+    editor: Editor;
+    text: string;
+    anchorEl: HTMLElement | null;
+    onClose: () => void;
+}
+declare const EditPopover: ({ open, editor, text, anchorEl, onClose, }: EditPopoverProps) => React.JSX.Element | null;
+export default EditPopover;

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

@@ -0,0 +1,171 @@
+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";
+import { Button, Stack, TextField } from "@mui/material";
+import { TextSelection } from "@tiptap/pm/state";
+import React, { useEffect, useState } from "react";
+var EditPopover = function EditPopover(_ref) {
+  var open = _ref.open,
+    editor = _ref.editor,
+    text = _ref.text,
+    anchorEl = _ref.anchorEl,
+    onClose = _ref.onClose;
+  var isEditable = editor.isEditable;
+  var _useState = useState(text || ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    tooltipText = _useState2[0],
+    setTooltipText = _useState2[1];
+  var onConfirm = function onConfirm(tooltipText) {
+    if (!anchorEl) {
+      onClose();
+      return;
+    }
+
+    // 通过 DOM 元素找到文档位置
+    var view = editor.view;
+    var domPos = view.posAtDOM(anchorEl, 0);
+    if (domPos === null || domPos === undefined) {
+      onClose();
+      return;
+    }
+
+    // 找到包含该 mark 的完整范围
+    var state = editor.state;
+    var doc = state.doc;
+    var tooltipMarkType = editor.schema.marks.tooltip;
+    if (!tooltipMarkType) {
+      onClose();
+      return;
+    }
+
+    // 遍历文档找到所有包含该 mark 的文本节点，并确定连续范围
+    var markFrom = null;
+    var markTo = null;
+    doc.nodesBetween(0, doc.content.size, function (node, pos) {
+      if (node.isText && node.marks.some(function (m) {
+        return m.type === tooltipMarkType && m.attrs.tooltip === text;
+      })) {
+        // 检查是否在 domPos 附近（包含 domPos 的节点）
+        if (pos <= domPos && domPos < pos + node.nodeSize) {
+          if (markFrom === null) {
+            markFrom = pos;
+          }
+          markTo = pos + node.nodeSize;
+        }
+      }
+    });
+
+    // 如果找到了包含 domPos 的节点，扩展范围以包含所有连续的相同 mark
+    if (markFrom !== null && markTo !== null) {
+      // 向前扩展
+      while (markFrom > 0) {
+        var $pos = doc.resolve(markFrom - 1);
+        var node = $pos.nodeAfter;
+        if (node && node.isText && node.marks.some(function (m) {
+          return m.type === tooltipMarkType && m.attrs.tooltip === text;
+        })) {
+          markFrom = markFrom - 1;
+        } else {
+          break;
+        }
+      }
+      // 向后扩展
+      while (markTo < doc.content.size) {
+        var _$pos = doc.resolve(markTo);
+        var _node = _$pos.nodeAfter;
+        if (_node && _node.isText && _node.marks.some(function (m) {
+          return m.type === tooltipMarkType && m.attrs.tooltip === text;
+        })) {
+          markTo = markTo + _node.nodeSize;
+        } else {
+          break;
+        }
+      }
+    }
+    if (markFrom !== null && markTo !== null && markFrom < markTo) {
+      // 选中该范围并应用 tooltip
+      var tr = state.tr;
+      var selection = TextSelection.create(tr.doc, markFrom, markTo);
+      tr.setSelection(selection);
+      if (tooltipText) {
+        tr.addMark(markFrom, markTo, tooltipMarkType.create({
+          tooltip: tooltipText
+        }));
+      } else {
+        tr.removeMark(markFrom, markTo, tooltipMarkType);
+      }
+      view.dispatch(tr);
+      editor.commands.focus();
+    } else {
+      // 如果找不到范围，使用原来的方法
+      if (tooltipText) {
+        editor.chain().focus().setTooltip(tooltipText).run();
+      } else {
+        editor.chain().focus().unsetTooltip().run();
+      }
+    }
+    onClose();
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      onConfirm(tooltipText.trim());
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      setTooltipText(text || '');
+      onClose();
+    }
+  };
+  useEffect(function () {
+    if (isEditable) setTooltipText(text || '');
+  }, [text]);
+  if (!isEditable) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(FloatingPopover, {
+    open: open,
+    anchorEl: anchorEl,
+    onClose: onClose,
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    gap: 2,
+    sx: {
+      p: 2,
+      width: 350
+    }
+  }, /*#__PURE__*/React.createElement(TextField, {
+    fullWidth: true,
+    size: "small",
+    value: tooltipText,
+    onChange: function onChange(e) {
+      return setTooltipText(e.target.value);
+    },
+    placeholder: "\u8F93\u5165\u9F20\u6807\u60AC\u505C\u65F6\u663E\u793A\u7684\u63D0\u793A\u6587\u672C",
+    required: true,
+    autoFocus: true,
+    onKeyDown: handleKeyDown,
+    error: tooltipText.length > 0 && !tooltipText.trim(),
+    helperText: tooltipText.length > 0 && !tooltipText.trim() ? "请输入有效的提示文本" : ""
+  }), /*#__PURE__*/React.createElement(Stack, {
+    direction: 'row',
+    gap: 1
+  }, /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    variant: "outlined",
+    fullWidth: true,
+    onClick: onClose
+  }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    variant: "contained",
+    fullWidth: true,
+    onClick: function onClick() {
+      return onConfirm(tooltipText.trim());
+    },
+    disabled: !tooltipText.trim() && !text
+  }, tooltipText.trim() ? '应用' : '移除'))));
+};
+export default EditPopover;

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

@@ -1,19 +1,68 @@
-import { Box, Tooltip } from "@mui/material";
+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 { EditLineIcon } from "../../../component/Icons";
+import { Box, Stack, Tooltip } from "@mui/material";
 import { MarkViewContent } from "@tiptap/react";
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
+import EditPopover from "./EditPopover";
 var TooltipView = function TooltipView(_ref) {
-  var mark = _ref.mark;
+  var mark = _ref.mark,
+    editor = _ref.editor;
   var tooltip = mark.attrs.tooltip;
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  var isEditable = editor.isEditable;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var anchorRef = useRef(null);
+  var handleEditClick = function handleEditClick(e) {
+    e.stopPropagation();
+    setOpen(true);
+  };
+  var handleClose = function handleClose() {
+    return setOpen(false);
+  };
+  useEffect(function () {
+    var isSelectionEmpty = editor.state.selection.empty;
+    if (isEditable && tooltip === '' && !isSelectionEmpty && anchorRef.current) {
+      setOpen(true);
+    }
+  }, [tooltip, isEditable, anchorRef.current]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+    key: tooltip || 'empty-tooltip',
     arrow: true,
     placement: "top",
-    title: /*#__PURE__*/React.createElement(Box, null, tooltip)
+    title: /*#__PURE__*/React.createElement(Stack, {
+      direction: "row",
+      alignItems: "center",
+      gap: 0.5,
+      maxWidth: 300
+    }, /*#__PURE__*/React.createElement(Box, {
+      component: "span"
+    }, tooltip), isEditable && /*#__PURE__*/React.createElement(EditLineIcon, {
+      sx: {
+        fontSize: '0.75rem',
+        cursor: 'pointer'
+      },
+      onClick: handleEditClick
+    }))
   }, /*#__PURE__*/React.createElement(Box, {
+    ref: anchorRef,
     component: "span",
     sx: {
       borderBottom: '1px dotted',
       borderColor: 'text.secondary'
     }
-  }, /*#__PURE__*/React.createElement(MarkViewContent, null)));
+  }, /*#__PURE__*/React.createElement(MarkViewContent, null))), isEditable && /*#__PURE__*/React.createElement(EditPopover, {
+    open: open,
+    editor: editor,
+    text: tooltip || '',
+    anchorEl: anchorRef.current,
+    onClose: handleClose
+  }));
 };
 export default TooltipView;

package/dist/extension/mark/Tooltip.js

@@ -18,12 +18,8 @@ export var Tooltip = Mark.create({
           return element.getAttribute('data-tooltip');
         },
         renderHTML: function renderHTML(attributes) {
-          if (!attributes.tooltip) {
-            return {};
-          }
           return {
-            'data-tooltip': attributes.tooltip,
-            'class': 'tooltip-mark'
+            'data-tooltip': attributes.tooltip || ''
           };
         }
       }
@@ -49,11 +45,11 @@ export var Tooltip = Mark.create({
           });
         };
       },
-      toggleTooltip: function toggleTooltip(tooltip) {
+      toggleTooltip: function toggleTooltip() {
         return function (_ref3) {
           var commands = _ref3.commands;
           return commands.toggleMark(_this.name, {
-            tooltip: tooltip
+            tooltip: ''
           });
         };
       },
@@ -82,7 +78,6 @@ export var Tooltip = Mark.create({
               var _tooltip = mark.attrs.tooltip;
               if (_tooltip) {
                 decorations.push(Decoration.inline(pos, pos + node.nodeSize, {
-                  class: 'tooltip-mark',
                   'data-tooltip': _tooltip
                 }));
               }
@@ -98,15 +93,20 @@ export var Tooltip = Mark.create({
     name: 'tooltip',
     level: 'inline',
     start: function start(src) {
-      return src.indexOf('{');
+      return src.indexOf('<span');
     },
     tokenize: function tokenize(src, _tokens, helpers) {
-      var match = /^\{([^}]+)\}\(([^)]+)\)/.exec(src);
+      var match = /^<span\s+([^>]*?)>([\s\S]+?)<\/span>/.exec(src);
       if (!match) {
         return;
       }
-      var text = match[1];
-      var tooltip = match[2];
+      var attrs = match[1] || '';
+      var text = match[2] || '';
+      var tooltipMatch = /data-tooltip=["']([^"']+)["']/.exec(attrs);
+      if (!tooltipMatch) {
+        return;
+      }
+      var tooltip = tooltipMatch[1];
       return {
         type: 'tooltip',
         raw: match[0],
@@ -135,7 +135,7 @@ export var Tooltip = Mark.create({
     if (!tooltip) {
       return content;
     }
-    return "{".concat(content, "}(").concat(tooltip, ")");
+    return "<span data-tooltip=\"".concat(tooltip, "\">").concat(content, "</span>");
   }
 });
 export default Tooltip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctzhian/tiptap",
-  "version": "2.9.0",
+  "version": "2.9.2",
   "description": "基于 Tiptap 二次开发的编辑器组件",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/dist/component/CustomBubbleMenu/TooltipInputPopover.d.ts

@@ -1,11 +0,0 @@
-import { Editor } from "@tiptap/react";
-import React from "react";
-interface TooltipInputPopoverProps {
-    open: boolean;
-    anchorEl: HTMLElement | null;
-    onClose: () => void;
-    editor: Editor;
-    currentTooltip?: string;
-}
-declare const TooltipInputPopover: React.FC<TooltipInputPopoverProps>;
-export default TooltipInputPopover;

package/dist/component/CustomBubbleMenu/TooltipInputPopover.js

@@ -1,80 +0,0 @@
-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 "../FloatingPopover";
-import { Box, Button, Stack, TextField } from "@mui/material";
-import React, { useState } from "react";
-var TooltipInputPopover = function TooltipInputPopover(_ref) {
-  var open = _ref.open,
-    anchorEl = _ref.anchorEl,
-    onClose = _ref.onClose,
-    editor = _ref.editor,
-    _ref$currentTooltip = _ref.currentTooltip,
-    currentTooltip = _ref$currentTooltip === void 0 ? '' : _ref$currentTooltip;
-  var _useState = useState(currentTooltip),
-    _useState2 = _slicedToArray(_useState, 2),
-    tooltipText = _useState2[0],
-    setTooltipText = _useState2[1];
-  var handleConfirm = function handleConfirm() {
-    if (tooltipText.trim()) {
-      editor.chain().focus().setTooltip(tooltipText.trim()).run();
-    } else {
-      editor.chain().focus().unsetTooltip().run();
-    }
-    onClose();
-  };
-  var handleCancel = function handleCancel() {
-    setTooltipText(currentTooltip);
-    onClose();
-  };
-  var handleKeyDown = function handleKeyDown(event) {
-    if (event.key === 'Enter') {
-      event.preventDefault();
-      handleConfirm();
-    } else if (event.key === 'Escape') {
-      event.preventDefault();
-      handleCancel();
-    }
-  };
-  return /*#__PURE__*/React.createElement(FloatingPopover, {
-    open: open,
-    anchorEl: anchorEl,
-    onClose: handleCancel,
-    placement: "bottom"
-  }, /*#__PURE__*/React.createElement(Stack, {
-    gap: 2,
-    sx: {
-      p: 2,
-      width: 350
-    }
-  }, /*#__PURE__*/React.createElement(TextField, {
-    fullWidth: true,
-    size: "small",
-    value: tooltipText,
-    onChange: function onChange(e) {
-      return setTooltipText(e.target.value);
-    },
-    placeholder: "\u8F93\u5165\u9F20\u6807\u60AC\u505C\u65F6\u663E\u793A\u7684\u63D0\u793A\u6587\u672C",
-    required: true,
-    error: tooltipText.length > 0 && !tooltipText.trim(),
-    helperText: tooltipText.length > 0 && !tooltipText.trim() ? "请输入有效的提示文本" : ""
-  }), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      display: 'flex',
-      gap: 1,
-      justifyContent: 'flex-end'
-    }
-  }, /*#__PURE__*/React.createElement(Button, {
-    size: "small",
-    onClick: handleCancel
-  }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
-    size: "small",
-    variant: "contained",
-    onClick: handleConfirm,
-    disabled: !tooltipText.trim() && !currentTooltip
-  }, tooltipText.trim() ? '应用' : '移除'))));
-};
-export default TooltipInputPopover;