feat: Eraser toggle to switch back to the previous tool (#4981)

* add typeBeforeEraser

* ESC to switch to lastActiveToolBeforeEraser

src/actions/actionCanvas.tsx

@@ -310,12 +310,25 @@ export const actionErase = register({
         ...appState,
         selectedElementIds: {},
         selectedGroupIds: {},
-        activeTool: { type: isEraserActive(appState) ? "selection" : "eraser" },
+        activeTool: {
+          type: isEraserActive(appState)
+            ? appState.activeTool.lastActiveToolBeforeEraser ?? "selection"
+            : "eraser",
+          lastActiveToolBeforeEraser:
+            appState.activeTool.type === "eraser" //node throws incorrect type error when using isEraserActive()
+              ? undefined
+              : appState.activeTool.type,
+        },
       },
       commitToHistory: true,
     };
   },
-  keyTest: (event) => event.key === KEYS.E,
+  keyTest: (event, appState) => {
+    return (
+      event.key === KEYS.E ||
+      (event.key === KEYS.ESCAPE && isEraserActive(appState))
+    );
+  },
   PanelComponent: ({ elements, appState, updateData, data }) => (
     <ToolButton
       type="button"

src/actions/actionFinalize.tsx

@@ -14,6 +14,7 @@ import {
   bindOrUnbindLinearElement,
 } from "../element/binding";
 import { isBindingElement } from "../element/typeChecks";
+import { isEraserActive } from "../appState";
 
 export const actionFinalize = register({
   name: "finalize",
@@ -161,11 +162,12 @@ export const actionFinalize = register({
     };
   },
   keyTest: (event, appState) =>
-    (event.key === KEYS.ESCAPE &&
+    !isEraserActive(appState) &&
+    ((event.key === KEYS.ESCAPE &&
       (appState.editingLinearElement !== null ||
         (!appState.draggingElement && appState.multiElement === null))) ||
-    ((event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
-      appState.multiElement !== null),
+      ((event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
+        appState.multiElement !== null)),
   PanelComponent: ({ appState, updateData, data }) => (
     <ToolButton
       type="button"

src/types.ts

@@ -77,7 +77,10 @@ export type AppState = {
   // (e.g. text element when typing into the input)
   editingElement: NonDeletedExcalidrawElement | null;
   editingLinearElement: LinearElementEditor | null;
-  activeTool: { type: typeof SHAPES[number]["value"] | "eraser" };
+  activeTool: {
+    type: typeof SHAPES[number]["value"] | "eraser";
+    lastActiveToolBeforeEraser?: typeof SHAPES[number]["value"];
+  };
   elementLocked: boolean;
   penMode: boolean;
   penDetected: boolean;