Analyzing VSCode - Undo / Redo

Introduction

I'm developing a service with editor-like properties at my company. One of the features to add was Undo / Redo, and while thinking about the best way to implement it, I decided to reference VSCode's implementation.

VSCode is an IDE widely used by developers, and it's also stable and open source. So I thought it would be helpful to reference the code, and I decided to analyze it this time.

Since VSCode's codebase is extremely vast, there are limitations to analyzing every detail. In this post, I'll analyze how VSCode implements Undo / Redo.

VSCode and Monaco Editor

VSCode uses a core editor component called Monaco Editor. Monaco Editor handles the actual text editing, while VSCode provides the full IDE environment that includes it.

src/vs/
├── editor/                        # Monaco Editor related code
│   └── common/                    # Common modules
│       ├── model/                 # Text model related
│       │   ├── textModel.ts       # Core text model class
│       │   └── editStack.ts       # Edit stack management
│       └── core/                  # Core functionality
│           ├── editOperation.ts   # Edit operation definitions
│           └── textChange.ts      # Text change tracking
│
├── platform/                      # VSCode's platform services
│   └── undoRedo/                  # Undo/Redo related
│       └── common/                # Common modules
│           ├── undoRedo.ts        # Interface definitions
│           └── undoRedoService.ts # Actual implementation

Monaco Editor's TextModel receives and uses VSCode's UndoRedoService through injection.

// src/vs/editor/common/model/textModel.ts
class TextModel {
  private readonly _commandManager: EditStack;

  constructor(
    /* ... */,
    @IUndoRedoService private readonly _undoRedoService: IUndoRedoService
  ) {
    this._commandManager = new EditStack(this, _undoRedoService);
  }
}

When a user edits text, the operation propagates in the following order:

This design allows operations spanning multiple files to be handled as a single unit.

Undo/Redo System Behavior

VSCode manages undo/redo operations using a past stack and a future stack respectively.

// src/vs/platform/undoRedo/common/undoRedoService.ts
class ResourceEditStack {
  private _past: StackElement[] // undo stack
  private _future: StackElement[] // redo stack

  public pushElement(element: StackElement): void {
    this._future = [] // Clear the redo stack
    this._past.push(element) // Add to the undo stack
  }
}

For example, let's say the following editing operations occur:

After typing "Hello" and then "World", they stack up in order in the past stack. When Undo is executed, "World" moves from the past stack to the future stack. If new text "New" is typed in this state, the future stack is cleared and the new operation is added to the past stack.
The reason the future stack is cleared is that when a new operation occurs after an Undo, the previous redo history is no longer valid.

Undo/Redo Execution Flow

When a user presses Ctrl+Z to execute Undo, the following process occurs:

// src/vs/platform/undoRedo/common/undoRedoService.ts
class UndoRedoService implements IUndoRedoService {
  public undo(resource: URI): void {
    const editStack = this._editStacks.get(resource)
    const element = editStack.getClosestPastElement()

    editStack.moveBackward(element) // Move from past to future
    element.undo() // Perform actual undo
  }
}

class ResourceEditStack {
  private _past: StackElement[]
  private _future: StackElement[]

  public moveBackward(element: StackElement): void {
    this._past.pop() // Remove from undo stack
    this._future.push(element) // Add to redo stack
  }

  public moveForward(element: StackElement): void {
    this._future.pop() // Remove from redo stack
    this._past.push(element) // Add to undo stack
  }
}

When element.undo() is called here, the following operations are performed in TextModel:

1. Prepare event emission (preparation for UI update)
2. Set undo/redo state
3. Apply actual text edits
4. Update text buffer
5. Update version ID (for history tracking)
6. Emit change event

Through this process, the text content reverts to its previous state and the UI is updated accordingly.
For detailed code, please refer to textModel's _doApplyEdits method.

Multi-File Support

Since VSCode is an IDE, operations spanning multiple files need to be handled as a single unit. To achieve this, it provides two types of undo elements:

// src/vs/platform/undoRedo/common/undoRedo.ts
export type IUndoRedoElement = IResourceUndoRedoElement | IWorkspaceUndoRedoElement

This distinction allows operations like batch renaming a variable across multiple files to be handled as a single Undo/Redo unit. Related issue

Conclusion

After analyzing VSCode's Undo/Redo system, it uses a stack structure to manage operation history, as expected. It tracks undo/redo operations with two stacks, past and future, maintaining consistency by clearing the redo stack when a new edit occurs.

Additionally, I was able to get a glimpse into VSCode's internal structure. There's a core editor component called Monaco Editor, and I could understand how it interacts with VSCode's services. In particular, the design that distinguishes between single-file editing and multi-file editing shows the kind of considerations VSCode made as an IDE rather than a simple editor.

Based on this analysis, I plan to implement Undo/Redo with a simple structure in the project I'm currently working on.