Editor has no 'jump to first node' or 'jump to last node' keyboard shortcut — Tab cycles one at a time, no way to jump to the ends of a long path #220

New issue

Closed

opened 2026-10-04 00:05:07 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 00:05:07 +00:00

Owner

Finding

src/pages/Editor.tsx's handleTab (line 845) cycles nodes within a path one at a time:

const nextIndex = (tabIndex + 1) % nodes.length;
setTabIndex(nextIndex);
setSelectedNodeIds([nodes[nextIndex].id]);

There are no shortcuts to jump to the first or last node of a path. A user with a 30-node path has to press Tab 30 times to reach the last node.

grep -n 'jumpTo\|firstNode\|lastNode' src/components/editor/useKeyboardShortcuts.ts returns 0 matches.

Home and End are the standard keyboard shortcuts in any text editor and most vector editors:

Home → first node of the path
End → last node of the path
Cmd+Home → first node of the design (across all paths)
Cmd+End → last node of the design

Where

Tab handler: src/pages/Editor.tsx:845 (handleTab)
No jump-to-ends: grep -n 'jumpToFirst\|jumpToLast' src/components/editor/ returns 0
Keyboard hook: src/components/editor/useKeyboardShortcuts.ts (no Home/End binding)

Suggested fix shape

Add to the keyboard hook:

// Home — first node of the selected path
if (e.key === 'Home' && !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey) {
  const path = paths.find((p) => p.id === selectedPathId) ?? paths[0];
  if (path && path.nodes.length > 0) {
    e.preventDefault();
    setTabIndex(0);
    setSelectedNodeIds([path.nodes[0].id]);
    return;
  }
}

// End — last node of the selected path
if (e.key === 'End' && !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey) {
  const path = paths.find((p) => p.id === selectedPathId) ?? paths[0];
  if (path && path.nodes.length > 0) {
    e.preventDefault();
    const lastIndex = path.nodes.length - 1;
    setTabIndex(lastIndex);
    setSelectedNodeIds([path.nodes[lastIndex].id]);
    return;
  }
}

The hook should:

Not fire when a text input is focused (per the existing target instanceof HTMLInputElement check)
Update the canvas's tab index so subsequent Tab presses continue from the new position
Optionally: also jump across paths (e.g., End from the last node of path 3 → first node of path 4) — but this is a larger change and should be a separate issue

Severity

Low. The user can step with Tab. Power users with long paths want to jump.

Discovered by

Gap analysis (2026-10-02) of editor keyboard navigation.

#194 (open) — Editor path cycle. Home/End within a path is a sibling; the path cycle is across paths.
#201 (open) — Editor path list arrow keys. Same family.
#178 (open) — Help page documents zero editor shortcuts. The Home/End binding is one to add.

## Finding `src/pages/Editor.tsx`'s `handleTab` (line 845) cycles nodes within a path one at a time: ```ts const nextIndex = (tabIndex + 1) % nodes.length; setTabIndex(nextIndex); setSelectedNodeIds([nodes[nextIndex].id]); ``` There are no shortcuts to jump to the first or last node of a path. A user with a 30-node path has to press Tab 30 times to reach the last node. `grep -n 'jumpTo\|firstNode\|lastNode' src/components/editor/useKeyboardShortcuts.ts` returns 0 matches. `Home` and `End` are the standard keyboard shortcuts in any text editor and most vector editors: - `Home` → first node of the path - `End` → last node of the path - `Cmd+Home` → first node of the design (across all paths) - `Cmd+End` → last node of the design ## Where - Tab handler: `src/pages/Editor.tsx:845` (`handleTab`) - No jump-to-ends: `grep -n 'jumpToFirst\|jumpToLast' src/components/editor/` returns 0 - Keyboard hook: `src/components/editor/useKeyboardShortcuts.ts` (no Home/End binding) ## Suggested fix shape Add to the keyboard hook: ```ts // Home — first node of the selected path if (e.key === 'Home' && !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey) { const path = paths.find((p) => p.id === selectedPathId) ?? paths[0]; if (path && path.nodes.length > 0) { e.preventDefault(); setTabIndex(0); setSelectedNodeIds([path.nodes[0].id]); return; } } // End — last node of the selected path if (e.key === 'End' && !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey) { const path = paths.find((p) => p.id === selectedPathId) ?? paths[0]; if (path && path.nodes.length > 0) { e.preventDefault(); const lastIndex = path.nodes.length - 1; setTabIndex(lastIndex); setSelectedNodeIds([path.nodes[lastIndex].id]); return; } } ``` The hook should: - Not fire when a text input is focused (per the existing `target instanceof HTMLInputElement` check) - Update the canvas's tab index so subsequent Tab presses continue from the new position - Optionally: also jump across paths (e.g., `End` from the last node of path 3 → first node of path 4) — but this is a larger change and should be a separate issue ## Severity Low. The user can step with Tab. Power users with long paths want to jump. ## Discovered by Gap analysis (2026-10-02) of editor keyboard navigation. ## Related - #194 (open) — Editor path cycle. Home/End within a path is a sibling; the path cycle is across paths. - #201 (open) — Editor path list arrow keys. Same family. - #178 (open) — Help page documents zero editor shortcuts. The Home/End binding is one to add.

Mark added the

feature-request

triage-approved

labels

2026-10-04 00:05:08 +00:00

Mark referenced this issue from a commit

2026-10-04 04:47:44 +00:00

feat(#220): Editor Home/End jumps to first/last node of selected path

Mark commented

2026-10-04 04:47:47 +00:00

Author

Owner

Shipped in commit 9220d22 on origin/main. Editor now responds to:

Home → first node of the selected path
End → last node of the selected path

Falls back to paths[0] when nothing is selected (matches Tab). Modifier-free chord (no Cmd/Ctrl/Alt/Shift) so it does not collide with browser/system shortcuts; Cmd+Home / Cmd+End are reserved for the cross-design jump tracked separately. Tab and Home/End share the same handler pattern, so tabIndex updates and subsequent Tab presses continue from the new position.

Help page updated. 33 hook tests pass (8 new), 1084 total pass, lint + vite build clean.

Shipped in commit 9220d22 on origin/main. Editor now responds to: - Home → first node of the selected path - End → last node of the selected path Falls back to paths[0] when nothing is selected (matches Tab). Modifier-free chord (no Cmd/Ctrl/Alt/Shift) so it does not collide with browser/system shortcuts; Cmd+Home / Cmd+End are reserved for the cross-design jump tracked separately. Tab and Home/End share the same handler pattern, so tabIndex updates and subsequent Tab presses continue from the new position. Help page updated. 33 hook tests pass (8 new), 1084 total pass, lint + vite build clean.

Mark closed this issue

2026-10-04 04:47:50 +00:00