如何在单击按钮时使用 Wagtail Review 和 Annotator.js 删除注释？

Question

我在我的项目中同时使用 Wagtail Review 和 Annotator.js。我想在注释中添加一个删除按钮（红色圆圈内的“X”），当单击时，它应该删除相应的注释。我已在注释控件内添加了删除按钮，但我很难正确触发删除。

到目前为止我所拥有的：

• 我正在使用 Annotator.js 来创建和管理注释。将鼠标悬停在父元素上时会显示注释 (

  annotator-outer annotator-viewer

  )。
• 当注释变得可见时，删除按钮会动态注入到

  .annotator-controls

  范围内。
• 我正在尝试使用单击事件来触发注释删除，但我不确定如何正确调用

  Annotator.js

  删除函数，或者我是否在Wagtail Review中正确处理交互。

这是我目前的方法：

1. 当注释父项 (

   .annotator-outer.annotator-viewer

   ) 悬停时，我在

   .annotator-controls

   内动态添加“X”删除按钮。
2. 我将单击事件侦听器附加到删除按钮。
3. 我希望点击能够使用 Annotator.js 触发注释删除。

代码片段：

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);
            }
        });
    });
});

问题：

• 按钮按预期显示，但单击它不会删除注释。
• 我不确定我是否使用了正确的

  Annotator.js

  方法，或者是否有更好的方法与 Wagtail Review 框架内的注释进行交互。

我需要什么帮助：

• 如何在单击删除按钮时使用 Annotator.js 正确触发删除注释？
• Annotator.js或Wagtail Review中是否有特定的方法可以用来删除注释？

我希望熟悉 Annotator.js 和 Wagtail Review 的人提供任何见解。

Answer 1

修改

deleteAnnotation

以获取注释对象并使用

removeAnnotation

将其删除。

document.addEventListener('DOMContentLoaded', () => {
    function deleteAnnotation(annotation) {
        window.annotator?.removeAnnotation(annotation);
    }

    function injectDeleteButton(span, annotation) {
        span.textContent = '×'; 
        span.onclick = () => deleteAnnotation(annotation);
    }

    document.querySelectorAll('.annotator-outer.annotator-viewer').forEach(parent => {
        parent.onmouseenter = () => {
            const span = parent.querySelector('.annotator-controls');
            const annotation = /* fetch the annotation */;
            span && injectDeleteButton(span, annotation);
        };
    });
});