@lobehub/editor 3.16.0 → 3.16.1

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

@@ -28,7 +28,8 @@ var ReactImagePlugin = function ReactImagePlugin(_ref) {
     defaultBlockImage = _ref.defaultBlockImage,
     handleUpload = _ref.handleUpload,
     needRehost = _ref.needRehost,
-    handleRehost = _ref.handleRehost;
+    handleRehost = _ref.handleRehost,
+    onPickFile = _ref.onPickFile;
   var _useLexicalComposerCo = useLexicalComposerContext(),
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
@@ -43,7 +44,8 @@ var ReactImagePlugin = function ReactImagePlugin(_ref) {
         return /*#__PURE__*/_jsx(Image, {
           className: className,
           handleUpload: handleUpload || defaultUpload,
-          node: node
+          node: node,
+          onPickFile: onPickFile
         });
       },
       theme: theme || styles

package/es/plugins/image/react/components/Image.d.ts

@@ -7,6 +7,7 @@ export interface ImageProps {
         url: string;
     }>;
     node: ImageNode | BlockImageNode;
+    onPickFile?: () => Promise<File | null>;
     /** Whether to show scale info when resizing. Defaults to false */
     showScaleInfo?: boolean;
 }

package/es/plugins/image/react/components/Image.js

@@ -25,7 +25,8 @@ var Image = /*#__PURE__*/memo(function (_ref) {
     className = _ref.className,
     _ref$showScaleInfo = _ref.showScaleInfo,
     showScaleInfo = _ref$showScaleInfo === void 0 ? false : _ref$showScaleInfo,
-    handleUpload = _ref.handleUpload;
+    handleUpload = _ref.handleUpload,
+    onPickFile = _ref.onPickFile;
   var _useLexicalNodeSelect = useLexicalNodeSelection(node.getKey()),
     _useLexicalNodeSelect2 = _slicedToArray(_useLexicalNodeSelect, 2),
     isSelected = _useLexicalNodeSelect2[0],
@@ -215,6 +216,7 @@ var Image = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsx(ImageEditPopover, {
     handleUpload: handleUpload,
     node: node,
+    onPickFile: onPickFile,
     children: /*#__PURE__*/_jsxs("div", {
       className: cx(styles.imageContainer, {
         loading: node.status === 'loading',

package/es/plugins/image/react/components/ImageEditPopover.d.ts

@@ -7,6 +7,11 @@ interface ImageEditPopoverProps {
         url: string;
     }>;
     node: ImageNode | BlockImageNode;
+    /**
+     * Custom file picker for environments where programmatic input.click() is blocked (e.g. Electron).
+     * When provided, this will be called instead of triggering the hidden file input.
+     */
+    onPickFile?: () => Promise<File | null>;
 }
 declare const ImageEditPopover: FC<ImageEditPopoverProps>;
 export default ImageEditPopover;

package/es/plugins/image/react/components/ImageEditPopover.js

@@ -21,7 +21,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var ImageEditPopover = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
     node = _ref.node,
-    handleUpload = _ref.handleUpload;
+    handleUpload = _ref.handleUpload,
+    onPickFile = _ref.onPickFile;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -122,6 +123,69 @@ var ImageEditPopover = /*#__PURE__*/memo(function (_ref) {
       return _ref2.apply(this, arguments);
     };
   }(), [node, handleUpload, handleClose]);
+  var handlePickFile = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+    var _file, editor, result, _editor2, _fileInputRef$current;
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          if (!onPickFile) {
+            _context2.next = 27;
+            break;
+          }
+          _context2.next = 3;
+          return onPickFile();
+        case 3:
+          _file = _context2.sent;
+          if (!(_file && handleUpload)) {
+            _context2.next = 25;
+            break;
+          }
+          handleClose();
+          setUploading(true);
+          _context2.prev = 7;
+          editor = editorRef.current;
+          if (editor) {
+            _context2.next = 11;
+            break;
+          }
+          return _context2.abrupt("return");
+        case 11:
+          editor.update(function () {
+            node.setStatus('loading');
+          });
+          _context2.next = 14;
+          return handleUpload(_file);
+        case 14:
+          result = _context2.sent;
+          editor.update(function () {
+            node.setUploaded(result.url);
+          });
+          _context2.next = 22;
+          break;
+        case 18:
+          _context2.prev = 18;
+          _context2.t0 = _context2["catch"](7);
+          _editor2 = editorRef.current;
+          if (_editor2) {
+            _editor2.update(function () {
+              node.setError('Upload failed');
+            });
+          }
+        case 22:
+          _context2.prev = 22;
+          setUploading(false);
+          return _context2.finish(22);
+        case 25:
+          _context2.next = 28;
+          break;
+        case 27:
+          (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 || _fileInputRef$current.click();
+        case 28:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2, null, [[7, 18, 22, 25]]);
+  })), [onPickFile, handleUpload, handleClose, node]);
   var content = /*#__PURE__*/_jsxs(Flexbox, {
     gap: 8,
     style: {
@@ -146,7 +210,7 @@ var ImageEditPopover = /*#__PURE__*/memo(function (_ref) {
       horizontal: true,
       justify: "flex-end",
       children: [handleUpload && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx("input", {
+        children: [!onPickFile && /*#__PURE__*/_jsx("input", {
           accept: "image/*",
           onChange: handleFileChange,
           ref: fileInputRef,
@@ -159,10 +223,7 @@ var ImageEditPopover = /*#__PURE__*/memo(function (_ref) {
             icon: UploadIcon
           }),
           loading: uploading,
-          onClick: function onClick() {
-            var _fileInputRef$current;
-            return (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 ? void 0 : _fileInputRef$current.click();
-          },
+          onClick: handlePickFile,
           size: "small",
           type: "text",
           children: t('image.replace')

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

@@ -8,6 +8,11 @@ export interface ReactImagePluginProps {
         url: string;
     }>;
     needRehost?: (url: string) => boolean;
+    /**
+     * Custom file picker for environments where programmatic input.click() is blocked (e.g. Electron).
+     * When provided, this will be called instead of triggering the hidden file input.
+     */
+    onPickFile?: () => Promise<File | null>;
     theme?: {
         blockImage?: string;
         image?: string;

package/package.json

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