delete a object with delete button in keyboard

src/pages/editor/components/canvas/useKeyboardMovement.ts

@@ -3,10 +3,10 @@ import Konva from "konva";
 import { useEditorStore } from "../../store/editorStore";
 
 export const useKeyboardMovement = () => {
-  const { selectedObjectId, objects, updateObject, tool, layerRef } = useEditorStore();
+  const { selectedObjectId, objects, updateObject, deleteObject, tool, layerRef } = useEditorStore();
 
   useEffect(() => {
-    if (tool !== "select" || !selectedObjectId) {
+    if (tool !== "select") {
       return;
     }
 
@@ -16,6 +16,19 @@ export const useKeyboardMovement = () => {
         return;
       }
 
+      // Handle Delete and Backspace keys
+      if (e.key === "Delete" || e.key === "Backspace") {
+        if (selectedObjectId) {
+          e.preventDefault();
+          deleteObject(selectedObjectId);
+          return;
+        }
+      }
+
+      if (!selectedObjectId) {
+        return;
+      }
+
       const selectedObject = objects.find((obj) => obj.id === selectedObjectId);
       if (!selectedObject) return;
 
@@ -64,6 +77,6 @@ export const useKeyboardMovement = () => {
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
     };
-  }, [selectedObjectId, objects, updateObject, tool, layerRef]);
+  }, [selectedObjectId, objects, updateObject, deleteObject, tool, layerRef]);
 };