Add custom keyboard shortcuts

You can implement your own custom keyboard shortcuts by adding a keydown event listener in the capture phase to the Nutrient 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)
      );
    }
  }
});

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 Nutrient Web SDK 2021.2.0.