Redaction Annotations

Redaction annotations are annotations that mark areas of the PDF for redaction. They can exist as a text selection or rectangle to redact text or an area of a page respectively. Redaction occurs in two steps: creating the redaction and applying the redaction. The redaction application button will only appear when the full API is enabled.

Redaction annotations support both fill and stroke colors. They appear as empty rectangles with a border by default until you hover over them. Then the fill color and overlay text will appear, giving a preview of the redaction result.

WebViewer(...)
  .then(instance => {
    const { documentViewer, annotationManager, Annotations } = instance.Core;

    let debounce = null;

    // Automatically create redaction annotations on text selection
    documentViewer.addEventListener('textSelected', (quads, text, pageNumber) => {
      // Add some debouncing to prevent constant triggering during selection
      if (debounce) {
        clearTimeout(debounce);
      }
      debounce = setTimeout(() => {
        // Create annotation with object initializer
        const annot = new Annotations.RedactionAnnotation({
          PageNumber: pageNumber,
          Quads: quads,
          StrokeColor: new Annotations.Color(255, 0, 0, 1),
          IsText: true, // Create either a text or rectangular redaction
        });

        // Set annotation preview text to appear in the Redaction Panel
        annot.setCustomData('trn-annot-preview', text);
        annot.Author = annotationManager.getCurrentUser();

        annotationManager.addAnnotation(annot);
        annotationManager.redrawAnnotation(annot);

        debounce = null;
      }, 1000);
    });
  });

Element name: redact

<redact page="0" rect="50,692,100,742" color="#FF0000" flags="print" name="80e33e9b-8ecd-82e7-e4dc-a67ac0281877" subject="Redact" date="D:20220727150859-07'00'" interior-color="#000000" width="1.5" creationdate="D:20220727150859-07'00'">
  <trn-custom-data bytes="{"trn-annot-no-move":"false"}"/>
  <defaultappearance>1 0 0 RG /Helvetica 18 Tf</defaultappearance>
</redact>

If the redaction is rectangular, only the first quad will be used.

Gets or sets whether the redaction will be treated as a text redaction or rectangular area redaction. If this is not provided, then the annotation will try to make an assumption based on the number of quads provided.

For the full list of properties, please visit the annotation's API docs.

Text to show after redaction has been applied. You can see a preview when hovering over the annotation.

Gets or sets the size of the overlay text. It accepts a string and defaults to 18pt.

This affects the redaction text.

The color of the redaction overlay text. The default is red.

Gets or sets the color shown when mouse is not hovering over the annotation.

Gets or sets whether the cursor is hovering over the annotation.

Although it is possible to get the quads using the Quads property, there is also a getQuads method on the annotation to get its quads.

console.log(redaction.getQuads());
[
   { // First quad of the first line
      "x1":58.24,
      "y1":98.97,
      "x2":265.13,
      "y2":98.97,
      "x3":265.13,
      "y3":87.47,
      "x4":58.25,
      "y4":87.47
   },
   ... // Second quad of the second line and so on
]

Using the setQuads API can be used to set the quads for the annotation as well.

WebViewer(...)
  .then(instance => {
    const { annotationManager, Annotations } = instance.Core;

    annotationManager.addEventListener('annotationChanged', (annotations, action) => {
      if (annotations.length > 0 && action === 'add') {
        annotations.forEach(annot => {
          if (annot instanceof Annotations.RedactionAnnotation) {
            const quads = annot.getQuads();
            quads.forEach(quad => {
              quad.x1 = Math.round(quad.x1 * 100) / 100;
              quad.y1 = Math.round(quad.y1 * 100) / 100;
            });
            annot.setQuads(quads);
          }
        });
      }
    });
  });

Applying redactions are not done through the annotation but through the applyRedactions API on the AnnotationManager. You can provide a subset of redactions to apply to avoid redacting all redactions before they are ready.