In angular 17 using ngx-editor. How to Create a custom dropdown menu in editor menu that appends to the editor body?
For example, the dropdown(email address) and options are [email protected], [email protected], and [email protected]. When any one is chosen, its text will be displayed in the editor body.

like below image email address,
enter image description here

I tired the following,

In HTML,

<div class="editor">
   <ngx-editor-menu [editor]="options" [toolbar]="toolbar"></ngx-editor-menu>
   <ngx-editor [editor]="options" formControlName="BODY"></ngx-editor>
</div

In Typescript:

import { Editor, TBItems, Toolbar, ToolbarCustomMenuItem, ToolbarDropdown, ToolbarDropdownGroupKeys, ToolbarItem, Validators } from 'ngx-editor';

@Component({
  selector: 'app-template',
  templateUrl: './template.component.html',
  styleUrls: ['./template.component.scss']
})

export class TemplateComponent implements OnInit {
 public modalData:any;
 options: Editor = new Editor();
 toolbar: Toolbar = [];
 customDropdown: TBItems[];
 public pluginsToCreate:any[] = [];
 public formGroup: FormGroup;

 constructor(private fb: FormBuilder) { }

 ngOnInit(): void {
 this.formGroup = this.fb.group({ 
  BODY: [this.modalData.mailData.MESSAGE, Validators.required()]
 })
  const dropdownOptions: any= this.modalData.customer.map((option: any) => ({ value: option.DATA, label: option.TITLE }));
    if (dropdownOptions.length > 0) {
      this.customDropdown =  [dropdownOptions] ;
    }
    this.toolbar = [
      ['bold', 'italic'],
      ['underline', 'strike'],
      ['code', 'blockquote'],
      ['ordered_list', 'bullet_list'],
      [{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }],
      ['link', 'image'],
      ['text_color', 'background_color'],
      ['align_left', 'align_center', 'align_right', 'align_justify'],
      ['horizontal_rule'],
      this.customDropdown
    ];
  }
}