Implementing Undo/Redo Functionality in JavaScript

Undo/redo functionality is a common feature in many applications, allowing users to revert and reapply changes. This challenge asks you to implement a basic undo/redo system in JavaScript, enabling a user to track and manage a series of actions and easily step back or forward through them. This is a fundamental pattern useful in text editors, drawing applications, and any other interactive environment.

Problem Description

You are tasked with creating a JavaScript class called UndoRedoManager that manages a history of actions and provides methods for undoing and redoing those actions. The manager should maintain a stack of "undo" actions and a stack of "redo" actions.

What needs to be achieved:

• Create a UndoRedoManager class.
• Implement a method addAction(action) that takes an action (a function) as input and adds it to the undo stack. Executing the action should be performed immediately upon adding it.
• Implement a method undo() that, if possible, removes the last action from the undo stack, executes its inverse (if provided), and moves the action to the redo stack.
• Implement a method redo() that, if possible, removes the last action from the redo stack, executes the action, and moves it to the undo stack.
• Implement a method canUndo() that returns true if there are actions in the undo stack, and false otherwise.
• Implement a method canRedo() that returns true if there are actions in the redo stack, and false otherwise.

Key Requirements:

• Each action passed to addAction should be a function.
• Each action function should accept an undo function as its first argument. This undo function should be the inverse of the action.
• The action function should be executed immediately upon being added.
• The undo and redo methods should handle cases where there are no actions to undo or redo, respectively, without throwing errors.
• The undo and redo stacks should be managed correctly, ensuring that actions are moved between the stacks as expected.

Expected Behavior:

• addAction should execute the provided action immediately.
• undo should revert the last action and move it to the redo stack.
• redo should reapply the last undone action and move it to the undo stack.
• canUndo and canRedo should accurately reflect the state of the undo and redo stacks.

Edge Cases to Consider:

• Calling undo() or redo() when the respective stack is empty.
• Actions that don't have a clear inverse (consider how to handle these – perhaps by ignoring them or providing a default inverse).
• Multiple consecutive undo() and redo() calls.

Examples

Example 1:

Input:
let manager = new UndoRedoManager();
let action1 = (undo) => { console.log("Action 1 executed"); undo(); };
let undo1 = () => { console.log("Undo Action 1 executed"); };
action1.undo = undo1;
manager.addAction(action1);
manager.undo();
manager.redo();
Output:
// Console Output:
// Action 1 executed
// Undo Action 1 executed
// Action 1 executed

Explanation: The first action is added and executed. undo() reverses the action. redo() re-executes the action.

Example 2:

Input:
let manager = new UndoRedoManager();
let action1 = (undo) => { console.log("Action 1 executed"); undo(); };
let undo1 = () => { console.log("Undo Action 1 executed"); };
action1.undo = undo1;
manager.addAction(action1);
manager.addAction( (undo) => { console.log("Action 2 executed"); undo(); });
let undo2 = () => { console.log("Undo Action 2 executed"); };
manager.undo();
manager.undo();
manager.redo();
Output:
// Console Output:
// Action 1 executed
// Action 2 executed
// Undo Action 2 executed
// Undo Action 1 executed
// Action 1 executed

Explanation: Two actions are added and executed. Two undo() calls revert both actions. One redo() call re-executes the second action.

Example 3: (Edge Case)

Input:
let manager = new UndoRedoManager();
manager.undo();
manager.redo();
Output:
// No console output.  No errors thrown.

Explanation: Calling undo() and redo() on an empty stack should not produce any output or errors.

Constraints

• The UndoRedoManager class should be implemented in JavaScript.
• The action functions should be pure functions (no side effects other than the intended action and its inverse).
• The maximum number of actions that can be stored in the undo/redo stacks is not limited, but consider potential memory usage for very large histories.
• The action functions should be executed synchronously.

Notes

• Consider using arrays to implement the undo and redo stacks.
• The undo function is crucial for reversing the action. Ensure it's correctly associated with each action.
• Think about how to handle actions that don't have a clear inverse. You can choose to ignore them or provide a default inverse (e.g., a no-op).
• Focus on the core functionality of undo/redo. Error handling and complex UI integration are not required for this challenge.
• The undo function should be passed as an argument to the action function when addAction is called. This allows the action function to define its inverse.