@lobehub/editor 1.33.3 → 1.34.0

package/es/plugins/image/command/index.js

@@ -31,11 +31,13 @@ export function registerImageCommand(editor, handleUpload) {
       var imageNode = isBlock ? $createBlockImageNode({
         altText: file.name,
         maxWidth: maxWidth || 800,
-        src: placeholderURL
+        src: placeholderURL,
+        status: 'loading'
       }) : $createImageNode({
         altText: file.name,
         maxWidth: maxWidth || 800,
-        src: placeholderURL
+        src: placeholderURL,
+        status: 'loading'
       });
       $insertNodes([imageNode]); // Insert a zero-width space to ensure the image is not the last child
       if (!isBlock && $isRootOrShadowRoot(imageNode.getParentOrThrow())) {

package/es/plugins/image/node/basie-image-node.d.ts

@@ -6,6 +6,7 @@ export interface ImagePayload {
     key?: NodeKey;
     maxWidth?: number;
     src: string;
+    status?: 'uploaded' | 'loading' | 'error';
     width?: number;
 }
 export type SerializedImageNode = Spread<{
@@ -13,6 +14,7 @@ export type SerializedImageNode = Spread<{
     height?: number;
     maxWidth: number;
     src: string;
+    status?: 'uploaded' | 'loading' | 'error';
     width?: number;
 }, SerializedLexicalNode>;
 export declare class BaseImageNode extends DecoratorNode<any> {

package/es/plugins/image/node/block-image-node.d.ts

@@ -1,4 +1,4 @@
-import { DOMConversionMap, EditorConfig, LexicalNode } from 'lexical';
+import { DOMConversionMap, EditorConfig, LexicalNode, NodeKey } from 'lexical';
 import { BaseImageNode, ImagePayload, SerializedImageNode } from './basie-image-node';
 export declare class BlockImageNode extends BaseImageNode {
     private static _decorate;
@@ -16,9 +16,19 @@ export declare class BlockImageNode extends BaseImageNode {
     get maxWidth(): number;
     get width(): number | string;
     get height(): number | string;
+    constructor(opt: {
+        altText: string;
+        height?: 'inherit' | number;
+        key?: NodeKey;
+        maxWidth: number;
+        src: string;
+        status?: 'uploaded' | 'loading' | 'error';
+        width?: 'inherit' | number;
+    });
     isInline(): boolean;
     setMaxWidth(maxWidth: number): void;
     setWidth(width: number): void;
+    setStatus(status: 'uploaded' | 'loading' | 'error'): void;
     setUploaded(url: string): void;
     setError(message: string): void;
     static clone(node: BlockImageNode): BlockImageNode;
@@ -27,5 +37,5 @@ export declare class BlockImageNode extends BaseImageNode {
     decorate(): any;
     createDOM(config: EditorConfig): HTMLElement;
 }
-export declare function $createBlockImageNode({ altText, height, maxWidth, src, width, key, }: ImagePayload): BlockImageNode;
+export declare function $createBlockImageNode({ altText, height, maxWidth, src, width, key, status, }: ImagePayload): BlockImageNode;
 export declare function $isBlockImageNode(node: LexicalNode): node is BlockImageNode;

package/es/plugins/image/node/block-image-node.js

@@ -17,17 +17,16 @@ import { BaseImageNode } from "./basie-image-node";
 export var BlockImageNode = /*#__PURE__*/function (_BaseImageNode) {
   _inherits(BlockImageNode, _BaseImageNode);
   var _super = _createSuper(BlockImageNode);
-  function BlockImageNode() {
+  function BlockImageNode(opt) {
+    var _opt$status;
     var _this;
     _classCallCheck(this, BlockImageNode);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, opt.src, opt.altText, opt.maxWidth, opt.width, opt.height, opt.key);
     _defineProperty(_assertThisInitialized(_this), "__loading", true);
     _defineProperty(_assertThisInitialized(_this), "__status", 'uploaded');
     _defineProperty(_assertThisInitialized(_this), "__message", null);
     _defineProperty(_assertThisInitialized(_this), "__extra", null);
+    _this.__status = (_opt$status = opt.status) !== null && _opt$status !== void 0 ? _opt$status : 'uploaded';
     return _this;
   }
   _createClass(BlockImageNode, [{
@@ -87,6 +86,12 @@ export var BlockImageNode = /*#__PURE__*/function (_BaseImageNode) {
       var writable = this.getWritable();
       writable.__width = width;
     }
+  }, {
+    key: "setStatus",
+    value: function setStatus(status) {
+      var writable = this.getWritable();
+      writable.__status = status;
+    }
   }, {
     key: "setUploaded",
     value: function setUploaded(url) {
@@ -132,7 +137,15 @@ export var BlockImageNode = /*#__PURE__*/function (_BaseImageNode) {
   }, {
     key: "clone",
     value: function clone(node) {
-      return new BlockImageNode(node.__src, node.__altText, node.__maxWidth, node.__width, node.__height, node.__key);
+      return new BlockImageNode({
+        altText: node.__altText,
+        height: node.__height,
+        key: node.__key,
+        maxWidth: node.__maxWidth,
+        src: node.__src,
+        status: node.__status,
+        width: node.__width
+      });
     }
   }, {
     key: "importJSON",
@@ -141,13 +154,15 @@ export var BlockImageNode = /*#__PURE__*/function (_BaseImageNode) {
         height = serializedNode.height,
         width = serializedNode.width,
         maxWidth = serializedNode.maxWidth,
-        src = serializedNode.src;
+        src = serializedNode.src,
+        status = serializedNode.status;
       // eslint-disable-next-line @typescript-eslint/no-use-before-define
       return $createBlockImageNode({
         altText: altText,
         height: height,
         maxWidth: maxWidth,
         src: src,
+        status: status,
         width: width
       }).updateFromJSON(serializedNode);
     }
@@ -177,8 +192,17 @@ export function $createBlockImageNode(_ref) {
     maxWidth = _ref$maxWidth === void 0 ? 4200 : _ref$maxWidth,
     src = _ref.src,
     width = _ref.width,
-    key = _ref.key;
-  return $applyNodeReplacement(new BlockImageNode(src, altText, maxWidth, width, height, key));
+    key = _ref.key,
+    status = _ref.status;
+  return $applyNodeReplacement(new BlockImageNode({
+    altText: altText,
+    height: height,
+    key: key,
+    maxWidth: maxWidth,
+    src: src,
+    status: status,
+    width: width
+  }));
 }
 function $convertImageElement(domNode) {
   var img = domNode;

package/es/plugins/image/node/image-node.d.ts

@@ -1,4 +1,4 @@
-import { DOMConversionMap, LexicalNode } from 'lexical';
+import { DOMConversionMap, LexicalNode, NodeKey } from 'lexical';
 import { BaseImageNode, ImagePayload, SerializedImageNode } from './basie-image-node';
 export declare class ImageNode extends BaseImageNode {
     private static _decorate;
@@ -8,6 +8,15 @@ export declare class ImageNode extends BaseImageNode {
     private __status;
     private __message;
     private __extra;
+    constructor(opt: {
+        altText: string;
+        height?: 'inherit' | number;
+        key?: NodeKey;
+        maxWidth: number;
+        src: string;
+        status?: 'uploaded' | 'loading' | 'error';
+        width?: 'inherit' | number;
+    });
     get isLoading(): boolean;
     get status(): 'uploaded' | 'loading' | 'error';
     get message(): string | null;
@@ -17,6 +26,7 @@ export declare class ImageNode extends BaseImageNode {
     get width(): number | string;
     get height(): number | string;
     setMaxWidth(maxWidth: number): void;
+    setStatus(status: 'uploaded' | 'loading' | 'error'): void;
     setWidth(width: number): void;
     setUploaded(url: string): void;
     setError(message: string): void;
@@ -25,5 +35,5 @@ export declare class ImageNode extends BaseImageNode {
     static importDOM(): DOMConversionMap | null;
     decorate(): any;
 }
-export declare function $createImageNode({ altText, height, maxWidth, src, width, key, }: ImagePayload): ImageNode;
+export declare function $createImageNode({ altText, height, maxWidth, src, width, key, status, }: ImagePayload): ImageNode;
 export declare function $isImageNode(node: LexicalNode): node is ImageNode;

package/es/plugins/image/node/image-node.js

@@ -17,17 +17,16 @@ import { BaseImageNode } from "./basie-image-node";
 export var ImageNode = /*#__PURE__*/function (_BaseImageNode) {
   _inherits(ImageNode, _BaseImageNode);
   var _super = _createSuper(ImageNode);
-  function ImageNode() {
+  function ImageNode(opt) {
+    var _opt$status;
     var _this;
     _classCallCheck(this, ImageNode);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, opt.src, opt.altText, opt.maxWidth, opt.width, opt.height, opt.key);
     _defineProperty(_assertThisInitialized(_this), "__loading", true);
     _defineProperty(_assertThisInitialized(_this), "__status", 'uploaded');
     _defineProperty(_assertThisInitialized(_this), "__message", null);
     _defineProperty(_assertThisInitialized(_this), "__extra", null);
+    _this.__status = (_opt$status = opt.status) !== null && _opt$status !== void 0 ? _opt$status : 'uploaded';
     return _this;
   }
   _createClass(ImageNode, [{
@@ -76,6 +75,12 @@ export var ImageNode = /*#__PURE__*/function (_BaseImageNode) {
       var writable = this.getWritable();
       writable.__maxWidth = maxWidth;
     }
+  }, {
+    key: "setStatus",
+    value: function setStatus(status) {
+      var writable = this.getWritable();
+      writable.__status = status;
+    }
   }, {
     key: "setWidth",
     value: function setWidth(width) {
@@ -116,7 +121,15 @@ export var ImageNode = /*#__PURE__*/function (_BaseImageNode) {
   }, {
     key: "clone",
     value: function clone(node) {
-      return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__width, node.__height, node.__key);
+      return new ImageNode({
+        altText: node.__altText,
+        height: node.__height,
+        key: node.__key,
+        maxWidth: node.__maxWidth,
+        src: node.__src,
+        status: node.__status,
+        width: node.__width
+      });
     }
   }, {
     key: "importJSON",
@@ -125,13 +138,15 @@ export var ImageNode = /*#__PURE__*/function (_BaseImageNode) {
         height = serializedNode.height,
         width = serializedNode.width,
         maxWidth = serializedNode.maxWidth,
-        src = serializedNode.src;
+        src = serializedNode.src,
+        status = serializedNode.status;
       // eslint-disable-next-line @typescript-eslint/no-use-before-define
       return $createImageNode({
         altText: altText,
         height: height,
         maxWidth: maxWidth,
         src: src,
+        status: status,
         width: width
       }).updateFromJSON(serializedNode);
     }
@@ -161,8 +176,17 @@ export function $createImageNode(_ref) {
     maxWidth = _ref$maxWidth === void 0 ? 500 : _ref$maxWidth,
     src = _ref.src,
     width = _ref.width,
-    key = _ref.key;
-  return $applyNodeReplacement(new ImageNode(src, altText, maxWidth, width, height, key));
+    key = _ref.key,
+    status = _ref.status;
+  return $applyNodeReplacement(new ImageNode({
+    altText: altText,
+    height: height,
+    key: key,
+    maxWidth: maxWidth,
+    src: src,
+    status: status,
+    width: width
+  }));
 }
 function $convertImageElement(domNode) {
   var img = domNode;

package/es/plugins/image/plugin/index.d.ts

@@ -4,9 +4,13 @@ import { BlockImageNode } from '../node/block-image-node';
 import { ImageNode } from '../node/image-node';
 export interface ImagePluginOptions {
     defaultBlockImage?: boolean;
+    handleRehost?: (url: string) => Promise<{
+        url: string;
+    }>;
     handleUpload: (file: File) => Promise<{
         url: string;
     }>;
+    needRehost?: (url: string) => boolean;
     renderImage: (node: ImageNode | BlockImageNode) => JSX.Element | null;
     theme?: {
         blockImage?: string;

package/es/plugins/image/plugin/index.js

@@ -45,12 +45,46 @@ export var ImagePlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
   _createClass(ImagePlugin, [{
     key: "onInit",
     value: function onInit(editor) {
-      var _this$config;
+      var _this$config, _this$config2, _this$config3;
       this.register(registerImageCommand(editor, this.config.handleUpload, ((_this$config = this.config) === null || _this$config === void 0 ? void 0 : _this$config.defaultBlockImage) !== false));
       this.registerMarkdown();
       this.registerLiteXml();
       this.registerINode();
       this.registerUpload(editor);
+      if ((_this$config2 = this.config) !== null && _this$config2 !== void 0 && _this$config2.needRehost && (_this$config3 = this.config) !== null && _this$config3 !== void 0 && _this$config3.handleRehost) {
+        var needRehost = this.config.needRehost;
+        var handleRehost = this.config.handleRehost;
+        this.register(editor.registerNodeTransform(ImageNode, function (node) {
+          if (node.status === 'uploaded' && needRehost(node.src)) {
+            node.setStatus('loading');
+            handleRehost(node.src).then(function (_ref) {
+              var url = _ref.url;
+              editor.update(function () {
+                node.setUploaded(url);
+              });
+            }).catch(function () {
+              editor.update(function () {
+                node.setError('Rehost failed');
+              });
+            });
+          }
+        }));
+        this.register(editor.registerNodeTransform(BlockImageNode, function (node) {
+          if (node.status === 'uploaded' && needRehost(node.src)) {
+            node.setStatus('loading');
+            handleRehost(node.src).then(function (_ref2) {
+              var url = _ref2.url;
+              editor.update(function () {
+                node.setUploaded(url);
+              });
+            }).catch(function () {
+              editor.update(function () {
+                node.setError('Rehost failed');
+              });
+            });
+          }
+        }));
+      }
     }
   }, {
     key: "registerUpload",
@@ -61,7 +95,7 @@ export var ImagePlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
         return;
       }
       uploadService.registerUpload( /*#__PURE__*/function () {
-        var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(file, from, range) {
+        var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(file, from, range) {
           var _this2$config;
           var imageWidth;
           return _regeneratorRuntime().wrap(function _callee$(_context) {
@@ -84,7 +118,7 @@ export var ImagePlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
           }, _callee);
         }));
         return function (_x, _x2, _x3) {
-          return _ref.apply(this, arguments);
+          return _ref3.apply(this, arguments);
         };
       }(), UPLOAD_PRIORITY_HIGH);
     }
@@ -147,8 +181,8 @@ export var ImagePlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
   }, {
     key: "registerMarkdown",
     value: function registerMarkdown() {
-      var _this$config2;
-      var defaultBlockImage = ((_this$config2 = this.config) === null || _this$config2 === void 0 ? void 0 : _this$config2.defaultBlockImage) !== false;
+      var _this$config4;
+      var defaultBlockImage = ((_this$config4 = this.config) === null || _this$config4 === void 0 ? void 0 : _this$config4.defaultBlockImage) !== false;
       var markdownService = this.kernel.requireService(IMarkdownShortCutService);
       if (!markdownService) {
         return;
@@ -181,8 +215,8 @@ export var ImagePlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
       if (!service) {
         return;
       }
-      service.registerProcessNodeTree(function (_ref2) {
-        var root = _ref2.root;
+      service.registerProcessNodeTree(function (_ref4) {
+        var root = _ref4.root;
         // Process the root node
         var loopNodes = function loopNodes(node) {
           if ('children' in node && Array.isArray(node.children)) {

package/es/plugins/image/react/ReactImagePlugin.js

@@ -13,10 +13,22 @@ import { ImagePlugin } from "../plugin";
 import Image from "./components/Image";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
+var defaultUpload = function defaultUpload(file) {
+  return new Promise(function (resolve) {
+    setTimeout(function () {
+      resolve({
+        url: URL.createObjectURL(file)
+      });
+    }, 1000);
+  });
+};
 var ReactImagePlugin = function ReactImagePlugin(_ref) {
   var theme = _ref.theme,
     className = _ref.className,
-    defaultBlockImage = _ref.defaultBlockImage;
+    defaultBlockImage = _ref.defaultBlockImage,
+    handleUpload = _ref.handleUpload,
+    needRehost = _ref.needRehost,
+    handleRehost = _ref.handleRehost;
   var _useLexicalComposerCo = useLexicalComposerContext(),
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
@@ -26,15 +38,9 @@ var ReactImagePlugin = function ReactImagePlugin(_ref) {
     editor.registerPlugin(UploadPlugin);
     editor.registerPlugin(ImagePlugin, {
       defaultBlockImage: defaultBlockImage,
-      handleUpload: function handleUpload(file) {
-        return new Promise(function (resolve) {
-          setTimeout(function () {
-            resolve({
-              url: URL.createObjectURL(file)
-            });
-          }, 1000);
-        });
-      },
+      handleRehost: handleRehost,
+      handleUpload: handleUpload || defaultUpload,
+      needRehost: needRehost,
       renderImage: function renderImage(node) {
         return /*#__PURE__*/_jsx(Image, {
           className: className,

package/es/plugins/image/react/type.d.ts

@@ -1,6 +1,13 @@
 export interface ReactImagePluginProps {
     className?: string;
     defaultBlockImage?: boolean;
+    handleRehost?: (url: string) => Promise<{
+        url: string;
+    }>;
+    handleUpload?: (file: File) => Promise<{
+        url: string;
+    }>;
+    needRehost?: (url: string) => boolean;
     theme?: {
         blockImage?: string;
         image?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "1.33.3",
+  "version": "1.34.0",
   "description": "A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.",
   "keywords": [
     "lobehub",