Showing focus ring around read-only annotations
Q: How can I show a focus ring around annotations that are read-only?
A: PSPDFKit for Web only shows a selection outline around annotations that are editable and can be moved/resized. If an annotation is made read-only using isEditableAnnotation or editableAnnotationTypes, this outline will not be shown. If you still want to show a focus ring when the user clicks on a read-only annotation, you can work around this by using custom renderers to create a clickable area on top of the annotation, and setting focus in the click handler:
const instance = await PSPDFKit.load({ customRenderers: { Annotation({annotation}) { const node = document.createElement("div"); node.dataset.annotationId = annotation.id; node.style.cssText = ` width: 100%; height: 100%; pointer-events: all; `; return { node, append: true }; } } }) instance.contentDocument.addEventListener("click", event => { if (event.target.dataset.annotationId != null) { const annotationId = event.target.dataset.annotationId; const annotation = instance.contentDocument.querySelector( `.PSPDFKit-Annotation[data-annotation-id="${annotationId}"]` ); annotation.setAttribute("data-focusvisible-polyfill", true); annotation.focus(); } });
You can find out more information about custom renderers in our guide article.