Skip to main content

Undo and Redo

The Editor Starter implemnts a basic Undo and Redo feature.
It works by keeping an array of snapshots of the state of the editor in memory.

Undoable state​

State is separated into undoable and non-undoable parts. Undoable state is located within the undoableState object of the root state.

Undoable state may be:

  • Position, size and other properties of an item
  • Track position and arrangement
  • Video properties like dimensions and frame rate

Non-undoable state may be:

  • Asset upload progress
  • Zoom level
  • Captioning progress
  • Clipboard state
  • Rendering state
  • Selection state

Undo stack​

An undo stack is an array of previous states that is being kept in memory.
By default, the undo stack holds 50 states.

Whenever updating a state, you should set the commitToUndoStack property appropriately to indicate whether the state update should be committed to the undo stack.

Actions that you may not want to add to the undo stack are high-frequency state update like:

  • Dragging an item to a new position in the canvas
  • Dragging an item to a new position in the timeline
  • Trimming an item in the timeline
  • Changing a value in the inspector with the slider

In these cases, it is appropriate to only commit to the undo stack once the mouse cursor is released.

Preventing state changes​

You should prevent an unnecessary write to the undo stack when nothing has changed.
Nothing is written to the undo stack when the identity of the undoableState object has not changed.

This may require you to add additional checks to your state update functions to return the same object if nothing has changed.

Preventing an identity change
ts
export const markAsDragging = (state: EditorState, itemId: string): EditorState => {
  return changeItem(state, itemId, (item) => {
    if (item.isDragging) {
      // The item would not change, so we return the original object
      return item;
    }
    return {
      ...item,
      isDragging: true,
    };
  });
};

Undo and Redo interactions​

You can undo and redo actions:

  • by using the buttons
  • the built-in keyboard shortcuts: Ctrl + Z for undo and Ctrl + Y for redo.

This behavior is controlled by the following flags: