Add Custom 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’s an example for implementing a custom Control-H / ⌘-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, use Control-H or ⌘-H to set the `INK` interaction mode.
    // Watch for `metaKey` too (⌘ on 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.