@ctzhian/tiptap 0.4.0

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

@@ -0,0 +1,21 @@
+import { NodeViewProps } from "@tiptap/react";
+import { EditorFnProps } from "../../../type";
+import React from "react";
+export interface ImageAttributes {
+    src: string;
+    width: number;
+}
+export declare const imageDimensionsCache: Map<string, {
+    width: number;
+    height: number;
+}>;
+export declare const getImageDimensions: (src: string) => Promise<{
+    width: number;
+    height: number;
+}>;
+export declare const getImageDimensionsFromFile: (file: File) => Promise<{
+    width: number;
+    height: number;
+}>;
+declare const ImageViewWrapper: React.FC<NodeViewProps & EditorFnProps>;
+export default ImageViewWrapper;

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

@@ -0,0 +1,372 @@
+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 { Box, Button, IconButton, Stack, TextField, Tooltip } from "@mui/material";
+import { NodeViewWrapper } from "@tiptap/react";
+import { FloatingPopover } from "../../../component";
+import { CustomSizeIcon, DeleteLineIcon, EditBoxLineIcon } from "../../../component/Icons";
+import React, { useEffect, useRef, useState } from "react";
+import CropImage from "./Crop";
+import InsertImage from "./Insert";
+import ReadonlyImage from "./Readonly";
+// 图片尺寸缓存，避免重复加载
+export var imageDimensionsCache = new Map();
+
+// 获取图片尺寸的函数（带缓存）
+export var getImageDimensions = function getImageDimensions(src) {
+  // 检查缓存
+  if (imageDimensionsCache.has(src)) {
+    return Promise.resolve(imageDimensionsCache.get(src));
+  }
+  return new Promise(function (resolve, reject) {
+    var img = new Image();
+    img.onload = function () {
+      var dimensions = {
+        width: img.naturalWidth,
+        height: img.naturalHeight
+      };
+      // 缓存结果
+      imageDimensionsCache.set(src, dimensions);
+      resolve(dimensions);
+    };
+    img.onerror = function () {
+      reject(new Error('无法加载图片'));
+    };
+    img.src = src;
+  });
+};
+
+// 从文件获取图片尺寸（避免重复加载）
+export var getImageDimensionsFromFile = function getImageDimensionsFromFile(file) {
+  return new Promise(function (resolve, reject) {
+    var reader = new FileReader();
+    reader.onload = function (e) {
+      var _e$target;
+      var img = new Image();
+      img.onload = function () {
+        resolve({
+          width: img.naturalWidth,
+          height: img.naturalHeight
+        });
+      };
+      img.onerror = function () {
+        reject(new Error('无法读取图片文件'));
+      };
+      img.src = (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.result;
+    };
+    reader.onerror = function () {
+      reject(new Error('无法读取文件'));
+    };
+    reader.readAsDataURL(file);
+  });
+};
+var ImageViewWrapper = function ImageViewWrapper(_ref) {
+  var editor = _ref.editor,
+    node = _ref.node,
+    updateAttributes = _ref.updateAttributes,
+    deleteNode = _ref.deleteNode,
+    selected = _ref.selected,
+    onUpload = _ref.onUpload,
+    _onError = _ref.onError;
+  var attrs = node.attrs;
+  var imageRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isHovering = _useState4[0],
+    setIsHovering = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isCropping = _useState6[0],
+    setIsCropping = _useState6[1];
+  var _useState7 = useState(attrs.src),
+    _useState8 = _slicedToArray(_useState7, 2),
+    editSrc = _useState8[0],
+    setEditSrc = _useState8[1];
+  var _useState9 = useState(0),
+    _useState10 = _slicedToArray(_useState9, 2),
+    dragStartX = _useState10[0],
+    setDragStartX = _useState10[1];
+  var _useState11 = useState(0),
+    _useState12 = _slicedToArray(_useState11, 2),
+    dragStartWidth = _useState12[0],
+    setDragStartWidth = _useState12[1];
+  var _useState13 = useState(null),
+    _useState14 = _slicedToArray(_useState13, 2),
+    anchorEl = _useState14[0],
+    setAnchorEl = _useState14[1];
+  var handleShowPopover = function handleShowPopover(event) {
+    return setAnchorEl(event.currentTarget);
+  };
+  var handleClosePopover = function handleClosePopover() {
+    return setAnchorEl(null);
+  };
+
+  // 获取当前实际显示的图片宽度
+  var getCurrentDisplayWidth = function getCurrentDisplayWidth() {
+    if (!imageRef.current) return attrs.width;
+
+    // 获取图片的实际显示宽度（考虑 maxWidth: 100% 的限制）
+    var computedStyle = window.getComputedStyle(imageRef.current);
+    var displayWidth = imageRef.current.offsetWidth;
+
+    // 如果图片被 CSS 限制为 100%，则使用容器宽度
+    if (computedStyle.maxWidth === '100%' && displayWidth < attrs.width) {
+      return displayWidth;
+    }
+    return attrs.width;
+  };
+
+  // 自动获取图片尺寸并设置
+  useEffect(function () {
+    // 当有 src 但没有 width 时，自动获取图片尺寸
+    if (attrs.src && (!attrs.width || attrs.width <= 0)) {
+      getImageDimensions(attrs.src).then(function (dimensions) {
+        updateAttributes({
+          src: attrs.src,
+          width: dimensions.width
+        });
+      }).catch(function (error) {
+        console.warn('无法获取图片尺寸，使用默认宽度:', error);
+        // 如果无法获取尺寸，设置默认宽度
+        updateAttributes({
+          src: attrs.src,
+          width: 400 // 默认宽度
+        });
+      });
+    }
+  }, [attrs.src, attrs.width, updateAttributes]);
+  var handleMouseDown = function handleMouseDown(e) {
+    e.preventDefault();
+    setIsDragging(true);
+    setDragStartX(e.clientX);
+    // 使用当前实际显示的宽度作为拖拽起始点
+    setDragStartWidth(getCurrentDisplayWidth());
+  };
+  var handleMouseMove = function handleMouseMove(e) {
+    if (!isDragging) return;
+    var deltaX = e.clientX - dragStartX;
+    var newWidth = Math.max(100, Math.min(1200, dragStartWidth + deltaX));
+    updateAttributes({
+      width: newWidth
+    });
+  };
+  var handleMouseUp = function handleMouseUp() {
+    return setIsDragging(false);
+  };
+  var handleCropClick = function handleCropClick() {
+    return setIsCropping(true);
+  };
+  var handleCropCancel = function handleCropCancel() {
+    return setIsCropping(false);
+  };
+  var handleCropConfirm = function handleCropConfirm(imageUrl) {
+    updateAttributes({
+      src: imageUrl
+    });
+    setIsCropping(false);
+  };
+  var handleSave = function handleSave() {
+    if (editSrc.trim()) {
+      var currentWidth = getCurrentDisplayWidth();
+      updateAttributes({
+        src: editSrc.trim(),
+        width: currentWidth,
+        error: true
+      });
+      setEditSrc(editSrc.trim());
+    }
+    handleClosePopover();
+  };
+  useEffect(function () {
+    if (isDragging) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      return function () {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+  }, [isDragging]);
+  if (!attrs.src && !editor.isEditable) {
+    return null;
+  }
+  if (!editor.isEditable) {
+    return /*#__PURE__*/React.createElement(ReadonlyImage, {
+      attrs: attrs
+    });
+  }
+  if (!attrs.src) {
+    return /*#__PURE__*/React.createElement(InsertImage, {
+      selected: selected,
+      attrs: attrs,
+      onUpload: onUpload,
+      updateAttributes: updateAttributes
+    });
+  }
+  if (isCropping) {
+    return /*#__PURE__*/React.createElement(CropImage, {
+      selected: selected,
+      attrs: attrs,
+      onConfirm: handleCropConfirm,
+      onCancel: handleCropCancel,
+      onUpload: onUpload,
+      onError: _onError
+    });
+  }
+  return /*#__PURE__*/React.createElement(NodeViewWrapper, {
+    className: "image-wrapper ".concat(selected ? 'ProseMirror-selectednode' : ''),
+    "data-drag-handle": true
+  }, /*#__PURE__*/React.createElement(Box, {
+    component: 'span',
+    sx: {
+      position: 'relative',
+      display: 'inline-block',
+      border: '1px solid',
+      borderColor: 'divider',
+      borderRadius: 'var(--mui-shape-borderRadius)',
+      p: '0.25rem',
+      bgcolor: 'background.paper',
+      '&:hover .image-controls': {
+        opacity: 1
+      }
+    },
+    onMouseEnter: function onMouseEnter() {
+      return setIsHovering(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHovering(false);
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    ref: imageRef,
+    src: attrs.src,
+    width: attrs.width,
+    style: {
+      maxWidth: '100%',
+      height: 'auto',
+      cursor: 'default'
+    },
+    onError: function onError(e) {
+      _onError === null || _onError === void 0 || _onError(e);
+    }
+  }), (isHovering || isDragging) && /*#__PURE__*/React.createElement(Box, {
+    onMouseDown: handleMouseDown,
+    sx: {
+      position: 'absolute',
+      right: -2,
+      top: '50%',
+      transform: 'translateY(-50%)',
+      width: 4,
+      height: 50,
+      bgcolor: isDragging ? 'primary.main' : 'text.primary',
+      cursor: 'ew-resize',
+      borderRadius: 2,
+      '&:hover': {
+        bgcolor: 'primary.main'
+      },
+      transition: 'background-color 0.2s ease',
+      zIndex: 10
+    }
+  }), (isHovering || !!anchorEl) && /*#__PURE__*/React.createElement(Box, {
+    className: "image-controls",
+    sx: {
+      position: 'absolute',
+      top: '0.5rem',
+      right: '0.5rem',
+      display: 'flex',
+      gap: '0.25rem'
+    }
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    arrow: true,
+    title: "\u66F4\u6362\u56FE\u7247\u5730\u5740"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    size: "small",
+    onClick: handleShowPopover,
+    sx: {
+      color: 'text.primary',
+      bgcolor: 'background.paper'
+    }
+  }, /*#__PURE__*/React.createElement(EditBoxLineIcon, {
+    sx: {
+      fontSize: 18
+    }
+  }))), /*#__PURE__*/React.createElement(Tooltip, {
+    arrow: true,
+    title: "\u88C1\u5207\u56FE\u7247"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    size: "small",
+    onClick: handleCropClick,
+    sx: {
+      color: 'text.primary',
+      bgcolor: 'background.paper'
+    }
+  }, /*#__PURE__*/React.createElement(CustomSizeIcon, {
+    sx: {
+      fontSize: 18
+    }
+  }))), /*#__PURE__*/React.createElement(Tooltip, {
+    arrow: true,
+    title: "\u5220\u9664\u56FE\u7247"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    size: "small",
+    onClick: deleteNode,
+    sx: {
+      color: 'text.primary',
+      bgcolor: 'background.paper'
+    }
+  }, /*#__PURE__*/React.createElement(DeleteLineIcon, {
+    sx: {
+      fontSize: 18
+    }
+  }))))), /*#__PURE__*/React.createElement(FloatingPopover, {
+    open: Boolean(anchorEl),
+    anchorEl: anchorEl,
+    onClose: handleClosePopover,
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      p: 2,
+      width: 350
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      fontSize: '0.875rem',
+      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(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/extension/component/Link/Insert.d.ts

@@ -0,0 +1,10 @@
+import { Editor } from "@tiptap/core";
+import { NodeViewProps } from "@tiptap/react";
+import React from "react";
+import { LinkAttributes } from ".";
+interface InsertLinkProps extends Partial<NodeViewProps> {
+    attrs: LinkAttributes;
+    editor: Editor;
+}
+declare const InsertLink: ({ updateAttributes, deleteNode, selected, attrs, editor }: InsertLinkProps) => React.JSX.Element;
+export default InsertLink;

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

@@ -0,0 +1,253 @@
+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 { Box, Button, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Stack, TextField } from "@mui/material";
+import { NodeViewWrapper } from "@tiptap/react";
+import { FloatingPopover } from "../../../component";
+import { LinkIcon } from "../../../component/Icons";
+import React, { useEffect, useState } from "react";
+var InsertLink = function InsertLink(_ref) {
+  var updateAttributes = _ref.updateAttributes,
+    deleteNode = _ref.deleteNode,
+    selected = _ref.selected,
+    attrs = _ref.attrs,
+    editor = _ref.editor;
+  var _useState = useState(attrs.title || ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    title = _useState2[0],
+    setTitle = _useState2[1];
+  var _useState3 = useState(attrs.href || ''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    href = _useState4[0],
+    setHref = _useState4[1];
+  var _useState5 = useState(attrs.type || 'icon'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    type = _useState6[0],
+    setType = _useState6[1];
+  var _useState7 = useState(attrs.target || '_blank'),
+    _useState8 = _slicedToArray(_useState7, 2),
+    target = _useState8[0],
+    setTarget = _useState8[1];
+  var _useState9 = useState(null),
+    _useState10 = _slicedToArray(_useState9, 2),
+    anchorEl = _useState10[0],
+    setAnchorEl = _useState10[1];
+  var handleShowPopover = function handleShowPopover(event) {
+    setAnchorEl(event.currentTarget);
+  };
+  var handleClosePopover = function handleClosePopover() {
+    return setAnchorEl(null);
+  };
+  var handleSave = function handleSave() {
+    if (type === 'block') {
+      editor.commands.setBlockLink({
+        title: title,
+        href: href,
+        type: type,
+        target: target
+      });
+    } else {
+      updateAttributes === null || updateAttributes === void 0 || updateAttributes({
+        title: title,
+        href: href,
+        type: type,
+        target: target
+      });
+    }
+  };
+  var handleDeleteLink = function handleDeleteLink() {
+    deleteNode === null || deleteNode === void 0 || deleteNode();
+    editor.commands.insertContent(attrs.title);
+  };
+  useEffect(function () {
+    if (!attrs.href && attrs.title && !anchorEl) {
+      setTimeout(function () {
+        var insertLinkBox = document.getElementById('insert-link-box');
+        if (insertLinkBox) {
+          insertLinkBox.click();
+        }
+      }, 100);
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(NodeViewWrapper, {
+    className: "link-wrapper ".concat(attrs.class),
+    "data-drag-handle": true,
+    as: 'span'
+  }, /*#__PURE__*/React.createElement(Box, {
+    id: "insert-link-box",
+    component: "span",
+    onClick: handleShowPopover,
+    sx: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 2,
+      border: '1px dashed',
+      borderColor: 'divider',
+      borderRadius: 'var(--mui-shape-borderRadius)',
+      px: 2,
+      py: 1.5,
+      fontSize: 14,
+      color: 'text.secondary',
+      bgcolor: 'action.default',
+      cursor: 'pointer',
+      '&:hover': {
+        bgcolor: 'action.hover'
+      },
+      '&:active': {
+        bgcolor: 'action.selected'
+      },
+      transition: 'background-color 0.2s ease'
+    }
+  }, /*#__PURE__*/React.createElement(LinkIcon, {
+    sx: {
+      fontSize: '1rem',
+      flexShrink: 0
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
+    component: 'span'
+  }, "\u6DFB\u52A0", title ? "\u201C".concat(title, "\u201D") : '', "\u94FE\u63A5")), /*#__PURE__*/React.createElement(FloatingPopover, {
+    open: Boolean(anchorEl),
+    anchorEl: anchorEl,
+    onClose: handleClosePopover,
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    gap: 2,
+    sx: {
+      p: 2,
+      width: 350
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: 'row',
+    gap: 2,
+    alignItems: 'center'
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      fontSize: '0.875rem',
+      color: 'text.secondary',
+      flexShrink: 0
+    }
+  }, "\u5730\u5740"), /*#__PURE__*/React.createElement(TextField, {
+    fullWidth: true,
+    size: "small",
+    value: href,
+    onChange: function onChange(e) {
+      return setHref(e.target.value);
+    },
+    placeholder: "https://example.com",
+    required: true,
+    error: href.length > 0 && !href.trim(),
+    helperText: href.length > 0 && !href.trim() ? "请输入有效的链接地址" : ""
+  })), /*#__PURE__*/React.createElement(Stack, {
+    direction: 'row',
+    gap: 2,
+    alignItems: 'center'
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      fontSize: '0.875rem',
+      color: 'text.secondary',
+      flexShrink: 0
+    }
+  }, "\u6807\u9898"), /*#__PURE__*/React.createElement(TextField, {
+    fullWidth: true,
+    size: "small",
+    value: title,
+    onChange: function onChange(e) {
+      return setTitle(e.target.value);
+    },
+    placeholder: "\u94FE\u63A5\u6807\u9898\uFF08\u53EF\u9009\uFF09"
+  })), /*#__PURE__*/React.createElement(FormControl, {
+    component: "fieldset"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: 'row',
+    gap: 2,
+    alignItems: 'flex-start',
+    sx: {
+      '.MuiFormControlLabel-label': {
+        fontSize: '0.875rem'
+      }
+    }
+  }, /*#__PURE__*/React.createElement(FormLabel, {
+    component: "legend",
+    sx: {
+      fontSize: '0.875rem',
+      flexShrink: 0
+    }
+  }, "\u98CE\u683C"), /*#__PURE__*/React.createElement(RadioGroup, {
+    row: true,
+    value: type,
+    onChange: function onChange(e) {
+      return setType(e.target.value);
+    }
+  }, /*#__PURE__*/React.createElement(FormControlLabel, {
+    value: "text",
+    control: /*#__PURE__*/React.createElement(Radio, {
+      size: "small"
+    }),
+    label: "\u7EAF\u6587\u5B57"
+  }), /*#__PURE__*/React.createElement(FormControlLabel, {
+    value: "icon",
+    control: /*#__PURE__*/React.createElement(Radio, {
+      size: "small"
+    }),
+    label: "\u56FE\u6807\u6587\u5B57"
+  }), /*#__PURE__*/React.createElement(FormControlLabel, {
+    value: "block",
+    control: /*#__PURE__*/React.createElement(Radio, {
+      size: "small"
+    }),
+    label: "\u5361\u7247"
+  })))), /*#__PURE__*/React.createElement(FormControl, {
+    component: "fieldset"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: 'row',
+    gap: 2,
+    alignItems: 'flex-start',
+    sx: {
+      '.MuiFormControlLabel-label': {
+        fontSize: '0.875rem'
+      }
+    }
+  }, /*#__PURE__*/React.createElement(FormLabel, {
+    component: "legend",
+    sx: {
+      fontSize: '0.875rem',
+      flexShrink: 0
+    }
+  }, "\u6253\u5F00"), /*#__PURE__*/React.createElement(RadioGroup, {
+    row: true,
+    value: target,
+    onChange: function onChange(e) {
+      return setTarget(e.target.value);
+    }
+  }, /*#__PURE__*/React.createElement(FormControlLabel, {
+    value: "_blank",
+    control: /*#__PURE__*/React.createElement(Radio, {
+      size: "small"
+    }),
+    label: "\u65B0\u7A97\u53E3"
+  }), /*#__PURE__*/React.createElement(FormControlLabel, {
+    value: "_self",
+    control: /*#__PURE__*/React.createElement(Radio, {
+      size: "small"
+    }),
+    label: "\u5F53\u524D\u7A97\u53E3"
+  })))), /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    gap: 1
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "outlined",
+    size: "small",
+    fullWidth: true,
+    onClick: handleDeleteLink
+  }, "\u53D6\u6D88\u94FE\u63A5"), /*#__PURE__*/React.createElement(Button, {
+    variant: "contained",
+    size: "small",
+    fullWidth: true,
+    onClick: handleSave,
+    disabled: !href.trim()
+  }, "\u63D2\u5165\u94FE\u63A5")))));
+};
+export default InsertLink;

package/dist/extension/component/Link/Readonly.d.ts

@@ -0,0 +1,8 @@
+import { NodeViewProps } from "@tiptap/react";
+import React from "react";
+import { LinkAttributes } from ".";
+interface ReadonlyLinkProps extends Partial<NodeViewProps> {
+    attrs: LinkAttributes;
+}
+declare const ReadonlyLink: ({ attrs, selected }: ReadonlyLinkProps) => React.JSX.Element;
+export default ReadonlyLink;