Extracting text and cursor position in annotations

It’s possible to extract text from annotations and forms while it’s being written and retrieve the current cursor position in the text. To accomplish this, retrieve div[contenteditable] for text annotations, as shown in the following example:

NutrientViewer.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 code above 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.