Introduction

Welcome! Today, we will delve into managing a document's editing history using stacks. Imagine building a text editor; you would need to handle actions like adding text and undoing and redoing those changes. We will see how these features can be efficiently implemented using stacks. By the end of this lesson, you will possess an in-depth understanding of applying stacks in practical scenarios.

Introducing Methods

Before starting the coding portion, let's dissect the methods we will implement. These methods will manage a document's edit history, allowing us to apply changes, undo them, and redo them effectively.

  • applyChange(change): This method applies a change to the document. The change, represented as a string, is stored in a way that allows us to remember the order of applied changes. Any previously undone changes are discarded.
  • undo(): This method undoes the most recent change and allows us to store it for possible redo. It returns the change that was undone. If there are no changes available to undo, it returns null.
  • redo(): This method redoes the most recent undone change, making it active again. It returns the change that was redone. If there are no changes available to redo, it returns null.
  • getChanges(): This method returns an array of all applied changes in the order they were applied.
Methods Implementation with Stacks

To implement these methods efficiently, we'll use two stacks. Stacks are ideal for this task due to their LIFO (Last In, First Out) property, where the most recent change is always at the top, making it easy to undo and redo.

Let's break down each method's implementation and study how they interact with the stacks.

Step 1: Define the class and initialize the stacks

First, we define our class and set up the initial state with type annotations.

Here, DocumentHistory is the class, and we initialize an empty array named changesStack and another named redoStack, each explicitly typed as an array of strings (string[]). These arrays will be used to store the history of applied and undone changes, respectively.

Step 2: Implement the 'applyChange' method

Next, we implement the method to apply changes with appropriate type annotations.

With applyChange, we take the string change and push it to the changesStack array. Additionally, we clear the redoStack to ensure that once a new change is applied, any previously undone changes cannot be redone.

Step 3: Implement the 'undo' method

Now, we implement the method to undo the most recent change.

Here, undo checks if the changesStack array is empty. If it is, it returns null. Otherwise, it pops the last item from the array, simulating a stack pop operation, pushes it to the redoStack, and returns the undone change.

Step 4: Implement the 'redo' method

Now we'll create the method to redo the most recent undone change.

The redo method checks if the redoStack is empty. If it is, it returns null. Otherwise, it pops the last item from the stack, simulating a LIFO operation, pushes it back to the changesStack, and returns the redone change.

Step 5: Implement the 'getChanges' method

Lastly, we implement the method to retrieve all applied changes.

The getChanges method simply returns a copy of the changesStack array, which includes all changes applied to the document in the order they were applied. Copying the array avoids external modifications, ensuring that the original changesStack remains intact.

Example

With all the necessary methods implemented, let's test this with an example:

Summary

In today's lesson, we learned how to manage a document's editing history using stacks with TypeScript's type safety features. We implemented methods to apply changes, undo the last change, redo the most recent undone change, and retrieve all applied changes. This exercise provided us with practical experience in using stacks to efficiently track and revert operations in a real-life scenario. Keep practicing similar challenges to deepen your understanding of data structures in various applications. Fantastic job today, and keep up the good work!

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal