Undo / Redo

This feature allows end-users to easily revert or reapply changes made in the builder, providing flexibility and control over their design process. This functionality ensures that end-users can experiment with content creation without the fear of making permanent mistakes.

Enable / Disable

You can enable or disable the Undo/Redo feature by configuring it within the unlayer.init() method. By default, this feature is enabled, but you can disable it if needed. If you choose to disable it, you may want to turn on delete confirmation setting.

Example:

unlayer.init({
  features: {
    undoRedo: false
  }
})

Setting undoRedo to false disables the undo/redo functionality in the builder. If you want to re-enable it, set undoRedo: true or omit this property entirely, as it’s enabled by default.

Undo/Redo API Methods

You can also control this feature through several API methods that allow for precise management of user actions.

Undo Last Action

The unlayer.undo() method reverts the last action taken in the editor.

Example:

unlayer.undo();

This method undoes the last change made by the user.

Redo Last Action

The unlayer.redo() method reapplies the most recently undone action.

Example:

unlayer.redo();

This method redoes the last undone action, allowing users to move forward through their action history.

Check if Undo is Available

The unlayer.canUndo() method checks if there are any actions in the queue that can be undone.

if (unlayer.canUndo()) {
  console.log("There are actions to undo.");
}

This method returns a boolean (true or false), indicating whether any actions are available to undo.

Check if Redo is Available

The unlayer.canRedo() method checks if there are any actions in the queue that can be redone.

if (unlayer.canUndo()) {
  console.log("There are actions to undo.");
}

This method returns a boolean (true or false), indicating whether any actions are available to redo.

Best Practices

• Undo/Redo User Experience: It’s recommended to keep the Undo/Redo feature enabled to allow users more flexibility in editing and modifying their designs without fear of mistakes. If you choose to disable the undo/redo feature, it is highly recommended to turn on the Confirm On Delete feature.
• Custom UI: If you are adding the Undo/Redo buttons in your UI, use unlayer.canUndo() and unlayer.canRedo() methods to determine when to enable or disable the undo/redo buttons in your UI, providing a smooth user experience.

By utilizing the Undo/Redo feature, developers can provide their end-users with the ability to easily correct mistakes or backtrack on their designs, enhancing both usability and confidence in the builder's capabilities.

Undo and redo functions can also be called programmatically using the following code:

// Undo last action
unlayer.undo()

// Redo last action
unlayer.redo()

// Any action in queue to undo?
unlayer.canUndo()

// Any action in queue to redo?
unlayer.canRedo()