I need to customize the link tag to wrap a styling div around it like so:
<div class="custom-link">
<a href="https://www.testurl.com">Test URL</a>
</div>
I initially tried to extend Quill's Link class and create a parent element that will wrap around it:
class CustomLink extends Link {
static create(value) {
const node = super.create(value);
// Remove unnecessary attributes
node.removeAttribute('rel');
node.removeAttribute('target');
// Create a wrapper node that will contain the link
const wrapper = document.createElement('div');
wrapper.setAttribute('class', 'custom-link');
wrapper.appendChild(node);
return wrapper;
}
static formats(domNode) {
return super.formats(domNode.firstChild);
}
}
But I still can't make it work like a regular Link class. Is there anything that I'm missing? Do I need to create a custom Blot in order to achieve this?