From 6fa630c22fe4fe29884f8dd3a777050815ae5b39 Mon Sep 17 00:00:00 2001
From: ice_win_linux <860435387@qq.com>
Date: Fri, 16 Jun 2023 09:39:59 +0800
Subject: [PATCH] fix: Right-click menu insert image option doesn't work

---
 .../src/components/SheetOverlay/index.tsx     | 26 +++++++++++++++++
 .../react/src/components/Toolbar/index.tsx    | 29 +------------------
 2 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/packages/react/src/components/SheetOverlay/index.tsx b/packages/react/src/components/SheetOverlay/index.tsx
index 7690894..7390c8b 100644
--- a/packages/react/src/components/SheetOverlay/index.tsx
+++ b/packages/react/src/components/SheetOverlay/index.tsx
@@ -31,6 +31,7 @@ import {
   fixRowStyleOverflowInFreeze,
   fixColumnStyleOverflowInFreeze,
   handleKeydownForZoom,
+  insertImage,
 } from "@fortune-sheet/core";
 import _ from "lodash";
 import WorkbookContext, { SetContextOptions } from "../../context";
@@ -428,6 +429,31 @@ const SheetOverlay: React.FC = () => {
         <RowHeader />
         <ScrollBar axis="x" />
         <ScrollBar axis="y" />
+        <input
+          id="fortune-img-upload"
+          type="file"
+          accept="image/*"
+          style={{ display: "none" }}
+          onChange={(e) => {
+            const file = e.currentTarget.files?.[0];
+            if (!file) return;
+
+            const render = new FileReader();
+            render.readAsDataURL(file);
+            render.onload = (event) => {
+              if (event.target == null) return;
+              const src = event.target?.result;
+              const image = new Image();
+              image.onload = () => {
+                setContext((draftCtx) => {
+                  insertImage(draftCtx, image);
+                });
+              };
+              image.src = src as string;
+            };
+            e.currentTarget.value = "";
+          }}
+        />
         <div
           ref={refs.cellArea}
           className="fortune-cell-area"
diff --git a/packages/react/src/components/Toolbar/index.tsx b/packages/react/src/components/Toolbar/index.tsx
index 01215bc..83ad7ea 100644
--- a/packages/react/src/components/Toolbar/index.tsx
+++ b/packages/react/src/components/Toolbar/index.tsx
@@ -24,7 +24,6 @@ import {
   handleBorder,
   toolbarItemSelectedFunc,
   handleFreeze,
-  insertImage,
   showImgChooser,
   updateFormat,
   handleSort,
@@ -846,33 +845,7 @@ const Toolbar: React.FC<{
               if (context.allowEdit === false) return;
               showImgChooser();
             }}
-          >
-            <input
-              id="fortune-img-upload"
-              type="file"
-              accept="image/*"
-              style={{ display: "none" }}
-              onChange={(e) => {
-                const file = e.currentTarget.files?.[0];
-                if (!file) return;
-
-                const render = new FileReader();
-                render.readAsDataURL(file);
-                render.onload = (event) => {
-                  if (event.target == null) return;
-                  const src = event.target?.result;
-                  const image = new Image();
-                  image.onload = () => {
-                    setContext((draftCtx) => {
-                      insertImage(draftCtx, image);
-                    });
-                  };
-                  image.src = src as string;
-                };
-                e.currentTarget.value = "";
-              }}
-            />
-          </Button>
+          />
         );
       }
       if (name === "comment") {