How does the PluginEditor change content/input without putting it into the browser undo stack?

Widgets
1

When you put in text into the PluginEditor widget and then right click to open the context menu, the “undo” option is disabled. It seems that changes are not actually put into the browsers undo stack.

How exactly is this accomplished? I tried to look into the code of the PluginEditor widget but didn’t find any logic regarding this.

2

Hi honguyen,
In DraftJS, to make the undo/redo functionalities on the context menu (right-click menu) work, you need your undoStack / redoStack handled properly by using the push() method.

For example, in your Editor’s onChange method, if you handling it like this:

onChange(editorState: EditorState): void {
		this.setState({ editorState });
	}

the editorState will always renew its undoStack because you will add an entirely new editorState that is returned by the DraftJS to your state instead of modifying the editorState that has been stored to your component.

Therefore, I recommend you try this one out:

onChange(editorState: EditorState): void {
		this.setState(
			(prevState) => {
				return {
					...prevState,
					editorState: EditorState.push(
						prevState.editorState,
						editorState.getCurrentContent(),
						editorState.getLastChangeType()
					)
				};
			}
		);
	}

By doing this, the undoStack of the editorState saved in your component’s state should be updated , and the undo/ redo functionalities could work for both context menu’s undo/redo options and by keyboard (ctrl/cmd + Z, ctrl/cmd + Y)

It seems like the default behavior of our Widgets is also wrong in your case, so we’ll fix it as well as update the guidance in our Showcase as well!

Thanks and happy coding,
Hieu