Undo and Redo issue with text

[abhi1722]

Body

I’m using GrapesJS with the following undo/redo methods:

editor.UndoManager.undo();
editor.UndoManager.redo();

The problem occurs specifically with text edits.

When I edit text inside a component and click undo, it only undoes the change once.

After that, redo doesn’t work or even show up.

For other components (shapes, images, etc.), undo/redo works correctly.

I tried adding this listener:

editorInstance.on('component:update:content', (component: any) => {
editorInstance.UndoManager.add(component);
});

But it still doesn’t fix the issue when text is selected and edited directly.

My question is:

Does GrapesJS handle text editing differently, which prevents redo from working?

Or do I need to explicitly handle text edits to make undo/redo work properly?

Guidelines

• I have read and understood this category's guidelines before making this post.

[IUCommunity]

GrapesJS's default RTE can cause issues with undo/redo due to its handling of text edits, especially with complex content or custom RTEs. To ensure proper undo/redo, explicitly track text changes using the Undo Manager API or customize the RTE with setCustomRte to manage content state.

Thx.

[KaloudasDev]

Hi @abhi1722 👋

You’re correct that GrapesJS handles text editing differently compared to other components, which can cause undo/redo to behave unexpectedly.

By default, GrapesJS uses a built-in Rich Text Editor (RTE) that manages text content internally, and this can interfere with the UndoManager’s ability to track changes properly.

To resolve this, you should:

• Customize the RTE using setCustomRte() to fully control how text changes are applied and tracked.
• Manually trigger undo snapshots inside your custom RTE’s change handlers to ensure every text edit is registered.
• Alternatively, listen for input events on the editable content and call UndoManager.add() appropriately.

This explicit handling ensures GrapesJS’s UndoManager receives all the necessary events to maintain a proper undo/redo stack for text edits.

Let me know if you need a sample implementation or further details.

[abhi1722]

@IU1004 @KaloudasDev If no text is selected, the undo/redo works as expected. However, when text is selected and I change some of its properties, the undo only reverts the most recent change. If the text isn’t selected, the undo works correctly.

[HPD666]

1. How GrapesJS handles text editing
   GrapesJS has two modes for editing text:
   Rich Text (contenteditable) editing: When you click inside a component and edit text directly in the canvas.
   Component property editing: When you update the content or attributes programmatically (or via the property panel).
   The key point:
   UndoManager tracks changes made through the model, i.e., when you change a component’s properties via GrapesJS APIs.
   Direct inline text edits happen in the DOM, often without immediately updating the component model.
   Because of this, UndoManager may not register every keystroke unless the text edit is explicitly propagated to the model.
   That’s why:
   Undo works once (it probably captures the initial change when focus leaves the editor or on blur).
   Redo disappears because the UndoManager never saw the subsequent text changes in its history.
2. Why your component:update:content listener didn’t fix it
   ‘editorInstance.on('component:update:content', (component: any) => {
   editorInstance.UndoManager.add(component);’
   });
   This only fires when ‘component.set('content', ...)’ is called.
   Inline text edits don’t call ‘component.set('content', ...)’ immediately—they update the DOM first.
   So your listener never sees the change until some other event triggers it.
3. How to fix it
   There are a few strategies:
   Option A: Use the built-in RichTextEditor events
   ‘GrapesJS emits events when text editing starts and stops:
   editor.on('textable:changed', (component, value) => {
   editor.UndoManager.add(component);
   });
   textable:changed triggers when the user modifies text in a component.
   Adding the component to UndoManager here ensures that all text changes are captured.
   Option B: Force model updates on blur
   Another approach is to ensure the component’s content updates whenever the editable field loses focus:
   editor.on('component:selected', (component) => {
   const el = component.getEl();
   if (el?.contentEditable) {
   el.addEventListener('blur', () => {
   component.set('content', el.innerHTML);
   editor.UndoManager.add(component);
   });
   }
   });’
   This way, UndoManager sees the latest content after editing.
   It may feel slightly delayed but works reliably.
   Option C: Use editor.runCommand('undo') / editor.runCommand('redo') instead
   Instead of calling UndoManager.undo() manually, GrapesJS provides higher-level commands:
   editor.runCommand('undo');
   editor.runCommand('redo');
   These sometimes integrate better with the internal event system, especially for inline text edits.
   ✅ Summary
   GrapesJS handles text editing differently: direct DOM changes don’t automatically update the component model.
   Undo/Redo won’t fully work for inline text unless the model is updated.
   Solution: ‘listen to textable:changed or force a component.set('content', ...) + UndoManager.add(component) on blur.
   Using editor.runCommand('undo') / redo() ‘may also help with consistency.

[HPD666]

Sorry for forgetting to use this in scripts