@ctzhian/tiptap 1.11.3 → 1.12.0

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

@@ -9,10 +9,12 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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 { CustomSizeIcon, DeleteLineIcon, EditBoxLineIcon } from "../../../component/Icons";
-import { Box, Button, IconButton, Stack, TextField, Tooltip } from "@mui/material";
+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 React, { useCallback, useEffect, useRef, useState } from "react";
+import { HoverPopover } from "../../../component/HoverPopover";
 import CropImage from "./Crop";
 import InsertImage from "./Insert";
 import ReadonlyImage from "./Readonly";
@@ -75,9 +77,11 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
     selected = _ref.selected,
     onUpload = _ref.onUpload,
     _onError = _ref.onError,
-    onValidateUrl = _ref.onValidateUrl;
+    onValidateUrl = _ref.onValidateUrl,
+    getPos = _ref.getPos;
   var attrs = node.attrs;
   var imageRef = useRef(null);
+  var theme = useTheme();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isDragging = _useState2[0],
@@ -94,20 +98,23 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     editSrc = _useState8[0],
     setEditSrc = _useState8[1];
-  var _useState9 = useState(0),
+  var _useState9 = useState(null),
     _useState10 = _slicedToArray(_useState9, 2),
-    dragStartX = _useState10[0],
-    setDragStartX = _useState10[1];
-  var _useState11 = useState(0),
+    dragCorner = _useState10[0],
+    setDragCorner = _useState10[1];
+  var dragStartXRef = useRef(0);
+  var dragStartWidthRef = useRef(0);
+  var _useState11 = useState(attrs.title || ''),
     _useState12 = _slicedToArray(_useState11, 2),
-    dragStartWidth = _useState12[0],
-    setDragStartWidth = _useState12[1];
+    editTitle = _useState12[0],
+    setEditTitle = _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 imageContentRef = useRef(null);
+  var handleShowPopover = function handleShowPopover() {
+    return setAnchorEl(imageContentRef.current);
   };
   var handleClosePopover = function handleClosePopover() {
     return setAnchorEl(null);
@@ -147,24 +154,36 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
       });
     }
   }, [attrs.src, attrs.width, updateAttributes]);
-  var handleMouseDown = function handleMouseDown(e) {
+  var handleMouseDown = function handleMouseDown(e, corner) {
     e.preventDefault();
+    e.stopPropagation();
     setIsDragging(true);
-    setDragStartX(e.clientX);
-    // 使用当前实际显示的宽度作为拖拽起始点
-    setDragStartWidth(getCurrentDisplayWidth());
+    setDragCorner(corner);
+    dragStartXRef.current = e.clientX;
+    dragStartWidthRef.current = getCurrentDisplayWidth();
   };
-  var handleMouseMove = function handleMouseMove(e) {
-    if (!isDragging) return;
-    var deltaX = e.clientX - dragStartX;
-    var newWidth = Math.max(100, Math.min(1200, dragStartWidth + deltaX));
+  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
     });
-  };
-  var handleMouseUp = function handleMouseUp() {
-    return setIsDragging(false);
-  };
+  }, [isDragging, dragCorner, updateAttributes]);
+  var handleMouseUp = useCallback(function () {
+    setIsDragging(false);
+    setDragCorner(null);
+  }, []);
   var handleCropClick = function handleCropClick() {
     return setIsCropping(true);
   };
@@ -202,7 +221,8 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
             updateAttributes({
               src: validatedUrl,
               width: currentWidth,
-              error: true
+              error: true,
+              title: editTitle.trim()
             });
             setEditSrc(validatedUrl);
             _context.next = 15;
@@ -223,6 +243,14 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
       return _ref2.apply(this, arguments);
     };
   }();
+  var runTextAlignOnImageParagraph = function runTextAlignOnImageParagraph(align) {
+    var pos = typeof getPos === 'function' ? getPos() : null;
+    var chain = editor.chain().focus();
+    if (pos != null) {
+      chain.setTextSelection(pos);
+    }
+    chain.toggleTextAlign(align).run();
+  };
   useEffect(function () {
     if (isDragging) {
       document.addEventListener('mousemove', handleMouseMove);
@@ -232,7 +260,7 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
         document.removeEventListener('mouseup', handleMouseUp);
       };
     }
-  }, [isDragging]);
+  }, [isDragging, handleMouseMove, handleMouseUp]);
   if (!attrs.src && !editor.isEditable) {
     return null;
   }
@@ -265,19 +293,94 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
     className: "image-wrapper ".concat(selected ? 'ProseMirror-selectednode' : ''),
     as: 'span',
     'data-drag-handle': false
+  }, /*#__PURE__*/React.createElement(HoverPopover, {
+    actions: /*#__PURE__*/React.createElement(Stack, {
+      direction: 'row',
+      alignItems: 'center',
+      sx: {
+        p: 0.5
+      }
+    }, /*#__PURE__*/React.createElement(ToolbarItem, {
+      icon: /*#__PURE__*/React.createElement(EditLineIcon, {
+        sx: {
+          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
+    })),
+    placement: "top",
+    offset: 4
   }, /*#__PURE__*/React.createElement(Box, {
     component: 'span',
+    ref: imageContentRef,
     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
-      }
+      display: 'inline-block'
     },
     onMouseEnter: function onMouseEnter() {
       return setIsHovering(true);
@@ -292,85 +395,109 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
     style: {
       maxWidth: '100%',
       height: 'auto',
-      cursor: 'default'
+      cursor: 'default',
+      border: '2px solid',
+      borderColor: isHovering || isDragging ? alpha(theme.palette.primary.main, 0.3) : 'transparent'
     },
     onError: function onError(e) {
       _onError === null || _onError === void 0 || _onError(e);
     }
-  }), (isHovering || isDragging) && /*#__PURE__*/React.createElement(Box, {
-    onMouseDown: handleMouseDown,
+  }), (isHovering || isDragging) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    onMouseDown: function onMouseDown(e) {
+      return handleMouseDown(e, 'top-left');
+    },
     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,
+      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': {
-        bgcolor: 'primary.main'
+        borderColor: 'primary.main'
       },
       transition: 'background-color 0.2s ease',
       zIndex: 10
     }
-  }), (isHovering || !!anchorEl) && /*#__PURE__*/React.createElement(Box, {
-    className: "image-controls",
+  }), /*#__PURE__*/React.createElement(Box, {
+    onMouseDown: function onMouseDown(e) {
+      return handleMouseDown(e, 'top-right');
+    },
     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'
+      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',
+      zIndex: 10
     }
-  }, /*#__PURE__*/React.createElement(CustomSizeIcon, {
+  }), /*#__PURE__*/React.createElement(Box, {
+    onMouseDown: function onMouseDown(e) {
+      return handleMouseDown(e, 'bottom-left');
+    },
     sx: {
-      fontSize: 18
+      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',
+      zIndex: 10
     }
-  }))), /*#__PURE__*/React.createElement(Tooltip, {
-    arrow: true,
-    title: "\u5220\u9664\u56FE\u7247"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    size: "small",
-    onClick: deleteNode,
+  }), /*#__PURE__*/React.createElement(Box, {
+    onMouseDown: function onMouseDown(e) {
+      return handleMouseDown(e, 'bottom-right');
+    },
     sx: {
-      color: 'text.primary',
-      bgcolor: 'background.paper'
+      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',
+      zIndex: 10
     }
-  }, /*#__PURE__*/React.createElement(DeleteLineIcon, {
+  }))), attrs.title && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Box, {
+    component: "span",
     sx: {
-      fontSize: 18
+      display: 'inline-block',
+      fontSize: '0.75rem',
+      color: 'text.auxiliary'
     }
-  }))))), /*#__PURE__*/React.createElement(FloatingPopover, {
+  }, attrs.title))), /*#__PURE__*/React.createElement(FloatingPopover, {
     open: Boolean(anchorEl),
     anchorEl: anchorEl,
     onClose: handleClosePopover,
-    placement: "bottom"
+    placement: "top"
   }, /*#__PURE__*/React.createElement(Stack, {
     sx: {
       p: 2,
@@ -378,7 +505,7 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
     }
   }, /*#__PURE__*/React.createElement(Box, {
     sx: {
-      fontSize: '0.875rem',
+      fontSize: '0.75rem',
       color: 'text.secondary',
       lineHeight: '1.5',
       mb: 1
@@ -391,6 +518,21 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
       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',
+      mb: 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,

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

@@ -185,7 +185,7 @@ var InsertLink = function InsertLink(_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/Link/LinkContent.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { LinkAttributes } from ".";
+interface LinkContentProps {
+    attrs: LinkAttributes;
+    /** 是否为编辑模式 */
+    editable?: boolean;
+}
+/**
+ * 链接内容组件
+ * 用于渲染链接的实际内容，支持编辑和只读模式
+ */
+export declare const LinkContent: React.FC<LinkContentProps>;
+export default LinkContent;

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

@@ -0,0 +1,169 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import { ChromeIcon } from "../../../component/Icons";
+import { getLinkTitle } from "../../../util";
+import { Avatar, Box, Stack } from "@mui/material";
+import React from "react";
+/**
+ * 链接内容组件
+ * 用于渲染链接的实际内容，支持编辑和只读模式
+ */
+export var LinkContent = function LinkContent(_ref) {
+  var attrs = _ref.attrs,
+    _ref$editable = _ref.editable,
+    editable = _ref$editable === void 0 ? false : _ref$editable;
+  var favicon = '';
+  try {
+    favicon = attrs.href ? new URL(attrs.href).origin + '/favicon.ico' : '';
+  } catch (err) {}
+
+  // 编辑模式和只读模式的样式差异
+  var blockStyles = editable ? {
+    display: 'flex',
+    border: '1px solid',
+    borderColor: 'divider',
+    cursor: 'pointer',
+    borderRadius: 'var(--mui-shape-borderRadius)',
+    p: 2,
+    textDecoration: 'none',
+    color: 'inherit',
+    ':hover': {
+      borderColor: 'primary.main'
+    }
+  } : {
+    display: 'block'
+  };
+  var blockInnerStyles = editable ? {
+    width: '100%'
+  } : {
+    border: '1px solid',
+    borderColor: 'divider',
+    color: 'text.primary',
+    cursor: 'pointer',
+    borderRadius: 'var(--mui-shape-borderRadius)',
+    p: 2,
+    ':hover': {
+      borderColor: 'primary.main'
+    }
+  };
+  var inlineStyles = editable ? {
+    color: 'primary.main',
+    cursor: 'pointer',
+    borderRadius: 'var(--mui-shape-borderRadius)',
+    transition: 'background-color 0.2s ease',
+    display: 'inline',
+    ':hover': {
+      textDecoration: 'underline !important'
+    }
+  } : {
+    display: 'inline-flex',
+    alignItems: 'baseline',
+    gap: '2px',
+    color: 'primary.main',
+    '&:hover': {
+      textDecoration: 'underline !important'
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, attrs.type === 'block' ? /*#__PURE__*/React.createElement(Box, _extends({
+    component: "a",
+    href: attrs.href,
+    target: attrs.target,
+    rel: editable ? attrs.target === '_blank' ? 'noopener noreferrer' : undefined : attrs.rel
+  }, !editable && {
+    'data-title': attrs.title,
+    'data-type': attrs.type
+  }, {
+    sx: blockStyles
+  }), /*#__PURE__*/React.createElement(Stack, {
+    direction: 'row',
+    alignItems: 'center',
+    gap: 2,
+    sx: blockInnerStyles
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    sx: {
+      width: '2rem',
+      height: '2rem',
+      alignSelf: 'center',
+      bgcolor: '#FFFFFF'
+    },
+    src: favicon
+  }, /*#__PURE__*/React.createElement(ChromeIcon, {
+    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, _extends({
+    component: "a",
+    href: attrs.href,
+    target: attrs.target,
+    rel: editable ? attrs.target === '_blank' ? 'noopener noreferrer' : undefined : attrs.rel
+  }, !editable && {
+    'data-title': attrs.title,
+    'data-type': attrs.type
+  }, {
+    sx: inlineStyles
+  }), editable ? /*#__PURE__*/React.createElement(Box, {
+    component: 'span',
+    sx: {
+      display: 'inline-flex',
+      alignItems: 'baseline',
+      gap: 0.5
+    }
+  }, attrs.type === 'icon' && /*#__PURE__*/React.createElement(Avatar, {
+    sx: {
+      width: '1rem',
+      height: '1rem',
+      alignSelf: 'center',
+      bgcolor: '#FFFFFF'
+    },
+    src: favicon
+  }, /*#__PURE__*/React.createElement(ChromeIcon, {
+    sx: {
+      fontSize: '1rem',
+      cursor: 'grab',
+      color: 'primary.main',
+      alignSelf: 'center',
+      ':active': {
+        cursor: 'grabbing'
+      }
+    }
+  })), attrs.title || getLinkTitle(attrs.href)) : /*#__PURE__*/React.createElement(React.Fragment, null, attrs.type === 'icon' && /*#__PURE__*/React.createElement(Avatar, {
+    sx: {
+      width: '1rem',
+      height: '1rem',
+      alignSelf: 'center',
+      bgcolor: '#FFFFFF'
+    },
+    src: favicon
+  }, /*#__PURE__*/React.createElement(ChromeIcon, {
+    sx: {
+      fontSize: '1rem',
+      cursor: 'grab',
+      color: 'primary.main',
+      alignSelf: 'center',
+      ':active': {
+        cursor: 'grabbing'
+      }
+    }
+  })), attrs.title || getLinkTitle(attrs.href))));
+};
+export default LinkContent;