Merge pull request #16 from openpatch/copilot/fix-keyboard-shortcut-issues

Fix keyboard shortcuts issues: scrolling, hints, cursor placement, and select all

Author: mikebarkmin

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

@@ -30,7 +30,7 @@ import FloatingEdge from "./FloatingEdge";
 import { EditorToolbar } from "./EditorToolbar";
 import { parseRoadmapData } from "./helper";
 import { LearningMap } from "./LearningMap";
-import { Info, Redo, Undo, RotateCw, ShieldAlert } from "lucide-react";
+import { Info, Redo, Undo, RotateCw, ShieldAlert, X } from "lucide-react";
 import useUndoable from "./useUndoable";
 import { MultiNodePanel } from "./MultiNodePanel";
 import { getTranslations } from "./translations";
@@ -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,31 @@ export function LearningMapEditor({
     }
   }, [setNodes, setEdges, setNextNodeId, setSaved, t]);
 
+  const handleSelectAll = useCallback(() => {
+    setNodes(nds => nds.map(n => ({
+      ...n,
+      selected: true,
+    })))
+  }, [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 +788,6 @@ export function LearningMapEditor({
         handleZoomToSelection();
       }
 
-      console.log(e);
       // Toggle grid shortcut
       if ((e.ctrlKey || e.metaKey) && e.code === "Backslash") {
         e.preventDefault();
@@ -790,6 +813,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 +830,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 +850,7 @@ export function LearningMapEditor({
         onDownlad={handleDownload}
         onOpen={handleOpen}
         onShare={handleShare}
+        onReset={handleResetMap}
         language={effectiveLanguage}
       />
       {previewMode && <LearningMap roadmapData={roadmapState} language={effectiveLanguage} />}
@@ -907,24 +936,33 @@ export function LearningMapEditor({
           open={helpOpen}
           onClose={() => setHelpOpen(false)}
         >
-          <h2>{t.keyboardShortcuts}</h2>
-          <table>
-            <thead>
-              <tr>
-                <th>{t.action}</th>
-                <th>{t.shortcut}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {keyboardShortcuts.map((item) => (
-                <tr key={item.action}>
-                  <td>{item.action}</td>
-                  <td>{item.shortcut}</td>
+          <header className="help-header">
+            <h2>{t.keyboardShortcuts}</h2>
+            <button className="close-button" onClick={() => setHelpOpen(false)} aria-label={t.close}>
+              <X size={20} />
+            </button>
+          </header>
+          <div className="help-content">
+            <table>
+              <thead>
+                <tr>
+                  <th>{t.action}</th>
+                  <th>{t.shortcut}</th>
                 </tr>
-              ))}
-            </tbody>
-          </table>
-          <button className="primary-button" onClick={() => setHelpOpen(false)}>{t.close}</button>
+              </thead>
+              <tbody>
+                {keyboardShortcuts.map((item) => (
+                  <tr key={item.action}>
+                    <td>{item.action}</td>
+                    <td>{item.shortcut}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <div className="help-footer">
+            <button className="primary-button" onClick={() => setHelpOpen(false)}>{t.close}</button>
+          </div>
         </dialog>
         <ShareDialog
           open={shareDialogOpen}

packages/learningmap/src/index.css

@@ -624,18 +624,44 @@ 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);
-  padding: 24px;
+  padding: 0;
   background: white;
   position: fixed;
   top: 50%;
   transform: translateY(-50%);
-  gap: 16px;
   display: flex;
   flex-direction: column;
   z-index: 1000;
+  overflow: hidden;
+
+  .help-header {
+    padding: 24px 24px 16px 24px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #e5e7eb;
+
+    h2 {
+      margin: 0;
+      font-size: 24px;
+      font-weight: 700;
+    }
+  }
+
+  .help-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px 24px;
+  }
+
+  .help-footer {
+    padding: 16px 24px 24px 24px;
+    border-top: 1px solid #e5e7eb;
+  }
 
   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",