Customize PDF annotation permissions using JavaScript

1
import PSPDFKit from "@nutrient-sdk/viewer";
2

3
export function load(defaultConfiguration) {
4
  // Keep track of the current instance so that we
5
  // can use it inside of a toolbar item onPress callback.
6
  let instance = null;
7

8
  // Only allow annotations that got created by Current User
9
  const isEditableAnnotation = (annotation) => {
10
    return annotation.creatorName === "Current User";
11
  };
12

13
  // Only allow the following Annotation Types
14
  const editableAnnotationTypes = [PSPDFKit.Annotations.TextAnnotation];
15

16
  const createTogglePermissionsToolbarItem = (currentPermissionMode) => {
17
    return {
18
      type: "custom",
19
      title:
20
        currentPermissionMode === "editableAnnotationTypes"
21
          ? "Text Annotations Editable"
22
          : "Annotations By Current User Editable",
23
      onPress: () => {
24
        if (currentPermissionMode === "editableAnnotationTypes") {
25
          currentPermissionMode = "isEditableAnnotation";
26
          instance.setIsEditableAnnotation(isEditableAnnotation);
27
        } else {
28
          currentPermissionMode = "editableAnnotationTypes";
29
          instance.setEditableAnnotationTypes(editableAnnotationTypes);
30
        }
31

32
        let toolbarItems = PSPDFKit.defaultToolbarItems;
33

34
        toolbarItems.push(
35
          createTogglePermissionsToolbarItem(currentPermissionMode)
36
        );
37
        instance.setToolbarItems(toolbarItems);
38
      },
39
    };
40
  };
41

42
  const toolsToFilter = ["search", "export-pdf", "document-editor", "print"];
43

44
  let toolbarItems = PSPDFKit.defaultToolbarItems.filter(
45
    (tool) =>
46
      !toolsToFilter.includes(tool.type) && !tool.type.includes("sidebar-")
47
  );
48

49
  toolbarItems.push(createTogglePermissionsToolbarItem("isEditableAnnotation"));
50

51
  const config = {
52
    ...defaultConfiguration,
53
    isEditableAnnotation,
54
    toolbarItems,
55
  };
56

57
  return PSPDFKit.load(config).then(async (_instance) => {
58
    instance = _instance;
59
    console.log("Nutrient Web SDK successfully loaded!!", instance);
60

61
    const annotationsOnFirstPage = await instance.getAnnotations(0);
62

63
    // Add two text annotations, one that was created by the current user, the other one
64
    // got created by another user.
65
    if (annotationsOnFirstPage.size <= 1) {
66
      await instance.create(
67
        new PSPDFKit.Annotations.TextAnnotation({
68
          pageIndex: 0,
69
          boundingBox: new PSPDFKit.Geometry.Rect({
70
            width: 150,
71
            height: 150,
72
            top: 350,
73
            left: 350,
74
          }),
75
          text: "Annotation created by current user",
76
          font: "Helvetica",
77
          isBold: true,
78
          horizontalAlign: "center",
79
          verticalAlign: "center",
80
          backgroundColor: PSPDFKit.Color.BLUE,
81
          fontColor: PSPDFKit.Color.WHITE,
82
          creatorName: "Current User",
83
        })
84
      );
85

86
      await instance.create(
87
        new PSPDFKit.Annotations.TextAnnotation({
88
          pageIndex: 0,
89
          boundingBox: new PSPDFKit.Geometry.Rect({
90
            width: 150,
91
            height: 150,
92
            top: 550,
93
            left: 350,
94
          }),
95
          text: "Annotation from another user",
96
          font: "Helvetica",
97
          isBold: true,
98
          horizontalAlign: "center",
99
          verticalAlign: "center",
100
          backgroundColor: PSPDFKit.Color.BLACK,
101
          fontColor: PSPDFKit.Color.WHITE,
102
          creatorName: "Other User",
103
        })
104
      );
105
    }
106

107
    // Set the author of every new annotation to "Current User" so it's editable
108
    instance.setAnnotationCreatorName("Current User");
109

110
    return instance;
111
  });
112
}