MediumFrontend6 min read

Build an Undo/Redo Command Stack for a Text Editor

Q: Build an Undo/Redo Command Stack for a Text Editor

**Target Audience:** Engineers preparing for practical JavaScript coding interviews. **Difficulty:** Medium > **How to read this doc:** the single most commonly-missed real behavior — that performing a NEW action after an undo must genuinely clear the redo history, not preserve it as a branch — was verified directly: a redo attempted after a new action correctly failed and left the text unchanged. ## 1. The problem, restated Implement undo/redo using the real, standard Command pattern: every edit is represented as an object with its own `do()` (apply the change) and `undo()` (reverse it) methods. The system maintains two stacks — one for undo history, one for redo history — and correctly manages the interaction between them as new actions, undos, and redos occur. ## 2. Clarifying questions a strong candidate asks | Question | Why it matters | | :--- | :--- | | New action after an undo — clear redo, or branch? | Clearing is the real, standard, expected behavior in virtually every r

1.0k views

91 of 154

The problem

Problem, as an interviewer would state it: "Implement an undo/redo system for a text editor using the Command pattern — each edit is an object with do() and undo() methods, and the system needs to support a real, deep undo/redo history."

Examples:

Code

stack.execute(insertCommand("Hello", 0));
stack.undo(); // reverts the insert
stack.redo(); // re-applies it

Clarifying questions expected:

What should happen to the redo history if a NEW action is performed after an undo — is it cleared, or preserved as a branch?
Does the command need to store enough information to undo itself, or does the stack manage that separately?
Is there a maximum history depth, or unbounded?

Code / implementation expected: Yes — real, direct proof of a real sequence of inserts, undos, and redos, including the critical case of a new action correctly clearing the redo stack.

command-pattern
stack
editor

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for practical JavaScript coding interviews. Difficulty: Medium

How to read this doc: the single most commonly-missed real behavior — that performing a NEW action after an undo must genuinely clear the redo history, not preserve it as a branch — was verified directly: a redo attempted after a new action correctly failed and left the text unchanged.

1. The problem, restated

Implement undo/redo using the real, standard Command pattern: every edit is represented as an object with its own do() (apply the change) and undo() (reverse it) methods. The system maintains two stacks — one for undo history, one for redo history — and correctly manages the interaction between them as new actions, undos, and redos occur.

2. Clarifying questions a strong candidate asks

Question	Why it matters
New action after an un

The solution is hidden so you can try first

6 min read · 9 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptReal, direct proof: the undo/redo command stack correctly handles a real sequence of inserts and undos, and clears the redo history after a new action

Practice

Discussion

Other approaches, follow-ups and how it went in real interviews.

No comments yet. Share how you would answer it.

Question 91 of 154 in JavaScript coding

Keep your momentum going.

Mark this question solved to track your progress, then take the next one while it is fresh.

All JavaScript coding questions

Up nextMedium→

Async reduce utility

Continue