Fix that the "Cancel" and "Save" Annotator buttons can be included into annotations

[tanius]

How to reproduce

1. Select some text.

2. Click the Annotator button to open the Annotator overlay. The text selection will be replaced with a blue-background HTML text highlight.

3. Select some more text, starting with text in the topic and ending right behind the "Cancel" and "Save" buttons in the still-open Annotator overlay. The texts "Cancel" and "Save" must be included into the text selection.

4. Click "Cancel" in the Annotator overlay. The overlay will disappear but your second text selection will still be visible.

5. Click into any empty space within the bounding box of your text selection (means, not directly on selected text). The text selection will disappear but (and this is the bug!) a new Annotator overlay button will appear.

6. Click that Annotator overlay button. The blue HTML highlight element will now include the buttons in the Annotator overlay.

7. Create and save a new annotation from that Annotator overlay.

8. Inspect that annotation in the "Annotations" section of Open Ethnographer by going to its detail page. You will see that the quote text includes "Cancel Save" at the end.

Discussion

This is a bug in the Annotator.js library used here. The bug is that an Annotator button is shown after deselecting the text by clicking into free space, given the steps above.

It is an edge case and deserves no immediate attention. However, in some cases (not as reproduced above though) this results in annotations that are no longer shown in Open Ethnographer after a page reload because the quote text cannot be detected. So eventually this should be fixed.

A good attempt to fix this could be to see if this bug is still present in the Annotator.js 2.0 series, to which we'd like to migrate eventually, anyway. If so, we might get the Annotator.js team to fix it in their repository.