MatDialog triggered from tinymce not getting initialized until window resize

Question

I am trying to open MatDialog from tinymce custom button but that matdialog is not getting initialized until I resize the window. I am aware that it is due to the method is written inside tinymce init json object and hence causing problem but don't know what to do:

in component class, I mentioned it like this:

tinyMceConfig: any = {
    menubar: false, plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak','searchreplace wordcount visualblocks visualchars code fullscreen','insertdatetime media nonbreaking save table contextmenu directionality','emoticons template paste textcolor colorpicker textpattern'], toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | code | link Upload',
    setup: (editor) => {
      editor.ui.registry.addButton('Upload', {
        icon: 'browse',
        onAction: ()=> {
          const dialogRef: MatDialogRef<any> = this.dialog.open(UploadmediaComponent, { width: '95vw', disableClose: true, panelClass: 'uploadPanel'});
            dialogRef.afterClosed().subscribe(res => {
              if (!res) {
                return;
              }
              res.forEach(image => {
                console.log(image.url);
                editor.insertContent(image.url);
              });
            });
        }
      });
    }
  };

In component:

<editor formControlName="popupText" name="popupText" apiKey="xxxx" 
                                    [init]="tinyMceConfig"></editor>

I had borken down this code further and separated setup part in ngOnInit but that made no difference.

Answer 1

Just to wrap the initialization of the dialog with ngZone.run and it worked perfect for me:

onAction: ()=> {
            this.ngZone.run(()=> {
              const dialogRef: MatDialogRef<any> = this.dialog.open(UploadmediaComponent, { 
                width: '95vw', disableClose: true, panelClass: 'uploadPanel'});
                dialogRef.afterClosed().subscribe(res => {
                  if (!res) {
                    return;
                  }
                  res.forEach(image => {
                    editor.insertContent('<img src="' + image.url + '">');
                  });
                });
            });
            }