Cannot copy annotation text

[Ludovic99]

Annotations are highlighted on hovering, in a synchronized way, both on canvas and on annotation panel. It is the same on click, with bolder and more persistent highlighting. Fine. But the annotation text cant' be selected to be copied, which is expecially frustrating for full-text or transcriptions annotations. It would be fine to enable that.

[ggeisler]

I don't know how technically challenging this might be, but one idea is:

• When an annotation is selected, either via the canvas or the sidebar, display a copy icon at the top-right portion of the selected annotation:

---

If the user hovers over the icon, follow the same pattern we use for other icons to display a tooltip:

---

If the user selects the icon, copy the annotation text to the clipboard and display a "Copied to clipboard" (or maybe, Annotation copied to clipboard) confirmation message (MUI/React snackbar):

---

I'd suggest autohiding the snackbar after ~5 seconds so they don't have to close it manually.

Possible challenges

I'm guessing one challenge might be grabbing the annotation text to copy? I don't know enough about the technical details to know.

The other challenge might be that we'd need to adjust our current underlying structure of the annotations. Currently it appears that annotations in the sidebar are rendered in a ul, with each annotation an li element. When a user wants to select an annotation, the entire li is part of the selection, which means displaying the copy icon within the annotation container and also enabling the user to select the icon separately isn't possible.

But perhaps we can adjust the structure of the annotation li slightly to deal with this. This is an idea that might not be feasible (it's hard for me to test changes like this to Mirador (because of React, I guess) using the Web Inspector), but a general approach might be:

• Make the selected portion of the annotation the main div within the li, rather than the li itself.
• Add the copy icon to the top right of the selected annotation section, just above the main div, which puts the copy icon outside of the selected portion, meaning the user can select it separately.
• If something like this is feasible, it likely will also requiring fiddling with the associated CSS to ensure it visually looks the same as it does now; I think we want to maintain the look where the selected annotation shading fills the entire annotation container, not just the main div within the li.

[cbeer]

It looks like we've established a similar sort of button/action area in mirador-annotations already 🤞

[Ludovic99]

I'm mainly a java developper, and not good for front developpement where my knowlege is limited, especially for javascript,

As far as I could see, the behaviour comes from the way the click is handled.

I tryed to create IIIF annotations using HTML. It works except that if I put "onclick" event handling, it is removed (not present when inspecting the page). Ditto if I try to put some javascript into the "href" attribute of an anchor. I have also tryed to use an HTML "p" element with "user-select: text" style. In that case, if I press mouse button on an annotation text, selection begins. If I release mouse button while I'm still on the annotation element, it generates a click event so selection is cancelled and the usual behavior is performed (annotation is selected and rectangle is draw on canvas). If I release mouse button when I'm outside the annotation, selection remains and can be copied, but the usual behavior is lost, as there is no click event on the element.

If I remove the click handler using the navigator debugger, text of annotation can be selected, fully or partly, then copied as wished, but the usual behavior is lost, which is unsatisfactory.

The text of the annotations can be large, and wanting to copy part of it is legitimate:

@cbeer I'm interested in your solution, which implements @ggeisler suggestion. It only allows a complete copy of the annotations, but the user can always eliminate the parts which do not interest him. Could you tell me more (where to find and use it)? Thanks