How to Delete an Annotation Using Wagtail Review and Annotator.js on Button Click?

I am working with both Wagtail Review and Annotator.js in my project. I want to add a delete button (an “X” inside a red circle) to annotations, and when clicked, it should delete the corresponding annotation. I have added the delete button inside the annotation’s controls, but I am struggling to properly trigger the deletion.

What I have so far:

• I am using Annotator.js to create and manage annotations. The annotations appear on hover over the parent element (annotator-outer annotator-viewer).
• The delete button is injected dynamically inside the .annotator-controls span when the annotation becomes visible.
• I am trying to use the click event to trigger the annotation deletion, but I am not sure how to properly call the Annotator.js delete function or if I am handling the interaction correctly within Wagtail Review.

Here’s the current approach I have:

1. When the annotation parent (.annotator-outer.annotator-viewer) is hovered, I dynamically add the “X” delete button inside .annotator-controls.
2. I attach a click event listener to the delete button.
3. I expect the click to trigger the annotation deletion using Annotator.js.

Code snippet:

document.addEventListener('DOMContentLoaded', (event) => {
    function deleteAnnotation() {
        console.log('Delete function triggered!');
        // Assuming annotator.js method is accessible to delete the annotation
        if (window.annotator && window.annotator.deleteSelected) {
            window.annotator.deleteSelected();
            console.log('Annotation deleted');
        } else {
            console.log('annotator.js method not found.');
        }
    }

    function injectTextAndAddEvent(span) {
        span.textContent = '×'; // Add delete button content
        span.addEventListener('click', deleteAnnotation); // Attach click event
    }

    document.querySelectorAll('.annotator-outer.annotator-viewer').forEach(parentDiv => {
        parentDiv.addEventListener('mouseenter', function() {
            const span = parentDiv.querySelector('.annotator-controls');
            if (span) {
                injectTextAndAddEvent(span);
            }
        });
    });
});

Problem:

• The button appears as expected, but clicking it does not delete the annotation.
• I’m not sure if I’m using the correct Annotator.js method or if there’s a better way to interact with the annotations inside the Wagtail Review framework.

What I need help with:

• How can I properly trigger the deletion of an annotation using Annotator.js when clicking the delete button?
• Is there a specific method in Annotator.js or Wagtail Review that I should use for deleting annotations?

I would appreciate any insights from someone familiar with both Annotator.js and Wagtail Review.