Q387: Code Editor Shortcut Drill Tab Indentation Alt Down and Copy Keyflows

What Interviewers Want To Evaluate

This drill tests whether you can implement small keyboard interactions carefully.

Keyboard shortcuts are easy to describe and surprisingly easy to get wrong.

The senior signal is preserving selection, supporting multiline behavior, avoiding browser conflicts, and making shortcuts discoverable without cluttering the UI.

Short Interview Answer

For editor shortcuts, I would implement a focused subset first: Tab for indentation, Shift Tab for outdent, Ctrl Enter for run, Ctrl L for clear console, and Alt Down for line duplication or movement depending on the chosen behavior. Each shortcut should preserve selection predictably, avoid breaking accessibility, and be documented near the editor.

Shortcut Principles

Good shortcuts are:

predictable
discoverable
non-destructive
consistent with editor habits
easy to undo
scoped to the editor
tested with selections

Do not add shortcuts only because they sound clever.

They should reduce repeated effort.

Tab Indentation

Single cursor:

insert two spaces at cursor
move cursor after inserted spaces
prevent default focus movement

Selected lines:

indent every selected line
preserve highlighted range
keep line endings unchanged

This is the behavior learners expect from a code editor.

Shift Tab Outdent

Outdent should:

remove two leading spaces when present
remove one tab when present
not delete normal text
work on selected lines
preserve selection as much as possible

Outdent must be conservative.

Accidental deletion feels very bad in an editor.

Alt Down Behavior

The user request says Alt + Down should copy.

That can mean duplicate the current line downward.

Define it clearly:

Alt Down duplicates the current line below
if multiple lines are selected, duplicate the selected block below
cursor remains in the duplicated copy

This is useful for practice snippets because learners often repeat log lines or cases.

Copy Buttons vs Keyboard Copy

Browser copy already exists with Ctrl C.

UI copy buttons still matter because they:

copy all code without selecting
copy all console output
work on touch devices
provide explicit feedback
reduce selection mistakes

The keyboard and button flows should complement each other.

Shortcut Hint UI

Show compact hints:

Tab indent
Shift Tab outdent
Alt Down duplicate line
Ctrl Enter run
Ctrl L clear

Use small pill-style hints.

Do not put a long instruction paragraph inside the app.

The controls should be visible but not noisy.

Accessibility Considerations

Because Tab normally moves focus, intercepting it changes keyboard navigation.

That is acceptable inside a code editor if:

the editor is clearly a code editor
other controls remain reachable
Escape or clicking outside can leave context naturally
shortcut hints exist
focus styles remain visible

Developer tools can support editor behavior while still being accessible.

Implementation Shape

A utility can handle text replacement:

input value
selection start
selection end
shortcut kind
next value
next selection start
next selection end

This keeps keyboard logic testable.

The component should not contain all string manipulation inline.

Testing Plan

Test:

Tab single cursor
Tab selected lines
Shift Tab selected lines
Alt Down single line
Alt Down selected block
Ctrl Enter run
Ctrl L clear
copy code button
copy console button

Selection tests are important.

Most editor shortcut bugs hide there.

Common Mistakes

• Handling only single cursor Tab.
• Destroying selection after indenting.
• Letting Alt Down scroll the page.
• Adding shortcuts without visible hints.
• Not testing multiline selections.
• Making copy buttons silently fail.
• Capturing shortcuts outside the editor unexpectedly.
• Forgetting touch users.

Final Mental Model

Editor shortcuts are:

small behaviors
high repetition
selection sensitive
discoverable
tested carefully

When shortcuts feel right, the tool disappears and practice gets faster.