Undo/Redo

The undo feature lets you withdraw recent changes to your content as well as bring them back. You can also selectively revert past changes, not just the latest ones.

# Demo

Use the demo below to try out the undo and redo mechanism. Play around with the content. Try introducing some changes and then use the toolbar buttons to undo or redo them.

Alternatively, use the well-known keyboard shortcut Ctrl + Z (this would be Cmd + Z on Mac) for undo. For redo, you can use either Ctrl + Y or Ctrl + Shift + Z (respectively with Cmd on Mac).

Diesel locos are really useful!

Diesel locomotives waiting at a small freight station.

A diesel locomotive is one that uses a diesel engine as the prime source of power to move and pull cars.

Diesel locomotives are very popular today and can be seen working on all continents (with the exception of Antarctica, where the railway network is rather scarce). Being powerful and not requiring additional technical infrastructure like their younger siblings — the electric locomotives — diesel engines are perfect for most types of tasks.

Diesel engines can pull passenger trains, boxcars with goods, tank cars, platform wagons with wood logs, you name it. If the conditions are tough or the load is too heavy for a single diesel locomotive, a pair of engines can be used. And sometimes you can even see three or four of them if the job is exceptionally demanding.

Most national and private railway companies nowadays own or lease a multitude of diesel engines. They range from small, nimble ones used for maneuvering at railway stations to large, bulky machines utilized for the cross-continental trail.

Diesel engines also come in all shapes and colors, making up a happy useful bunch.

This demo presents a limited set of features. Visit the feature-rich editor example to see more in action.

# Additional feature information

All operations of the undo feature are remembered and organized into batches that can later be easily undone or redone. Thanks to this approach, the feature can selectively revert past changes, not just the latest ones. This allows handling asynchronous actions such as image uploads without blocking the user from editing the document in the meantime.

The selective undo is heavily used in real-time collaboration environments. In such a scenario, a specific user should only be able to revert their changes, while keeping the changes made by other users intact (unless there is an editing conflict). By omitting some changes and going down the stack, it is possible to only revert selected changes.

The feature supports both toolbar buttons and keyboard shortcuts for convenient and easy operation.

# Installation

This feature is enabled by default in all predefined builds (loaded by the Essentials plugin). The installation instructions are for developers interested in building their own, custom rich text editor or willing to configure the toolbar button.

This feature is enabled by default in all predefined builds.

To add this feature to your editor, install the @ckeditor/ckeditor5-undo package:

npm install --save @ckeditor/ckeditor5-undo

Then add the Undo plugin to your plugin list and to the toolbar:

import { Undo } from '@ckeditor/ckeditor5-undo';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // Load the plugin.
        plugins: [ Undo, /* ... */ ],

        // Display the "Undo" and "Redo" buttons in the toolbar.
        toolbar: [ 'undo', 'redo', /* ... */ ],
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

Read more about installing plugins and toolbar configuration.

# Common API

The Undo plugin is a “glue” plugin that loads the UndoEditing engine and the UndoUI features.

The UndoEditing feature registers the following commands:

The UndoCommand which can be programmatically called as undo and is used to retrieve editor history from a batch.
```
editor.execute( 'undo');
```
You can use it to retrieve changes from the latest batch, or from some previous batch (for example, changes made by a selected user in a collaborative environment):
```
editor.execute( 'undo', batchToUndo );
```
The RedoCommand is used to restore undo state from batch and is called as redo.
```
editor.execute( 'redo');
```

The UndoUI feature introduces the undo and redo buttons to the editor toolbar.

We recommend using the official CKEditor 5 inspector for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

# Contribute

The source code of the feature is available on GitHub at https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-undo.

Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.