DispatchData on block not working within a second after editor created

[medzhidov]

It is because of this branch: #2430
window.requestIdleCallback delays event binding and if we call dispatch data inside of block within 1 second after it was added to dom - it will not working.

Screenshots:

Device, Browser, OS:
MacOS Ventura, Chrome 116.0.5845.110

Editor.js version:
Latest

Plugins you use with their versions:

](#2430)

[medzhidov]

I tested it again, duration is 100+- ms, but anyway this is a mess

[medzhidov]

Maybe add requestIdleCallback to dispatchChange, to make it sync?

[medzhidov]

At the moment I've done it, but I think it's a terrible solution:

src/components/block/index.ts

  public dispatchChange(): void {
    window.requestIdleCallback(() => {
      setTimeout(() => {
        this.didMutated();
      }, 100)
    }, { timeout: 2000 });
  }

[medzhidov]

@neSpecc you brought requestIdleCallback to this project, how can we fix this bug, have any ideas?

[neSpecc]

DispatchData

do you mean dispatchChange()?

Please, describe your use case. What are you trying to achieve from the end-user perspective?

[medzhidov]

@neSpecc
Yes, if we manually emit "dispatch change" from block tool, it will not working for 200 ms after block init, and dispatch will ignored if you will not try it again after this period. And this time various because of different idle every time. And this is a bug, not "feature", so please, return this label

[neSpecc]

I'm trying to understand the meaning of calling dispatchChange immediately after block creation. Do you have an example?

[medzhidov]

After the block is initialized, I have about 20 blocks with different content. However, in one of them, I change its content immediately after the DOM is added to the editorjs content. I use Vue for rendering, so the dispatch calls only happen after the Vue component (inside editorjs block) is added and initialized on the page. This was working well until I updated editorjs to the latest version and discovered this behavior in your code.

[neSpecc]

I change its content immediately after the DOM is added to the editorjs content

I still need an example. What I see is that you're changing a document in a time of rendering it. I don't understand the reason of it from the data-model perspective

[medzhidov]

I maybe will provide later in a free time, but now i can tell this: no, not in time of rendering, but right after it. If you will use dispatchChange without requestIdleCallback it will works well everytime, but with this function - it will skip first calls.

As an example, I have a tool called "Files". This component is responsible for rendering uploaded files for both administrators and readers (who have different access levels). On the administrator side, I have a list of uploaded files and data saved in the editor. Since a user (admin) can close the page immediately after uploading a file, any changes made inside the editorjs data may be lost and not saved. This is the reason why, within the editorjs file component, I verify the files list and can delete some of them or add them to the block right after the editorjs block initialized.

[medzhidov]

I want to note that I verify the data only after the file component is mounted. This is a Vue component that is created, placed inside a created <div>, and returned inside the tool's render function. Therefore, its mounted function cannot be called earlier than when EditorJS places the <div> inside the actual DOM.

[medzhidov]

And as i noted before by text, code and screenshots it work well, but because of requestIdleCallback it skip first calls of dispatchChange

[medzhidov]

@neSpecc

I found the problem that you can see in your editor right now, except for the cases I mentioned before. Open an empty editor, then create a new paragraph (by pressing enter) and try to open the toolbar by pressing the 'slash' key. You will not get any response for the first 2 seconds, and the slash key starts working only after that interval. I think you would agree that it is an awful user experience.