fix: Add image button not working on iPad (#5038)

src/components/Actions.tsx

@@ -15,12 +15,7 @@ import {
 } from "../scene";
 import { SHAPES } from "../shapes";
 import { AppState, Zoom } from "../types";
-import {
+import { capitalizeString, isTransparent, setCursorForShape } from "../utils";
-  capitalizeString,
-  isTransparent,
-  setCursorForShape,
-  withBatchedUpdates,
-} from "../utils";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import { hasStrokeColor } from "../scene/comparisons";
@@ -201,41 +196,7 @@ export const ShapesSwitcher = ({
   setAppState: React.Component<any, AppState>["setState"];
   onImageAction: (data: { pointerType: PointerType | null }) => void;
   appState: AppState;
-}) => {
+}) => (
-  const onChange = withBatchedUpdates(
-    ({
-      activeToolType,
-      pointerType,
-    }: {
-      activeToolType: typeof SHAPES[number]["value"];
-      pointerType: PointerType | null;
-    }) => {
-      if (appState.activeTool.type !== activeToolType) {
-        trackEvent("toolbar", activeToolType, "ui");
-      }
-      if (!appState.penDetected && pointerType === "pen") {
-        setAppState({
-          penDetected: true,
-          penMode: true,
-        });
-      }
-      const nextActiveTool = { ...activeTool, type: activeToolType };
-      setAppState({
-        activeTool: nextActiveTool,
-        multiElement: null,
-        selectedElementIds: {},
-      });
-      setCursorForShape(canvas, {
-        ...appState,
-        activeTool: nextActiveTool,
-      });
-      if (activeToolType === "image") {
-        onImageAction({ pointerType });
-      }
-    },
-  );
-
-  return (
   <>
     {SHAPES.map(({ value, icon, key }, index) => {
       const label = t(`toolBar.${value}`);
@@ -257,17 +218,36 @@ export const ShapesSwitcher = ({
           aria-keyshortcuts={shortcut}
           data-testid={value}
           onPointerDown={({ pointerType }) => {
-              onChange({ activeToolType: value, pointerType });
+            if (!appState.penDetected && pointerType === "pen") {
+              setAppState({
+                penDetected: true,
+                penMode: true,
+              });
+            }
           }}
           onChange={({ pointerType }) => {
-              onChange({ activeToolType: value, pointerType });
+            if (appState.activeTool.type !== value) {
+              trackEvent("toolbar", value, "ui");
+            }
+            const nextActiveTool = { ...activeTool, type: value };
+            setAppState({
+              activeTool: nextActiveTool,
+              multiElement: null,
+              selectedElementIds: {},
+            });
+            setCursorForShape(canvas, {
+              ...appState,
+              activeTool: nextActiveTool,
+            });
+            if (value === "image") {
+              onImageAction({ pointerType });
+            }
           }}
         />
       );
     })}
   </>
-  );
+);
-};
 
 export const ZoomActions = ({
   renderAction,