@ctzhian/tiptap 2.12.9 → 2.13.0

package/dist/extension/component/Attachment/AttachmentContent.d.ts

@@ -5,6 +5,7 @@ interface AttachmentContentProps {
     type: 'icon' | 'block';
     isPdf: boolean;
     editable?: boolean;
+    updateAttributes?: (attrs: Partial<AttachmentAttributes>) => void;
 }
 /**
  * 附件内容组件

package/dist/extension/component/Attachment/AttachmentContent.js

@@ -16,8 +16,8 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { Download2LineIcon, FileIcon } from "../../../component/Icons";
 import { EyeLineIcon } from "../../../component/Icons/eye-line-icon";
-import { Box, IconButton, Stack } from "@mui/material";
-import React, { useState } from "react";
+import { alpha, Box, IconButton, Stack, useTheme } from "@mui/material";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 /**
  * 附件内容组件
  * 用于渲染附件的实际内容，支持编辑和只读模式
@@ -27,11 +27,23 @@ export var AttachmentContent = function AttachmentContent(_ref) {
     type = _ref.type,
     isPdf = _ref.isPdf,
     _ref$editable = _ref.editable,
-    editable = _ref$editable === void 0 ? false : _ref$editable;
+    editable = _ref$editable === void 0 ? false : _ref$editable,
+    updateAttributes = _ref.updateAttributes;
+  var theme = useTheme();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isHovered = _useState2[0],
     setIsHovered = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isDragging = _useState4[0],
+    setIsDragging = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dragCorner = _useState6[0],
+    setDragCorner = _useState6[1];
+  var dragStartYRef = useRef(0);
+  var dragStartHeightRef = useRef(0);
   var handlePreview = function handlePreview(e) {
     e.preventDefault();
     e.stopPropagation();
@@ -92,6 +104,52 @@ export var AttachmentContent = function AttachmentContent(_ref) {
       return _ref2.apply(this, arguments);
     };
   }();
+
+  // 拖拽调整高度
+  var handleMouseDown = function handleMouseDown(e, corner) {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+    setDragCorner(corner);
+    dragStartYRef.current = e.clientY;
+    dragStartHeightRef.current = attrs.height || 300;
+  };
+  var handleMouseMove = useCallback(function (e) {
+    if (!isDragging || !dragCorner) return;
+    var deltaY = e.clientY - dragStartYRef.current;
+    var newHeight;
+
+    // 根据不同的角计算高度变化
+    if (dragCorner === 'bottom-left' || dragCorner === 'bottom-right') {
+      // 下角：向下拉伸，高度增加
+      newHeight = dragStartHeightRef.current + deltaY;
+    } else {
+      // 上角：向上拉伸，高度增加（deltaY 为负时高度增加）
+      newHeight = dragStartHeightRef.current - deltaY;
+    }
+
+    // 限制高度范围：最小 200px，最大 1000px
+    newHeight = Math.max(200, Math.min(1000, newHeight));
+    if (updateAttributes) {
+      updateAttributes({
+        height: newHeight
+      });
+    }
+  }, [isDragging, dragCorner, updateAttributes]);
+  var handleMouseUp = useCallback(function () {
+    setIsDragging(false);
+    setDragCorner(null);
+  }, []);
+  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]);
   var blockStyles = editable ? {
     display: 'flex',
     border: '1px solid',
@@ -149,32 +207,117 @@ export var AttachmentContent = function AttachmentContent(_ref) {
     color: 'primary.main',
     cursor: 'pointer'
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, type === 'block' ? attrs.view === '1' && isPdf && attrs.url && attrs.url !== 'error' ? /*#__PURE__*/React.createElement(Box, _extends({
-    sx: _objectSpread(_objectSpread({}, blockStyles), {}, {
-      p: 0,
-      overflow: 'hidden'
-    })
-  }, !editable && {
-    'data-title': attrs.title,
-    'data-type': type
-  }, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, type === 'block' ? attrs.view === '1' && isPdf && attrs.url && attrs.url !== 'error' ? /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      position: 'relative'
+    },
     onMouseEnter: function onMouseEnter() {
       return setIsHovered(true);
     },
     onMouseLeave: function onMouseLeave() {
       return setIsHovered(false);
     }
+  }, /*#__PURE__*/React.createElement(Box, _extends({
+    sx: _objectSpread(_objectSpread({}, blockStyles), {}, {
+      p: 0,
+      overflow: 'hidden',
+      height: "".concat(attrs.height || 300, "px")
+    })
+  }, !editable && {
+    'data-title': attrs.title,
+    'data-type': type
   }), /*#__PURE__*/React.createElement("iframe", {
     src: attrs.url + '#navpanes=0&toolbar=1',
     width: "100%",
-    height: "300px",
+    height: "100%",
     allowFullScreen: true,
     style: {
       border: 'none',
-      display: 'block'
+      display: 'block',
+      pointerEvents: isDragging ? 'none' : 'auto'
     },
     title: attrs.title
-  })) : /*#__PURE__*/React.createElement(Box, _extends({}, !editable && {
+  })), editable && (isHovered || 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: 'ns-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: 'ns-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: 'ns-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: 'ns-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'
+    }
+  }))) : /*#__PURE__*/React.createElement(Box, _extends({}, !editable && {
     'data-title': attrs.title,
     'data-type': attrs.type
   }, {

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

@@ -7,6 +7,7 @@ export interface AttachmentAttributes {
     type: string;
     size: string;
     view?: string;
+    height?: number;
 }
 declare const AttachmentViewWrapper: React.FC<NodeViewProps & EditorFnProps & {
     attachmentType?: 'icon' | 'block';

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

@@ -258,7 +258,8 @@ var AttachmentViewWrapper = function AttachmentViewWrapper(_ref) {
     isPdf: isPdf,
     attrs: attrs,
     type: attachmentDisplayType === 'block' ? 'block' : 'icon',
-    editable: true
+    editable: true,
+    updateAttributes: updateAttributes
   }))), /*#__PURE__*/React.createElement(FloatingPopover, {
     open: Boolean(anchorEl),
     anchorEl: anchorEl,

package/dist/extension/node/Attachment.d.ts

@@ -21,6 +21,7 @@ declare module '@tiptap/core' {
                 title: string;
                 size: string;
                 view?: '0' | '1';
+                height?: number;
             }) => ReturnType;
         };
     }

package/dist/extension/node/Attachment.js

@@ -175,6 +175,18 @@ export var BlockAttachmentExtension = function BlockAttachmentExtension(props) {
             };
           }
         },
+        height: {
+          default: 300,
+          parseHTML: function parseHTML(element) {
+            var height = element.getAttribute('data-height');
+            return height ? parseInt(height, 10) : 300;
+          },
+          renderHTML: function renderHTML(attributes) {
+            return {
+              'data-height': attributes.height || 300
+            };
+          }
+        },
         url: {
           default: '',
           parseHTML: function parseHTML(element) {
@@ -228,8 +240,10 @@ export var BlockAttachmentExtension = function BlockAttachmentExtension(props) {
         getAttrs: function getAttrs(dom) {
           if (!(dom instanceof HTMLElement)) return false;
           var viewAttr = dom.getAttribute('data-view');
+          var heightAttr = dom.getAttribute('data-height');
           return {
             view: viewAttr !== null ? viewAttr : '0',
+            height: heightAttr ? parseInt(heightAttr, 10) : 300,
             url: dom.getAttribute('data-url') || '',
             title: dom.getAttribute('data-title') || '',
             size: dom.getAttribute('data-size') || '0',
@@ -243,6 +257,7 @@ export var BlockAttachmentExtension = function BlockAttachmentExtension(props) {
           var download = dom.getAttribute('download');
           var type = dom.getAttribute('type');
           var view = dom.getAttribute('data-view') || '0';
+          var heightAttr = dom.getAttribute('data-height');
 
           // 只解析 type="block" 的带 download 的 <a> 标签
           if (download === null || type !== 'block') {
@@ -252,6 +267,7 @@ export var BlockAttachmentExtension = function BlockAttachmentExtension(props) {
           var title = dom.textContent || dom.getAttribute('title') || dom.getAttribute('download') || '';
           return {
             view: view,
+            height: heightAttr ? parseInt(heightAttr, 10) : 300,
             url: href,
             title: title,
             size: '0',
@@ -270,9 +286,10 @@ export var BlockAttachmentExtension = function BlockAttachmentExtension(props) {
       var _ref5 = node.attrs,
         url = _ref5.url,
         title = _ref5.title,
-        view = _ref5.view;
+        view = _ref5.view,
+        height = _ref5.height;
       if (!url) return '';
-      return "<a href=\"".concat(url, "\" data-view=\"").concat(view, "\" type=\"block\" target=\"_blank\" download=\"").concat(title, "\">").concat(title, "</a>");
+      return "<a href=\"".concat(url, "\" data-view=\"").concat(view, "\" data-height=\"").concat(height || 300, "\" type=\"block\" target=\"_blank\" download=\"").concat(title, "\">").concat(title, "</a>");
     },
     addCommands: function addCommands() {
       var _this3 = this;
@@ -284,6 +301,7 @@ export var BlockAttachmentExtension = function BlockAttachmentExtension(props) {
               type: _this3.name,
               attrs: {
                 view: options.view || '0',
+                height: options.height || 300,
                 url: options.url || '',
                 title: options.title || '',
                 size: options.size || '0',

package/package.json

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