Editor unresponsive after undoing text changes

[fjwong]

Describe the bug
Relatively similar to #519.

The image editor is mostly unresponsive after trying to undo text changes.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://ui.toast.com/tui-image-editor (Or https://nhn.github.io/tui.image-editor/latest/tutorial-example02-useApiDirect)
2. Switch to text mode
3. Click on the canvas to insert a new text object.
4. Edit the default text.
5. Click 'Undo'. Text changes are not undone.
   • Javascript console throws an Uncaught TypeError: Cannot read property 'forEach' of null exception.
6. Image editor is mostly unresponsive afterwards:
   • Most commands fail with an Uncaught (in promise) The executing command state is locked. exception.
   • Free drawing seems to work though, but changes cannot be undone.

Expected behavior

• Text changes are undone.
• Image editor works after undoing text changes.

Desktop (please complete the following information):

• OS: Mac OS
• Browser: Chrome
• Version: 88.0.4324.96 (Official Build) (x86_64)

Additional context
The problem does not seem to happen if you exit 'text edit' mode by clicking on the canvas after step 3, and then editing the text content.

[lja1018]

@fjwong
Thank you for your detailed report. But, this issue cannot be reproduced.

As you explained, I edited the text without exiting 'Text Edit' mode after step 3, but it works fine when undo. Could you provide a gif?

[fjwong]

@lja1018 Thank you for the response.

You can find a video of the problem below:
https://user-images.githubusercontent.com/1836719/107466032-c9d73700-6ba6-11eb-9407-6f61bebc1467.mov

As you explained, I edited the text without exiting 'Text Edit' mode after step 3, but it works fine when undo.

Please note that, as soon as the text element is created, it is already in 'edit mode' so you can start typing right away.
If you type something and then click 'Undo', the issue happens.

If after creating the text object you click on it, or click the canvas then click on the text object again for editing it, the issue doesn't happen.

[ayappaP]

@lja1018 @fjwong

The same thing happens for me.

But in my case, the error is a bit different:

Steps To Reproduce:

1. Switch to text mode
2. Click on the canvas to insert a new text object.
3. Edit the default text.
4. Click 'Undo'. Text changes are undone as expected.
5. But the 'Undo' stack is still not empty as it should have been.
6. And now when I click 'Undo' again, javascript throws the error Uncaught (in promise) TypeError: Cannot read property 'set' of undefined
7. Image editor is mostly unresponsive afterwards:
8. Most commands fail with an Uncaught (in promise) The promise of undo command is reject. Because The executing command state is locked. error

Additional context

1. After editing the default text, if you click anywhere else on the canvas and then click 'Undo', everything works fine.

BTW, This issue also exists in the new version 3.13.0

Hoping this can be resolved. Thanks!!

PS: A similar issue #519 seems to have been fixed in 3.13.0

[lja1018]

@fjwong
Thanks for the report. Resolved in v3.13.0.

@ayappaP
Thanks for the report. I will resolve it after checking.