Replace react-hotkeys with own key listeners.

lib/components/package.json

@@ -52,7 +52,6 @@
     "overlayscrollbars": "^1.13.1",
     "polished": "^3.6.7",
     "react-color": "^2.19.3",
-    "react-hotkeys": "^0.10.0",
     "react-popper-tooltip": "^3.1.1",
     "react-syntax-highlighter": "^13.5.3",
     "react-textarea-autosize": "^8.3.0",

lib/components/src/controls/react-editable-json-tree/components/JsonAddValue.js

@@ -8,7 +8,6 @@
 /* ************************************* */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { HotKeys } from 'react-hotkeys';
 import inputUsageTypes from '../types/inputUsageTypes';
 
 /* ************************************* */
@@ -47,6 +46,7 @@ class JsonAddValue extends Component {
     // Bind
     this.refInputValue = this.refInputValue.bind(this);
     this.refInputKey = this.refInputKey.bind(this);
+    this.onKeydown = this.onKeydown.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
   }
 
@@ -61,6 +61,24 @@ class JsonAddValue extends Component {
     if (onlyValue && inputRefValue && typeof inputRefValue.focus === 'function') {
       inputRefValue.focus();
     }
+
+    document.addEventListener('keydown', this.onKeydown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onKeydown);
+  }
+
+  onKeydown(event) {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.repeat) return;
+    if (event.code === 'Enter' || event.key === 'Enter') {
+      event.preventDefault();
+      this.onSubmit();
+    }
+    if (event.code === 'Escape' || event.key === 'Escape') {
+      event.preventDefault();
+      this.props.handleCancel();
+    }
   }
 
   onSubmit() {
@@ -122,17 +140,12 @@ class JsonAddValue extends Component {
       separatorElement = ':';
     }
 
-    const handlers = {
-      esc: handleCancel,
-      enter: this.onSubmit,
-    };
-
     return (
-      <HotKeys className="rejt-add-value-node" component={'span'} handlers={handlers}>
+      <span className="rejt-add-value-node">
         {inputElementKeyLayout} {separatorElement} {inputElementValueLayout}{' '}
         {cancelButtonElementLayout}
         {addButtonElementLayout}
-      </HotKeys>
+      </span>
     );
   }
 }

lib/components/src/controls/react-editable-json-tree/components/JsonFunctionValue.js

@@ -8,7 +8,6 @@
 /* ************************************* */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { HotKeys } from 'react-hotkeys';
 import { isComponentWillChange } from '../utils/objectTypes';
 import inputUsageTypes from '../types/inputUsageTypes';
 
@@ -65,6 +64,7 @@ class JsonFunctionValue extends Component {
     this.refInput = this.refInput.bind(this);
     this.handleCancelEdit = this.handleCancelEdit.bind(this);
     this.handleEdit = this.handleEdit.bind(this);
+    this.onKeydown = this.onKeydown.bind(this);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -83,9 +83,30 @@ class JsonFunctionValue extends Component {
     }
   }
 
+  componentDidMount() {
+    document.addEventListener('keydown', this.onKeydown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onKeydown);
+  }
+
+  onKeydown(event) {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.repeat) return;
+    if (event.code === 'Enter' || event.key === 'Enter') {
+      event.preventDefault();
+      this.handleEdit();
+    }
+    if (event.code === 'Escape' || event.key === 'Escape') {
+      event.preventDefault();
+      this.handleCancelEdit();
+    }
+  }
+
   handleEdit() {
     const { handleUpdateValue, originalValue, logger, onSubmitValueParser, keyPath } = this.props;
     const { inputRef, name, deep } = this.state;
+    if (!inputRef) return;
 
     const newValue = onSubmitValueParser(true, keyPath, deep, name, inputRef.value);
 
@@ -189,24 +210,14 @@ class JsonFunctionValue extends Component {
       minusElement = resultOnlyResult ? null : minusMenuLayout;
     }
 
-    const handlers = {
-      esc: this.handleCancelEdit,
-      enter: this.handleEdit,
-    };
-
     return (
-      <HotKeys
-        component={'li'}
-        className="rejt-function-value-node"
-        style={style.li}
-        handlers={handlers}
-      >
+      <li className="rejt-function-value-node" style={style.li}>
         <span className="rejt-name" style={style.name}>
           {name} :{' '}
         </span>
         {result}
         {minusElement}
-      </HotKeys>
+      </li>
     );
   }
 }

lib/components/src/controls/react-editable-json-tree/components/JsonValue.js

@@ -8,7 +8,6 @@
 /* ************************************* */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { HotKeys } from 'react-hotkeys';
 import { isComponentWillChange } from '../utils/objectTypes';
 import inputUsageTypes from '../types/inputUsageTypes';
 
@@ -65,6 +64,7 @@ class JsonValue extends Component {
     this.refInput = this.refInput.bind(this);
     this.handleCancelEdit = this.handleCancelEdit.bind(this);
     this.handleEdit = this.handleEdit.bind(this);
+    this.onKeydown = this.onKeydown.bind(this);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -83,9 +83,30 @@ class JsonValue extends Component {
     }
   }
 
+  componentDidMount() {
+    document.addEventListener('keydown', this.onKeydown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onKeydown);
+  }
+
+  onKeydown(event) {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.repeat) return;
+    if (event.code === 'Enter' || event.key === 'Enter') {
+      event.preventDefault();
+      this.handleEdit();
+    }
+    if (event.code === 'Escape' || event.key === 'Escape') {
+      event.preventDefault();
+      this.handleCancelEdit();
+    }
+  }
+
   handleEdit() {
     const { handleUpdateValue, originalValue, logger, onSubmitValueParser, keyPath } = this.props;
     const { inputRef, name, deep } = this.state;
+    if (!inputRef) return;
 
     const newValue = onSubmitValueParser(true, keyPath, deep, name, inputRef.value);
 
@@ -189,19 +210,14 @@ class JsonValue extends Component {
       minusElement = readOnlyResult ? null : minusMenuLayout;
     }
 
-    const handlers = {
-      esc: this.handleCancelEdit,
-      enter: this.handleEdit,
-    };
-
     return (
-      <HotKeys className="rejt-value-node" component={'li'} style={style.li} handlers={handlers}>
+      <li className="rejt-value-node" style={style.li}>
         <span className="rejt-name" style={style.name}>
           {name} :{' '}
         </span>
         {result}
         {minusElement}
-      </HotKeys>
+      </li>
     );
   }
 }

yarn.lock

@@ -11702,7 +11702,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-create-react-class@^15.5.2, create-react-class@^15.6.0:
+create-react-class@^15.6.0:
   version "15.7.0"
   resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.7.0.tgz#7499d7ca2e69bb51d13faf59bd04f0c65a1d6c1e"
   integrity sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==
@@ -21982,11 +21982,6 @@ lodash@4.17.20, "lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.0.1, lodash@^4.15.0,
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
-lodash@^4.13.1:
-  version "4.17.21"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
-
 log-symbols@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
@@ -23218,11 +23213,6 @@ mount-point@^3.0.0:
     pify "^2.3.0"
     pinkie-promise "^2.0.1"
 
-mousetrap@^1.5.2:
-  version "1.6.5"
-  resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.5.tgz#8a766d8c272b08393d5f56074e0b5ec183485bf9"
-  integrity sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA==
-
 mout@^1.0.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/mout/-/mout-1.2.2.tgz#c9b718a499806a0632cede178e80f436259e777d"
@@ -27422,16 +27412,6 @@ react-helmet-async@^1.0.7:
     react-fast-compare "^3.2.0"
     shallowequal "^1.1.0"
 
-react-hotkeys@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/react-hotkeys/-/react-hotkeys-0.10.0.tgz#d1e78bd63f16d6db58d550d33c8eb071f35d94fb"
-  integrity sha1-0eeL1j8W1ttY1VDTPI6wcfNdlPs=
-  dependencies:
-    create-react-class "^15.5.2"
-    lodash "^4.13.1"
-    mousetrap "^1.5.2"
-    prop-types "^15.5.8"
-
 react-input-autosize@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85"