custom div and classes both are getting removed when binding it as HTML to the quill editor. Any workaround for this?

Question

This is my sample quill editor code

in Ts file i have

this.htmlText = '<span class="my-thing"><a href="http://help.com" rel="noopener noreferrer" target="_blank">help.com</a></span>'

Quill editor code in HTML

<quill-editor  (onEditorCreated)="onEditorCreated($event)" [(ngModel)]="htmlText"   #headerElement  [modules]="modules" [styles]="{height: '200px'}" (onFocus)="focus($event)" (onEditorChanged)="changedEditor($event)" (onBlur)="blur($event)" (onEditorCreated)="created($event)"></quill-editor>

after rendering custom classes and custom span are getting removed.

I have created a custom bolt to create a custom span and custom class which is working fine. I'm able to add and save. While initializing quill editor with the saved HTML. custom span and custom classes are getting removed.

 this.modules = {
        toolbar: {
          container: [
            ['my-thing']
          ]
      }
    }


    var Block = Quill.import('blots/block');
    
    class MyThing extends Block {}
    MyThing.blotName = 'my-thing';
    MyThing.className = 'my-thing';
    MyThing.tagName = 'span';
    
    Quill.register(MyThing);
    
 

PS: I'm using ngx-quill : 22.0.0