Kendo Editor is laggy for medium-to-large documents (not due to ProseMirror)

[mtgplaygroup]

Description

On every document change, Kendo Editor serializes the entire document to HTML. This is an expensive operation, especially if there are any complex node views. I saw noticeable lag when typing with Kendo Editor. I was able to fix the performance problems by dropping Kendo Editor and using ProseMirror directly.

Steps To Reproduce

1. Create a medium-to-large document
2. Edit it with Kendo Editor
3. See there is some lag when typing
4. The lag may be because Kendo Editor serializes the entire document on any change.
5. Remove Kendo Editor and use ProseMirror directly. The lag goes away.

Screenshots or video

No response

Actual Behavior

Lag in typing

Expected Behavior

No lag in typing (my document is medium-sized, not excessively large)

Browser

Chrome, All

Browser version

latest

OS type

MacOS

OS version

No response

Last working version of the Kendo UI for Angular package (if regression).

No response

[yanmariomenev]

Hi @mtgplaygroup,

Can you provide a runnable example? I tried loading a large amount of content into the editor and started typing, but the performance looks good on my side using a Mac with Chrome.

The test was done in the following example - https://stackblitz.com/edit/angular-tu5yetr6

[yanmariomenev]

Since there is not enough information and no runnable example, the issue will be closed for now. If you can share more details along with an example, the issue will be reopened and labeled accordingly.

[mtgplaygroup]

I don't have time to create an example for you. Ultimately, I decided to just use ProseMirror directly instead of Kendo Editor.

The issue happens when you have any semi-complex node views. Kendo Editor serializes the entire document on any document changing transaction (no matter how small), which likely causes the issue.

[cor-pa]

This issue is reproducing on the latest demo version of kendo editor.

Make sure to enable verbose logging
Just take any medium to large complex html like http://demo.borland.com/testsite/stadyn_largepagewithimages.html

Try out on https://demos.telerik.com/kendo-ui/editor/index or https://dojo.telerik.com/

Try one of two below

1. paste 2-3 times the html copied from the public page mentioned above
2. copy the existing content within the kendo editor on the kendo demo website and paste it again 2-3 times

to reproduce the following

[Violation] 'setTimeout' handler took ms kendo.all.min.js:9