Render HTML content inside custom inline blot remove inline css and messup format

Hello All,

I have created one custome inline blot with name like this .

const BlockInline = Quill.import("blots/inline");
    class VNCSignature extends BlockInline {
      static create(value) {
        const node = super.create(value);
        return node;
      }
      static value(node) {
        return {
          style: node.getAttribute("style")
        };
      }
    }
    VNCSignature.blotName = "signature";
    VNCSignature.className = "signature";
    VNCSignature.tagName = "signature";
    Quill.register({
      "formats/signature": VNCSignature
    });

Now after createing i am adding my data inside the blot like this way :

setSignatureToBody(signature: string): void {
                this.mailBody =  "<br/><br/><signature>" + signature + "</signature>";
    }

Now it is adding signature but format is messup. My signature is like this

"<div>Kind regards Kapil Nadiyapara VNC Technologies Pvt. Ltd. Professional Services <div> </div>B-207, 208, Synergy tower , </div><div>2nd floor, Corporate Road,</div><div>Nr. Vodafone house, Ahmedabad - 380 015. India</div><div>Mobile : +91 9974874566 Phone: +91 79 4037 3536 kapil.nadiyapara@vnc.biz; <a href="http://www.vnc.biz/" style="color:#00008b;text-decoration:none" rel="nofollow%20noopener%20noreferrer%20nofollow%20noopener%20noreferrer nofollow noopener noreferrer nofollow noopener noreferrer nofollow noopener noreferrer nofollow noopener noreferrer nofollow noopener noreferrer nofollow noopener noreferrer" target="_blank">www.vnc.biz</a> </div><div> </div><div><strong style="color:#000000;font-family:'arial' , 'helvetica' , sans-serif;font-size:13.3333px;font-style:normal;letter-spacing:normal;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px;background-color:#ffffff"><span style="color:#000000;font-family:'arial' , 'helvetica' , sans-serif;font-style:normal;font-weight:normal;letter-spacing:normal;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px;font-size:16px;background-color:#ffffff;float:none;display:!important">Get your free tour of the VNClagoon in our next<span style="color:#000000;font-family:'arial' , 'helvetica' , sans-serif;font-style:normal;font-weight:normal;letter-spacing:normal;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px;font-size:16px;background-color:#ffffff;float:none;display:!important"> <a href="https://register.gotowebinar.com/rt/2647711251238490883" style="color:#005a95;text-decoration:none" rel="nofollow%20noopener%20noreferrer%20nofollow%20noopener%20noreferrer nofollow noopener noreferrer nofollow noopener noreferrer nofollow noopener noreferrer nofollow noopener noreferrer nofollow noopener noreferrer nofollow noopener noreferrer" target="_blank">webinar</a><span style="color:#000000;font-family:'arial' , 'helvetica' , sans-serif;font-style:normal;font-weight:normal;letter-spacing:normal;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px;font-size:16px;background-color:#ffffff;float:none;display:!important"> <span style="color:#000000;font-family:'arial' , 'helvetica' , sans-serif;font-style:normal;font-weight:normal;letter-spacing:normal;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px;font-size:16px;background-color:#ffffff;float:none;display:!important">!</div>"

But it is remove all innerHTML span etc while we render signature into the blot in quill editor. It look like this

https://prnt.sc/t8x5te

While before we created a block/embed custom blot Where we can able to render whole html uside it like this way

document.querySelector("signature").innerHTML = signature

And it render inside quill editor perfectly . But issue in the block/embed blot is when we are just press "BACKSPACE from keyborad then it will remove whole tag in quill becuase of block/embed blot so we use inline blot for fix this issue. But it remoev whole format inline blot.

Also we have change signature facility in application where we can render new signature to<signature> blot which is replace html signature in to existing but it will add more   before and after <signature> blot.

So can you please suggest me what i do here to make blot format same as HTML we have in signature. it should not remove my any html .

We have following version of quill and ngx-quill.

"ngx-quill": "3.6.0" "quill": "1.3.6"

slab / quill

Render HTML content inside custom inline blot remove inline css and messup format #3079