Q392: Editor Text Transform Drill Implementing Indent Outdent and Line Duplication

What Interviewers Want To Evaluate

This drill tests whether you can implement editor behavior without tangling UI code and string manipulation.

Indent, outdent, and duplicate-line shortcuts look small, but they require careful selection handling.

The interviewer wants to see deterministic functions, edge-case thinking, and tests around cursor positions.

Short Interview Answer

I would implement editor text transforms as pure utilities that accept the current text, selection start, selection end, and action type, then return the next text and selection range. The component should only detect keyboard events and apply the returned update. This keeps Tab, Shift Tab, and Alt Down behavior testable.

Why Pure Utilities Help

Pure text transforms are easier to:

test
reason about
reuse
debug
change later

They also keep the textarea component focused on rendering and events.

Data Model

Use:

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

type TextTransformResult = {
  value: string;
  selection: TextSelection;
};

The exact names do not matter.

The boundary matters.

Indent Single Line

Behavior:

insert two spaces at the start of current line
move cursor forward by two spaces
preserve selected text relative to indentation

If there is no selection, line-based indentation often feels better than inserting spaces at the cursor.

That matches many code editors.

Indent Selected Lines

For selected lines:

find first selected line start
find last selected line end
prefix each line with two spaces
expand selection to include added spaces

The user should still see the same logical block selected after the transform.

Outdent

Outdent should remove:

two leading spaces
or one leading tab

It should not remove normal text.

If a line has no indentation, leave it alone.

Conservative behavior avoids damaging code.

Duplicate Line

Alt Down can duplicate:

current line if no selection
selected block if selection spans text

Expected result:

original block
duplicated block below
cursor or selection moves to duplicated block

This makes repeated console examples faster.

Newline Handling

Respect existing line endings when possible:

\n
\r\n

A browser textarea usually normalizes to \n, but utilities should avoid careless assumptions if reused elsewhere.

Component Event Handling

The component should:

listen to keydown
check focused editor
prevent default only for handled shortcuts
call text transform utility
update state
restore selection after render

Selection restoration may need requestAnimationFrame or a ref after state update.

Testing Plan

Test:

indent empty line
indent middle line
indent selected block
outdent indented block
outdent mixed indentation
duplicate current line
duplicate selected block
selection after each transform

These tests are cheaper than manually testing every shortcut after each UI change.

Common Mistakes

• Performing string transforms inline inside JSX.
• Handling only the no-selection case.
• Deleting text during outdent.
• Losing selection after transform.
• Treating Alt Down as global page behavior.
• Not testing first and last line cases.
• Forgetting empty editor behavior.

Final Mental Model

Editor transforms are:

text in
selection in
action
text out
selection out

Once that model is clean, the UI becomes much easier to trust.