@ctzhian/tiptap 3.0.0 → 3.0.2

package/dist/{features/media/image → extension/component/Image}/index.js

@@ -8,18 +8,14 @@ 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 { CustomSizeIcon } from "../../../components/Icons";
-import { ToolbarItem } from "../../../components/Toolbar";
-import { alpha, Box, Divider, useTheme } from "@mui/material";
+import { FloatingPopover } from "../../../component";
+import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon, CustomSizeIcon, DeleteLineIcon, EditLineIcon } from "../../../component/Icons";
+import { ToolbarItem } from "../../../component/Toolbar";
+import { alpha, Box, Button, Divider, Stack, TextField, useTheme } from "@mui/material";
 import { NodeViewWrapper } from "@tiptap/react";
-import React, { useEffect, useRef, useState } from "react";
-import { HoverPopover } from "../../../components/HoverPopover";
-import { ImageViewerItem } from "../../../components/ImageViewer";
-import { useAnchoredPopover } from "../../../editor-core/extensions/component/shared/edit-popover";
-import { MediaDualFieldEditPopover } from "../shared/media-edit-popover";
-import { MediaHoverToolbar } from "../shared/media-hover-toolbar";
-import { MediaResizeHandles } from "../shared/media-resize-handles";
-import { useMediaResize } from "../shared/use-media-resize";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { HoverPopover } from "../../../component/HoverPopover";
+import { ImageViewerItem } from "../../../component/ImageViewer";
 import CropImage from "./Crop";
 import InsertImage from "./Insert";
 import ReadonlyImage from "./Readonly";
@@ -90,37 +86,46 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
   var theme = useTheme();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    isHovering = _useState2[0],
-    setIsHovering = _useState2[1];
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    isCropping = _useState4[0],
-    setIsCropping = _useState4[1];
-  var _useState5 = useState(attrs.src || ''),
+    isHovering = _useState4[0],
+    setIsHovering = _useState4[1];
+  var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    editSrc = _useState6[0],
-    setEditSrc = _useState6[1];
-  var _useState7 = useState(attrs.title || ''),
+    isCropping = _useState6[0],
+    setIsCropping = _useState6[1];
+  var _useState7 = useState(attrs.src || ''),
     _useState8 = _slicedToArray(_useState7, 2),
-    editTitle = _useState8[0],
-    setEditTitle = _useState8[1];
+    editSrc = _useState8[0],
+    setEditSrc = _useState8[1];
+  var _useState9 = useState(attrs.title || ''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    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 _useState13 = useState(null),
+    _useState14 = _slicedToArray(_useState13, 2),
+    anchorEl = _useState14[0],
+    setAnchorEl = _useState14[1];
   var imageContentRef = useRef(null);
   var editButtonRef = useRef(null);
-  var _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    keepHoverPopoverOpen = _useState10[0],
-    setKeepHoverPopoverOpen = _useState10[1];
-  var _useAnchoredPopover = useAnchoredPopover(),
-    anchorEl = _useAnchoredPopover.anchorEl,
-    isOpen = _useAnchoredPopover.isOpen,
-    openFromRef = _useAnchoredPopover.openFromRef,
-    close = _useAnchoredPopover.close;
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    keepHoverPopoverOpen = _useState16[0],
+    setKeepHoverPopoverOpen = _useState16[1];
   var handleShowPopover = function handleShowPopover() {
     setKeepHoverPopoverOpen(true);
-    openFromRef();
+    setAnchorEl(editButtonRef.current);
   };
   var handleClosePopover = function handleClosePopover() {
-    close();
+    setAnchorEl(null);
     setKeepHoverPopoverOpen(false);
   };
 
@@ -138,23 +143,14 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
     }
     return attrs.width;
   };
-  var _useMediaResize = useMediaResize({
-      minWidth: 100,
-      maxWidth: function maxWidth() {
-        return 1200;
-      },
-      getInitialWidth: getCurrentDisplayWidth,
-      onResize: function onResize(_ref2) {
-        var width = _ref2.width;
-        updateAttributes({
-          width: width
-        });
-      },
-      mode: 'width'
-    }),
-    isDragging = _useMediaResize.isDragging,
-    dragCorner = _useMediaResize.dragCorner,
-    handleMouseDown = _useMediaResize.handleMouseDown;
+  var handleMouseDown = function handleMouseDown(e, corner) {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+    setDragCorner(corner);
+    dragStartXRef.current = e.clientX;
+    dragStartWidthRef.current = getCurrentDisplayWidth();
+  };
   var handleImageClick = function handleImageClick(e) {
     // 如果正在拖拽调整大小，阻止预览
     if (isDragging || dragCorner) {
@@ -164,6 +160,28 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
     }
     // 事件会冒泡到 ImageViewerItem 处理
   };
+  var handleMouseMove = useCallback(function (e) {
+    if (!isDragging || !dragCorner) return;
+    var deltaX = e.clientX - dragStartXRef.current;
+    var newWidth;
+
+    // 根据不同的角计算宽度变化
+    if (dragCorner === 'top-right' || dragCorner === 'bottom-right') {
+      // 右侧角：向右拉伸，宽度增加
+      newWidth = dragStartWidthRef.current + deltaX;
+    } else {
+      // 左侧角：向左拉伸，宽度增加（deltaX 为负时宽度增加）
+      newWidth = dragStartWidthRef.current - deltaX;
+    }
+    newWidth = Math.max(100, Math.min(1200, newWidth));
+    updateAttributes({
+      width: newWidth
+    });
+  }, [isDragging, dragCorner, updateAttributes]);
+  var handleMouseUp = useCallback(function () {
+    setIsDragging(false);
+    setDragCorner(null);
+  }, []);
   var handleCropClick = function handleCropClick() {
     return setIsCropping(true);
   };
@@ -177,7 +195,7 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
     setIsCropping(false);
   };
   var handleSave = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       var validatedUrl, currentWidth;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -220,7 +238,7 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
       }, _callee, null, [[1, 12]]);
     }));
     return function handleSave() {
-      return _ref3.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
   }();
   var runTextAlignOnImageParagraph = function runTextAlignOnImageParagraph(align) {
@@ -264,6 +282,16 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
     setEditSrc(attrs.src || '');
     setEditTitle(attrs.title || '');
   }, [attrs.src, attrs.title]);
+  useEffect(function () {
+    if (isDragging) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      return function () {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp]);
   if (!attrs.src && !editor.isEditable) {
     return null;
   }
@@ -296,45 +324,91 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
   return /*#__PURE__*/React.createElement(NodeViewWrapper, {
     className: "image-wrapper ".concat(selected ? 'ProseMirror-selectednode' : ''),
     as: 'span',
-    "data-drag-handle": true
+    'data-drag-handle': false
   }, /*#__PURE__*/React.createElement(HoverPopover, {
     keepOpen: keepHoverPopoverOpen,
     placement: "top",
     offset: 4,
-    actions: /*#__PURE__*/React.createElement(MediaHoverToolbar, {
-      editButtonRef: editButtonRef,
-      editTip: "\u7F16\u8F91\u56FE\u7247",
-      onEdit: handleShowPopover,
-      align: null,
-      onAlignChange: function onAlignChange(align) {
-        runTextAlignOnImageParagraph(align);
-      },
-      widthDropdownId: "image-width-dropdown",
-      selectedWidth: "100",
-      useFixedWidthDisplay: true,
-      onWidthPercentChange: function onWidthPercentChange() {},
-      deleteTip: "\u5220\u9664\u56FE\u7247",
-      onDelete: deleteNode,
-      showWidthDropdown: false,
-      extraActions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolbarItem, {
-        icon: /*#__PURE__*/React.createElement(CustomSizeIcon, {
-          sx: {
-            fontSize: '1rem'
-          }
-        }),
-        tip: "\u88C1\u5207\u56FE\u7247",
-        onClick: handleCropClick
-      }), /*#__PURE__*/React.createElement(Divider, {
-        orientation: "vertical",
-        flexItem: true,
+    actions: /*#__PURE__*/React.createElement(Stack, {
+      direction: 'row',
+      alignItems: 'center',
+      sx: {
+        p: 0.5
+      }
+    }, /*#__PURE__*/React.createElement(ToolbarItem, {
+      ref: editButtonRef,
+      icon: /*#__PURE__*/React.createElement(EditLineIcon, {
         sx: {
-          height: '1rem',
-          mx: 0.5,
-          alignSelf: 'center',
-          borderColor: 'divider'
+          fontSize: '1rem'
         }
-      }))
-    })
+      }),
+      tip: "\u7F16\u8F91\u56FE\u7247",
+      onClick: handleShowPopover
+    }), /*#__PURE__*/React.createElement(ToolbarItem, {
+      icon: /*#__PURE__*/React.createElement(CustomSizeIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      tip: "\u88C1\u5207\u56FE\u7247",
+      onClick: handleCropClick
+    }), /*#__PURE__*/React.createElement(Divider, {
+      orientation: "vertical",
+      flexItem: true,
+      sx: {
+        height: '1rem',
+        mx: 0.5,
+        alignSelf: 'center',
+        borderColor: 'divider'
+      }
+    }), /*#__PURE__*/React.createElement(ToolbarItem, {
+      icon: /*#__PURE__*/React.createElement(AlignLeftIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      tip: "\u5DE6\u4FA7\u5BF9\u9F50",
+      onClick: function onClick() {
+        runTextAlignOnImageParagraph('left');
+      }
+    }), /*#__PURE__*/React.createElement(ToolbarItem, {
+      icon: /*#__PURE__*/React.createElement(AlignCenterIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      tip: "\u5C45\u4E2D\u5BF9\u9F50",
+      onClick: function onClick() {
+        runTextAlignOnImageParagraph('center');
+      }
+    }), /*#__PURE__*/React.createElement(ToolbarItem, {
+      icon: /*#__PURE__*/React.createElement(AlignRightIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      tip: "\u53F3\u4FA7\u5BF9\u9F50",
+      onClick: function onClick() {
+        runTextAlignOnImageParagraph('right');
+      }
+    }), /*#__PURE__*/React.createElement(Divider, {
+      orientation: "vertical",
+      flexItem: true,
+      sx: {
+        height: '1rem',
+        mx: 0.5,
+        alignSelf: 'center',
+        borderColor: 'divider'
+      }
+    }), /*#__PURE__*/React.createElement(ToolbarItem, {
+      icon: /*#__PURE__*/React.createElement(DeleteLineIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      tip: "\u5220\u9664\u56FE\u7247",
+      onClick: deleteNode
+    }))
   }, /*#__PURE__*/React.createElement(Box, {
     component: "span",
     sx: {
@@ -374,12 +448,87 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
     onError: function onError(e) {
       _onError === null || _onError === void 0 || _onError(e);
     }
-  })), /*#__PURE__*/React.createElement(MediaResizeHandles, {
-    visible: isHovering || isDragging,
-    dragCorner: dragCorner,
-    isDragging: isDragging,
-    onMouseDown: handleMouseDown
-  })), attrs.title && /*#__PURE__*/React.createElement(Box, {
+  })), (isHovering || isDragging) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    onMouseDown: function onMouseDown(e) {
+      return handleMouseDown(e, 'top-left');
+    },
+    sx: {
+      position: 'absolute',
+      left: -4,
+      top: -4,
+      width: 12,
+      height: 12,
+      bgcolor: 'background.default',
+      cursor: 'nwse-resize',
+      borderRadius: '50%',
+      border: '2px solid',
+      borderColor: isDragging && dragCorner === 'top-left' ? 'primary.main' : alpha(theme.palette.primary.main, 0.3),
+      '&:hover': {
+        borderColor: 'primary.main'
+      },
+      transition: 'background-color 0.2s ease'
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
+    onMouseDown: function onMouseDown(e) {
+      return handleMouseDown(e, 'top-right');
+    },
+    sx: {
+      position: 'absolute',
+      right: -4,
+      top: -4,
+      width: 12,
+      height: 12,
+      bgcolor: 'background.default',
+      cursor: 'nesw-resize',
+      borderRadius: '50%',
+      border: '2px solid',
+      borderColor: isDragging && dragCorner === 'top-right' ? 'primary.main' : alpha(theme.palette.primary.main, 0.3),
+      '&:hover': {
+        borderColor: 'primary.main'
+      },
+      transition: 'background-color 0.2s ease'
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
+    onMouseDown: function onMouseDown(e) {
+      return handleMouseDown(e, 'bottom-left');
+    },
+    sx: {
+      position: 'absolute',
+      left: -4,
+      bottom: -2,
+      width: 12,
+      height: 12,
+      cursor: 'nesw-resize',
+      borderRadius: '50%',
+      border: '2px solid',
+      bgcolor: 'background.default',
+      borderColor: isDragging && dragCorner === 'bottom-left' ? 'primary.main' : alpha(theme.palette.primary.main, 0.3),
+      '&:hover': {
+        borderColor: 'primary.main'
+      },
+      transition: 'background-color 0.2s ease'
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
+    onMouseDown: function onMouseDown(e) {
+      return handleMouseDown(e, 'bottom-right');
+    },
+    sx: {
+      position: 'absolute',
+      right: -4,
+      bottom: -2,
+      width: 12,
+      height: 12,
+      bgcolor: 'background.default',
+      cursor: 'nwse-resize',
+      borderRadius: '50%',
+      border: '2px solid',
+      borderColor: isDragging && dragCorner === 'bottom-right' ? 'primary.main' : alpha(theme.palette.primary.main, 0.3),
+      '&:hover': {
+        borderColor: 'primary.main'
+      },
+      transition: 'background-color 0.2s ease'
+    }
+  }))), attrs.title && /*#__PURE__*/React.createElement(Box, {
     component: "span",
     className: "editor-image-title",
     sx: {
@@ -390,19 +539,64 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
       width: '100%',
       mt: 0.5
     }
-  }, attrs.title))), /*#__PURE__*/React.createElement(MediaDualFieldEditPopover, {
-    open: isOpen,
+  }, attrs.title))), /*#__PURE__*/React.createElement(FloatingPopover, {
+    open: Boolean(anchorEl),
     anchorEl: anchorEl,
     onClose: handleClosePopover,
-    primaryLabel: "\u56FE\u7247\u5730\u5740",
-    primaryValue: editSrc,
-    onPrimaryChange: setEditSrc,
-    primaryPlaceholder: "\u8F93\u5165\u56FE\u7247\u7684 URL",
-    secondaryLabel: "\u56FE\u7247\u63CF\u8FF0",
-    secondaryValue: editTitle,
-    onSecondaryChange: setEditTitle,
-    secondaryPlaceholder: "\u8F93\u5165\u56FE\u7247\u63CF\u8FF0\uFF08\u53EF\u9009\uFF09",
-    onSave: handleSave
-  }));
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      p: 2,
+      width: 350
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      fontSize: '0.75rem',
+      color: 'text.secondary',
+      lineHeight: '1.5',
+      mb: 1
+    }
+  }, "\u56FE\u7247\u5730\u5740"), /*#__PURE__*/React.createElement(TextField, {
+    fullWidth: true,
+    size: "small",
+    value: editSrc,
+    onChange: function onChange(e) {
+      return setEditSrc(e.target.value);
+    },
+    placeholder: "\u8F93\u5165\u56FE\u7247\u7684 URL"
+  }), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      fontSize: '0.75rem',
+      color: 'text.secondary',
+      lineHeight: '1.5',
+      my: 1
+    }
+  }, "\u56FE\u7247\u63CF\u8FF0"), /*#__PURE__*/React.createElement(TextField, {
+    fullWidth: true,
+    size: "small",
+    value: editTitle,
+    onChange: function onChange(e) {
+      return setEditTitle(e.target.value);
+    },
+    placeholder: "\u8F93\u5165\u56FE\u7247\u63CF\u8FF0\uFF08\u53EF\u9009\uFF09"
+  }), /*#__PURE__*/React.createElement(Stack, {
+    direction: 'row',
+    gap: 1,
+    alignItems: 'center',
+    sx: {
+      mt: 2
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "outlined",
+    size: "small",
+    fullWidth: true,
+    onClick: handleClosePopover
+  }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
+    variant: "contained",
+    size: "small",
+    fullWidth: true,
+    onClick: handleSave,
+    disabled: !editSrc.trim()
+  }, "\u4FDD\u5B58")))));
 };
 export default ImageViewWrapper;

package/dist/{editor-core/extensions → extension}/component/Link/Insert.d.ts

@@ -1,7 +1,7 @@
 import { Editor } from "@tiptap/core";
 import { NodeViewProps } from "@tiptap/react";
 import React from "react";
-import { LinkAttributes } from "./shared";
+import { LinkAttributes } from ".";
 interface InsertLinkProps extends Partial<NodeViewProps> {
     attrs: LinkAttributes;
     editor: Editor;