Wrapping Quill Link with a parent element

Viewed 79

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?

0 Answers
Related