@ctzhian/tiptap 1.11.4 → 1.12.1

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

@@ -5,14 +5,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 { FloatingPopover } from "../../../component";
-import { Attachment2Icon, CarouselViewIcon, DeleteLineIcon, DownloadLineIcon, EditBoxLineIcon, ScrollToBottomLineIcon } from "../../../component/Icons";
+import { ActionDropdown, FloatingPopover, HoverPopover } from "../../../component";
+import { CarouselViewIcon, DeleteLineIcon, DownloadLineIcon, EditLineIcon, ScrollToBottomLineIcon } from "../../../component/Icons";
 import { ToolbarItem } from "../../../component/Toolbar";
 import { Box, Button, Divider, Stack, TextField } from "@mui/material";
 import { NodeViewWrapper } from "@tiptap/react";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { AttachmentContent } from "./AttachmentContent";
 import InsertAttachment from "./Insert";
-import ReadonlyAttachment from "./Readonly";
 var AttachmentViewWrapper = function AttachmentViewWrapper(_ref) {
   var editor = _ref.editor,
     node = _ref.node,
@@ -22,7 +22,9 @@ var AttachmentViewWrapper = function AttachmentViewWrapper(_ref) {
     onUpload = _ref.onUpload,
     onError = _ref.onError,
     _ref$attachmentType = _ref.attachmentType,
-    attachmentType = _ref$attachmentType === void 0 ? 'icon' : _ref$attachmentType;
+    attachmentType = _ref$attachmentType === void 0 ? 'icon' : _ref$attachmentType,
+    getPos = _ref.getPos;
+  var isMarkdown = editor.options.contentType === 'markdown';
   var attrs = node.attrs;
   var attachmentDisplayType = attachmentType || attrs.type || 'icon';
   var _useState = useState(''),
@@ -35,28 +37,124 @@ var AttachmentViewWrapper = function AttachmentViewWrapper(_ref) {
     setExtension = _useState4[1];
   var _useState5 = useState(null),
     _useState6 = _slicedToArray(_useState5, 2),
-    opraAnchorEl = _useState6[0],
-    setOpraAnchorEl = _useState6[1];
-  var _useState7 = useState(null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    anchorEl = _useState8[0],
-    setAnchorEl = _useState8[1];
-  var handleShowOperationPopover = function handleShowOperationPopover(event) {
-    return setOpraAnchorEl(event.currentTarget);
+    anchorEl = _useState6[0],
+    setAnchorEl = _useState6[1];
+  var attachmentContentRef = useRef(null);
+  useEffect(function () {
+    var title = attrs.title || '';
+    setTitle(title.split('.').slice(0, -1).join('.'));
+    setExtension(title.split('.').pop() || '');
+  }, [attrs.title, attachmentDisplayType]);
+  var handleShowPopover = function handleShowPopover() {
+    setAnchorEl(attachmentContentRef.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);
-    } else {
-      setAnchorEl(opraAnchorEl);
+  var handleConvertAttachmentType = function handleConvertAttachmentType(newType) {
+    if (attachmentDisplayType === 'block' && newType === 'icon') {
+      var pos = getPos();
+      if (typeof pos === 'number') {
+        editor.chain().focus().deleteRange({
+          from: pos,
+          to: pos + node.nodeSize
+        }).insertContentAt(pos, {
+          type: 'inlineAttachment',
+          attrs: {
+            url: attrs.url,
+            title: attrs.title,
+            type: newType,
+            size: attrs.size
+          }
+        }).run();
+      }
+    } else if (attachmentDisplayType === 'icon' && newType === 'block') {
+      var _pos = getPos();
+      if (typeof _pos === 'number') {
+        editor.chain().focus().deleteRange({
+          from: _pos,
+          to: _pos + node.nodeSize
+        }).insertContentAt(_pos, {
+          type: 'blockAttachment',
+          attrs: {
+            url: attrs.url,
+            title: attrs.title,
+            type: newType,
+            size: attrs.size
+          }
+        }).run();
+      }
     }
   };
-  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(ToolbarItem, {
+      icon: /*#__PURE__*/React.createElement(DownloadLineIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      tip: "\u4E0B\u8F7D",
+      onClick: handleDownload
+    }), /*#__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(DeleteLineIcon, {
+        sx: {
+          fontSize: '1rem'
+        }
+      }),
+      tip: "\u5220\u9664",
+      onClick: handleDeleteAttachment
+    }), !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: "attachment-type-dropdown",
+      selected: attachmentDisplayType,
+      list: [{
+        key: 'icon',
+        label: '图标文字',
+        icon: /*#__PURE__*/React.createElement(ScrollToBottomLineIcon, {
+          sx: {
+            transform: 'rotate(90deg)',
+            fontSize: '1rem'
+          }
+        }),
+        onClick: function onClick() {
+          return handleConvertAttachmentType('icon');
+        }
+      }, {
+        key: 'block',
+        label: '卡片',
+        icon: /*#__PURE__*/React.createElement(CarouselViewIcon, {
+          sx: {
+            transform: 'rotate(90deg)',
+            fontSize: '1rem'
+          }
+        }),
+        onClick: function onClick() {
+          return handleConvertAttachmentType('block');
+        }
+      }]
+    })));
   };
   var handleSave = function handleSave() {
     updateAttributes === null || updateAttributes === void 0 || updateAttributes({
@@ -67,22 +165,27 @@ var AttachmentViewWrapper = function AttachmentViewWrapper(_ref) {
   var handleDeleteAttachment = function handleDeleteAttachment() {
     deleteNode === null || deleteNode === void 0 || deleteNode();
   };
-  var handleDownload = function handleDownload() {
+  var handleDownload = useCallback(function () {
     var a = document.createElement('a');
     a.href = attrs.url;
     a.target = '_blank';
     a.download = attrs.title;
     a.click();
     a.remove();
-  };
-  useEffect(function () {
-    var title = attrs.title || '';
-    setTitle(title.split('.').slice(0, -1).join('.'));
-    setExtension(title.split('.').pop() || '');
-  }, [attrs.title, attachmentDisplayType]);
+  }, [attrs.url, attrs.title]);
   if ((!attrs.url || attrs.url === 'error') && !editor.isEditable) {
     return null;
   }
+  if (!editor.isEditable) {
+    return /*#__PURE__*/React.createElement(NodeViewWrapper, {
+      className: "attachment-wrapper".concat(attachmentDisplayType === 'block' ? ' block-attachment-wrapper' : ''),
+      as: attachmentDisplayType === 'block' ? 'div' : 'span'
+    }, /*#__PURE__*/React.createElement(AttachmentContent, {
+      attrs: attrs,
+      type: attachmentDisplayType,
+      editable: false
+    }));
+  }
   if (!attrs.title) {
     return /*#__PURE__*/React.createElement(InsertAttachment, {
       editor: editor,
@@ -94,181 +197,21 @@ var AttachmentViewWrapper = function AttachmentViewWrapper(_ref) {
       onError: onError
     });
   }
-  if (!editor.isEditable) {
-    return /*#__PURE__*/React.createElement(ReadonlyAttachment, {
-      attrs: attrs,
-      type: attachmentDisplayType
-    });
-  }
   return /*#__PURE__*/React.createElement(NodeViewWrapper, _extends({
-    className: "attachment-wrapper".concat(attachmentDisplayType === 'block' ? ' block-attachment-wrapper' : '').concat(selected ? ' ProseMirror-selectednode' : ''),
+    className: "attachment-wrapper ".concat(attachmentDisplayType === 'block' ? 'block-attachment-wrapper' : '').concat(selected ? ' ProseMirror-selectednode' : ''),
     as: attachmentDisplayType === 'block' ? 'div' : 'span'
   }, attachmentDisplayType === 'block' ? {
     'data-drag-handle': true
-  } : {}), attachmentDisplayType === 'block' ? /*#__PURE__*/React.createElement(Stack, {
-    direction: 'row',
-    alignItems: 'center',
-    gap: 2,
-    onClick: handleShowOperationPopover,
-    sx: {
-      border: '1px solid',
-      borderColor: attrs.url === 'error' ? 'error.main' : 'divider',
-      cursor: 'pointer',
-      borderRadius: 'var(--mui-shape-borderRadius)',
-      bgcolor: 'background.paper',
-      p: 2,
-      ':hover': {
-        borderColor: attrs.url === 'error' ? 'error.main' : 'primary.main',
-        color: attrs.url === 'error' ? 'error.main' : 'primary.main'
-      }
-    }
-  }, /*#__PURE__*/React.createElement(Attachment2Icon, {
-    sx: {
-      fontSize: '2rem',
-      cursor: 'grab',
-      color: attrs.url === 'error' ? 'error.main' : '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), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      fontSize: '0.75rem',
-      color: 'text.secondary'
-    }
-  }, attrs.size))) : /*#__PURE__*/React.createElement(Box, {
-    component: 'span',
-    onClick: handleShowOperationPopover,
-    sx: {
-      color: 'primary.main',
-      textDecoration: 'none',
-      cursor: 'pointer',
-      borderRadius: 'var(--mui-shape-borderRadius)',
-      transition: 'background-color 0.2s ease',
-      ':hover': {
-        bgcolor: 'background.paper'
-      }
-    }
-  }, /*#__PURE__*/React.createElement(Box, {
-    component: 'span',
-    sx: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      gap: 0.5
-    }
-  }, /*#__PURE__*/React.createElement(Attachment2Icon, {
-    sx: {
-      fontSize: '0.875rem',
-      cursor: 'grab',
-      color: 'primary.main',
-      alignSelf: 'center',
-      ':active': {
-        cursor: 'grabbing'
-      }
-    }
-  }), attrs.title)), /*#__PURE__*/React.createElement(FloatingPopover, {
-    open: Boolean(opraAnchorEl),
-    anchorEl: opraAnchorEl,
-    onClose: handleCloseOperationPopover,
+  } : {}), /*#__PURE__*/React.createElement("div", {
+    ref: attachmentContentRef
+  }, /*#__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(DownloadLineIcon, {
-      sx: {
-        fontSize: '1rem'
-      }
-    }),
-    text: "\u4E0B\u8F7D",
-    onClick: handleDownload
-  }), /*#__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(DeleteLineIcon, {
-      sx: {
-        fontSize: '1rem'
-      }
-    }),
-    tip: "\u5220\u9664",
-    onClick: handleDeleteAttachment
-  }), /*#__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(ScrollToBottomLineIcon, {
-      sx: {
-        transform: 'rotate(90deg)',
-        fontSize: '1rem'
-      }
-    }),
-    tip: "\u56FE\u6807\u6587\u5B57\u94FE\u63A5",
-    className: attachmentDisplayType === 'icon' ? 'tool-active' : '',
-    onClick: function onClick() {
-      deleteNode === null || deleteNode === void 0 || deleteNode();
-      editor.commands.setInlineAttachment({
-        url: attrs.url,
-        title: attrs.title,
-        size: attrs.size
-      });
-      handleCloseOperationPopover();
-    }
-  }), /*#__PURE__*/React.createElement(ToolbarItem, {
-    icon: /*#__PURE__*/React.createElement(CarouselViewIcon, {
-      sx: {
-        transform: 'rotate(90deg)',
-        fontSize: '1rem'
-      }
-    }),
-    tip: "\u6458\u8981\u5361\u7247",
-    className: attachmentDisplayType === 'block' ? 'tool-active' : '',
-    onClick: function onClick() {
-      deleteNode === null || deleteNode === void 0 || deleteNode();
-      editor.commands.setBlockAttachment({
-        url: attrs.url,
-        title: attrs.title,
-        size: attrs.size
-      });
-      handleCloseOperationPopover();
-    }
+  }, /*#__PURE__*/React.createElement(AttachmentContent, {
+    attrs: attrs,
+    type: attachmentDisplayType,
+    editable: true
   }))), /*#__PURE__*/React.createElement(FloatingPopover, {
     open: Boolean(anchorEl),
     anchorEl: anchorEl,
@@ -314,6 +257,6 @@ var AttachmentViewWrapper = function AttachmentViewWrapper(_ref) {
     size: "small",
     fullWidth: true,
     onClick: handleSave
-  }, "\u4FDD\u5B58")))));
+  }, "\u4FEE\u6539\u9644\u4EF6")))));
 };
 export default AttachmentViewWrapper;

package/dist/extension/component/CodeBlock/Readonly.js

@@ -9,7 +9,7 @@ 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 { FileCopyLineIcon } from "../../../component/Icons";
-import { Box, Stack } from '@mui/material';
+import { Box, Divider, Stack } from '@mui/material';
 import { NodeViewContent, NodeViewWrapper } from '@tiptap/react';
 import React, { useCallback, useState } from 'react';
 var ReadonlyCodeBlock = function ReadonlyCodeBlock(_ref) {
@@ -30,34 +30,35 @@ var ReadonlyCodeBlock = function ReadonlyCodeBlock(_ref) {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
+            event.preventDefault();
             event.stopPropagation();
             codeText = node.textContent || '';
-            _context.prev = 2;
-            _context.next = 5;
+            _context.prev = 3;
+            _context.next = 6;
             return navigator.clipboard.writeText(codeText);
-          case 5:
+          case 6:
             setCopyText('复制成功');
             setTimeout(function () {
               setCopyText('复制');
             }, 2000);
-            _context.next = 12;
+            _context.next = 13;
             break;
-          case 9:
-            _context.prev = 9;
-            _context.t0 = _context["catch"](2);
+          case 10:
+            _context.prev = 10;
+            _context.t0 = _context["catch"](3);
             console.error('复制失败:', _context.t0);
-          case 12:
+          case 13:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[2, 9]]);
+      }, _callee, null, [[3, 10]]);
     }));
     return function (_x) {
       return _ref2.apply(this, arguments);
     };
   }(), [node]);
   return /*#__PURE__*/React.createElement(NodeViewWrapper, {
-    className: "codeblock-wrapper",
+    className: "codeblock-wrapper ".concat(selected ? 'ProseMirror-selectednode' : ''),
     "data-drag-handle": true,
     onMouseEnter: function onMouseEnter() {
       return setIsHovering(true);
@@ -71,29 +72,45 @@ var ReadonlyCodeBlock = function ReadonlyCodeBlock(_ref) {
       p: '0.75rem 1rem',
       m: 0,
       borderRadius: '6px',
-      overflow: 'hidden',
-      position: 'relative'
+      overflow: 'hidden'
     }
-  }, isHovering && /*#__PURE__*/React.createElement(Stack, {
+  }, /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
     alignItems: "center",
-    justifyContent: "flex-end",
+    justifyContent: "space-between",
+    className: "codeblock-toolbar",
     sx: {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      px: 0.5,
-      pt: 0.5,
-      zIndex: 1
+      zIndex: 1,
+      mb: 2
     }
-  }, /*#__PURE__*/React.createElement(Stack, {
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      flex: 1,
+      fontSize: '0.875rem',
+      color: 'text.auxiliary',
+      letterSpacing: '0.01rem'
+    }
+  }, attrs.title || '代码块'), isHovering && /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    gap: 0.5
+  }, /*#__PURE__*/React.createElement(Box, null, attrs.language || 'Auto'), /*#__PURE__*/React.createElement(Divider, {
+    orientation: "vertical",
+    flexItem: true,
+    sx: {
+      height: '1rem',
+      mr: 0.5,
+      ml: 1,
+      alignSelf: 'center',
+      borderColor: 'divider'
+    }
+  }), /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
     alignItems: "center",
     gap: 0.5,
     onClick: handleCopy,
     sx: {
       px: 1,
-      py: 0.5,
       borderRadius: 'var(--mui-shape-borderRadius)',
       cursor: 'pointer',
       userSelect: 'none',
@@ -110,7 +127,7 @@ var ReadonlyCodeBlock = function ReadonlyCodeBlock(_ref) {
       fontSize: '0.75rem',
       lineHeight: 1
     }
-  }, copyText))), /*#__PURE__*/React.createElement(NodeViewContent, {
+  }, copyText)))), /*#__PURE__*/React.createElement(NodeViewContent, {
     style: {
       margin: 0,
       fontSize: '0.875rem',
@@ -118,16 +135,6 @@ var ReadonlyCodeBlock = function ReadonlyCodeBlock(_ref) {
       whiteSpace: 'pre-wrap',
       wordBreak: 'break-word'
     }
-  })), attrs.title && /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      pl: 1,
-      pt: 0.5,
-      height: '1rem',
-      lineHeight: 1,
-      fontSize: '0.875rem',
-      color: 'inherit',
-      letterSpacing: '0.01rem'
-    }
-  }, attrs.title));
+  })));
 };
 export default ReadonlyCodeBlock;