@ctzhian/tiptap 2.13.6 → 2.13.7

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

@@ -6,5 +6,5 @@ type InsertImageProps = {
     attrs: ImageAttributes;
     updateAttributes: (attrs: ImageAttributes) => void;
 } & EditorFnProps;
-declare const InsertImage: ({ selected, attrs, updateAttributes, onUpload, onError, onValidateUrl }: InsertImageProps) => React.JSX.Element;
+declare const InsertImage: ({ selected, attrs, updateAttributes, onUpload, onUploadImgUrl, onError, onValidateUrl }: InsertImageProps) => React.JSX.Element;
 export default InsertImage;

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

@@ -24,6 +24,7 @@ var InsertImage = function InsertImage(_ref) {
     attrs = _ref.attrs,
     updateAttributes = _ref.updateAttributes,
     onUpload = _ref.onUpload,
+    onUploadImgUrl = _ref.onUploadImgUrl,
     onError = _ref.onError,
     onValidateUrl = _ref.onValidateUrl;
   var _useState = useState(attrs.src || ''),
@@ -155,7 +156,7 @@ var InsertImage = function InsertImage(_ref) {
   }();
   var handleInsertLink = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-      var validatedUrl;
+      var finalUrl, abortController;
       return _regeneratorRuntime().wrap(function _callee3$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
@@ -166,31 +167,54 @@ var InsertImage = function InsertImage(_ref) {
             return _context3.abrupt("return");
           case 2:
             _context3.prev = 2;
-            validatedUrl = editSrc.trim();
+            finalUrl = editSrc.trim();
             if (!onValidateUrl) {
               _context3.next = 8;
               break;
             }
             _context3.next = 7;
-            return Promise.resolve(onValidateUrl(validatedUrl, 'image'));
+            return Promise.resolve(onValidateUrl(finalUrl, 'image'));
           case 7:
-            validatedUrl = _context3.sent;
+            finalUrl = _context3.sent;
           case 8:
-            _context3.next = 10;
-            return updateImageAttributes(validatedUrl, editTitle.trim());
-          case 10:
+            if (!(onUploadImgUrl && (finalUrl.startsWith('http://') || finalUrl.startsWith('https://') || finalUrl.startsWith('//')))) {
+              _context3.next = 23;
+              break;
+            }
+            setUploading(true);
             handleClosePopover();
-            _context3.next = 16;
+            _context3.prev = 11;
+            abortController = new AbortController();
+            _context3.next = 15;
+            return onUploadImgUrl(finalUrl, abortController.signal);
+          case 15:
+            finalUrl = _context3.sent;
+            _context3.next = 18;
+            return updateImageAttributes(finalUrl, editTitle.trim());
+          case 18:
+            _context3.prev = 18;
+            setUploading(false);
+            return _context3.finish(18);
+          case 21:
+            _context3.next = 26;
             break;
-          case 13:
-            _context3.prev = 13;
+          case 23:
+            _context3.next = 25;
+            return updateImageAttributes(finalUrl, editTitle.trim());
+          case 25:
+            handleClosePopover();
+          case 26:
+            _context3.next = 31;
+            break;
+          case 28:
+            _context3.prev = 28;
             _context3.t0 = _context3["catch"](2);
             onError === null || onError === void 0 || onError(_context3.t0);
-          case 16:
+          case 31:
           case "end":
             return _context3.stop();
         }
-      }, _callee3, null, [[2, 13]]);
+      }, _callee3, null, [[2, 28], [11,, 18, 21]]);
     }));
     return function handleInsertLink() {
       return _ref4.apply(this, arguments);

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

@@ -77,6 +77,7 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
     deleteNode = _ref.deleteNode,
     selected = _ref.selected,
     onUpload = _ref.onUpload,
+    onUploadImgUrl = _ref.onUploadImgUrl,
     _onError = _ref.onError,
     onValidateUrl = _ref.onValidateUrl,
     getPos = _ref.getPos;
@@ -304,6 +305,7 @@ var ImageViewWrapper = function ImageViewWrapper(_ref) {
       selected: selected,
       attrs: attrs,
       onUpload: onUpload,
+      onUploadImgUrl: onUploadImgUrl,
       updateAttributes: updateAttributes,
       onError: _onError,
       onValidateUrl: onValidateUrl

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

@@ -7,6 +7,6 @@ export interface UploadProgressAttributes {
     tempId: string;
 }
 export declare const getFileIcon: (fileType: string) => React.JSX.Element;
-export declare const getFileTypeText: (fileType: string) => "图片" | "视频" | "音频" | "文件";
+export declare const getFileTypeText: (fileType: string) => "音频" | "图片" | "视频" | "文件";
 declare const UploadProgressView: React.FC<NodeViewProps>;
 export default UploadProgressView;

package/dist/extension/index.d.ts

@@ -1,2 +1,2 @@
 import { GetExtensionsProps } from '../type';
-export declare const getExtensions: ({ limit, exclude, extensions: extensionsProps, editable, mentionItems, baseUrl, onMentionFilter, onUpload, onError, onTocUpdate, onAiWritingGetSuggestion, onValidateUrl, placeholder, mermaidOptions, youtubeOptions, tableOfContentsOptions, }: GetExtensionsProps) => any;
+export declare const getExtensions: ({ limit, exclude, extensions: extensionsProps, editable, mentionItems, baseUrl, onMentionFilter, onUpload, onUploadImgUrl, onError, onTocUpdate, onAiWritingGetSuggestion, onValidateUrl, placeholder, mermaidOptions, youtubeOptions, tableOfContentsOptions, }: GetExtensionsProps) => any;

package/dist/extension/index.js

@@ -26,6 +26,7 @@ export var getExtensions = function getExtensions(_ref) {
     baseUrl = _ref$baseUrl === void 0 ? '' : _ref$baseUrl,
     onMentionFilter = _ref.onMentionFilter,
     onUpload = _ref.onUpload,
+    onUploadImgUrl = _ref.onUploadImgUrl,
     onError = _ref.onError,
     onTocUpdate = _ref.onTocUpdate,
     onAiWritingGetSuggestion = _ref.onAiWritingGetSuggestion,
@@ -76,6 +77,7 @@ export var getExtensions = function getExtensions(_ref) {
   }), ImageExtension({
     baseUrl: baseUrl,
     onUpload: onUpload,
+    onUploadImgUrl: onUploadImgUrl,
     onError: onError,
     onValidateUrl: onValidateUrl
   }), InlineAttachmentExtension({

package/dist/extension/node/Image.js

@@ -190,6 +190,7 @@ var customImage = function customImage(props) {
       return ReactNodeViewRenderer(function (renderProps) {
         return ImageViewWrapper(_objectSpread(_objectSpread({}, renderProps), {}, {
           onUpload: props.onUpload,
+          onUploadImgUrl: props.onUploadImgUrl,
           onError: props.onError,
           onValidateUrl: props.onValidateUrl
         }));
@@ -202,7 +203,7 @@ var customImage = function customImage(props) {
         props: {
           handlePaste: function handlePaste(view, event) {
             var _event$clipboardData, _event$clipboardData2, _event$clipboardData3;
-            if (!props.onUpload) return false;
+            if (!props.onUpload && !props.onUploadImgUrl) return false;
             var items = Array.from(((_event$clipboardData = event.clipboardData) === null || _event$clipboardData === void 0 ? void 0 : _event$clipboardData.items) || []);
             var imageFiles = items.map(function (item) {
               return item.getAsFile();
@@ -427,56 +428,108 @@ var customImage = function customImage(props) {
               };
             }();
 
-            // 如果没有图片文件，尝试从 HTML 中提取图片 URL 或处理文本粘贴
+            // 如果没有图片文件，尝试从 HTML 中提取图片 URL
             if (imageFiles.length === 0) {
               if (!htmlData) {
                 return false; // 没有 HTML 数据，让默认粘贴处理
               }
               var imageUrls = extractImageUrls(htmlData);
 
-              // 如果找到图片 URL，下载并处理图片
+              // 如果找到图片 URL，优先通过 onUploadImgUrl 走后端上传，否则前端下载再上传
               if (imageUrls.length > 0) {
                 event.preventDefault();
                 _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-                  var downloadedFiles, validFiles, _parsed$content2, extensions, parsed;
+                  var abortController, newUrls, modifiedHtml, _parsed$content2, extensions, parsed, _props$onError, _props$onError2, _parsed$content3, _extensions, _parsed, downloadedFiles, validFiles, _parsed2$content, _extensions2, _parsed2;
                   return _regeneratorRuntime().wrap(function _callee3$(_context3) {
                     while (1) switch (_context3.prev = _context3.next) {
                       case 0:
-                        _context3.next = 2;
+                        if (!props.onUploadImgUrl) {
+                          _context3.next = 17;
+                          break;
+                        }
+                        abortController = new AbortController();
+                        _context3.prev = 2;
+                        _context3.next = 5;
+                        return Promise.all(imageUrls.map(function (url) {
+                          return props.onUploadImgUrl(url, abortController.signal);
+                        }));
+                      case 5:
+                        newUrls = _context3.sent;
+                        modifiedHtml = htmlData;
+                        imageUrls.forEach(function (oldUrl, i) {
+                          modifiedHtml = modifiedHtml.split(oldUrl).join(newUrls[i]);
+                        });
+                        try {
+                          extensions = editor.extensionManager.extensions;
+                          parsed = generateJSON(modifiedHtml, extensions);
+                          if (parsed !== null && parsed !== void 0 && (_parsed$content2 = parsed.content) !== null && _parsed$content2 !== void 0 && _parsed$content2.length) {
+                            editor.chain().insertContentAt({
+                              from: from,
+                              to: to
+                            }, parsed).focus().run();
+                          }
+                        } catch (parseError) {
+                          console.error('[图片粘贴] 解析上传后的 HTML 失败:', parseError);
+                          (_props$onError = props.onError) === null || _props$onError === void 0 || _props$onError.call(props, parseError);
+                        }
+                        _context3.next = 16;
+                        break;
+                      case 11:
+                        _context3.prev = 11;
+                        _context3.t0 = _context3["catch"](2);
+                        console.error('[图片粘贴] URL 上传失败:', _context3.t0);
+                        (_props$onError2 = props.onError) === null || _props$onError2 === void 0 || _props$onError2.call(props, _context3.t0);
+                        try {
+                          if (htmlData) {
+                            _extensions = editor.extensionManager.extensions;
+                            _parsed = generateJSON(htmlData, _extensions);
+                            if (_parsed !== null && _parsed !== void 0 && (_parsed$content3 = _parsed.content) !== null && _parsed$content3 !== void 0 && _parsed$content3.length) {
+                              editor.chain().insertContentAt({
+                                from: from,
+                                to: to
+                              }, _parsed).focus().run();
+                            }
+                          }
+                        } catch (fallbackError) {
+                          // 解析失败则不再处理
+                        }
+                      case 16:
+                        return _context3.abrupt("return");
+                      case 17:
+                        _context3.next = 19;
                         return Promise.all(imageUrls.map(function (url, i) {
                           return downloadImageAsFile(url, i);
                         }));
-                      case 2:
+                      case 19:
                         downloadedFiles = _context3.sent;
                         validFiles = downloadedFiles.filter(function (f) {
                           return f !== null;
                         });
                         if (!(validFiles.length === 0)) {
-                          _context3.next = 7;
+                          _context3.next = 24;
                           break;
                         }
-                        // 下载失败：回退为直接粘贴原始 HTML（保留原始图片 URL）
                         try {
-                          extensions = editor.extensionManager.extensions;
-                          parsed = generateJSON(htmlData, extensions);
-                          if (parsed !== null && parsed !== void 0 && (_parsed$content2 = parsed.content) !== null && _parsed$content2 !== void 0 && _parsed$content2.length) {
+                          _extensions2 = editor.extensionManager.extensions;
+                          _parsed2 = generateJSON(htmlData, _extensions2);
+                          if (_parsed2 !== null && _parsed2 !== void 0 && (_parsed2$content = _parsed2.content) !== null && _parsed2$content !== void 0 && _parsed2$content.length) {
                             editor.chain().insertContentAt({
                               from: from,
                               to: to
-                            }, parsed).focus().run();
+                            }, _parsed2).focus().run();
                           }
-                        } catch (error) {
-                          // 解析失败则不再处理，交给默认粘贴逻辑
+                        } catch (err) {
+                          // 解析失败则不再处理
                         }
                         return _context3.abrupt("return");
-                      case 7:
-                        _context3.next = 9;
+                      case 24:
+                        _context3.next = 26;
                         return processImagePaste(validFiles, htmlData, from, to);
-                      case 9:
+                      case 26:
                       case "end":
                         return _context3.stop();
                     }
-                  }, _callee3);
+                  }, _callee3, null, [[2, 11]]);
                 }))();
                 return true;
               }
@@ -484,18 +537,20 @@ var customImage = function customImage(props) {
               // 没有图片 URL，尝试处理 HTML 或纯文本
               // 先尝试使用 generateJSON 解析 HTML
               try {
-                var _parsed$content3;
-                var extensions = editor.extensionManager.extensions;
-                var parsed = generateJSON(htmlData, extensions);
+                if (htmlData) {
+                  var _parsed$content4;
+                  var extensions = editor.extensionManager.extensions;
+                  var parsed = generateJSON(htmlData, extensions);
 
-                // 检查解析后的内容是否包含有效文本
-                if (parsed !== null && parsed !== void 0 && (_parsed$content3 = parsed.content) !== null && _parsed$content3 !== void 0 && _parsed$content3.length && hasValidTextContent(parsed.content)) {
-                  event.preventDefault();
-                  editor.chain().insertContentAt({
-                    from: from,
-                    to: to
-                  }, parsed).focus().run();
-                  return true;
+                  // 检查解析后的内容是否包含有效文本
+                  if (parsed !== null && parsed !== void 0 && (_parsed$content4 = parsed.content) !== null && _parsed$content4 !== void 0 && _parsed$content4.length && hasValidTextContent(parsed.content)) {
+                    event.preventDefault();
+                    editor.chain().insertContentAt({
+                      from: from,
+                      to: to
+                    }, parsed).focus().run();
+                    return true;
+                  }
                 }
               } catch (error) {
                 // HTML 解析失败，继续尝试纯文本
@@ -509,7 +564,9 @@ var customImage = function customImage(props) {
               return false; // 让默认粘贴处理
             }
 
-            // 有图片文件，直接处理
+            // 有图片文件，直接处理（需要 onUpload）
+            if (imageFiles.length > 0 && !props.onUpload) return false;
+
             // 如果包含表格，让默认粘贴处理
             if (htmlData !== null && htmlData !== void 0 && htmlData.trim()) {
               var htmlLower = htmlData.toLowerCase();

package/dist/hook/index.d.ts

@@ -1,4 +1,4 @@
 import { UseTiptapProps, UseTiptapReturn } from "../type";
 import { UseEditorOptions } from '@tiptap/react';
-declare const useTiptap: ({ editable, contentType, onSave, onError, onUpload, baseUrl, ...options }: UseTiptapProps & UseEditorOptions) => UseTiptapReturn;
+declare const useTiptap: ({ editable, contentType, onSave, onError, onUpload, onUploadImgUrl, baseUrl, ...options }: UseTiptapProps & UseEditorOptions) => UseTiptapReturn;
 export default useTiptap;

package/dist/hook/index.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["editable", "contentType", "onSave", "onError", "onUpload", "baseUrl"];
+var _excluded = ["editable", "contentType", "onSave", "onError", "onUpload", "onUploadImgUrl", "baseUrl"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -19,6 +19,7 @@ var useTiptap = function useTiptap(_ref) {
     onSave = _ref.onSave,
     onError = _ref.onError,
     onUpload = _ref.onUpload,
+    onUploadImgUrl = _ref.onUploadImgUrl,
     _ref$baseUrl = _ref.baseUrl,
     baseUrl = _ref$baseUrl === void 0 ? '' : _ref$baseUrl,
     options = _objectWithoutProperties(_ref, _excluded);
@@ -27,11 +28,17 @@ var useTiptap = function useTiptap(_ref) {
       return withBaseUrl(url, baseUrl);
     });
   } : undefined;
+  var handleUploadImgUrl = onUploadImgUrl ? function (url, abortSignal) {
+    return onUploadImgUrl(url, abortSignal).then(function (newUrl) {
+      return withBaseUrl(newUrl, baseUrl);
+    });
+  } : undefined;
   var extensions = getExtensions(_objectSpread({
     editable: editable,
     onError: onError,
     baseUrl: baseUrl,
-    onUpload: handleUpload
+    onUpload: handleUpload,
+    onUploadImgUrl: handleUploadImgUrl
   }, options));
   var editor = useEditor(_objectSpread(_objectSpread(_objectSpread({
     editable: editable,

package/dist/type/index.d.ts

@@ -55,6 +55,8 @@ export type ToolbarItemType = {
 export type UploadFunction = (file: File, onProgress?: (event: {
     progress: number;
 }) => void, abortSignal?: AbortSignal) => Promise<string>;
+/** 图片 URL 上传：将图片链接交由后端处理并返回新 URL，可随时通过 abortSignal 中止请求 */
+export type UploadImgUrlFunction = (url: string, abortSignal?: AbortSignal) => Promise<string>;
 export type TipType = 'error' | 'success' | 'info' | 'warning';
 export type OnTipFunction = (type: TipType, tip: string) => void;
 export type EditorProps = {
@@ -85,6 +87,10 @@ export type EditorFnProps = {
      * 上传处理
      */
     onUpload?: UploadFunction;
+    /**
+     * 图片链接上传：当为图片 URL 时，直接交由后端处理而非前端下载再上传
+     */
+    onUploadImgUrl?: UploadImgUrlFunction;
     /**
      * 目录更新
      */

package/package.json

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