Implementing Undo/Redo Functionality in an Angular Text Editor

This challenge focuses on building a robust undo/redo system for a simple text editor component in Angular. Implementing undo/redo is crucial for user experience, allowing them to easily correct mistakes or revert to previous states of their work. You will need to manage the history of changes and provide the mechanisms to navigate through it.

Problem Description

You are tasked with creating an Angular component that simulates a basic text editor with undo and redo capabilities. The component should display a textarea where a user can input text. As the user types, each significant change to the text should be recorded. The component must provide buttons or methods to perform "undo" and "redo" operations.

Key Requirements:

State Management: Maintain a history of the text editor's states.
Undo Operation: Revert the text editor to its previous state.
Redo Operation: Reapply a state that was previously undone.
User Interface: Provide clear ways to trigger undo and redo (e.g., buttons, keyboard shortcuts). For this challenge, focus on implementing the logic, and assume UI elements will call the appropriate methods.
Change Granularity: Decide what constitutes a "change" that should be pushed to the history. For simplicity, consider each blur event (when the textarea loses focus) as a point to save the state. More advanced implementations might consider character-by-character or word-by-word changes.

Expected Behavior:

When the user types in the textarea, the current text is not immediately saved to history.
When the textarea loses focus (blur event), the current text is saved as a new state in the history.
Clicking "Undo" should revert the textarea's content to the last saved state. If there are no previous states, undo should do nothing.
Clicking "Redo" should reapply the most recently undone state. If there are no undone states, redo should do nothing.
Performing an undo operation should enable the redo capability for the undone state.
Typing new text after performing an undo operation should clear the redo history, preventing users from redoing states that are no longer relevant to the current editing flow.

Edge Cases:

Performing undo/redo when the history is empty.
Performing undo multiple times, then typing, and then trying to redo.
Initial state of the editor.

Examples

Example 1:

Initial State: Textarea is empty.
User Input: Types "Hello".
Blur Event: State "Hello" is saved.
User Input: Types " World". Textarea now shows "Hello World".
Blur Event: State "Hello World" is saved.
User Action: Clicks "Undo".
Expected Output: Textarea shows "Hello". The redo history now contains "Hello World".
Explanation: The last saved state ("Hello World") was undone, reverting to the previous state ("Hello").

Example 2:

Continuing from Example 1: Textarea shows "Hello". Redo history contains "Hello World".
User Action: Clicks "Redo".
Expected Output: Textarea shows "Hello World".
Explanation: The undone state ("Hello World") is reapplied.

Example 3:

Continuing from Example 2: Textarea shows "Hello World". Redo history is empty.
User Input: Types " and Angular". Textarea now shows "Hello World and Angular".
Blur Event: State "Hello World and Angular" is saved.
User Action: Clicks "Undo".
Expected Output: Textarea shows "Hello World".
Explanation: The state "Hello World and Angular" is undone. The redo history is now cleared because new edits were made after the previous undo.

Constraints

The undo/redo history should store a maximum of 100 states.
The input to the editor component will be plain text.
The component should be implemented using Angular, TypeScript, and RxJS for managing state changes if desired.

Notes

Consider using an array to store the history of text states. You'll need pointers or indices to track the current position within this history.
Think about how to manage the "undo stack" and the "redo stack" (or a single stack with careful management).
The blur event is a good starting point for saving states, but you might consider other triggers for more advanced implementations.
When a new change is made after an undo, ensure the redo history is reset. This is standard behavior in most applications.

Implementing Undo/Redo Functionality in an Angular Text Editor

Problem Description

Key Requirements:

State Management: Maintain a history of the text editor's states.

Undo Operation: Revert the text editor to its previous state.

Redo Operation: Reapply a state that was previously undone.

User Interface: Provide clear ways to trigger undo and redo (e.g., buttons, keyboard shortcuts). For this challenge, focus on implementing the logic, and assume UI elements will call the appropriate methods.

Change Granularity: Decide what constitutes a "change" that should be pushed to the history. For simplicity, consider each blur event (when the textarea loses focus) as a point to save the state. More advanced implementations might consider character-by-character or word-by-word changes.

Expected Behavior:

When the user types in the textarea, the current text is not immediately saved to history.

When the textarea loses focus (blur event), the current text is saved as a new state in the history.

Clicking "Undo" should revert the textarea's content to the last saved state. If there are no previous states, undo should do nothing.

Clicking "Redo" should reapply the most recently undone state. If there are no undone states, redo should do nothing.

Performing an undo operation should enable the redo capability for the undone state.

Typing new text after performing an undo operation should clear the redo history, preventing users from redoing states that are no longer relevant to the current editing flow.

Edge Cases:

Performing undo/redo when the history is empty.

Performing undo multiple times, then typing, and then trying to redo.

Initial state of the editor.

Examples

Example 1:

Initial State: Textarea is empty.

User Input: Types "Hello".

Blur Event: State "Hello" is saved.

User Input: Types " World". Textarea now shows "Hello World".

Blur Event: State "Hello World" is saved.

User Action: Clicks "Undo".

Expected Output: Textarea shows "Hello". The redo history now contains "Hello World".

Explanation: The last saved state ("Hello World") was undone, reverting to the previous state ("Hello").

Example 2:

Continuing from Example 1: Textarea shows "Hello". Redo history contains "Hello World".

User Action: Clicks "Redo".

Expected Output: Textarea shows "Hello World".

Explanation: The undone state ("Hello World") is reapplied.

Example 3:

Continuing from Example 2: Textarea shows "Hello World". Redo history is empty.

User Input: Types " and Angular". Textarea now shows "Hello World and Angular".

Blur Event: State "Hello World and Angular" is saved.

User Action: Clicks "Undo".

Expected Output: Textarea shows "Hello World".

Explanation: The state "Hello World and Angular" is undone. The redo history is now cleared because new edits were made after the previous undo.

Notes

Consider using an array to store the history of text states. You'll need pointers or indices to track the current position within this history.

Think about how to manage the "undo stack" and the "redo stack" (or a single stack with careful management).

The blur event is a good starting point for saving states, but you might consider other triggers for more advanced implementations.

When a new change is made after an undo, ensure the redo history is reset. This is standard behavior in most applications.