The component works slow on large documents

[Ruud-cb]

Similar issues: https://github.com/ckeditor/ckeditor5-vue/issues/42 And: https://github.com/ckeditor/ckeditor4/issues/449

But then for CKEditor 5 and angular. I am experiencing the same issues and wonder how to fix this? I guess this has been brought up before but I can't seem to find any related topics on this.

This can easily be re-produced by opening the default template for angular ckeditor: https://stackblitz.com/edit/angular-ckeditor And paste large amount of text in it. Go to https://www.lipsum.com/, put paragraphs on 150 and just start copy-pasting that text into the edtior. Around 5 or 6 times it becomes slower. The more lines you have, the more slower it becomes.

I have tried to remove the [data] property so that there is no two-way binding, but I guess, just like in the vue project, there is an issue with the on-change detection.

[Mgsy]

cc @ma2ciek

[ma2ciek]

I've checked it and the reason, I think, is that the editor's change event triggers the this.ngZone.run( () => {} ) fn with the emitter called inside. However, there's no editor.getData() call or sth like this inside that function, so this is strictly connected with the performance of the ngZone.run() function.

I've checked and nothing breaks if I remove this callback. Although, according to docs this fn should be called to reenter the angular zone and to emit the event inside it. 🤷‍♂

[Ruud-cb]

Thanks for the reply! You are referring to this line?

What solution would you like to see as an PR? Introduce a new property to disable the on-change function all together and manually call editor.getData() when needed (by the component using this component)?

[ma2ciek]

I guess, that this line can actually be removed, but I need to be sure that nothing breaks after this change.

[Ruud-cb]

Although the PR is not finished, I did do some checking to make sure this actually resolves the issue. It certainly does make a huge difference when working with large text files, a delay is still noticeable when blurred because that is the moment the ngModel now gets updated. Did the demo edits and the component edits in separate commits so you can cherry pick if needed.

[numabilis]

I encounter the same issue... I search more informations on this but nothing help me tio solve this issue. Is there any solution ?

Thanks

[ma2ciek]

Perhaps the only solution currently is to limit the data loaded in the editor and split it into chapters or some other smaller things.

[numabilis]

Thanks ma2ciek for reply. I found a workaround. The problem comes from the editor.getData() call in the two-way data binding mechanism that is long. I replace ['nhModel)]="text" with [data]="text" for initializing the editor and when we want to save the data, I call editor.getData().

[lost-carrier]

Same issue here... (...except that without two-way binding it will be very very cumbersome here...)

[ma2ciek]

This issue is still blocked by the upstream issue - improving the editor.getData() performance - ckeditor/ckeditor5#5812

[pomek]

Could we remove two-way data binding in favor of synchronous changes using the onChange() callback?

[pomek]

While the upstream issue is still open, we wanted to improve the developer experience using CKEditor 5 and the Angular integration. I would like to announce we added a new option called disableTwoWayDataBinding. It increases performance when working with large documents. However, an integrator must synchronize data manually, e.g., using the ready() callback to store the editor instance and call editor.getData() whenever needed.

Changes: https://github.com/ckeditor/ckeditor5-angular/pull/346

We will release these changes this week. I will make sure to keep you posted.