Have a custom img blot with addEventListener. Event triggered when using insertEmbed, but it does not work when img loaded from existing html - addeventlistener

Question

I'm using react-native-cn-quill but this is really a Quilljs question. Thanks for your help.
In the code below, clickHandler is called on click when I do a "insertEmbed(index, 'pbThumbnail', obj)", but when I load the webView with initialHtml containing:
<span class="pb-Thumbnail">
<img class="pbVidThumb" ....>
</span>
the eventListener does not appear to be added to the blot/tag. Should the eventListener be automatically applied OR do I have to manually re-add to all the relevant tags?
Thanks for your help!
This is the custom blot, whose eventListener works when using insertEmbed:
const Block = Quill.import('blots/block');
class ThumbnailBlot extends Block {
constructor(domNode) {
super(domNode);
// Bind our click handler to the class.
this.clickHandler = this.clickHandler.bind(this);
domNode.addEventListener('click', this.clickHandler);
}
clickHandler(event) {
alert("ClickableSpan was clicked. Blot: ", this);
}
static create(value) {
let node = super.create();
node.setAttribute('contenteditable', false);
let image = document.createElement('img');
image.setAttribute('class', 'pbVidThumb');
image.setAttribute('contenteditable', false);
image.setAttribute('src', value.imgBase64);
image.setAttribute('height', value.height);
image.setAttribute('width', value.width);
image.setAttribute('id', value.imgName);
node.appendChild(image);
return node;
}
static value(node) {
return { src: node.getAttribute('src'), title: node.getAttribute('title'), height: node.getAttribute('height'), width: node.getAttribute('width'), id: node.getAttribute('id')}
}
static deleteAt(node) { return false; }
static formats(node) {
return node.getAttribute('title');
}
}
ThumbnailBlot.blotName = 'pbThumbnail';
ThumbnailBlot.tagName = 'span';
ThumbnailBlot.className = 'pb-thumbnail';
Quill.register(ThumbnailBlot);
Loading the below HTML into a webview with quill does not apply the click eventListener:
<span class="pb-thumbnail" contenteditable="false" title="IMG_0002.JPG">
<img contenteditable="false"
src="https://....uploads%2F2h06dnjjxoa8l21i5m51c-Bump-bump-imageimage.jpg"
height="auto"
width="100%"
class="pbVidThumb"
id="IMG_0002.JPG" >
</span>
Doing more debugging, I also noticed that the raw HTML that is loaded into the Quill editor gets reduced:
<div id="editor-container">
<h1>Pipi</h1>
<p><br></p>
<p><br></p>
<p><strong>I am grateful for...</strong></p>
<p><br></p>
<p><br></p>
<p><br></p>
<span class="pb-thumbnail"
contenteditable="false"
title="IMG_0002.JPG">
<img contenteditable="false"
src="https://uploads%2F656jhlsiw6xrc07t8i70g-Bump-bump-imageimage.jpg"
height="auto"
width="100%"
class="pbVidThumb"
imglocalpath="405B8B56-5718-421E-81EE-BBB7895D64BD.jpg"
vidlocalpath="EMPTY-1f051ea8-8c5d-4a9d-b8b1-597c0d2edfa4"
id="IMG_0002.JPG"
data-name="IMG_0002.JPG"
data-long-press-delay="250">
</span>
<p><br></p>
</div>
When I use codePen playground, and with the above html code in the editor, and I do: console.log(document.getElementById("editor-container")); what I see is:
<div id="editor-container" class="ql-container ql-snow">
<div class="ql-editor" data-gramm="false" contenteditable="true" data-placeholder="Compose an epic..."›
<h1>Pipi</h1>
<p><br></p>
<p><br></p>
<p> <strong>I am grateful for...</strong></p>
<p><br></p>
<p><br></p>
<p><br></p>
<p><br></p>
<p><img src="https://uploads%2F656jhlsiv6xrc07t8170g-Bump-bump-imageimage.jpg"
height="auto"
width="1009"></p>
</div>
<div class="ql-clipboard" contenteditable="true" tabindex="-1"></div><div class="ql-tooltip ql-hidden"><a class="ql-preview" target="_blank" href="about:blank"></a><input type="text" data-formula="e=mc^2" data-link="https://quilljs.com" data-video="Embed URL"><a class="ql-action"></a><a class="ql-remove"></a></div></div>
All the class tags I used are gone along with many attributes. Why is that?