Control the appearance of the delete button, a pure CSS solution
Q: How can I control the appearance of the delete button with CSS, so that it only displays when an Ink Annotation is selected?
A:
-
Load a custom stylesheet to provide your custom CSS:
const instance = await PSPDFKit.load({ ...configuration, styleSheets: ['https://example.com/my-stylesheet.css'], })
-
Add a
display:none
rule to all delete buttons that are not the ink annotation one:
.PSPDFKit-Rectangle-Annotation-Toolbar-Button-Delete, .PSPDFKit-Ellipse-Annotation-Toolbar-Button-Delete, .PSPDFKit-Image-Annotation-Toolbar-Button-Delete, .PSPDFKit-Line-Annotation-Toolbar-Button-Delete, .PSPDFKit-Note-Annotation-Toolbar-Button-Delete, .PSPDFKit-Polygon-Annotation-Toolbar-Button-Delete, .PSPDFKit-Polyline-Annotation-Toolbar-Button-Delete, .PSPDFKit-Rectangle-Annotation-Toolbar-Button-Delete, .PSPDFKit-Stamp-Annotation-Toolbar-Button-Delete, .PSPDFKit-Text-Annotation-Toolbar-Button-Delete, .PSPDFKit-Text-Markup-Annotation-Toolbar-Button-Delete { display: none; }