sibiraj-s / ngx-editor

🖋️ Rich Text Editor for angular using ProseMirror
https://sibiraj-s.github.io/ngx-editor/
MIT License
457 stars 191 forks source link

[Bug]: NgxEditor does not auto populate with content when used in a NgFor #478

Closed fitterfly-jainam closed 1 year ago

fitterfly-jainam commented 1 year ago

What happened?

Hi, I have a simple use case where I want to Auto Populate content in my NgxEditor but the editor is used in a NgFor loop and it only auto-populates the last instance of the editor among all.

I tried auto-populating with ngModel and even tried using Reactive Forms but none of them were able to fulfil my use case.

I have multiple Mat Expansion Panels in which I have NgxEditor which should be auto populated in any matter. I'm trying to update my NgModel binded variable everytime I open my Mat Expansion Panel, but it seems to be not working. Below is the relevant code.

<mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false" *ngFor="let item of elementDetails" (opened)="onPanelOpen($event, item)">
  <div *ngFor="let inp of subtype.inputs">
      <ng-container *ngIf="inp.type === 'rich_textarea'">
        <div class="row mb-15">
          <div class="form-field">
            <label>{{ inp.name }}</label>
            <div class="NgxEditor__Wrapper">
              <ngx-editor-menu [editor]="editor" [toolbar]="toolbar" [(ngModel)]="html"></ngx-editor-menu>
              <ngx-editor [editor]="editor"></ngx-editor>
            </div>
          </div>
        </div>
      </ng-container>
  </div>
</mat-expansion-panel>
onPanelOpen(event: any, item: any): void{
    this.typeId = item.content_type;

    if(this.typeId === 2){
      this.html = item.content_details['content'];
    } else if(this.typeId === 3){
      this.html = item.content_details['help_info'];
    }
}

Here I'm updating my NgModeled bounded variable every time with it's new value in the onPanelOpen method. Mat Expansion panels have NgxEditor in it but it is not able to auto populate itself with the content. It is only able to display content of the last panel's Editor.

Can anyone help me here?

Screenshot 2023-06-18 at 11 55 15 AM Screenshot 2023-06-18 at 11 56 00 AM Screenshot 2023-06-18 at 11 56 34 AM

Version

v15.3.0

Angular Version

v14.3.0

What browsers are you seeing the problem on?

Chrome

Link to reproduce

No response

Relevant log output

No response

Willing to submit a PR?

None

fitterfly-jainam commented 1 year ago

Closing this issue as I've got a workaround for my use case.

SOLN: I created an object of objects with initialising "new Editor()" in each object.

github-actions[bot] commented 1 year ago

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs and link to relevant comments in the thread.