Angular PrimeNg Editor Add Styles in Dropdown

Question

I'm using primengv1.3.7 library RTE with Angular v14. I two editors to deal with

x.component.ts

constructor() {
    const customStyle= Quill.import('attributors/style/size');
    customStyle.whitelist = ['style1','style2','customStyle3','test4'];
    Quill.register(customStyle, true);
}

On Stackoverflow I saw this and added ql-size class in html. Similarly is it possible to create an dropdown with styles say : style1, style 2 and we can manually add CSS in global CSS.? I searched a hell lot but didn't found a way to do that

I too added the HTML in header

x.component.html

<p-editor formControlName="questionName" id="questionContents" [style]="{'height':'90px'}" (onTextChange)="onTextChange($event,'questionName')">

<ng-template pTemplate="header">
         <span class="ql-formats">
               <select class="ql-size"></select>
               <select class="ql-font"></select>
          </span>
          <span class="ql-formats">
             <select class="ql-size">
               <option value="style">style</option>
               <option value="style2">style2</option>
               <option value="customStyle3">customStyle3</option>
               <option value="test4">test4</option>
             </select>
         </span>
</ng-template>
</p-editor>

x.component.scss

.ql-editor .ql-size-style {...} .ql-editor .ql-size-style2 {...}