Showing the focus ring around read-only annotations

Nutrient Web SDK 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 won’t be shown. If you still want to show a focus ring when the user clicks 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 the annotation customization guide.