Added hotkey for deleting nodes

src/web/common/components/ContextMenu/DeleteNodeMenuItem.tsx

@@ -1,3 +1,5 @@
+import { useEffect } from "react";
+
 import { ContextMenuItem } from "@/web/common/components/ContextMenu/CloseOnClickMenuItem";
 import { useSessionUser } from "@/web/common/hooks";
 import { deleteNode } from "@/web/topic/store/createDeleteActions";
@@ -8,7 +10,21 @@ export const DeleteNodeMenuItem = ({ node }: { node: Node }) => {
   const { sessionUser } = useSessionUser();
   const userCanEditTopicData = useUserCanEditTopicData(sessionUser?.username);
 
-  if (!userCanEditTopicData) return <></>;
+  useEffect(() => {
+    const handleGlobalDelete = (event: KeyboardEvent) => {
+      if (event.key === "Delete" && userCanEditTopicData) {
+        deleteNode(node.id);
+      }
+    };
+
+    window.addEventListener("keydown", handleGlobalDelete);
+
+    return () => {
+      window.removeEventListener("keydown", handleGlobalDelete);
+    };
+  }, [node.id, userCanEditTopicData]);
+
+  if (!userCanEditTopicData) return null;
 
-  return <ContextMenuItem onClick={() => deleteNode(node.id)}>Delete node</ContextMenuItem>;
+  return <ContextMenuItem onClick={() => deleteNode(node.id)}>Delete Node</ContextMenuItem>;
 };

src/web/topic/components/TopicWorkspace/TopicWorkspace.tsx

@@ -15,7 +15,7 @@ import { TourSetter } from "@/web/topic/components/TopicWorkspace/TourSetter";
 import { TutorialAnchor } from "@/web/topic/components/TopicWorkspace/TutorialAnchor";
 import { TutorialController } from "@/web/topic/components/TopicWorkspace/TutorialController";
 import { WorkspaceContext } from "@/web/topic/components/TopicWorkspace/WorkspaceContext";
-import { setScore } from "@/web/topic/store/actions";
+import { deleteGraphPart, setScore } from "@/web/topic/store/actions";
 import { playgroundUsername } from "@/web/topic/store/store";
 import { isOnPlayground } from "@/web/topic/store/utilActions";
 import { Score, possibleScores } from "@/web/topic/utils/graph";
@@ -37,11 +37,17 @@ const useWorkspaceHotkeys = (user: { username: string } | null | undefined) => {
     const [score] = hotkeysEvent.keys;
     if (!score || !possibleScores.some((s) => score === s)) return;
 
-    // seems slightly awkward that there's logic here not reused with the Score component, but hard to reuse that in a clean way
     const myUsername = isOnPlayground() ? playgroundUsername : user?.username;
     if (!userCanEditScores(myUsername, getPerspectives(), getReadonlyMode())) return;
     setScore(myUsername, selectedPart.id, score as Score);
   });
+
+  useHotkeys([hotkeys.delete || "del"], () => {
+    const selectedPart = getSelectedGraphPart();
+    if (selectedPart?.id) {
+      deleteGraphPart(selectedPart.id);
+    }
+  });
 };
 
 export const TopicWorkspace = () => {
@@ -56,7 +62,6 @@ export const TopicWorkspace = () => {
   const useSplitPanes = isLandscape && usingBigScreen;
 
   return (
-    // h-svh to force workspace to take up full height of screen
     <div className="relative flex h-svh flex-col">
       <AppHeader />
 
@@ -94,7 +99,6 @@ export const TopicWorkspace = () => {
           </WorkspaceContext.Provider>
         )}
 
-        {/* prevents body scrolling when workspace is rendered*/}
         <Global styles={{ body: { overflow: "hidden" } }} />
       </div>
 

src/web/topic/store/actions.ts

@@ -131,3 +131,23 @@ export const setGraphPartNotes = (graphPart: GraphPart, value: string) => {
 
   useTopicStore.setState(finishDraft(state), false, "setGraphPartNotes");
 };
+
+export const deleteGraphPart = (graphPartId: string) => {
+  const state = createDraft(useTopicStore.getState());
+  const foundGraphPart = findGraphPartOrThrow(graphPartId, state.nodes, state.edges);
+
+  const updatedNodes = state.nodes.filter((node) => node.id !== foundGraphPart.id);
+  const updatedEdges = state.edges.filter((edge) => 
+      edge.source !== foundGraphPart.id && edge.target !== foundGraphPart.id
+  );
+
+  useTopicStore.setState(
+      finishDraft({
+          ...state,
+          nodes: updatedNodes,
+          edges: updatedEdges
+      }),
+      false,
+      "deleteGraphPart"
+  );
+};

src/web/topic/utils/hotkeys.ts

@@ -13,4 +13,5 @@ export const hotkeys = {
   showIndicators: "Alt + i",
   zoomIn: "Ctrl + =",
   zoomOut: "Ctrl + -",
+   delete: "del",
 };