How Can I insert string on the cursor position on the onClick event using ngx-codemirro text editor

Question

Is there a way to insert a string at the current cursor position in ngx-codemirro?

I am new to ngx-codemirror and I have integrated ngx-codemirror in my angular project for the HTML code editor and it works fine, also I want to insert a string on the editor panel at the cursor position when I click the button. I'm trying some things but it is not working. please anyone who has experience ngx-codemirror help me.

ts:

  export class CodeMirroComponent implements OnInit {
         constructor() { }
         content = '<p align="center">Hello</p>';
        
          options = {
            lineNumbers: true,
            mode: 'markdown'
          };
        
          ngOnInit(): void {
          }
        
         insertString(content: any, str: any) {
            var doc = content.getDoc();
            var cursor = doc.getCursor();
            var pos = {
              line: cursor.line,
              ch: cursor.ch
            }
        
            doc.replaceRange(str, pos);
          }
        
        }

HTML:

 <div>
     <ngx-codemirror
       #codeMirror
       [options]="options"
       [(ngModel)]="content"
       [autoFocus]="true"
      >
     </ngx-codemirror>
    <button class="btn btn-sm btn-info"
           (click)="insertString(content, 'this is new line')">
              Name
    </button>
 </div>