Undo does not work in document with initial data

[fedorin-git]

Description

Undo does not work in document with initial data

Environment

• Editor.js version: 2.0.8
• Plugins you use with their versions:
• Device, Browser, OS: MacBook Pro (14-inch, 2021) Apple M1 Pro, MacOS Monterey 12.5, Chrome 104.0.5112.79 (Official Build) (arm64), Node v16.15.0,

Steps to reproduce:

1. Open document with initial data
2. Type something anywere
3. Press 'CMD+Z'

Current behavior

• changes are not rolled back
• page is scrolled down to the bottom.

Expected behavior

Changes should be rolled back in appropriate order or appearance

Implementation code

...
editorRef.current = new EditorJS({
        placeholder: 'Enter some reach text...',
        inlineToolbar: true,
        readOnly,
        data,
        holder: 'editorjs',
        onReady: () => {
          const undo = new Undo({
            editor: editorRef.current,
            config: {
              shortcuts: {
                undo: 'CMD+Z',
                redo: 'CMD+SHIFT+Z'
              }
            }
          });
          if (data) undo.initialize(data);
          return undo;
        },
        tools: EDITOR_JS_TOOLS({
          readOnly,
          policyId: orgPolicyId,
          orgId,
          companyName: orgName,
          blocks: data?.blocks,
          orgEntities,
          ...orgParams
        }),
        tunes: ['blockTune', 'anchorBlockTune']
});
...

Note:

Work well in empty document.

[FelipeGuzmanSierra]

Hello @fedorin-git , I hope you are doing well.

Thanks a lot for raising the issue. I checked, and the error may occur when the EditorJs is instantiated more than once, maybe related to the React hard reload which duplicates the editor each render. It could be your case possibly?

If not, I will appreciate it if you could give us more information about the issue to replicate the same problem you are getting.

Best regards.

[karolrojas07]

Hi @fedorin-git, I tested this and this is working as you can see in the following gif

When my index.js root.render is like this:

root.render(
  <App />
);

But, If you use StrictMode like this:

root.render(
 <React.StrictMode>
    <App />
  </React.StrictMode>
);

Then, a duplicated error will happen:

Here you are more detailed information about StrictMode: https://mariosfakiolas.com/blog/my-react-components-render-twice-and-drive-me-crazy/

Also, we recommend you read the README.md usage section: https://github.com/kommitters/editorjs-undo#usage

---

Closing this, please let us know if the issue keeps happening to you.