Repository: FormidableLabs/spectacle
Pull request #566 (2018-08-12 12:05:04)

Keyboard events refinements
Added react-live pseudo textarea awareness, `keyboard` prop in Deck for additional control over keyboard events.


Patch:
diff --git a/README.md b/README.md
index d6e69c9..84b4bfc 100644
--- a/README.md
+++ b/README.md
@@ -405,18 +405,19 @@ In Spectacle, presentations are composed of a set of base tags. We can separate
 
 The Deck tag is the root level tag for your presentation. It supports the following props:
 
-| Name               | PropType          | Description                                                                                                                                                                   |
-| ------------------ | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| controls           | PropTypes.bool    | Show control arrows when not in fullscreen                                                                                                                                    |
-| contentHeight      | PropTypes.numbers | Baseline content area height (default: 700)                                                                                                                                   |
-| contentWidth       | PropTypes.numbers | Baseline content area width (default: 1000)                                                                                                                                   |
-| history            | PropTypes.object  | Accepts custom configuration for [history](https://github.com/ReactTraining/history)                                                                                          |
-| progress           | PropTypes.string  | Accepts `pacman`, `bar`, `number` or `none`. To override the color, change the 'quaternary' color in the theme.                                                               |
-| theme              | PropTypes.object  | Accepts a theme object for styling your presentation                                                                                                                          |
-| transition         | PropTypes.array   | Accepts `slide`, `zoom`, `fade` or `spin`, and can be combined. Sets global slide transitions. **Note: If you use the 'scale' transition, fitted text won't work in Safari.** |
-| transitionDuration | PropTypes.number  | Accepts integer value in milliseconds for global transition duration.                                                                                                         |
-| autoplay           | PropTypes.bool    | Automatically advance slides.                                                                                                                                                 |
-| autoplayDuration   | PropTypes.number  | Accepts integer value in milliseconds for global autoplay duration, defaults to 7000.                                                                                         |
+| Name                    | PropType          | Description                                                                                                                                                                   |
+| ----------------------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| controls                | PropTypes.bool    | Show control arrows when not in fullscreen                                                                                                                                    |
+| contentHeight           | PropTypes.numbers | Baseline content area height (default: 700)                                                                                                                                   |
+| contentWidth            | PropTypes.numbers | Baseline content area width (default: 1000)                                                                                                                                   |
+| disableKeyboardControls | PropTypes.bool    | Toggle keyboard control (default: false)                                                                                                                                      |
+| history                 | PropTypes.object  | Accepts custom configuration for [history](https://github.com/ReactTraining/history)                                                                                          |
+| progress                | PropTypes.string  | Accepts `pacman`, `bar`, `number` or `none`. To override the color, change the 'quaternary' color in the theme.                                                               |
+| theme                   | PropTypes.object  | Accepts a theme object for styling your presentation                                                                                                                          |
+| transition              | PropTypes.array   | Accepts `slide`, `zoom`, `fade` or `spin`, and can be combined. Sets global slide transitions. **Note: If you use the 'scale' transition, fitted text won't work in Safari.** |
+| transitionDuration      | PropTypes.number  | Accepts integer value in milliseconds for global transition duration.                                                                                                         |
+| autoplay                | PropTypes.bool    | Automatically advance slides.                                                                                                                                                 |
+| autoplayDuration        | PropTypes.number  | Accepts integer value in milliseconds for global autoplay duration, defaults to 7000.                                                                                         |
 
 <a name="slide-base"></a>
 
diff --git a/src/components/manager.js b/src/components/manager.js
index c5b065c..d71f4c6 100644
--- a/src/components/manager.js
+++ b/src/components/manager.js
@@ -72,6 +72,7 @@ export class Manager extends Component {
     contentHeight: PropTypes.number,
     contentWidth: PropTypes.number,
     controls: PropTypes.bool,
+    disableKeyboardControls: PropTypes.bool,
     dispatch: PropTypes.func,
     fragment: PropTypes.object,
     globalStyles: PropTypes.bool,
@@ -103,6 +104,7 @@ export class Manager extends Component {
     autoplayDuration: 7000,
     contentWidth: 1000,
     contentHeight: 700,
+    disableKeyboardControls: false,
     transition: [],
     transitionDuration: 500,
     progress: 'pacman',
@@ -275,7 +277,9 @@ export class Manager extends Component {
 
     if (
       event.target instanceof HTMLInputElement ||
-      event.target.type === 'textarea'
+      event.target.type === 'textarea' ||
+      event.target.contentEditable === 'true' ||
+      this.props.disableKeyboardControls
     ) {
       return;
     }


Test patch:
diff --git a/src/components/__snapshots__/manager.test.js.snap b/src/components/__snapshots__/manager.test.js.snap
index de7bfac..2884b20 100644
--- a/src/components/__snapshots__/manager.test.js.snap
+++ b/src/components/__snapshots__/manager.test.js.snap
@@ -16,6 +16,7 @@ exports[`<Manager /> should render correctly. 1`] = `
     contentHeight={700}
     contentWidth={1000}
     controls={true}
+    disableKeyboardControls={false}
     dispatch={[Function]}
     fragment={
       Object {
@@ -395,6 +396,7 @@ exports[`<Manager /> should render the export configuration when specified. 1`]
     contentHeight={700}
     contentWidth={1000}
     controls={true}
+    disableKeyboardControls={false}
     dispatch={[Function]}
     fragment={
       Object {
@@ -527,6 +529,7 @@ exports[`<Manager /> should render the overview configuration when specified. 1`
     contentHeight={700}
     contentWidth={1000}
     controls={true}
+    disableKeyboardControls={false}
     dispatch={[Function]}
     fragment={
       Object {
@@ -727,6 +730,7 @@ exports[`<Manager /> should render with slideset slides 1`] = `
     contentHeight={700}
     contentWidth={1000}
     controls={true}
+    disableKeyboardControls={false}
     dispatch={[Function]}
     fragment={
       Object {