The JavaScript API can be used to group several steps into one undo action that can be undone with a single undo call. Additionally, those groups are visually updated at once to avoid screen flickering when updating larger portions of a document.

Without Grouping

In the following sample, a table should be added to the document and each cell is filled programmatically in a loop. The following code can be used to achieve this:


Basically, a new table is added and for each table cell in that table, the cell's text is set. That works perfectly fine, but there are 2 major drawbacks in this solution:

  • The user is able to see the visual updates of the document manipulation.
  • In order to remove this table, 26 undo steps are required (25 cells + table insertion).

Table insertion

With Grouping

In order to group undo steps, the methods beginUndoAction and endUndoAction can be used. All calls between these two method calls are grouped as one undo step and visually updated together.

To do this, the above code must be slightly changed by using asynchronous promises to wait until all cells have been completed before calling the endUndoAction.


Table insertion


Undo grouping should be used for all calls where larger parts of text or content are modified within the document. This concept enables users to restore previous states with a single undo step and visual updates are rendered in one step without showing the each single call visually.