Page freezes when pasting/loading certain special characters into CK Editor 5

[LangQian]

1. Use the example file attached in comment 3
2. Copy and past it into CK Editor 5.

✔️ Expected result

1. The paste finishes in seconds, not minutes, and it shouldn't freeze the whole RTE/page during this procedure.
2. It would be nice to have a progress bar during this procedure.

❌ Actual result

The page becomes unresponsive, and it took several minutes to finish paste.

📃 Other details

• The above issue is reproducible here: https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html. The test data I used was around 400KB and it took 4 mins to finish.

• It also happens when loading the example file into CK Editor 5.

• According the the discussions below, this issue should result from certain special characters, so theoretically, it also might occur with a small amount of texts.

[FilipTokarski]

Hi, thanks for the report. I tried pasting large amount of text and couldn't reproduce such long freeze. I'm pasting this content and it takes less than ~5 sec to load. You can try with the content I linked and let me know how it works on your side. Also, does this happen when using strictly plain text, or are you pasting some special characters too?

[LangQian]

Yes, the content you shared only took me seconds to load. I did some search within the content I used and found the following special characters:
./\-()”,~|<>_%:;?{}[]+=!@#$%&*’

And here is the content I used in case these weren't the only ones:
rte-test-content.txt

[FilipTokarski]

Thanks, now with the content you provided I can confirm this. The page freezes and becomes totally unresponsive.

It's similar to a case reported recently for Vue integration ( although I couldn't reproduce it then on normal CKEditor ) - ckeditor/ckeditor5-vue#153

[LangQian]

YW. In my implementation, I didn't use the one with Vue integration but only the normal CKEditor.

Before this issue is fixed, is there any chance you know which specific CKEditor feature/plugin might cause this, so that I can disable it if it's not an essential one? I tried to remove PasteFromOffice, Autoformat and TextTransformation, but didn't see any noticeable improvement. Maybe it has something to do with the 'automatic content filtering' mentioned here? Is there a way I can turn this off?

[jodator]

@LangQian - I've tried your example in the LibreOffice. It takes (rough estimation) 1-4s to paste this from Clipboard. Unfortunately, this document produces 380 pages in Writer. This is considerably big document for a web editor. And even in an text-only edit plugin setup (with only Essential features) it might take some time to load it.

I've checked GDocs and it freezes Firefox (rough estimation 20+ seconds). I do agree that this could be improved. Our main concern for now was to handle smaller documents (dozen of pages, not hundreds) and we optimize for that. This probably should change in future but currently editing books is not a first priority (this might change if we see more requests for that).

[LangQian]

@jodator Thanks for the examinations and clarifications.

However, according to my discussion with Filip, this issue is probably caused by certain combinations of text and special characters, not the amount of data we are dealing with. This example Filip provided contains much more data (1MB) than the one I used (400KB), but it only took around 5 seconds, instead of 4 mins in my case. This means even if the users are not editing a book, as long as they use these certain combinations of text and special characters, CKEditor will slow down significantly, right?

I still hope this issue can be fixed, as if the whole page freezes and becomes totally unresponsive for 4 mins, we cannot provide any mechanism (e.g. a spinner or a progress bar) to let our users know our product is still processing the data, but not dead.

[Reinmar]

It'd be nice to understand what's causing this issue. I initially thought about one of the automatic replacement plugins, but @LangQian mentioned he disabled text transformations and autoformat. The next step should be to check out the performance profile in e.g. Chrome dev tools.

However, I loaded the data mentioned in #8054 (comment) as a single paragraph and it loads immediately. The only problem is rendering this content – Chrome is certainly struggling while e.g. scrolling the content, but half of this problem could be to the fact that I loaded this as one long paragraph so the browser has huge amount of work to calculate line breaks.

What do I miss, guys?

[LangQian]

@Reinmar I just tried the data in https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html, the issue still exits for me. However, it was 4 mins when I reported this issue but now only freezes around 2 mins, so I guess some recent changes helped improve this problem? Maybe this is something worth looking into?

Besides, based on my discussion with @FilipTokarski above, I think the issue should have something to do with certain special characters, as the data he tried in this comment was much larger than the problematic data I used, but it can be loaded in seconds. The key difference here seemed to be the special characters (not sure which one/ones though).

[Reinmar]

Sorry, my bad. I didn't realize this is about pasting, not data loading.

So, I can reproduce this issue, indeed. This is the profile:

90% of it is insertContent()'s change() block. The DOM->View->Model conversion of the input HTML/plain text data is quite ok. The problem starts on the insert to the existing model.

If we zoom further we can find hundreds of these:

It seems that this method is called bazillion of times.

Then we also have tones of these:

In general, AFAICS, there's million of _insert(), _handleNode(), etc. calls. This, most probably, means that we create a million of operations. This, in turn, triggers huge processing times in postfixers, differ and converters as they scale bad with the number of operations.

There's been an older ticket that insertContent() should make fewer operations. If there's linear content to process, it should insert it in one batch.

Also, it's quite unlikely that it has much to do with any special characters. 

This is a result of pasting "asd\n" x 1500 times:

It's the same for much more "special characters" content:

cc @niegowski @scofalik I know you'll love this :D