How to insert text at current cursor position in Summernote editor in Angular 12

Description:

I have a Summernote editor (https://www.npmjs.com/package/ngx-summernote) in my Angular 12 project, and I also have a button outside the editor. When the user clicks on this button, I want to insert the text “Heeello” at the current cursor position in the editor.

I’ve tried accessing the editor object through the ngx-summernote directive, but I keep getting errors like “Cannot read properties of undefined”. I’ve also looked at the Summernote API documentation, but I’m not sure how to use it in my Angular project.

<div [ngxSummernote]="config"></div>

Component.ts

import { NgxSummernoteDirective } from 'ngx-summernote';

@ViewChild(NgxSummernoteDirective)  ngxSummernote: NgxSummernoteDirective;

 config = {
    placeholder: '',
    tabsize: 2,
    height: '200px',
    uploadImagePath: '/api/upload',
    toolbar: [
        ['misc', ['codeview', 'undo', 'redo']],
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
        ['fontsize', ['fontname', 'fontsize', 'color']],
        ['para', ['style', 'ul', 'ol', 'paragraph', 'height']],
        ['insert', ['table', 'picture', 'link', 'video', 'hr']]
    ],
    fontNames: ['Helvetica', 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Roboto', 'Times']
  }
  ...
}

addText(){
  console.log(this.ngxSummernote);
    console.log(this.ngxSummernote['_editor'][0] )

    this.ngxSummernote['_editor'].insertText('as');
    const currentPosition = this.ngxSummernote['_editor'].sumo.getSelection().index;
    console.log(currentPosition)
    // const currentCursorPosition = ($(this.mySummernote.nativeElement) as any).summernote('code').length;

    // const textToInsert = 'Hello';
}

None of the above is working. Here’s the StackBlitz link to my code: https://stackblitz.com/edit/angular-summernote-demo-duemtn?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

Can someone help me figure out how to insert text at the current cursor position in the Summernote editor in Angular 12?