@ctzhian/tiptap 3.0.0 → 3.0.2

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

@@ -13,11 +13,11 @@ 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 { ImageLineIcon } from "../../../components/Icons";
-import { Button, CircularProgress, Stack, TextField } from "@mui/material";
+import { FloatingPopover } from "../../../component/FloatingPopover";
+import { ImageLineIcon } from "../../../component/Icons";
+import { Box, Button, CircularProgress, Stack, Tab, Tabs, TextField } from "@mui/material";
 import { NodeViewWrapper } from "@tiptap/react";
 import React, { useState } from "react";
-import { InsertPopover, InsertTabsHeader, InsertTriggerCard, useInsertPopover } from "../../../editor-core/extensions/component/shared/insert-popover";
 import { getImageDimensions, getImageDimensionsFromFile } from ".";
 var InsertImage = function InsertImage(_ref) {
   var selected = _ref.selected,
@@ -39,20 +39,24 @@ var InsertImage = function InsertImage(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     insertType = _useState6[0],
     setInsertType = _useState6[1];
-  var _useState7 = useState(false),
+  var _useState7 = useState(null),
     _useState8 = _slicedToArray(_useState7, 2),
-    uploading = _useState8[0],
-    setUploading = _useState8[1];
-  var _useState9 = useState(0),
+    anchorEl = _useState8[0],
+    setAnchorEl = _useState8[1];
+  var _useState9 = useState(false),
     _useState10 = _slicedToArray(_useState9, 2),
-    uploadProgress = _useState10[0],
-    setUploadProgress = _useState10[1];
-  var _useInsertPopover = useInsertPopover(),
-    anchorEl = _useInsertPopover.anchorEl,
-    triggerRef = _useInsertPopover.triggerRef,
-    openFromEvent = _useInsertPopover.openFromEvent,
-    close = _useInsertPopover.close,
-    isOpen = _useInsertPopover.isOpen;
+    uploading = _useState10[0],
+    setUploading = _useState10[1];
+  var _useState11 = useState(0),
+    _useState12 = _slicedToArray(_useState11, 2),
+    uploadProgress = _useState12[0],
+    setUploadProgress = _useState12[1];
+  var handleShowPopover = function handleShowPopover(event) {
+    return setAnchorEl(event.currentTarget);
+  };
+  var handleClosePopover = function handleClosePopover() {
+    return setAnchorEl(null);
+  };
   var handleChangeInsertType = function handleChangeInsertType(event, newValue) {
     return setInsertType(newValue);
   };
@@ -110,7 +114,7 @@ var InsertImage = function InsertImage(_ref) {
             }
             setUploading(true);
             setUploadProgress(0);
-            close();
+            handleClosePopover();
             _context2.prev = 5;
             _context2.next = 8;
             return getImageDimensionsFromFile(file);
@@ -178,7 +182,7 @@ var InsertImage = function InsertImage(_ref) {
               break;
             }
             setUploading(true);
-            close();
+            handleClosePopover();
             _context3.prev = 11;
             abortController = new AbortController();
             _context3.next = 15;
@@ -198,7 +202,7 @@ var InsertImage = function InsertImage(_ref) {
             _context3.next = 25;
             return updateImageAttributes(finalUrl, editTitle.trim());
           case 25:
-            close();
+            handleClosePopover();
           case 26:
             _context3.next = 31;
             break;
@@ -218,26 +222,94 @@ var InsertImage = function InsertImage(_ref) {
   }();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NodeViewWrapper, {
     className: "image-wrapper"
-  }, /*#__PURE__*/React.createElement(InsertTriggerCard, {
-    ref: triggerRef,
-    icon: /*#__PURE__*/React.createElement(ImageLineIcon, {
-      sx: {
-        fontSize: '1rem',
-        flexShrink: 0
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: 'row',
+    alignItems: 'center',
+    gap: 2,
+    onClick: !uploading ? handleShowPopover : undefined,
+    sx: _objectSpread({
+      border: '1px dashed',
+      borderColor: 'divider',
+      borderRadius: 'var(--mui-shape-borderRadius)',
+      px: 2,
+      py: 1.5,
+      minWidth: 200,
+      textAlign: 'center',
+      color: 'text.secondary',
+      bgcolor: 'action.default',
+      position: 'relative',
+      overflow: 'hidden'
+    }, !uploading ? {
+      cursor: 'pointer',
+      '&:hover': {
+        bgcolor: 'action.hover'
+      },
+      '&:active': {
+        bgcolor: 'action.selected'
       }
-    }),
-    text: uploading ? '图片上传中...' : '点击此处嵌入或粘贴图片链接',
-    onClick: openFromEvent,
-    uploading: uploading,
-    uploadProgress: uploadProgress
-  })), /*#__PURE__*/React.createElement(InsertPopover, {
-    open: isOpen,
+    } : {
+      "&::before": {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        height: '100%',
+        width: "".concat(uploadProgress, "%"),
+        bgcolor: 'primary.main',
+        opacity: 0.1,
+        transition: 'width 0.3s ease'
+      }
+    })
+  }, /*#__PURE__*/React.createElement(ImageLineIcon, {
+    sx: {
+      fontSize: '1rem',
+      position: 'relative',
+      flexShrink: 0
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      fontSize: '0.875rem',
+      position: 'relative',
+      flexGrow: 1,
+      textAlign: 'left'
+    }
+  }, uploading ? '图片上传中...' : '点击此处嵌入或粘贴图片链接'), uploading && /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      fontSize: 12,
+      fontWeight: 'bold',
+      color: 'primary.main',
+      position: 'relative',
+      flexShrink: 0
+    }
+  }, uploadProgress, "%"))), /*#__PURE__*/React.createElement(FloatingPopover, {
+    open: Boolean(anchorEl),
     anchorEl: anchorEl,
-    onClose: close
-  }, /*#__PURE__*/React.createElement(InsertTabsHeader, {
+    onClose: handleClosePopover,
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    sx: {
+      width: 350,
+      borderBottom: '1px solid',
+      borderColor: 'divider'
+    }
+  }, /*#__PURE__*/React.createElement(Tabs, {
     value: insertType,
-    onChange: handleChangeInsertType
-  }), insertType === 'upload' ? /*#__PURE__*/React.createElement(Stack, {
+    onChange: handleChangeInsertType,
+    sx: {
+      borderRadius: '0 !important',
+      height: 'auto !important',
+      padding: '0 !important'
+    }
+  }, /*#__PURE__*/React.createElement(Tab, {
+    label: "\u4E0A\u4F20",
+    value: "upload"
+  }), /*#__PURE__*/React.createElement(Tab, {
+    label: "\u5D4C\u5165\u94FE\u63A5",
+    value: "link"
+  }))), insertType === 'upload' ? /*#__PURE__*/React.createElement(Stack, {
     alignItems: 'center',
     gap: 2,
     sx: {

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

@@ -1,7 +1,7 @@
 import { Box } from "@mui/material";
 import { NodeViewWrapper } from "@tiptap/react";
 import React from "react";
-import { ImageViewerItem } from "../../../components/ImageViewer";
+import { ImageViewerItem } from "../../../component/ImageViewer";
 var ReadonlyImage = function ReadonlyImage(_ref) {
   var attrs = _ref.attrs;
   return /*#__PURE__*/React.createElement(NodeViewWrapper, {

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

@@ -1,4 +1,4 @@
-import { EditorFnProps } from "../../../types";
+import { EditorFnProps } from "../../../type";
 import { NodeViewProps } from "@tiptap/react";
 import React from "react";
 export interface ImageAttributes {