-
-
Notifications
You must be signed in to change notification settings - Fork 2.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
DispatchData on block not working within a second after editor created #2470
Comments
I tested it again, duration is 100+- ms, but anyway this is a mess |
Maybe add requestIdleCallback to dispatchChange, to make it sync? |
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 });
} |
@neSpecc you brought requestIdleCallback to this project, how can we fix this bug, have any ideas? |
do you mean Please, describe your use case. What are you trying to achieve from the end-user perspective? |
@neSpecc |
I'm trying to understand the meaning of calling |
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. |
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 |
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. |
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 |
And as i noted before by text, code and screenshots it work well, but because of requestIdleCallback it skip first calls of dispatchChange |
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. |
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)
The text was updated successfully, but these errors were encountered: