Performance Issue

[weljoda]

Hi there. First of all thanks for this grate piece of work.

I'm using the editor in an admin tool for content manegement, where i use forms with multiple editors. Especially when the content manegers edit multiple languages, the form expands and there are quickly more than 10 editors on one site. This causes a huge performance issue, and all other components in the form act with very high latency.

Does someone has any idea where i can start looking to overcome this performance issue? Is there any setting to disable a heavy feature or anything else like that?

It's quite easy to reproduce:

1. Open https://stackblitz.com/edit/angular-editor-wysiwyg?file=src%2Fapp%2Fapp.component.html
2. and past these changes

<div class="container">
  <header class="header">
    <h1>AngularEditor</h1>
    <p>Native WYSIWYG editor for Angular 6+</p>    
  </header>
  
  <input type="checkbox" id="scales" name="Slow"
         checked>
    <angular-editor id ="1"[(ngModel)]="htmlContent" [config]="config"></angular-editor>
    <angular-editor id ="2"[(ngModel)]="htmlContent" [config]="config"></angular-editor>
    <angular-editor id ="3"[(ngModel)]="htmlContent" [config]="config"></angular-editor>
    <angular-editor id ="4"[(ngModel)]="htmlContent" [config]="config"></angular-editor>
    <angular-editor id ="5"[(ngModel)]="htmlContent" [config]="config"></angular-editor>
    <angular-editor id ="6"[(ngModel)]="htmlContent" [config]="config"></angular-editor>
    <angular-editor id ="7"[(ngModel)]="htmlContent" [config]="config"></angular-editor>
    <angular-editor id ="8"[(ngModel)]="htmlContent" [config]="config"></angular-editor>
    <angular-editor id ="9"[(ngModel)]="htmlContent" [config]="config"></angular-editor>
    <angular-editor id ="10"[(ngModel)]="htmlContent" [config]="config"></angular-editor>
    <angular-editor id ="11"[(ngModel)]="htmlContent" [config]="config"></angular-editor>
    <angular-editor id ="12"[(ngModel)]="htmlContent" [config]="config"></angular-editor>
    <angular-editor id ="13"[(ngModel)]="htmlContent" [config]="config"></angular-editor>
    <angular-editor id ="14"[(ngModel)]="htmlContent" [config]="config"></angular-editor>
    <angular-editor id ="15"[(ngModel)]="htmlContent" [config]="config"></angular-editor>
  <h5 class="html-header">HTML Output</h5>
  <div class="html">
    {{ htmlContent }}
  </div>
  <p>
NPM package is here:
  <a href="https://www.npmjs.com/package/@kolkov/angular-editor">https://www.npmjs.com/package/@kolkov/angular-editor</a>
  </p>
  GitHub repo is here:
  <a href="https://github.com/kolkov/angular-editor">https://github.com/kolkov/angular-editor</a>
</div>

3. and hit the checkbox.

If you have a strong computer, paste some more editors

[kolkov]

Hi! Thanks for the reporting. Provide an repo on github please for reproduce this issue.

[weljoda]

Sry for my late answer. Here is the repo/fork where I edited the demo app:

https://github.com/weljoda/angular-editor

or

https://angular-editor-wysiwyg-cqi7ao.stackblitz.io

[kolkov]

Thanks for the repo, I will try to reproduce.

[JRPequerul]

I have faced this issue. Problem must be related with toolbar. If you enable and show only the toolbar of one editor (e.g, focused editor), performance issues are gone.

Have tested it with 100 different editors on same page. Hope this helps.

[kolkov]

Thanks!

[swapsword]

I am also facing this issue. Is there any solution to solve the performance issue?

[davidtyemnyak]

I am also facing this issue. Any info?

[xdrago1]

Same, anyone figured it out ?

[jordim]

Same issue here, is related to toolbar.

[xdrago1]

I have found a workaround for this. I generate a random ID for each instance of the editor component and the performance issue disappears.

    <angular-editor [id]="'editor' + randomId"
                    [formControl]="editorFormControl"
                    [maxlength]="10000"
                    [config]="editorConfig"
                    (paste)="onPaste($event)"
                    (ngModelChange)="doInput()" (blur)="doBlur()"></angular-editor>

    randomId = Math.floor(Math.random() * 100) + 1;

[hervememain]

Hello there, How can i show/hide the toolbar dynamically on focus/blur the editors ? I have 7 angular-editor and each one has a different id, but the same [config] Thank you

[maxbauer]

Same issue for me, the more editors I have on my page ( issues starting at 5+) the slower it is. Each editor has it's own ID already. When setting showToolbar to false everything loads fast.

With a bit of profiling, it seems that the AeSelectComponent is taking that much time.