Implement keyboard shortcuts improvements

- Add max-height and overflow-y to help dialog for scrolling on small screens
- Add Ctrl+A shortcut for selecting all nodes
- Add Reset option to menu toolbar with Ctrl+Del shortcut hint
- Show keyboard shortcut hints next to menu items (Ctrl+1-4, Ctrl+P, Ctrl+D, Ctrl+Del)
- Track mouse position to place nodes under cursor when using keyboard shortcuts
- Add selectAllNodes translation for both English and German

Co-authored-by: mikebarkmin <2592379+mikebarkmin@users.noreply.github.com>

Author: Copilot

packages/learningmap/src/EditorToolbar.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Menu, MenuButton, MenuDivider, MenuItem, SubMenu } from "@szhsin/react-menu";
 import "@szhsin/react-menu/dist/index.css";
 import '@szhsin/react-menu/dist/transitions/zoom.css';
-import { Plus, Bug, Settings, Eye, Menu as MenuI, FolderOpen, Download, ImageDown, ExternalLink, Share2 } from "lucide-react";
+import { Plus, Bug, Settings, Eye, Menu as MenuI, FolderOpen, Download, ImageDown, ExternalLink, Share2, RotateCcw } from "lucide-react";
 import { getTranslations } from "./translations";
 
 interface EditorToolbarProps {
@@ -21,6 +21,7 @@ interface EditorToolbarProps {
   onDownlad: () => void;
   onOpen: () => void;
   onShare: () => void;
+  onReset: () => void;
   language?: string;
 }
 
@@ -40,6 +41,7 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
   onDownlad,
   onOpen,
   onShare,
+  onReset,
   language = "en",
 }) => {
   const t = getTranslations(language);
@@ -48,10 +50,22 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
     <div className="editor-toolbar">
       <div className="toolbar-group">
         <Menu menuButton={<MenuButton disabled={previewMode} className="toolbar-button"><Plus size={16} /> <span className="toolbar-label">{t.nodes}</span></MenuButton>}>
-          <MenuItem onClick={() => onAddNewNode("task")}>{t.addTask}</MenuItem>
-          <MenuItem onClick={() => onAddNewNode("topic")}>{t.addTopic}</MenuItem>
-          <MenuItem onClick={() => onAddNewNode("image")}>{t.addImage}</MenuItem>
-          <MenuItem onClick={() => onAddNewNode("text")}>{t.addText}</MenuItem>
+          <MenuItem onClick={() => onAddNewNode("task")}>
+            <span>{t.addTask}</span>
+            <span style={{ marginLeft: 'auto', paddingLeft: '16px', color: '#9ca3af', fontSize: '0.875rem' }}>Ctrl+1</span>
+          </MenuItem>
+          <MenuItem onClick={() => onAddNewNode("topic")}>
+            <span>{t.addTopic}</span>
+            <span style={{ marginLeft: 'auto', paddingLeft: '16px', color: '#9ca3af', fontSize: '0.875rem' }}>Ctrl+2</span>
+          </MenuItem>
+          <MenuItem onClick={() => onAddNewNode("image")}>
+            <span>{t.addImage}</span>
+            <span style={{ marginLeft: 'auto', paddingLeft: '16px', color: '#9ca3af', fontSize: '0.875rem' }}>Ctrl+3</span>
+          </MenuItem>
+          <MenuItem onClick={() => onAddNewNode("text")}>
+            <span>{t.addText}</span>
+            <span style={{ marginLeft: 'auto', paddingLeft: '16px', color: '#9ca3af', fontSize: '0.875rem' }}>Ctrl+4</span>
+          </MenuItem>
         </Menu>
         <button disabled={previewMode} onClick={onOpenSettingsDrawer} className="toolbar-button">
           <Settings size={16} /> <span className="toolbar-label">{t.settings}</span>
@@ -69,9 +83,15 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
             <Share2 size={16} /> <span>{t.share}</span>
           </MenuItem>
           <MenuDivider />
+          <MenuItem onClick={onReset}>
+            <RotateCcw size={16} /> <span>{t.reset}</span>
+            <span style={{ marginLeft: 'auto', paddingLeft: '16px', color: '#9ca3af', fontSize: '0.875rem' }}>Ctrl+Del</span>
+          </MenuItem>
+          <MenuDivider />
           <SubMenu className={`${debugMode ? "active" : ""}`} label={<><Bug size={16} /> <span>{t.debug}</span></>}>
             <MenuItem type="checkbox" checked={debugMode} onClick={onToggleDebugMode}>
-              {t.enableDebugMode}
+              <span>{t.enableDebugMode}</span>
+              <span style={{ marginLeft: 'auto', paddingLeft: '16px', color: '#9ca3af', fontSize: '0.875rem' }}>Ctrl+D</span>
             </MenuItem>
             <MenuItem type="checkbox" checked={showCompletionNeeds} onClick={e => onSetShowCompletionNeeds(e.checked ?? false)} disabled={!debugMode}>
               {t.showCompletionNeedsEdges}
@@ -85,6 +105,7 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
           </SubMenu>
           <MenuItem onClick={onTogglePreviewMode} className={`${previewMode ? "active" : ""}`}>
             <Eye size={16} /> <span>{t.preview}</span>
+            <span style={{ marginLeft: 'auto', paddingLeft: '16px', color: '#9ca3af', fontSize: '0.875rem' }}>Ctrl+P</span>
           </MenuItem>
           <MenuDivider />
           <MenuItem href="https://openpatch.org" target="_blank" rel="noopener noreferrer">

packages/learningmap/src/LearningMapEditor.tsx

@@ -82,6 +82,7 @@ export function LearningMapEditor({
   const [settings, setSettings] = useState<Settings>(parsedRoadmap.settings);
   const [showGrid, setShowGrid] = useState(false);
   const [clipboard, setClipboard] = useState<{ nodes: Node<NodeData>[]; edges: Edge[] } | null>(null);
+  const [lastMousePosition, setLastMousePosition] = useState<{ x: number; y: number } | null>(null);
 
   // Use language from settings if available, otherwise use prop
   const effectiveLanguage = settings?.language || language;
@@ -98,6 +99,7 @@ export function LearningMapEditor({
     { action: t.shortcuts.togglePreviewMode, shortcut: "Ctrl+P" },
     { action: t.shortcuts.toggleDebugMode, shortcut: "Ctrl+D" },
     { action: t.shortcuts.selectMultipleNodes, shortcut: "Ctrl+Click or Shift+Drag" },
+    { action: t.shortcuts.selectAllNodes, shortcut: "Ctrl+A" },
     { action: t.shortcuts.showHelp, shortcut: "Ctrl+? or Help Button" },
     { action: t.shortcuts.zoomIn, shortcut: "Ctrl++" },
     { action: t.shortcuts.zoomOut, shortcut: "Ctrl+-" },
@@ -306,12 +308,16 @@ export function LearningMapEditor({
 
   const addNewNode = useCallback(
     (type: "task" | "topic" | "image" | "text") => {
-      const centerPos = screenToFlowPosition({ x: window.innerWidth / 2, y: window.innerHeight / 2 });
+      // Use last mouse position if available, otherwise use center of screen
+      const position = lastMousePosition 
+        ? screenToFlowPosition(lastMousePosition)
+        : screenToFlowPosition({ x: window.innerWidth / 2, y: window.innerHeight / 2 });
+      
       if (type === "task") {
         const newNode: Node<NodeData> = {
           id: `node${nextNodeId}`,
           type,
-          position: centerPos,
+          position,
           data: {
             label: t.newTask,
             summary: "",
@@ -324,7 +330,7 @@ export function LearningMapEditor({
         const newNode: Node<NodeData> = {
           id: `node${nextNodeId}`,
           type,
-          position: centerPos,
+          position,
           data: {
             label: t.newTopic,
             summary: "",
@@ -339,7 +345,7 @@ export function LearningMapEditor({
           id: `background-node${nextNodeId}`,
           type,
           zIndex: -2,
-          position: centerPos,
+          position,
           data: {
             src: "",
           },
@@ -350,7 +356,7 @@ export function LearningMapEditor({
         const newNode: Node<TextNodeData> = {
           id: `background-node${nextNodeId}`,
           type,
-          position: centerPos,
+          position,
           zIndex: -1,
           data: {
             text: t.backgroundTextDefault,
@@ -363,7 +369,7 @@ export function LearningMapEditor({
       }
       setSaved(false);
     },
-    [nextNodeId, screenToFlowPosition, setNodes, setSaved, t]
+    [nextNodeId, lastMousePosition, screenToFlowPosition, setNodes, setSaved, t]
   );
 
   const handleSave = useCallback(() => {
@@ -679,13 +685,28 @@ export function LearningMapEditor({
     }
   }, [setNodes, setEdges, setNextNodeId, setSaved, t]);
 
+  const handleSelectAll = useCallback(() => {
+    setSelectedNodeIds(nodes.map(n => n.id));
+  }, [nodes, setSelectedNodeIds]);
+
   const handleSelectionChange: OnSelectionChangeFunc = useCallback(
     ({ nodes: selectedNodes }) => {
       setSelectedNodeIds(selectedNodes.map(n => n.id));
     },
     [setSelectedNodeIds]
   );
 
+  // Track mouse position for node placement
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      setLastMousePosition({ x: e.clientX, y: e.clientY });
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
+
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       //save shortcut
@@ -764,7 +785,6 @@ export function LearningMapEditor({
         handleZoomToSelection();
       }
 
-      console.log(e);
       // Toggle grid shortcut
       if ((e.ctrlKey || e.metaKey) && e.code === "Backslash") {
         e.preventDefault();
@@ -790,6 +810,11 @@ export function LearningMapEditor({
         e.preventDefault();
         handlePaste();
       }
+      // Select all shortcut
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'a' && !e.shiftKey) {
+        e.preventDefault();
+        handleSelectAll();
+      }
 
       // Dismiss with Escape
       if (helpOpen && e.key === 'Escape') {
@@ -802,7 +827,7 @@ export function LearningMapEditor({
     };
   }, [handleSave, handleUndo, handleRedo, addNewNode, helpOpen, setHelpOpen, togglePreviewMode, toggleDebugMode,
     handleZoomIn, handleZoomOut, handleResetZoom, handleFitView, handleZoomToSelection, handleToggleGrid,
-    handleResetMap, handleCut, handleCopy, handlePaste]);
+    handleResetMap, handleCut, handleCopy, handlePaste, handleSelectAll]);
 
   return (
     <>
@@ -822,6 +847,7 @@ export function LearningMapEditor({
         onDownlad={handleDownload}
         onOpen={handleOpen}
         onShare={handleShare}
+        onReset={handleResetMap}
         language={effectiveLanguage}
       />
       {previewMode && <LearningMap roadmapData={roadmapState} language={effectiveLanguage} />}

packages/learningmap/src/index.css

@@ -624,6 +624,7 @@ header.drawer-header {
 dialog.help[open] {
   width: 600px;
   max-width: 90vw;
+  max-height: 90vh;
   border: none;
   border-radius: 12px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
@@ -636,6 +637,7 @@ dialog.help[open] {
   display: flex;
   flex-direction: column;
   z-index: 1000;
+  overflow-y: auto;
 
   table {
     width: 100%;

packages/learningmap/src/translations.ts

@@ -43,6 +43,7 @@ export interface Translations {
     togglePreviewMode: string;
     toggleDebugMode: string;
     selectMultipleNodes: string;
+    selectAllNodes: string;
     showHelp: string;
     zoomIn: string;
     zoomOut: string;
@@ -234,6 +235,7 @@ const en: Translations = {
     togglePreviewMode: "Toggle Preview Mode",
     toggleDebugMode: "Toggle Debug Mode",
     selectMultipleNodes: "Select Multiple Nodes",
+    selectAllNodes: "Select All Nodes",
     showHelp: "Show Help",
     zoomIn: "Zoom In",
     zoomOut: "Zoom Out",
@@ -430,6 +432,7 @@ const de: Translations = {
     togglePreviewMode: "Vorschau-Modus umschalten",
     toggleDebugMode: "Debug-Modus umschalten",
     selectMultipleNodes: "Mehrere Knoten auswählen",
+    selectAllNodes: "Alle Knoten auswählen",
     showHelp: "Hilfe anzeigen",
     zoomIn: "Vergrößern",
     zoomOut: "Verkleinern",