Undo redo in ASP.NET CORE Block Editor control

1 Jul 20256 minutes to read

The undo/redo feature in Block Editor enables users to revert or reapply changes made to the content, offering a safety net for edits and enhancing the overall editing experience.

Keyboard shortcuts

Action Windows Mac Description
Undo Ctrl + Z ⌘ + Z Reverts the last action.
Redo Ctrl + Y ⌘ + Y Reapplies the last undone action.

Configuring Undo/Redo stack

Block Editor allows up to 30 Undo/Redo actions by default. You can modify the number of undo/redo steps using the undoRedoStack property.

@using Syncfusion.EJ2.BlockEditor

<div id='blockeditor-container'>
    <ejs-blockeditor id="block-editor" undoRedoStack="20">
        <e-blocks>
            @foreach (var block in ViewBag.BlocksData)
            {
                <e-block id="@block.Id" type="@block.Type.ToString()" content="@block.Content"></e-block>
            }
        </e-blocks>
    </ejs-blockeditor>
</div>

<style>
    #blockeditor-container {
        margin: 20px auto;
    }
</style>
using Syncfusion.EJ2.BlockEditor;

public List<Block> BlocksData { get; set; } = new List<Block>();

public ActionResult UndoRedo()
{
        BlocksData.Add(new Block() {
                Id = "block-1",
                Type = BlockType.Heading,
                Props = new { level = 1},
                Content = new List<object>()
                {
                        new{
                                type = "Text",
                                content = "Undo/Redo Demo"
                        }
                }
        });
        BlocksData.Add(new Block() {
                Id = "block-2",
                Type = BlockType.Paragraph,
                Content = new List<object>()
                {
                        new {
                                type = "Text",
                                content = "Try adding new blocks or modifying content below:"
                        }
                }
        });
        BlocksData.Add(new Block()
        {
                Id = "block-3",
                Type = BlockType.Paragraph,
                Content = new List<object>()
                {
                        new {
                                type = "Text",
                                content = "1. Undo stack set to maximum 40 actions\n2. Press Ctrl+Z to undo\n3. Press Ctrl+Y to redo\n4. Actions include text edits, block moves, additions, deletions"
                        }
                }
        });
        ViewBag.BlocksData = BlocksData;
        return View();
}

Undo Redo