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).

The purpose of writing

In the days of images and icons, the written word has significantly lost its impact. Your potential readers suffer attention deficiency — they tend to omit writing longer than a glance. This is a tough situation for anyone as it invalidates the primary purpose of writing anything.

And the primary purpose of writing is to sell. Whatever you do, it is always about selling. Not only writing, but everything is about selling. Adverts sell. TV commercials sell. Facebook posts sell. Tweets sell. This may be a product, a service, a car, or a software bundle, but also your point of view, your opinion, or your image. Even your cosplay photos on Instagram sell some idea about yourself.

This is even more obvious in the professional writing environment — we are here to sell. Whether we want to encourage people to try the new fancy frapuccinate grande turtleneck soda, convince them to exchange their old 2015 combi van model for the newest hybrid 2023 model, or want them to buy a book about the Silesian private eye — we all aim at selling.

This demo only 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');
```
It can be used to retrieve changes from the latest batch, or from some previous batch (e.g. 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.