Q402: Implementation Drill Editor Shortcut Utility Functions and Selection Tests

What Interviewers Want To Evaluate

This drill tests whether you can implement editor shortcuts in a way that is maintainable.

Keyboard features become fragile when all logic is placed inside a component event handler.

The interviewer wants to see pure utilities, predictable selection handling, and tests that cover realistic editing cases.

Short Interview Answer

I would implement editor shortcuts as pure text transform functions. Each function receives the current text and selection range, then returns the next text and next selection range. The React component only maps key combinations to transforms and applies the result. This keeps Tab, Shift Tab, and Alt Down behavior testable.

Utility Boundary

Use a boundary like:

type Selection = {
  start: number;
  end: number;
};

type TransformResult = {
  value: string;
  selection: Selection;
};

Then functions:

indentSelection
outdentSelection
duplicateLineOrSelection

This gives tests a clean target.

Why Selection Matters

Shortcuts must work with:

single cursor
selected word
selected line
selected multiple lines
selection ending at line start
empty editor
first line
last line

Most editor bugs happen at selection boundaries.

Do not test only the easy case.

Indent Rules

Recommended behavior:

single cursor indents current line
selected range indents all touched lines
two spaces by default
selection expands to include inserted spaces

This feels closer to real editor behavior than inserting spaces at the cursor.

It helps when practicing snippets.

Outdent Rules

Recommended behavior:

remove up to two leading spaces
or remove one leading tab
do not remove non-space text
apply to all selected lines
preserve selection logically

Outdent should be conservative.

The user should never lose code because the shortcut guessed too aggressively.

Duplicate Rules

Alt Down:

duplicates current line when no selection
duplicates selected block when text is selected
places duplicate below original
selection moves to duplicate

This makes repeated examples faster.

It also matches the user's requested shortcut direction.

React Component Role

The component should:

detect keydown
ignore shortcuts outside editor
prevent default only when handling
call transform utility
update editor value
restore selection
run code for Ctrl Enter
clear console for Ctrl L

Keep component code readable.

Do not hide editing behavior inside deeply nested event conditions.

Selection Restoration

After state update:

store next selection
update value
request animation frame
set textarea selection range

React state updates are asynchronous.

Selection restoration should be intentional.

Testing Plan

Test utilities with:

input text
input selection
expected text
expected selection

Cases:

indent current line
indent selected block
outdent mixed block
duplicate first line
duplicate last line
duplicate selected block
empty editor

These tests make shortcut changes much safer.

Common Mistakes

• Mutating textarea value directly without state coordination.
• Testing only single-cursor Tab.
• Losing selection after every shortcut.
• Preventing Tab globally across the page.
• Outdenting actual code text.
• Mixing run and edit shortcuts in one messy handler.
• Not documenting shortcut behavior in the UI.

Final Mental Model

Shortcut implementation is:

key event
pure transform
state update
selection restore
focused tests
visible hints

When the transform layer is clean, the editor feels much more dependable.