@ctzhian/tiptap 1.11.4 → 1.12.1

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

@@ -9,21 +9,21 @@ 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 { FloatingPopover } from "../../../component";
-import { CarouselViewIcon, CopyIcon, EditBoxLineIcon, LinkIcon, LinkUnlinkIcon, ScrollToBottomLineIcon, ShareBoxLineIcon, TextIcon } from "../../../component/Icons";
+import { ActionDropdown, FloatingPopover, HoverPopover } from "../../../component";
+import { CarouselViewIcon, CopyIcon, EditLineIcon, LinkUnlinkIcon, ScrollToBottomLineIcon, TextIcon } from "../../../component/Icons";
 import { ToolbarItem } from "../../../component/Toolbar";
-import { getLinkTitle } from "../../../util";
-import { Avatar, Box, Button, Divider, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Stack, TextField } from "@mui/material";
+import { Box, Button, Divider, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Stack, TextField } from "@mui/material";
 import { NodeViewWrapper } from "@tiptap/react";
 import React, { useCallback, useEffect, useState } from "react";
 import InsertLink from "./Insert";
-import ReadonlyLink from "./Readonly";
+import { LinkContent } from "./LinkContent";
 var LinkViewWrapper = function LinkViewWrapper(_ref) {
   var editor = _ref.editor,
     node = _ref.node,
     updateAttributes = _ref.updateAttributes,
     deleteNode = _ref.deleteNode,
-    selected = _ref.selected;
+    selected = _ref.selected,
+    getPos = _ref.getPos;
   var isMarkdown = editor.options.contentType === 'markdown';
   var attrs = node.attrs;
   var _useState = useState(attrs.title || ''),
@@ -44,46 +44,173 @@ var LinkViewWrapper = function LinkViewWrapper(_ref) {
     setTarget = _useState8[1];
   var _useState9 = useState(null),
     _useState10 = _slicedToArray(_useState9, 2),
-    opraAnchorEl = _useState10[0],
-    setOpraAnchorEl = _useState10[1];
-  var _useState11 = useState(null),
-    _useState12 = _slicedToArray(_useState11, 2),
-    anchorEl = _useState12[0],
-    setAnchorEl = _useState12[1];
+    anchorEl = _useState10[0],
+    setAnchorEl = _useState10[1];
+  var linkContentRef = React.useRef(null);
   useEffect(function () {
     setTitle(attrs.title || '');
     setHref(attrs.href || '');
     setType(attrs.type || 'icon');
     setTarget(attrs.target || '_blank');
   }, [attrs.title, attrs.href, attrs.type, attrs.target]);
-  var handleShowOperationPopover = function handleShowOperationPopover(event) {
-    return setOpraAnchorEl(event.currentTarget);
+  var handleShowPopover = function handleShowPopover() {
+    setAnchorEl(linkContentRef.current);
   };
-  var handleCloseOperationPopover = function handleCloseOperationPopover() {
-    return setOpraAnchorEl(null);
+  var handleClosePopover = function handleClosePopover() {
+    return setAnchorEl(null);
   };
-  var handleShowPopover = function handleShowPopover(event) {
-    if (event) {
-      handleCloseOperationPopover();
-      setAnchorEl(event.currentTarget);
+  var handleConvertLinkType = function handleConvertLinkType(newType) {
+    if (type === 'block') {
+      var pos = getPos();
+      if (typeof pos === 'number') {
+        editor.chain().focus().deleteRange({
+          from: pos,
+          to: pos + node.nodeSize
+        }).insertContentAt(pos, {
+          type: 'inlineLink',
+          attrs: {
+            title: attrs.title,
+            href: attrs.href,
+            type: newType,
+            target: attrs.target,
+            class: attrs.class,
+            rel: attrs.rel
+          }
+        }).run();
+      }
     } else {
-      setAnchorEl(opraAnchorEl);
+      updateAttributes({
+        type: newType
+      });
     }
   };
-  var handleClosePopover = function handleClosePopover() {
-    return setAnchorEl(null);
+  var renderOperationActions = function renderOperationActions() {
+    return /*#__PURE__*/React.createElement(Stack, {
+      direction: 'row',
+      alignItems: 'center',
+      sx: {
+        p: 0.5
+      }
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: "text-ellipsis",
+      sx: {
+        fontSize: '0.875rem',
+        color: 'text.secondary',
+        flexShrink: 0,
+        px: 1,
+        width: 200
+      }
+    }, attrs.href), /*#__PURE__*/React.createElement(ToolbarItem, {
+      icon: /*#__PURE__*/React.createElement(EditLineIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      tip: "\u7F16\u8F91",
+      onClick: handleShowPopover
+    }), /*#__PURE__*/React.createElement(ToolbarItem, {
+      icon: /*#__PURE__*/React.createElement(CopyIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      tip: "\u590D\u5236",
+      onClick: handleCopyLink
+    }), /*#__PURE__*/React.createElement(ToolbarItem, {
+      icon: /*#__PURE__*/React.createElement(LinkUnlinkIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      tip: "\u53D6\u6D88\u94FE\u63A5",
+      onClick: handleDeleteLink
+    }), !isMarkdown && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
+      orientation: "vertical",
+      flexItem: true,
+      sx: {
+        height: '1rem',
+        mx: 0.5,
+        alignSelf: 'center',
+        borderColor: 'divider'
+      }
+    }), /*#__PURE__*/React.createElement(ActionDropdown, {
+      id: "link-type-dropdown",
+      selected: type,
+      list: [{
+        key: 'text',
+        label: '文字',
+        icon: /*#__PURE__*/React.createElement(TextIcon, {
+          sx: {
+            fontSize: '1rem'
+          }
+        }),
+        onClick: function onClick() {
+          return handleConvertLinkType('text');
+        }
+      }, {
+        key: 'icon',
+        label: '图标文字',
+        icon: /*#__PURE__*/React.createElement(ScrollToBottomLineIcon, {
+          sx: {
+            transform: 'rotate(90deg)',
+            fontSize: '1rem'
+          }
+        }),
+        onClick: function onClick() {
+          return handleConvertLinkType('icon');
+        }
+      }, {
+        key: 'block',
+        label: '卡片',
+        icon: /*#__PURE__*/React.createElement(CarouselViewIcon, {
+          sx: {
+            transform: 'rotate(90deg)',
+            fontSize: '1rem'
+          }
+        }),
+        onClick: function onClick() {
+          // 获取当前节点位置，确保在正确位置插入新节点
+          var pos = getPos();
+          if (typeof pos === 'number') {
+            editor.chain().focus().deleteRange({
+              from: pos,
+              to: pos + node.nodeSize
+            }).insertContentAt(pos, {
+              type: 'blockLink',
+              attrs: {
+                title: attrs.title,
+                href: attrs.href,
+                type: 'block',
+                target: attrs.target,
+                class: attrs.class,
+                rel: attrs.rel
+              }
+            }).run();
+          }
+        }
+      }]
+    })));
   };
   var handleSave = function handleSave() {
     if (type === 'block') {
-      editor.commands.deleteNode(node.type);
-      editor.commands.setBlockLink({
-        title: title,
-        href: href,
-        type: type,
-        target: target,
-        class: attrs.class,
-        rel: attrs.rel
-      });
+      // 获取当前节点位置，确保在正确位置插入新节点
+      var pos = getPos();
+      if (typeof pos === 'number') {
+        editor.chain().focus().deleteRange({
+          from: pos,
+          to: pos + node.nodeSize
+        }).insertContentAt(pos, {
+          type: 'blockLink',
+          attrs: {
+            title: title,
+            href: href,
+            type: type,
+            target: target,
+            class: attrs.class,
+            rel: attrs.rel
+          }
+        }).run();
+      }
     } else {
       updateAttributes === null || updateAttributes === void 0 || updateAttributes({
         title: title,
@@ -95,8 +222,14 @@ var LinkViewWrapper = function LinkViewWrapper(_ref) {
     handleClosePopover();
   };
   var handleDeleteLink = function handleDeleteLink() {
-    editor.commands.deleteNode(node.type);
-    editor.chain().insertContent(attrs.title || attrs.href).focus().run();
+    // 获取当前节点位置，确保在正确位置插入文本
+    var pos = getPos();
+    if (typeof pos === 'number') {
+      editor.chain().focus().deleteRange({
+        from: pos,
+        to: pos + node.nodeSize
+      }).insertContentAt(pos, attrs.title || attrs.href).run();
+    }
   };
   var handleCopyLink = useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
@@ -124,18 +257,16 @@ var LinkViewWrapper = function LinkViewWrapper(_ref) {
       return _ref2.apply(this, arguments);
     };
   }(), [attrs.href]);
-  var favicon = '';
-  try {
-    favicon = attrs.href ? new URL(attrs.href).origin + '/favicon.ico' : '';
-  } catch (err) {}
   if (!attrs.href && !editor.isEditable) {
     return null;
   }
   if (!editor.isEditable) {
-    return /*#__PURE__*/React.createElement(ReadonlyLink, {
+    return /*#__PURE__*/React.createElement(NodeViewWrapper, {
+      className: "link-wrapper"
+    }, /*#__PURE__*/React.createElement(LinkContent, {
       attrs: attrs,
-      selected: selected
-    });
+      editable: false
+    }));
   }
   if (!attrs.href) {
     return /*#__PURE__*/React.createElement(InsertLink, {
@@ -151,229 +282,16 @@ var LinkViewWrapper = function LinkViewWrapper(_ref) {
     as: attrs.type === 'block' ? 'div' : 'span'
   }, attrs.type === 'block' ? {
     'data-drag-handle': true
-  } : {}), attrs.type === 'block' ? /*#__PURE__*/React.createElement(Stack, {
-    direction: 'row',
-    alignItems: 'center',
-    gap: 2,
-    onClick: handleShowOperationPopover,
-    sx: {
-      border: '1px solid',
-      borderColor: 'divider',
-      cursor: 'pointer',
-      borderRadius: 'var(--mui-shape-borderRadius)',
-      p: 2,
-      ':hover': {
-        borderColor: 'primary.main',
-        color: 'primary.main'
-      }
-    }
-  }, /*#__PURE__*/React.createElement(Avatar, {
-    sx: {
-      width: '2rem',
-      height: '2rem',
-      alignSelf: 'center',
-      bgcolor: '#FFFFFF'
-    },
-    src: favicon
-  }, /*#__PURE__*/React.createElement(LinkIcon, {
-    sx: {
-      fontSize: '2rem',
-      cursor: 'grab',
-      color: 'primary.main',
-      alignSelf: 'center',
-      ':active': {
-        cursor: 'grabbing'
-      }
-    }
-  })), /*#__PURE__*/React.createElement(Stack, {
-    sx: {
-      flex: 1
-    },
-    gap: 0.5
-  }, /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      fontSize: '0.875rem',
-      fontWeight: 'bold'
-    }
-  }, attrs.title || getLinkTitle(attrs.href)), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      fontSize: '0.75rem',
-      color: 'text.secondary'
-    }
-  }, attrs.href))) : /*#__PURE__*/React.createElement(Box, {
-    component: 'span',
-    onClick: handleShowOperationPopover,
-    sx: {
-      color: 'primary.main',
-      cursor: 'pointer',
-      borderRadius: 'var(--mui-shape-borderRadius)',
-      transition: 'background-color 0.2s ease',
-      ':hover': {
-        bgcolor: 'action.hover'
-      }
-    }
-  }, /*#__PURE__*/React.createElement(Box, {
-    component: 'span',
-    sx: {
-      textDecoration: 'underline',
-      display: 'inline-flex',
-      alignItems: 'baseline',
-      gap: 0.5,
-      fontWeight: 500
-    }
-  }, attrs.type === 'icon' && /*#__PURE__*/React.createElement(Avatar, {
-    sx: {
-      width: '1rem',
-      height: '1rem',
-      alignSelf: 'center',
-      bgcolor: '#FFFFFF'
-    },
-    src: favicon
-  }, /*#__PURE__*/React.createElement(LinkIcon, {
-    sx: {
-      fontSize: '1rem',
-      cursor: 'grab',
-      color: 'primary.main',
-      alignSelf: 'center',
-      ':active': {
-        cursor: 'grabbing'
-      }
-    }
-  })), attrs.title || getLinkTitle(attrs.href))), /*#__PURE__*/React.createElement(FloatingPopover, {
-    open: Boolean(opraAnchorEl),
-    anchorEl: opraAnchorEl,
-    onClose: handleCloseOperationPopover,
+  } : {}), /*#__PURE__*/React.createElement("div", {
+    ref: linkContentRef
+  }, /*#__PURE__*/React.createElement(HoverPopover, {
+    actions: renderOperationActions(),
+    hoverDelay: 500,
     placement: "top"
-  }, /*#__PURE__*/React.createElement(Stack, {
-    direction: 'row',
-    alignItems: 'center',
-    sx: {
-      p: 0.5
-    }
-  }, /*#__PURE__*/React.createElement(ToolbarItem, {
-    icon: /*#__PURE__*/React.createElement(ShareBoxLineIcon, {
-      sx: {
-        fontSize: '1rem'
-      }
-    }),
-    text: "\u6253\u5F00",
-    onClick: function onClick() {
-      window.open(attrs.href, attrs.target);
-    }
-  }), /*#__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(EditBoxLineIcon, {
-      sx: {
-        fontSize: '1rem'
-      }
-    }),
-    tip: "\u7F16\u8F91",
-    onClick: function onClick() {
-      handleCloseOperationPopover();
-      handleShowPopover();
-    }
-  }), /*#__PURE__*/React.createElement(ToolbarItem, {
-    icon: /*#__PURE__*/React.createElement(CopyIcon, {
-      sx: {
-        fontSize: '1rem'
-      }
-    }),
-    tip: "\u590D\u5236",
-    onClick: handleCopyLink
-  }), /*#__PURE__*/React.createElement(ToolbarItem, {
-    icon: /*#__PURE__*/React.createElement(LinkUnlinkIcon, {
-      sx: {
-        fontSize: '1rem'
-      }
-    }),
-    tip: "\u53D6\u6D88\u94FE\u63A5",
-    onClick: handleDeleteLink
-  }), !isMarkdown && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__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(TextIcon, {
-      sx: {
-        fontSize: '1rem'
-      }
-    }),
-    tip: "\u6587\u5B57\u94FE\u63A5",
-    onClick: function onClick() {
-      if (type === 'block') {
-        editor.commands.deleteNode(node.type);
-        editor.commands.setInlineLink({
-          title: attrs.title,
-          href: attrs.href,
-          type: 'text'
-        });
-      } else {
-        updateAttributes({
-          type: 'text'
-        });
-      }
-    },
-    className: type === 'text' ? 'tool-active' : ''
-  }), /*#__PURE__*/React.createElement(ToolbarItem, {
-    icon: /*#__PURE__*/React.createElement(ScrollToBottomLineIcon, {
-      sx: {
-        transform: 'rotate(90deg)',
-        fontSize: '1rem'
-      }
-    }),
-    tip: "\u56FE\u6807\u6587\u5B57\u94FE\u63A5",
-    onClick: function onClick() {
-      if (type === 'block') {
-        editor.commands.deleteNode(node.type);
-        editor.commands.setInlineLink({
-          title: attrs.title,
-          href: attrs.href,
-          type: 'icon',
-          target: attrs.target,
-          class: attrs.class,
-          rel: attrs.rel
-        });
-      } else {
-        updateAttributes({
-          type: 'icon'
-        });
-      }
-    },
-    className: type === 'icon' ? 'tool-active' : ''
-  }), /*#__PURE__*/React.createElement(ToolbarItem, {
-    icon: /*#__PURE__*/React.createElement(CarouselViewIcon, {
-      sx: {
-        transform: 'rotate(90deg)',
-        fontSize: '1rem'
-      }
-    }),
-    tip: "\u6458\u8981\u5361\u7247",
-    onClick: function onClick() {
-      editor.commands.deleteNode(node.type);
-      editor.commands.setBlockLink({
-        title: attrs.title,
-        href: attrs.href,
-        type: 'block',
-        target: attrs.target,
-        class: attrs.class,
-        rel: attrs.rel
-      });
-    },
-    className: type === 'block' ? 'tool-active' : ''
-  })))), /*#__PURE__*/React.createElement(FloatingPopover, {
+  }, /*#__PURE__*/React.createElement(LinkContent, {
+    attrs: attrs,
+    editable: true
+  }))), /*#__PURE__*/React.createElement(FloatingPopover, {
     open: Boolean(anchorEl),
     anchorEl: anchorEl,
     onClose: handleClosePopover,
@@ -448,7 +366,7 @@ var LinkViewWrapper = function LinkViewWrapper(_ref) {
     control: /*#__PURE__*/React.createElement(Radio, {
       size: "small"
     }),
-    label: "\u7EAF\u6587\u5B57"
+    label: "\u6587\u5B57"
   }), /*#__PURE__*/React.createElement(FormControlLabel, {
     value: "icon",
     control: /*#__PURE__*/React.createElement(Radio, {

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

@@ -86,7 +86,7 @@ export var MentionList = /*#__PURE__*/forwardRef(function (props, ref) {
     sx: {
       px: 2,
       py: 1,
-      color: 'var(--mui-palette-text-tertiary)'
+      color: 'var(--mui-palette-text-auxiliary)'
     }
   }, "No result")));
 });

package/dist/extension/index.js

@@ -104,7 +104,7 @@ export var getExtensions = function getExtensions(_ref) {
       }
     }));
   } else {
-    defaultExtensions.push.apply(defaultExtensions, [AlertExtension, BlockLinkExtension, IframeExtension({
+    defaultExtensions.push.apply(defaultExtensions, [BlockLinkExtension, IframeExtension({
       onError: onError,
       onValidateUrl: onValidateUrl
     }), VideoExtension({