Undo and Redo in Blazor DocumentEditor Component
17 Oct 20251 minute to read
The Blazor Word Processor (Document Editor) automatically tracks the history of all editing actions performed in a document. This history allows users to reverse (undo) their recent actions or re-apply (redo) actions that were undone.
This functionality is enabled by default through the integrated EditorHistoryModule.
Enable or disable history
Inject the EditorHistory module into the application to enable history preservation functionality for the DocumentEditor. Refer to the following code example.
@using Syncfusion.Blazor.DocumentEditor
<SfDocumentEditorContainer @ref="container" EnableToolbar=true>
<DocumentEditorContainerEvents Created="OnLoad"></DocumentEditorContainerEvents>
</SfDocumentEditorContainer>
@code {
SfDocumentEditorContainer container;
protected void OnLoad(object args)
{
container.DocumentEditor.EnableEditorHistory = true;
}
}History preservation for a Document Editor instance can be enabled or disabled at any time using the EnableEditorHistory property. Refer to the following sample code.
documentEditor.EnableEditorHistory = true;Undo and redo
You can perform undo and redo by using CTRL+Z and CTRL+Y keyboard shortcuts. Document editor exposes API to do it programmatically.
To undo the last editing operation in document editor, refer to the following sample code.
await container.DocumentEditor.EditorHistory.UndoAsync();To redo the last undone action, refer to the following code example.
await container.DocumentEditor.EditorHistory.RedoAsync();Stack size
History of editing actions will be maintained in stack, so that the last item will be reverted first. By default, document editor limits the size of undo and redo stacks to 500 each respectively. However, you can customize this limit. Refer to the following sample code.
await container.DocumentEditor.EditorHistory.SetRedoLimitAsync(400);Explore the Blazor Word Processor example to understand how to render and configure the Document Editor.