Undo/Redo issue about the Text

[abhi1722]

Body

I’m using the following methods for undo and redo:

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

The issue I’m facing is with text changes. When I edit text inside a component and then click undo, it only undoes once. After that, redo does not work or appear.

For other components like shapes or images, undo and redo are working correctly.

Is there something in GrapesJS that prevents redo from working specifically for text edits, or do I need to handle text changes differently to make undo/redo work?

Guidelines

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

[tolgaexploder]

Hello, The behavior you’re seeing is expected with GrapesJS. Undo/redo works fine for shapes, images, and attributes because those changes are automatically tracked by the UndoManager.

Text edits are a bit different: GrapesJS doesn’t push every keystroke into the undo stack. By default it only saves one snapshot when you finish editing (e.g. on blur). That’s why you can undo once, but redo doesn’t kick in there’s only one state saved.

If you want proper undo/redo support for text edits, you need to explicitly push those changes to the UndoManager. For eg:

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

This way each content update will get stored in the history, and redo will start working as expected.

Alternatively, you can hook into rte:disable (when inline editing stops) and add a snapshot there, which is usually enough if you just want “per edit session” undo/redo instead of per keystroke. Good luck :)

[abhi1722]

const editorInstance = grapesjs.init({
container: "#gjs",
panels: { defaults: [] },
storageManager: false,
allowScripts: true,
dragMode: 'absolute',
styleManager: false,
blockManager: {},
// Disable default layer manager as we're using our custom one
layerManager: false,
traitManager: { appendTo: '#my-traits' },
undoManager: {
trackSelection: false,
maximumStackLength: 200,
trackContent: true
},
// Disable default toolbar completely
domComponents: {
defaults: {
toolbar: []
}
},
assetManager: {
upload: false,
uploadText: '',
noAssets: 'Asset Manager is disabled',
assets: [],
},
fromElement: false,
pageManager: true,
deviceManager: {
devices: [
// your devices here
],
},
} as any);
editorInstance.on('component:update:content', (component: any) => {
// Add to undo stack for text content changes
editorInstance.UndoManager.add(component);
});

i tried with that event still im facing the same issue . i have shared the function and also the grapesjs.init here if i have need to do any changes here please let me know.