Q411: Implementation Drill Extracting Editor Transform Utilities

What Interviewers Want To Evaluate

This drill tests whether you can move fragile editor behavior out of a component without overengineering.

The practice ground now supports indentation, outdent, duplicate line, run, clear, and copy workflows.

The next hardening step is extracting text transforms into utilities that can be tested independently.

Short Interview Answer

I would extract editor text transforms into a small utility module with pure functions for indent, outdent, and duplicate-line behavior. Each function should accept the current value and selection range, then return the next value and selection range. The React component should only map keyboard events to those utilities and restore selection after state updates.

Why Extract Now

Extraction is useful because:

shortcut behavior is selection-sensitive
manual testing is easy to miss
future snippets may reuse the editor
JS and TS pages share behavior
the component should stay readable

This is not abstraction for style.

It protects behavior that can break quietly.

Utility API

A useful shape:

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

type EditorTransform = {
  value: string;
  selection: EditorSelection;
};

Then:

indentSelection
outdentSelection
duplicateLineOrSelection

These names are plain and testable.

Component Responsibility

The component should:

read current textarea selection
detect shortcut
call transform
set code state
restore selection
run code
clear console

It should not contain all string manipulation details.

Test Cases

Cover:

empty value
single line indent
multi-line indent
single line outdent
mixed indentation outdent
duplicate current line
duplicate selected block
selection at beginning
selection at end

Selection tests should assert both text and cursor positions.

Common Mistakes

• Moving code into a utility without adding tests.
• Creating a generic editor framework too early.
• Losing selection after transforms.
• Treating tabs and spaces inconsistently.
• Ignoring selected blocks.

Final Mental Model

Editor transform extraction is:

pure behavior
selection safety
small API
focused tests
clean component

The goal is confidence, not cleverness.