Persist the Currently Edited Note Annotation Text

When the text of a note annotation is modified, the modification isn’t applied to the note until the note is closed. This complies with the expected behavior of note annotations, which work like a draft notepad, where changes aren’t committed until we close the notepad.

However, there may be scenarios where the desired outcome is that the text is automatically saved to the note on each keystroke — for example, when you cannot ensure that the note annotation component will receive the signal to update the annotation in the global state.

You can achieve this by listening to the native keyup event:

PSPDFKit.load(defaultConfiguration).then((instance) => {
  instance.contentDocument.addEventListener(
    "keyup",
    function (event) {
      if (
        event.target === instance.contentDocument.activeElement &&
        event.target.closest(".PSPDFKit-Note-Annotation-Content")
      ) {
        instance.update(instance.getSelectedAnnotation());
      }
    },
    { capture: true }
  );

  // Verify that the annotations are saved when expected.
  instance.addEventListener("annotations.didSave", () => {
    console.log("saved");
  });
});