Guides

Predefined Annotations

The predefined annotation feature allows you to set default annotation properties that will be automatically applied when creating new annotations. You can configure predefined annotation properties using CPDFConfiguration or CPDFReaderView.

The following examples demonstrate how to set predefined annotation properties:

Setting Predefined Annotation Properties via CPDFConfiguration

<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  configuration={ComPDFKit.getDefaultConfig({
    modeConfig: {
      initialViewMode: CPDFViewMode.ANNOTATIONS,
      uiVisibilityMode: "automatic",
    },
    toolbarConfig: {
      annotationToolbarVisible: true,
    },
    annotationsConfig: {
      initAttribute: {
        note: {
          type: "note",
          color: "#FF0000",
          alpha: 255
        },
        highlight: {
          type: "highlight",
          color: "#FFFF00",
          alpha: 128
        },
        freeText: {
          type: "freetext",
          fontSize: 18,
          familyName: "Times",
          styleName: "Bold",
        },
      },
    },
  })}
  />

For more predefinable properties of annotations, please refer to the definition of initAttribute.

Setting Predefined Annotation Properties via CPDFReaderView

// Get currently defined default annotation properties
const annotationsAttr = await pdfReaderRef.current?.fetchDefaultAnnotationStyle();

// Modify default properties
// Modify note annotation properties
const noteAttr: CPDFTextAttr = {
  type: "note",
  color: "#FF0000",
  alpha: 100,
};
await pdfReaderRef.current?.updateDefaultAnnotationStyle(noteAttr);

// Modify ink annotation properties
const inkAttr: CPDFInkAttr = {
  type: "ink",
  color: "#800080",
  alpha: 255,
  borderWidth: 5,
};
await pdfReaderRef.current?.updateDefaultAnnotationStyle(inkAttr);

Additionally, you can modify default annotation properties through the properties panel popup:

await pdfReaderRef.current?.showDefaultAnnotationPropertiesView(CPDFAnnotationType.highlight);