Extract text from annotations and retrieve the current cursor position in the text

Q: Is it possible to extract the text from annotations and forms while it’s being written and retrieve the current cursor position in the text?

A: Retrieve the div[contenteditable] for text annotations like what’s shown in this example:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
PSPDFKit.load({
  container: "#container",

  document: "./assets/example.pdf",

  licenseKey: ""
}).then(async instance => {
  instance.contentDocument.addEventListener(
    "keydown",
    function(event) {
      if (
        event.target === instance.contentDocument.activeElement &&
        event.target.closest("[contenteditable]")
      ) {
        const element = event.target;
        setTimeout(() => (element.innerText = "x" + element.innerText));
      }
    },
    { capture: true }
  );
});

Then implement a custom selectionStart and selectionEnd.

The above code includes a highly simplified case where an x character is being prepended on each keystroke, but with some DOM manipulation, you’ll be able to get it work on other positions of the cursor.