-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
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
"[Violation] 'xxx' handler took <N>ms" appeared in the Console, and input lag began to occur. #14188
Comments
I am continuing to troubleshoot this issue: Something bad has happened. When I tried to continue typing, I feel obvious input lag. By adding the WordCount plugin, it displays the current Characters: 212217, Words: 28012. Are the characters and words too long? No, I tried to copy the text in the below editor and paste it into the input box of the official example full-featured-editor, with the same characters and words. However, I can continue to type quickly and do not feel any input delay in full-featured-editor, while in the editor of ckeditor5-react-example, I cannot continue to input text fluently. so, whose issue is it? "@ckeditor/ckeditor5-react"、create-react-app。 |
Hey, thanks for reaching out. Could you check how your text behaves with the latest editor versions? We are at v38 right now. @Mgsy we should refresh or archive the https://github.com/ckeditor/ckeditor5-react-example, WDYT? |
@Witoso Thank you for your reply, I have checked a long text typing behaves with the latest editor versions as per your instructions. The result is the occurrence of input lag in version v18 too. I public the example code repository https://github.com/gfu7/ckeditor5-react-example. As of now, the following test results are listed:
I will try to downgrade the editor gradually. I used v26 a few years ago and it doesn't seem to have the issue of delayed input after long text input. |
Following the tutorial https://ckeditor.com/docs/ckeditor5/latest/installation/integrations/vuejs-v3.html, I created a Vue(v3) application example and found that there is a input delay issue in the testing results. When I input a long text and want to continue typing, there is a noticeable delay. Here is a link to my test code repository https://github.com/gfu7/ckeditor5-vue-example |
You are right, we should bump versions in this repository. We will handle it. I'm not sure if we should archive it, as it is still a good example of the integration, but we should definately make sure it uses updated dependencies 😄 |
@gfu7 could you send us the data you're adding to the editor? ist it plain text, markup? What content are you pasting? |
@Witoso I am glad to see your reply,Here are my testing steps.
|
There's been some new progress. Maybe it's caused by
By adding
Perhaps 90000 words is not a common real-life scenario, but increasing the number of plugins will increase the execution time of The following is debug code: |
Yes, the frequent calling of |
@Witoso Thanks, Suggested modification of the sample code https://ckeditor.com/docs/ckeditor5/latest/installation/integrations/react.html : do not call Currently, after entering long content, the input fluency still cannot compare to the full-featured example editor https://ckeditor.com/docs/ckeditor5/38.0.0/examples/builds-custom/full-featured-editor.html. and some warning are still appearing in the console, from: /node_modules/@ckeditor/ckeditor5-utils/src/dom/emittermixin.js
I have no idea how to resolve these warnings. |
Why do I tend to get the latest content more frequently? In practical development, rich text editor component can be understood as a TextArea Element and are one of the items in a form. In order to better use the form, it is necessary to transform the editor component into a controlled component. Under Control Model
Reference from: https://ant.design/components/form#formitem so, as a controlled component,The following data update flow.
Frequent use of
|
Why don't you get data on the form submission (only once)? |
@Witoso To improve the development experience of the team. I provide the team with common components and hope they can use the editor component just like the input component. In the form, the item entered in the editor is just one of the items. I don't want all team members to have to |
Gotcha, thanks for the info! |
getting this error while type something in input field , and not able to see type value instatntly , it will take time to show ,[Violation] 'setTimeout' handler took ms |
Background
I need to develop a rich text React Component and publish it to a private npm repository. After comparison, I ultimately chose "CKEditor" and developed the component according to the following tutorial, React rich text editor component.
Then import the component for use or pack and release as a library. When there is continuous copying and pasting with multiple content types, it can cause lagging issues.
📝 Provide detailed reproduction steps (if any)
npm link
or publish a library install it.✔️ Expected result
Input content smoothly.
❌ Actual result
If only text is input, there will be no lag. However, if pictures or tables are inserted, and the content becomes more diverse, there is a higher likelihood of lag occurring.The more content there is, the more severe the lag.
❓ Possible solution
I have no idea how to solve this problem, Therefore I came there for help.
I used to think it was because there were too many plugins, but even after reducing some, the problem still persists.
📃 Other details
Editor Component main code
When there is input lag, the message that appears on the console.
Note that: [Violation] 'xxx' handler took xxx ms from http://localhost:3000/Users/xxx/bba-rc-editor/node_modules/@ckeditor/ckeditor5-utils/src/dom/emittermixin.js
thanks to read.
If you'd like to see this fixed sooner, add a 👍 reaction to this post.
The text was updated successfully, but these errors were encountered: