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));
    }
  }
});
Warning

Internet Explorer 11 is no longer supported in our Web SDK as of version 2022.5. Edge 18 is no longer supported in our Web SDK as of version 2023.2.

This has been tested with PSPDFKit for Web 2021.2.0.