[Feature] Add keyboard shortcuts for next _slide_ / previous _slide_

[mathieucaroff]

The current shortcuts (left) and (right) only switch to the next or previous Step, which can be e.g. a text fading in.

Description

When there are a lot of steps in slides, navigating the deck can be quite slow.

Proposal

Add a pair of keyboard shortcuts for switching to the next or previous slide. I would suggest to pick one among:

• A1. Arrow Up (back) and Arrow Down (next)
• A2. PageUp (back) and PageDown (next)

Links / References

• https://formidable.com/open-source/spectacle/docs/presenting-controls

Further ideas

• B. While we are at it, we might want to add shortcuts to go to the first or last slide of the deck. I would suggest to use the keys "Home" and "End".
• C. Further, I find the navigation dots are quite small. I believe it would make navigation easier if all of the navigation bar was clickable, and not just each small dot: Each click would be mapped to the closest dot.

[oliviertassinari]

Agree, see https://github.com/slidevjs/slidev/issues/126 for why.

[oliviertassinari]

The workaround I used:

diff --git a/src/App.tsx b/src/App.tsx
index 6c61dcf..781508c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { styled, css } from '@pigment-css/react';
 import { Template } from './Template';
 import { Backdrop } from './Backdrop';
@@ -14,7 +15,10 @@ import {
   Notes,
   UnorderedList,
   ListItem,
+  DeckContext,
+  useMousetrap,
 } from 'spectacle';
 import { rawTheme } from '../rawTheme';

 // Slides
@@ -77,9 +81,24 @@ const transition = {
   },
 };

+function KeyboardShortcut() {
+  const deckContext = React.useContext(DeckContext);
+
+  useMousetrap(
+    {
+      pageup: deckContext.stepBackward,
+      pagedown: deckContext.stepForward,
+    },
+    [],
+  );
+
+  return null;
+}
+
 export default function Presentation() {
   return (
     <Deck theme={spectacleTheme} transition={transition} template={<Template />}>
+      <KeyboardShortcut />
       <Slide>
         <Slide1 />
         <Notes>
@@ -604,7 +623,7 @@ https://github.com/styled-components/styled-components/issues/4025
           8m45s
         </Notes>
       </Slide>