Add custom keyboard shortcuts

Q: How can I implement my own keyboard shortcuts?

You can implement your own custom keyboard shortcuts by adding a keydown event listener in the capture phase to the PSPDFKit instance.

Here is an example for implementing a custom Ctrl/⌘ + H keyboard shortcut to set the current interaction mode to PSPDFKit.InteractionMode.INK.

PSPDFKit.load(configuration).then(instance => {
  const isIE11 = navigator.userAgent.indexOf("Trident/") > -1;
  instance.contentDocument.addEventListener(
    "keydown",
    keyDownHandler,
    isIE11
      ? {
          capture: true
        }
      : true
  );
  document.addEventListener(
    "keydown",
    keyDownHandler,
    isIE11
      ? {
          capture: true
        }
      : true
  );

  function keyDownHandler(event) {
    // As an example: Ctrl/⌘ + H to set INK interaction mode
    // Watch for `metaKey` too (⌘ in Mac)
    if ((event.ctrlKey || event.metaKey) && event.keyCode === 72) {
      instance.setViewState(v => v.set("interactionMode", PSPDFKit.InteractionMode.INK));
    }
  }
});

This has been tested with PSPDFKit for Web 2021.2.0.